Flat List not updated on state change - react-native

Question

I am creating dinner decider app and want to add items into an array from the user input. input added to an array list and shows in alert box but not reloat the FlatList. Please help
Here is my code for the same.
constructor(props){
super(props);
this.state = {items:[{key:'Pasta'},{key:'Pizza'}],userdata:''}
}
render() {
return (
<Container>
<Header></Header>
<Content style={{padding:20}}>
<Text style={{fontSize: 30, textAlign:'center', marginVertical:30,}}>Food Decider</Text>
<Item floatingLabel>
<Label>Add Item</Label>
<Input
onChangeText={(text) => this.setState({userdata:text})}
/>
</Item>
<Button block success style={{marginTop: 20,}}
onPress={this.onSubmit.bind(this)}
>
<Text>Add Item</Text>
</Button>
<FlatList
data = {this.state.items}
renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
/>
</Content>
</Container>
);
}
onSubmit(){
this.state.items.push({key:this.state.userdata});
alert(JSON.stringify(this.state.items));
}
Thanks.

Answer 1

You need to use prop legacyImplementation=true in FlatList so that it does the real time changes to the FlatList.
Use:
<FlatList legacyImplementation=true />

Answer 2

first of all in you onSubmit function you didn't set the state just push a value
onSubmit(){
this.state.items.push({key:this.state.userdata});
alert(JSON.stringify(this.state.items));
}
whereas it should be something like this
onSubmit(){
let newState = this.state.items;
newState.push({key:this.state.userdata});
this.setState({items:newState});
alert(JSON.stringify(this.state.items));
}
and also bind your onSubmit function in the constructor like this
constructor(props){
super(props);
this.state = {items:[{key:'Pasta'},{key:'Pizza'}],userdata:''}
this.onSubmit = this.onSubmit.bind(this);
}

Answer 3

In Flat list there is also one more option
"extraData={this.state.metaData}"
you can use this to reset/reload the FlatList on your action complete ,you can use like this:
constructor(props){
super(props);
this.state={
metaData:false,
}
}
<FlatList
data = {this.state.items}
renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
extraData={this.state.metaData}
/>
after button click you can use this
onSubmit(){
let {metaTAbBarData}=this.state
this.state.items.push({key:this.state.userdata});
this.setState({metaData:!metaData})
}
it will reload when you click on submit button
it will help you , its help me

Answer 4

onSubmit(){
/*
* FlatList is a PureComponent which means that it will not re-render
* if props remain shallow-equal So, We are Cloning the items array to
* clonedArray, So that the reference to this.state.items will change.
* Means this.state.items === clonedArray will give false value.
*/
let clonedArray = this.state.items.slice();
clonedArray.push({key:this.state.userdata});
this.setState({items: clonedArray});
}