🚀 [Example] Add a button to change the list data

Author: cooperka

example/src/App.js

@@ -1,14 +1,24 @@
 import React, { Component } from 'react';
-import { Text, View } from 'react-native';
+import { Text, View, Button } from 'react-native';
 
 // eslint-disable-next-line import/no-unresolved, import/extensions
 import ImmutableListView from 'react-native-immutable-list-view/src/ImmutableListView';
 
 import style from './styles';
-import listData from './listData';
+import mockData from './listData';
 
 class App extends Component {
 
+  state = {
+    listData: mockData,
+  };
+
+  changeData() {
+    this.setState({
+      listData: mockData.setIn(['Section A', 1], 'This value was changed!'),
+    });
+  }
+
   renderRow(rowData) {
     return <Text style={style.row}>{JSON.stringify(rowData)}</Text>;
   }
@@ -23,8 +33,14 @@ class App extends Component {
         <Text style={style.welcome}>
           Welcome to React Native!
         </Text>
+        <View style={style.button}>
+          <Button
+            onPress={() => this.changeData()}
+            title="Update Data"
+          />
+        </View>
         <ImmutableListView
-          immutableData={listData}
+          immutableData={this.state.listData}
           renderRow={this.renderRow}
           renderSectionHeader={this.renderSectionHeader}
         />

example/src/styles.js

@@ -10,7 +10,11 @@ const style = StyleSheet.create({
   welcome: {
     fontSize: 20,
     textAlign: 'center',
-    margin: 10,
+    margin: 20,
+  },
+  button: {
+    padding: 20,
+    paddingTop: 0,
   },
   row: {
     fontSize: 13,