Skip to content

Instantly share code, notes, and snippets.

@dmitryshelomanov

dmitryshelomanov/todo-app-example.js

Created February 4, 2019 21:37
Download ZIP

Revisions

  1. Shelomanov Dmitry created this gist Feb 4, 2019.
    55 changes: 55 additions & 0 deletions todo-app-example.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,55 @@
    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',
    },
    });