Let's start by going over the list of RN components and APIs you may want to use, and afterward, we'll move to some actual code:
| RN Component | Replaces... | Objective |
| ActivityIndicator | animated GIF | A component to display a circular loading indicator |
| Button | button | A component to handle touches (clicks) |
| DatePickerAndroid TimePickerAndroid |
input type="date" input type="time" |
An API that shows a popup where you can enter a date and a time; for Android |
| DatePickerIOS |
input type="date" |
A component where the user can enter a date and time; for iOS |
| FlatList | - | A list component that only renders elements that are visible; used for performance gains |
| Image | img | A component to display an image |
| Picker | select | A component to pick a value from a list |
| Picker.Item | option | A component to define values for the list |
| ProgressBarAndroid | - | A component to show activity; for Android only |
| ProgressViewIOS | - | A component to show activity; for iOS only |
| ScrollView | - | Scrolling container that may contain multiple components and views |
| SectionList | - | Similar to FlatList, but allows for sectioned lists |
| Slider | input type="number" | A component to select a value from a range of values |
| StatusBar | - | A component to manage the app status bar |
| StyleSheet | CSS | Apply styling to your app |
| Switch | input type="checkbox" | A component to accept a Boolean value |
| Text | - | A component to display text |
| TextInput | input type="text" | A component to enter text using the keyboard |
| TouchableHighlight TouchableOpacity |
- | Wrapper to make views respond to touches |
| View | div | A basic structural feature for your app |
| VirtualizedList | - | An even more flexible version of FlatList |
| WebView | iframe | A component to render web content |
There are also many APIs that you may be interested in; some of them are as follows:
| API | Description |
| Alert | Displays an alert dialog with the given title and text |
| Animated | Simplifies creating animations |
| AsyncStorage | An alternative to LocalStorage |
| Clipboard | Provides access for getting and setting clipboard content |
| Dimensions | Provides access to the device dimensions and orientation changes |
| Geolocation | Provides access to geolocation; available only for ejected projects |
| Keyboard | Allows control of keyboard events |
| Modal | Displays content above a view |
| PixelRatio | Provides access to the device pixel density |
| Vibration | Allows control of device vibration |
Now, let's revisit an example we wrote for React in Chapter 6, Developing with React, the countries and regions page, which will also let us use Redux and async calls, as in Chapter 8, Expanding Your Application. Since we are using PropTypes, we'll need that package. Install it with the following command:
npm install prop-types --save
Then, we'll have to reinstall some packages, starting with Redux and relatives. Actually, CRAN already includes redux and react-redux, so we don't need those, but redux-thunk isn't included. If you had created the project in a different fashion, without using CRAN, you would have needed to install all three packages manually. In both cases, the following command would do, because npm won't install an already installed package:
npm install react react-redux redux-thunk --save
We'll also be using axios for async calls, as we did earlier in this book:
npm install axios --save
Our final step will be to run the server code that we wrote back in Chapter 4, Implementing RESTful Services with Node, so that our app will be able to do async calls. Go to the directory for that chapter, and just enter the following command:
node out/restful_server.js.
Now, we're set! Let's now see how we can modify our code to make it appropriate for RN.