A simple EditTasks component

In my application folder structure, my EditTasks component is nested as such:

|Tasks 
|__android 
|__app 
|____components 
|______EditTask 
|______TasksList 
|______TasksListCell 
|__ios 
|__node_modules 
|__... 

Here is a basic component just to have something appear on the screen:

// Tasks/app/components/EditTask/index.js 

import React, { Component } from 'react'; 

import { 
  Text, 
  View 
} from 'react-native'; 

import styles from './styles'; 

export default class EditTask extends Component { 
  render () { 
    return ( 
      <View style={ styles.editTaskContainer }> 
        <Text style={ styles.editTaskText }>Editing Task</Text> 
      </View> 
    ); 
  } 
} 

The preceding code returns text to render to the screen for now.

Now comes the fun part. Let's set up NavigatorIOS to play nicely with TasksList:

// Tasks/app/components/EditTask/styles.js 

import { Navigator, StyleSheet } from 'react-native'; 

const styles = StyleSheet.create({ 
  editTaskContainer: { 
    flex: 1, 
    paddingTop: Navigator.NavigationBar.Styles.General.TotalNavHeight 
  }, 
  editTaskText: { 
    fontSize: 36 
  } 
}) 

export default styles; 

 First, we should modify TasksList so that it:

• Adds a function, called _editTask, to push the EditTask component to the Navigator
• Passes the _editTask function into TasksListCell as a prop, titled onLongPress

Then, we should modify EditTask so that the TouchableHighlight component in its render method calls this prop during its own onLongPress callback:

// Tasks/app/components/TasksList/index.js 

... 
import EditTask from '../EditTask'; 
... 
export default class TasksList extends Component { 
  ... 
  render () { 
    ... 
    return ( 
      <View style={ styles.container }> 
        ... 
        <ListView 
          ... 
          automaticallyAdjustContentInsets={ false } 
          style={ styles.listView } 
        /> 
      </View> 
    ); 
  } 

We added a Boolean set to disable the automatic adjustment of content insets. With this defaulting to true, we saw an inset of ~55px between our Input and ListView components. In our styling for both this component and EditTask, we started importing the Navigator component.

This is so that we can set the paddingTop property of our container to take into consideration the height of the navigation bar so that content is not left tucked behind the navigation bar. The reason this happens is because the navigation bar is rendered over our components after they are done loading.

Call the push method of NavigatorIOS, rendering the EditTask component that we just imported:

  ... 
  _editTask (rowData) { 
    this.props.navigator.push({ 
      component: EditTask, 
      title: 'Edit' 
    }); 
  } 

Assign TasksListCell a callback, titled onLongPress, that executes the _editTask method we just defined:

  _renderRowData (rowData, rowID) { 
    return ( 
      <TasksListCell 
        ... 
        onLongPress={ () => this._editTask() } 
      /> 
    ) 
  } 
  ... 
} 

Setting the paddingTop property to the height of the Navigator solves the issue of our navigation bar hiding the content of our app behind it:

// Tasks/app/components/TasksList/styles.js 

import { Navigator, StyleSheet } from 'react-native'; 

const styles = StyleSheet.create({ 
  container: { 
    ... 
    paddingTop: Navigator.NavigationBar.Styles.General.TotalNavHeight 
... 
}); 

export default styles;