In the TodoApp component, we'll add a text input that allows the user to enter new todo items. When they're done entering the todo, Relay will need to send a mutation to the backend GraphQL server. Here's what the component code looks like:

import React, { Component, PropTypes } from 'react'; 
import { 
  View, 
  TextInput, 
} from 'react-native'; 
import Relay from 'react-relay'; 
 
import styles from './styles'; 
import AddTodoMutation from './mutations/AddTodoMutation'; 
import TodoList from './TodoList'; 
 
export class TodoRelayMobile extends Component { 
  static propTypes = { 
    viewer: PropTypes.any.isRequired, 
    relay: PropTypes.shape({ 
      commitUpdate: PropTypes.func.isRequired, 
    }), 
  } 
 
  // We need to keep track of new todo item text 
  // as the user enters them. 
  state = { 
    text: '', 
  } 
 
  // When the user creates the todo by pressing enter, 
  // the "AddTodoMutation" is sent to the backend, 
  // with the new "text" and the "viewer" as the 
  // arguments. 
  onSubmitEditing = ({ nativeEvent: { text } }) => { 
    this.props.relay.commitUpdate( 
      new AddTodoMutation({ 
        text, 
        viewer: this.props.viewer, 
      }) 
    ); 
 
    this.setState({ text: '' }); 
  } 
 
  onChangeText = text => this.setState({ text }) 
 
  render() { 
    return ( 
      <View style={styles.container}> 
        <TextInput 
          style={styles.textInput} 
          placeholder="What needs to be done?" 
          onSubmitEditing={this.onSubmitEditing} 
          onChangeText={this.onChangeText} 
          value={this.state.text} 
        /> 
        <TodoList viewer={this.props.viewer} /> 
      </View> 
    ); 
  } 
} 

It doesn't look all that different from your typical React Native component. The piece that stands out is the mutation—AddTodoMutation. This is how we tell the GraphQL backend that we want a new todo node created. At this point, the TodoApp component is still just a plain React component. This is how we create a Relay container and export it from the module:

// Turns the "TodoApp" component into a Relay 
// container component. This is where the data 
// dependency for "TodoApp" is declared. We tell 
// the "queries" value that was passed to "RootContainer" 
// that we want a fragment of fields from the "User" type. 
export default Relay.createContainer(TodoRelayMobile, { 
  fragments: { 
    viewer: variables => Relay.QL` 
      fragment on User { 
        totalCount, 
        ${AddTodoMutation.getFragment('viewer')}, 
        ${TodoList.getFragment('viewer', ...variables)}, 
      } 
    `, 
  }, 
}); 

This is how we tell Relay about its data dependencies, including the AddTodoMutation that we might send if the user decides to add a new todo. The other thing to notice about this fragment is that it's passing the viewer fragment from TodoList. That's because even though TodoApp doesn't directly use the data that TodoList needs, it still needs to tell Relay about it so that when the TodoList component is rendered, it can get what it needs from it's parent. Let's see what the application looks like so far:

The textbox for adding new todo items is just above the list of todo items. Now, we'll look at the TodoList component, which is responsible for rendering the todo item list.