Our iOS app's entry point is index.ios.js
and everything that it renders starts from here. Right now, if you launch iOS Simulator using the react-native run-ios
command, you will see the same Hello World sample application that we were acquainted with in the preface.
What we need to do right now is link the TasksList
component we just built to the index
and remove all the unnecessary JSX automatically generated for us. Let's go ahead and clear nearly everything in the render
method of our Tasks
component, except the top layer View
container. When you're done, it should look like this:
class Tasks extends Component { render () { return ( <View style={styles.container}> </View> ); } }
We'll want to insert TasksList
within that View
container. However, before we do that, we have to give the index
file access to that component. Let's do so using an import
statement:
import TasksList from './app/components/TasksList';
While this import
statement just points to the folder that our TasksList
component is in, React Native intelligently looks for a file named index
and assigns it what we want.
Now that TasksList
is readily available for us to use, let's include it in the render
method for Tasks
:
export default class Tasks extends Component { render () { return ( <View style={styles.container}> <TasksList /> </View> ); } }
If you don't have an iOS Simulator running anymore, let's get it back up and running using the react-native run-ios
command from before. Once things are loaded, this is what you should see:
This is awesome! Once it's loaded, let's open up the iOS Simulator Developer
menu by pressing Command+D on your keyboard and search for an option that will help us save some time during the creation of our app.
At the end of this section, your index.ios.js
file should look like this:
// Tasks/index.ios.js import React, { Component } from 'react'; import { AppRegistry, StyleSheet, View } from 'react-native'; import TasksList from './app/TasksList'; export default class Tasks extends Component { render() { return ( <View style={styles.container}> <TasksList /> </View> ); } }
The following code renders the TasksList
component:
const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', } }); AppRegistry.registerComponent('Tasks', () => Tasks);