todo-app-example.js

import * as React from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import { Constants } from 'expo';
import { createBottomTabNavigator, createAppContainer, createStackNavigator } from 'react-navigation'


const routes = {
  TodoList: createStackNavigator({
      TodoList: {
        screen: ({ navigation }) => (
          <View style={{ flex: 1 }}>
            {['todo 1', 'todo 2'].map((todo) => (
              <TouchableOpacity
                onPress={() => {
                  navigation.navigate('Todo', { todo })
                }}
              >
                <Text style={{ padding: 50, backgroundColor: 'red' }}>{todo}</Text>
              </TouchableOpacity>
            ))}
          </View>
        ),
      },
      Todo: ({ navigation }) => (
        <View style={styles.container}>
          <Text style={styles.paragraph}>{navigation.getParam('todo')}</Text>
        </View>
      ),
  }),
  Profile: ({ navigation }) => (
    <View style={styles.container}>
      <Text style={styles.paragraph}>profile</Text>
    </View>
  ),
}

const App = createBottomTabNavigator(routes)

export default createAppContainer(App)

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});