import React from 'react';
    import { StyleSheet, Text, View, AppRegistry } from 'react-native';
    import TodoApp from './src/TodoApp'
    import store from './app/store/index'
    import { Provider } from 'react-redux'
    import {CounterR} from './app/counterR';
    import {Counter} from './app/counter';
    import {createStackNavigator, createAppContainer} from 'react-
    navigation'

    export default class App extends React.Component {
        render() {
        return (
            <Provider store={store}>
              <AppContainer />
            </Provider>
        );
      }
    }

    const stack  = createStackNavigator({
      Home: CounterR,
      Second: Counter
    },{
      initialRouteName: 'Home'
     })

    const AppContainer = createAppContainer(stack)
    const styles = StyleSheet.create({
    container: {
       flex: 1,
       backgroundColor: '#fff',
       alignItems: 'center',
       justifyContent: 'center',
      },
     });

import React, { Component } from 'react';
    import {View,
        TouchableOpacity,
        Text,
        Dimensions,
        StyleSheet,
        TextInput,
        FlatList,
        Keyboard} from 'react-native';
    import {connect} from 'react-redux'
    import { addTodo } from './actions/index'
    import { toggleTodo } from './actions/index'
    import {NavigationAction} from 'react-navigation'
    import store from './store/index'
    import { Provider } from 'react-redux'
    const { width, height } = Dimensions.get("window");

    export class CounterR extends Component{

        state = {
            text: ""
        }

        add = text => {
            Keyboard.dismiss()
            this.props.addTodo(text)
            this.setState({text: ""})
        }

        render(){
            return(
                <View style={styles.container}>
                    <TextInput
                        style={{borderWidth:.5, width: 300, height: 40}}
                        defaultValue={this.state.text}
                        onChangeText={(value) => this.setState({text:value})}/>
                    <TouchableOpacity
                        onPress={() => this.add(this.state.text)}>
                        <Text
                            style={{fontSize: 18}}>ADD TODO</Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        onPress={() => this.props.navigation.navigate('Second')}>
                        <Text
                            style={{fontSize: 18}}>Second Screen</Text>
                    </TouchableOpacity>
                    <FlatList
                        data= {this.props.todos}
                        numColumns={1}
                        keyExtractor= {item => item.id}
                        renderItem ={({ item }) =>
                            <TouchableOpacity
                                onPress={() => this.props.toggleTodo(item)}
                                style={styles.todoText}>
                                <Text style={{textDecorationLine: item.completed ? 'line-through' : 'none', fontSize: 20}}>{item.text}</Text>
                            </TouchableOpacity>
                            }
                        />
                </View>
            )
        }
    }
    const mapStateToProps = state => ({
        todos: state.todos
    })

    const mapDispatchToProps = dispatch => ({
        addTodo: text => dispatch(addTodo(text)),
        toggleTodo: item => dispatch(toggleTodo(item))
    })


    export default connect(mapStateToProps, mapDispatchToProps)(CounterR)




    const styles = StyleSheet.create({
        container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
        },
        welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
        },
        instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
        },
        todoText: {
            width: width,
            margin: 10
        }
    });

import React, { Component } from 'react';
    import {View,
        TouchableOpacity,
        Text,
        Dimensions,
        StyleSheet,
        TextInput,
        FlatList,
        Keyboard} from 'react-native';
    import {connect} from 'react-redux'
    import { addTodo } from './actions/index'
    import { toggleTodo } from './actions/index'
    import { Provider } from 'react-redux'
    import store from './store/index'
    const { width, height } = Dimensions.get("window");

    export class Counter extends Component{

        state = {
            text: "",
        }

        addTodo = text => {

            Keyboard.dismiss()
            this.props.addTodo(text)
            this.setState({text: ""})

        }

        render(){
            return(
                <View style={styles.container}>
                    <TextInput
                        style={{borderWidth:.5, width: 300, height: 40}}
                        defaultValue={this.state.text}
                        onChangeText={(value) => this.setState({text: value})}/>
                    <TouchableOpacity
                        onPress={() => this.addTodo(this.state.text)}>
                        <Text
                        style={{fontSize: 18}}>ADD TODO</Text>
                    </TouchableOpacity>

                </View>
            )
        }
    }

    const mapStateToProps = state => ({
        todos: state.todos
    })

    const mapDispatchToProps = dispatch => ({

        addTodo: text => dispatch(addTodo(text)),
        toggleTodo: item => dispatch(toggleTodo(item))
    })


    export default connect(mapStateToProps, mapDispatchToProps)(Counter)

    const styles = StyleSheet.create({
        container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
        },
        welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
        },
        instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
        },
        todoText: {
            width: width,
            margin: 10
        }
    });

import {Keyboard} from 'react-native'
    import { ADD_TODO, TOGGLE_TODO } from './actionTypes'
    let x = 0
    export const addTodo = (text) => ({
        type: ADD_TODO,
        id: x++,
        text: text
    })
    export const toggleTodo = (item) => ({

        type: TOGGLE_TODO,
        id: item.id
    })

export const ADD_TODO = 'ADD_TODO'
    export const TOGGLE_TODO = 'TOGGLE_TODO'

import { combineReducers } from 'redux'
    import todos from './todos'

    export default combineReducers({
        todos
    })

const todos = (state =[], action) => {
        switch(action.type){
            case 'ADD_TODO':
            return [
                ...state, {
                    id: action.id,
                    text: action.text,
                    completed: false
                }
            ]

            case 'TOGGLE_TODO':
            return state.map(todo =>
                (todo.id === action.id)
                ?
                {...todo, completed: !todo.completed}
                :
                todo)
            default:
                return state
        }
    }
    export default todos

import { createStore } from 'redux'
    import rootReducer from '../reducers'

    export default store = createStore(rootReducer)