React Native allows for cross platform mobile development using a webdev framework we already know--React!
React Native allows you to build UIs independent of the platform. Usually when developing an app you have to develop an Android version (using Java/Kotlin) and iOS version (using Objective-C/Swift) separately. React Native takes care of this conversion for you.
Since React Native is really just React, many of the same concepts (
props, React Hooks, etc) still apply to React. However, instead of HTML we have
Views. A view is the basic building block of UI in mobile development. Views can display images, hold text, handle user input, etc.
Some core React Native components are:
<View>: A container that supports layout with flexbox, style, some touch handling, and accessibility controls. Similar to a non-scrolling
<Text>: Displays, styles, and nests strings of text and even handles touch events. Similar to a
<Image>: Displays images like
<ScrollView>: A generic scrolling container than can hold nested components and views. Similar to a
<TextInput>: User text input field similar to
<input type="text" />.
- ... and you can also define your own custom components (and use those built by the community)!
A popular way to use React Native is through the
Expo framework, which allows developing, building, and iterating on iOS, Android and webapps. Expo provides a UI for you to view your changes and if you download the Expo app (Android, iOS) you can see those changes on your phone as well! After all, we're doing mobile development.
To start a React Native project run the following:
expo init is similar to
create-react-app in that it generates boilerplate code for you.
As part of the demo we built the simple TODO list app from assignment 4 in React Native! The code is here:
yarn start, you should be taken to Expo where you can view your changes on your browser. On the bottom left, there should also be a QR code. If you download the Expo app and scan the QR code with your phone camera (Android, iOS), it should take you to the Expo app where you can see your application in mobile form!
This was a very cursory introduction to React Native. You can learn more by referring to React docs.
React Docs: https://reactnative.dev/docs/getting-started
Expo Docs: https://docs.expo.io/