The goal in my experiments with React Native is to build an app that feels as native to iOS as possible. Early on I tried to use SF Symbols and couldn’t get it to work, so I dropped in some custom icons instead. But the more I used the new version of Epilogue on my iPhone, the more this compromise bugged me.
I briefly considered exporting the symbols I need as SVGs or PNGs and using them in the app only on iOS, but that’s against Apple’s license. Not worth even the small risk. Sticking to real SF Symbols also ensures the icons match other apps if Apple redesigns them slightly in future versions of iOS.
I revisited using SF Symbols today with the component birkir/react-native-sfsymbols. A default install shows a runtime error when attempting to load a symbol. Luckily there’s a work-around mentioned in one of the issues.
I copied this file from the repo and saved it as SFSymbols.tsx. Then instead of importing from the Node module, I just import that file:
import { SFSymbol } from "./SFSymbols";
It works! Here’s a quick screenshot of my navigation bar now:
