react-native-counter-widget
Simple counter app with iOS 14 widget build with React Native and Swift.
My motivation to create this repository is to check how hard it is to add iOS widgets to existing React Native apps.
It turns out that is not that difficult, you just need some knowledge on Native Modules for iOS and Swift programming.
Most important pieces of work
- First we have a NativeModule called Counter that is responsable for keep tracking of the counter value and update the widget at the right time.
- Then we map this NativeModule to a hook called useNativeCounter that pulls the counter value into a React state and adds an event listener
How to create widgets
If you are curious:
- Open the xcworkspace of your React Native project in XCode
- Create some Swift file, XCode will ask you if you want to create the bridging header. Click on "yes".
- Create a new target under "File" > "New" > "Target..." and select "Widget Extension"
- If you try to build your app right now it will fail. Delete every Swift 5.0 reference under
LIBRARY_SEARCH_PATHS
will solve your problem as mentioned here.
- Implement the logic for your widget
Reference