React NativeTutorial
Preface #
This tutorial aims to get you up to speed with writing iOS apps using React Native.
We assume you have experience writing websites with React. If not, you can learn about it on the React website.
Setup #
React Native requires OSX, Xcode, Homebrew, node, npm, and watchman. Flow is optional.
After installing these dependencies there are two simple commands to get a React Native project all set up for development.
npm install -g react-native-clireact-native-cli is a command line interface that does the rest of the set up. It’s installable via npm. This will install
react-nativeas a command in your terminal. You only ever need to do this once.react-native init AwesomeProjectThis command fetches the React Native source code and dependencies and then creates a new Xcode project in
AwesomeProject/AwesomeProject.xcodeproj.
Development #
You can now open this new project (AwesomeProject/AwesomeProject.xcodeproj) in Xcode and simply build and run it with cmd+R. Doing so will also start a node server which enables live code reloading. With this you can see your changes by pressing cmd+R in the simulator rather than recompiling in Xcode.
For this tutorial we'll be building a simple version of the Movies app that fetches 25 movies that are in theaters and displays them in a ListView.
Hello World #
react-native init will copy Examples/SampleProject to whatever you named your project, in this case AwesomeProject. This is a simple hello world app. You can edit index.ios.js to make changes to the app and then press cmd+R in the simulator to see the changes.
Mocking data #
Before we write the code to fetch actual Rotten Tomatoes data let's mock some data so we can get our hands dirty with React Native. At Facebook we typically declare constants at the top of JS files, just below the requires, but feel free to add the following constant wherever you like:
Tutorial
Preface #
This tutorial aims to get you up to speed with writing iOS apps using React Native.
We assume you have experience writing websites with React. If not, you can learn about it on the React website.
Setup #
React Native requires OSX, Xcode, Homebrew, node, npm, and watchman. Flow is optional.
After installing these dependencies there are two simple commands to get a React Native project all set up for development.
npm install -g react-native-clireact-native-cli is a command line interface that does the rest of the set up. It’s installable via npm. This will install
react-nativeas a command in your terminal. You only ever need to do this once.react-native init AwesomeProjectThis command fetches the React Native source code and dependencies and then creates a new Xcode project in
AwesomeProject/AwesomeProject.xcodeproj.
Development #
You can now open this new project (AwesomeProject/AwesomeProject.xcodeproj) in Xcode and simply build and run it with cmd+R. Doing so will also start a node server which enables live code reloading. With this you can see your changes by pressing cmd+R in the simulator rather than recompiling in Xcode.
For this tutorial we'll be building a simple version of the Movies app that fetches 25 movies that are in theaters and displays them in a ListView.
Hello World #
react-native init will copy Examples/SampleProject to whatever you named your project, in this case AwesomeProject. This is a simple hello world app. You can edit index.ios.js to make changes to the app and then press cmd+R in the simulator to see the changes.
Mocking data #
Before we write the code to fetch actual Rotten Tomatoes data let's mock some data so we can get our hands dirty with React Native. At Facebook we typically declare constants at the top of JS files, just below the requires, but feel free to add the following constant wherever you like. In index.ios.js:
Render a movie #
We're going to render the title, year, and thumbnail for the movie. Since thumbnail is an Image component in React Native, add Image to the list of React requires below.
Render a movie #
gr +We're going to render the title, year, and thumbnail for the movie. Since thumbnail is an Image component in React Native, add Image to the list of React requires below.
For layout we use FlexBox which has great documentation.
We simply added flexDirection: 'row' which means that children are layed out horizontally instead of vertically.
We use FlexBox for layout - see this great guide to learn more about it.
In the above code snippet, we simply added flexDirection: 'row' that will make children of our main container to be layed out horizontally instead of vertically.
Now add another style to the JS style object:
This means that the rightContainer takes up the remaining space in the parent container that isn't taken up by the Image. If this doesn't make sense, add a backgroundColor to rightContainer and then try removing the flex: 1. You'll see that this causes the container's size to be the minimum size that fits its children.
Styling the text is pretty straightforward:
This means that the rightContainer takes up the remaining space in the parent container that isn't taken up by the Image. If this doesn't make sense, add a backgroundColor to rightContainer and then try removing the flex: 1. You'll see that this causes the container's size to be the minimum size that fits its children.
Styling the text is pretty straightforward:
Add some initial state to our application so that we can check this.state.movies === null to determine whether the movies data has been loaded or not. We can set this data when the response comes back with this.setState({movies: moviesData}). Add this code just above the render function inside our React class.
Add some initial state to our application so that we can check this.state.movies === null to determine whether the movies data has been loaded or not. We can set this data when the response comes back with this.setState({movies: moviesData}). Add this code just above the render function inside our React class.
We want to send off the request after the component has finished loading. componentDidMount is a function on React components that React will call exactly once just after the component has been loaded.
We want to send off the request after the component has finished loading. componentDidMount is a function of React components that React will call exactly once, just after the component has been loaded.
Implement our fetchData function to actually make the request and handle the response. All you need to do is call this.setState({movies: data}) after resolving the promise chain because the way React works is that setState actually triggers a re-render and then the render function will notice that this.state.movies is no longer null. Note that we call done() at the end of the promise chain - always make sure to call done() or any errors thrown will get swallowed.
Now add fetchData function used above to our main component. This method will be respondible for handling data fetching. All you need to do is call this.setState({movies: data}) after resolving the promise chain because the way React works is that setState actually triggers a re-render and then the render function will notice that this.state.movies is no longer null. Note that we call done() at the end of the promise chain - always make sure to call done() or any errors thrown will get swallowed.
ListView #
Let’s now modify this application to render all of this data in a ListView, rather than just the first movie.
Why is a ListView better than just rendering all of these elements or putting them in a ScrollView? Despite React being fast, rendering a possibly infinite list of elements could be slow. ListView schedules rendering of views so that you only display the ones on screen and those already rendered but off screen are removed from the native view hierarchy.
First thing's first, add the ListView require to the top of the file.
ListView #
Let's now modify this application to render all of this data in a ListView component, rather than just rendering the first movie.
Why is a ListView better than just rendering all of these elements or putting them in a ScrollView? Despite React being fast, rendering a possibly infinite list of elements could be slow. ListView schedules rendering of views so that you only display the ones on screen and those already rendered but off screen are removed from the native view hierarchy.
First thing's first: add the ListView require to the top of the file.
What is this dataSource thing and why do we use it? This way we can very cheaply know which rows have changed between updates.
You'll notice we added dataSource from this.state. The next step is to add an empty dataSource to getInitialState. Also, now that we're storing the data in dataSource, we should change this.state.movies to be this.state.loaded (boolean) so we aren't storing the data twice.
The DataSource is an interfacte that ListView is using to determine which rows have changed over the course of updates.
You'll notice we used dataSource from this.state. The next step is to add an empty dataSource to the object returned by getInitialState. Also, now that we're storing the data in dataSource, we should not longer use this.state.movies to avoid storing data twice. We can use boolean property of the state (this.state.loaded) to tell whether data fetching has finished.
And here's the modified this.setState in the response handler in fetchData:
And here is the modified fetchData method that updates the state accordingly:
There's still some work to be done to make it a fully functional app such as adding navigation, search, infinite scroll loading, etc. Check the Movies Example to see it all working.
Final source code #
There's still some work to be done to make it a fully functional app such as: adding navigation, search, infinite scroll loading, etc. Check the Movies Example to see it all working.