Skip to main content

Getting Started

This React Native Knowledge Base has been created during my studies of React Native. I learn the best when I write things down, plus I am always happy to share my humble knowledge with others.

Intro​

React Native is a very popular hybrid framework for building native mobile apps in JavaScript/TypeScript with React, but not React DOM of course (see [1]). So you can use functional React Components, React Hooks, etc. but have to use Components from React Native (e.g. Button, Text, etc.). This means that one usually can reuse > 90% of code across platforms (Android/iOS) and therefore save development time and therefore money. React Native has been developed by Facebook and used to build a part of the Facebook app and many other apps. But be aware that it is still a "young" framework (as of today 2020-11-02 the current version is 0.63) and not as feature rich as e.g. Apache Cordova.

However, comparing it with other hybrid frameworks the main argument for using React Native is probably performance, as React Native code compiles to real native components which means that with this technology we can build native performing cross-platform apps. As there is JavaScript involved its performance is not as good as native apps. It is also possible to use platform-specific (Android, iOS) API as well.

Regarding development, it provides a hot reload mechanism (comparable to Webpack HMR), meaning it reloads the component you have just changed and not the whole app. So development is quite efficient. You can either develop with emulator/simulator or on your real device. So the developer experience (DX) is great!

And the cherry on top is that you can update the app "Over-the-Air" if you did not change your native code, but only JavaScript or TypeScript code. Meaning, you don't have to wait for the user to download a newer version of the app from the App Store, but push the update to the user's device directly. But you should only do that to introduce bug fixes or minor improvements, otherwise you might get in trouble with Apple or Google. When you introduce big changes then you must go through the official approval process (App Store).

Getting Started​

There are the following two ways to create a React Native project:

  • For a quick setup use the expo cli Note, the expo cli replaced create-react-native-app aka CRNA.
  • For an advanced setup with XCode or Android Studio use the react-native cli to create a project. To create a project with TypeScript run: npx react-native init MyApp --template react-native-template-typescript (link).

So which one to choose? Basically the setup with Expo does not require you to have Xcode or Android Studio installed. You also don't need any iOS- or Android-Simulator, just a real smartphone which has the Expo Client running to connect to. Of course you can connect your simulators to expo as well. That sounds pretty good, but the downside is that you cannot use native Java or Objective-C/Swift Code, but you can always eject from Expo to the React Native CLI world (for a comparison please visit this link).

Also, you have to be careful which dependencies you install, because not every version is compatible with expo. Therefore install libraries that depend on React Native always with expo install <package>, e.g. after you have installed React Navigation via npm install @react-navigation/native, you have to install further packages via expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view. For more info on Expo please visit this link.

As React Native is based on React you can use some of the libs you know from React. Additionally you might need to use some of these as well:

Use the RN Directory to find more awesome libs.

Articles​

References​

  1. npm trends