setState.txt

import React, { Component } from 'react';
import {
  AppRegistry,
  Modal,
  Text,
  Dimensions,
  View
} from 'react-native';

const { width } = Dimensions.get('window');
const EDIT_BUTTON_WIDTH = 40;
const Q_WIDTH = 40;
const ROW_WIDTH = (width - EDIT_BUTTON_WIDTH - Q_WIDTH) / 2;

export default class iOSPickerExample extends Component {
  constructor(props) {
    super(props);
    this.state = {
      people: this.ARRAY,
      cachedPeople: [],
      visible: false,
    }
  }
  ARRAY = [
    { id: 0, name: 'John', age: 15, gender: 'Male' },
    { id: 1, name: 'Trish', age: 22, gender: 'Female' },
    { id: 2, name: 'Ben', age: 38, gender: 'Male' },
    { id: 3, name: 'Lexie', age: 9, gender: 'Female' },
  ]
  render() {
    return (
      <View style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      }}>
        <Text
          onPress={() => {
            this.setState({ visible: true, cachedPeople: this.state.people  })
          }}
          style={{ padding: 10, backgroundColor: 'green', borderWidth: 0, color: '#fff', fontSize: 12  }}
        >
          OPEN MODAL
        </Text>
        <Modal
          visible={this.state.visible}
          animationType="slide"
          transparent
          onRequestClose={() => this.setState({ isSelectServiceModalVisible: false })}
        >
          <View style={{ justifyContent: 'flex-end', flex: 1, backgroundColor: 'rgba(0,0,0,0.3)' }}>
            <View style={{ backgroundColor: '#fff', height: 350 }}>
              <View style={{ flexDirection: 'row', justifyContent: 'space-between', backgroundColor: '#fff', padding: 10 }}>
                <Text
                  onPress={() => {
                    this.setState({ visible: false, people: this.state.cachedPeople });
                  }}
                  style={{ color: 'green', width: 50 }}
                >
                  Cancel
                </Text>
              </View>
              <Text
                style={{ padding: 10, margin: 10, width: 100, backgroundColor: 'green', borderWidth: 0, color: '#fff', fontSize: 12  }}
                onPress={() => {
                  const newPeople = [...this.state.people];
                  newPeople[2].age = 20;
                  this.setState({
                    people: newPeople,
                  });
                }}
              >
                Change age of Ben
              </Text>
              {this.state.people.map((person, i) => {
                return (
                  <View key={person.id} style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingHorizontal: 5, marginTop: 20 }}>
                    <Text style={{ width: ROW_WIDTH, fontSize: 13, color: '#4c230b' }}>{person.name}</Text>
                    <Text style={{ width: ROW_WIDTH, fontSize: 13, color: '#4c230b' }}>{person.age.toString()}</Text>
                    <Text style={{ width: 40, fontSize: 13, color: '#4c230b' }}>{person.gender}</Text>
                  </View>
                )
              })}
            </View>
          </View>
        </Modal>
      </View>
    );
  }
}


AppRegistry.registerComponent('iOSPickerExample', () => iOSPickerExample);