Building an iOS app in React Native

Interface layout

Animations

http://share.framerjs.com/0u8wvwaylxm0/
Animated.timing(this.state.bgScale,
{
toValue: 25,
duration: 400,
easing: Easing.inOut(Easing.cubic)
}
).start();

Navigation

Debugging and other stories

  • you can use the Chrome dev tools to debug your JS code, which is great, but the React Dev Tools extension doesn’t work at the moment even if the documentation still says otherwise.
  • the best workaround for the problem above is to use Nuclide (based on the Atom text editor) which has React Dev Tools baked in.
  • the “offline bundle” mode, where you prepackage your Javascript in order to run you app without having the development server running, does not work in the iOS simulator, only on the real device. This is nowhere to be found on the docs and made me pull my hair out for a while.
  • the section in the docs about performance is a must-read to understand the model of main thread vs. Javascript thread and how they play together. It also has good advice on how to optimize the rendering of the ListView component, which can be slow some times.

Conclusion

--

--

--

Partner @ North (thenorthstudio.com)

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Victor Delgado

Victor Delgado

Partner @ North (thenorthstudio.com)

More from Medium

Deploy a React Native App to the Apple Play Store

Mobile App Development in 2022: Is React Native Beneficial?

Build a Chat App with Firebase and React Native

Fastlane with React Native — Part-1