[react:ios]
import React, { Component, } from 'react';
import { AppRegistry, Text, } from 'react-native';
 
const App = () => <Text>Hello World</Text>;
 
AppRegistry.registerComponent('App', () => App);
[/react]

[react:ios]
[vendor:redux,Redux,https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.min.js]
[vendor:react-redux,ReactRedux,https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.5/react-redux.min.js]
[vendor:redux-persist,redux-persist,https://cdnjs.cloudflare.com/ajax/libs/redux-persist/4.0.0-alpha7/redux-persist.js]
[file:index.js]
import { AppRegistry, View } from 'react-native'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import { persistStore, autoRehydrate } from 'redux-persist'
 
// Import the reducer and create a store
import { reducer } from './todoListRedux'
 
// Add the autoRehydrate middleware to your redux store
const store = createStore(reducer, undefined, autoRehydrate())
 
// Enable persistence
persistStore(store)
 
// Import the App container component
import App from './App'
 
// Pass the store into the Provider
const AppWithStore = () => (
  <Provider store={store}>
    <App />
  </Provider>
)
 
AppRegistry.registerComponent('App', () => AppWithStore)
 
[/file]
 
[file:todoListRedux.js]
// The types of actions that you can dispatch to modify the state of the store
export const types = {
  ADD: 'ADD',
  REMOVE: 'REMOVE',
}
 
// Helper functions to dispatch actions, optionally with payloads
export const actionCreators = {
  add: (item) => {
    return {type: types.ADD, payload: item}
  },
  remove: (index) => {
    return {type: types.REMOVE, payload: index}
  }
}
 
// Initial state of the store
const initialState = {
  todos: ['Click to remove', 'Learn React Native', 'Write Code', 'Ship App'],
}
 
// Function to handle actions and update the state of the store.
// Notes:
// - The reducer must return a new state object. It must never modify
//   the state object. State objects should be treated as immutable.
// - We set \`state\` to our \`initialState\` by default. Redux will
//   call reducer() with no state on startup, and we are expected to
//   return the initial state of the app in this case.
export const reducer = (state = initialState, action) => {
  const {todos} = state
  const {type, payload} = action
 
  switch (type) {
    case types.ADD: {
      return {
        ...state,
        todos: [payload, ...todos],
      }
    }
    case types.REMOVE: {
      return {
        ...state,
        todos: todos.filter((todo, i) => i !== payload),
      }
    }
  }
 
  return state
}
[/file]
 
[file:App.js]
import React, { Component } from 'react'
import { AppRegistry, View } from 'react-native'
import { connect } from 'react-redux'
 
import { actionCreators } from './todoListRedux'
import List from './List'
import Input from './Input'
import Title from './Title'
 
const mapStateToProps = (state) => ({
  todos: state.todos,
})
 
class App extends Component {
 
  onAddTodo = (text) => {
    const {dispatch} = this.props
 
    dispatch(actionCreators.add(text))
  }
 
  onRemoveTodo = (index) => {
    const {dispatch} = this.props
 
    dispatch(actionCreators.remove(index))
  }
 
  render() {
    const {todos} = this.props
 
    return (
      <View>
        <Title>
          To-Do List
        </Title>
        <Input
          placeholder={'Type a todo, then hit enter!'}
          onSubmitEditing={this.onAddTodo}
        />
        <List
          list={todos}
          onPressItem={this.onRemoveTodo}
        />
      </View>
    )
  }
}
 
export default connect(mapStateToProps)(App)
[/file]
 
[file:List.js]
import React, { Component } from 'react'
import { AppRegistry, View, TouchableOpacity, Text, StyleSheet } from 'react-native'
 
export default class List extends Component {
 
  renderItem = (text, i) => {
    const {onPressItem} = this.props
 
    return (
      <TouchableOpacity
        style={styles.item}
        onPress={() => onPressItem(i)}
      >
        <Text>{text}</Text>
      </TouchableOpacity>
    )
  }
 
  render() {
    const {list} = this.props
 
    return (
      <View>
        {list.map(this.renderItem)}
      </View>
    )
  }
}
 
const styles = StyleSheet.create({
  item: {
    backgroundColor: 'whitesmoke',
    marginBottom: 5,
    padding: 15,
  },
})
[/file]
 
[file:Input.js]
import React, { Component } from 'react'
import { AppRegistry, TextInput, StyleSheet } from 'react-native'
 
export default class Input extends Component {
 
  state = {
    text: '',
  }
 
  onChangeText = (text) => this.setState({text})
 
  onSubmitEditing = () => {
    const {onSubmitEditing} = this.props
    const {text} = this.state
 
    if (!text) return // Don't submit if empty
 
    onSubmitEditing(text)
    this.setState({text: ''})
  }
 
  render() {
    const {onSubmitEditing, placeholder} = this.props
    const {text} = this.state
 
    return (
      <TextInput
        style={styles.input}
        value={text}
        placeholder={placeholder}
        onChangeText={this.onChangeText}
        onSubmitEditing={this.onSubmitEditing}
      />
    )
  }
}
 
const styles = StyleSheet.create({
  input: {
    padding: 15,
    height: 50,
  },
})
[/file]
 
[file:Title.js]
import React, { Component } from 'react'
import { View, Text, StyleSheet } from 'react-native'
 
export default class Title extends Component {
 
  render() {
    const {children} = this.props
 
    return (
      <View style={styles.header}>
        <Text style={styles.title}>{children}</Text>
      </View>
    )
  }
}
 
const styles = StyleSheet.create({
  header: {
    backgroundColor: 'skyblue',
    padding: 15,
  },
  title: {
    textAlign: 'center',
    color: 'white',
  },
})
[/file]
[/react]