Linking TasksList to index

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);