OnyxCounter 🧮

Example application to demonstrate how to use react-native-onyx.

iOS	Android

How to run

iOS 🍎

1. Install dependencies: npm install && cd ios && pod install && cd ..
2. Start the simulator, metro, and boot the app: npm run ios

Android 🤖

1. Install dependencies: npm install
2. Start the emulator, metro, and boot the app: npm run android

Examples

1. Onyx persists data to disk
   • This is made clear by the difference in <StateCounter /> vs <OnyxCounter /> when you kill the app
   • State is only kept in memory, Onyx saves data to the disk (via AsyncStorage)
2. UI binds to data via state/props
   • Onyx has a higher-order component (HOC) named withOnyx that binds the UI to changes in Onyx. When the data changes in Onyx, the component will re-render these changes.
3. When should you use withOnyx HOC or Onyx.connect?
   • React components should use withOnyx()
   • Non-React libraries should use Onyx.connect()
4. Different Onyx methods
   • set() - See clearNumberFacts()
   • merge() - See getAndSaveNumberFact()
   • mergeCollection() - see mergeCatAndDogFacts()