Introduction
Together, we're going to build a very simple app that exposes us to the most basic components of a React Native developer's toolkit. We'll work through some of the steps together and leave some for you to try on your own.
Every step has an accompanying branch in this repo that contains all of the code for the tasks up to (and including) that step. If necessary, you can check out a step's branch to see a potential solution or to skip to a later step.
Setup
Before beginning, please make sure you have your environment set up for React Native development. If you have any trouble, just ask for help.
The complete instructions can be found on React Native’s website: https://facebook.github.io/react-native/docs/getting-started.html#content. Notice that there are separate tabs for iOS and Android. You should set up both of them. The basic idea is as follows:
Install
- Xcode (This takes a long time to download…)
- Android Studio (This also takes quite a while…)
brew install node
brew install watchman
npm install -g react-native-cli
Test
react-native init TestProject
cd TestProject
react-native run-ios
react-native run-android
All works? Great! Now go ahead and clone this repo and navigate to the created directory.
Step 0 - First Steps
- Run the project in both Android and iOS to verify it works
- Make a trivial change to the text in each of the views and see it update
- Notice that these two apps look almost the same? Let's share the code by
extracting it to its own component call
HomeScreen
. We'll put it in a directory calledsrc
. - Get comfortable with the parts of the project - make sure to understand what all the major parts do
- Get comfortable with basic debugging tools - you're going to need them.
Step 1 - Include an Image
- Replace the default text in the app with an image. The image width should be stretched to screen width.
Step 2 - Add multiple to a ScrollView
- Add multiple images in home screen
- Put them in ScrollView for a nice scrolling effect
Step 3 - ListView
- Replace
ScrollView
withListView
.
Step 4 - Navigation
- Add simple navigation to the app. When tapping an image, push an emty screen
Step 5 - Text input
- Add two text inputs on top for the user to type text in the form screen
Step 6 - Build memes!
- Pass selected image data to FormScreen
- Overimpose typed text on image
Step 7 - Platform specific and native code
- Add a button 'take photo' to home screen
- Integrate your app with react-native-camera and push camera screen on button press. (Don't forget to give the app camera permissions first)