I have a flatlist in react Native but i press button save not reload data automatically and not render in flattest but i reload app and the item save appears
I need that I press button save the data render data automatically in a flatList I need help
List screen:
class ListScreen extends React.Component {
constructor(props) {
super(Props);
this.state = {
listData : [ ]
};
}
render() { return (
<Root>
<View style={styles.listScreenContainer}>
<CustomButton
text="Add Restaurant"
width="94%"
onPress={ () => { this.props.navigation.navigate("AddScreen"); } }
/>
<FlatList
style={styles.restaurantList}
data={this.state.listData}
renderItem={ ({item}) =>
<View style={styles.restaurantContainer}>
<Text style={styles.restaurantName}>{item.name}</Text>
<CustomButton
text="Delete"
onPress={ () => {
Alert.alert(
"Please confirm",
"Are you sure you want to delete this restaurant?",
[
{ text : "Yes", onPress: () => {
// Pull data out of storage.
AsyncStorage.getItem("restaurants",
function(inError, inRestaurants) {
if (inRestaurants === null) {
inRestaurants = [ ];
} else {
inRestaurants = JSON.parse(inRestaurants);
}
// Find the right one to delete and splice it out.
for (let i = 0; i < inRestaurants.length; i++) {
const restaurant = inRestaurants[i];
if (restaurant.key === item.key) {
inRestaurants.splice(i, 1);
break;
}
}
// Store updated data in storage.
AsyncStorage.setItem("restaurants",
JSON.stringify(inRestaurants), function() {
// Set new state to update list.
this.setState({ listData : inRestaurants });
// Show toast message to confirm deletion.
Toast.show({
text : "Restaurant deleted",
position : "bottom",
type : "danger",
duration : 2000
});
}.bind(this)
);
}.bind(this)
);
} },
{ text : "No" },
{ text : "Cancel", style : "cancel" }
],
{ cancelable : true }
)
} } />
</View>
}
/>
</View>
</Root>
); }
componentDidMount() {
// Block hardware back button on Android.
BackHandler.addEventListener(
"hardwareBackPress", () => { return true; }
);
// Get list of restaurants.
AsyncStorage.getItem("restaurants",
function(inError, inRestaurants) {
if (inRestaurants === null) {
inRestaurants = [ ];
} else {
inRestaurants = JSON.parse(inRestaurants);
}
this.setState({ listData : inRestaurants });
}.bind(this)
);
};
}
Add screen:
class AddScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
name : "",
cuisine : "",
price : "",
rating : "",
phone : "",
address : "",
webSite : "",
delivery : "",
key : `r_${new Date().getTime()}`
};
}
render() { return (
<ScrollView style={styles.addScreenContainer}>
<View style={styles.addScreenInnerContainer}>
<View style={styles.addScreenFormContainer}>
<CustomTextInput
label="Name"
maxLength={20}
stateHolder={this}
stateFieldName="name"
/>
<Text style={styles.fieldLabel}>Cuisine</Text>
<View style={styles.pickerContainer}>
<Picker
style={styles.picker}
prompt="Cuisine"
selectedValue={this.state.cuisine}
onValueChange={
(inItemValue) => this.setState({ cuisine : inItemValue })
}
>
<Picker.Item label="" value="" />
<Picker.Item label="Algerian" value="Algerian" />
<Picker.Item label="American" value="American" />
<Picker.Item label="BBQ" value="BBQ" />
<Picker.Item label="Belgian" value="Belgian" />
<Picker.Item label="Brazilian" value="Brazilian" />
<Picker.Item label="British" value="British" />
<Picker.Item label="Cajun" value="Cajun" />
<Picker.Item label="Canadian" value="Canadian" />
<Picker.Item label="Chinese" value="Chinese" />
<Picker.Item label="Cuban" value="Cuban" />
<Picker.Item label="Egyptian" value="Egyptian" />
<Picker.Item label="Filipino" value="Filipino" />
<Picker.Item label="French" value="French" />
<Picker.Item label="German" value="German" />
<Picker.Item label="Greek" value="Greek" />
<Picker.Item label="Haitian" value="Haitian" />
<Picker.Item label="Hawaiian" value="Hawaiian" />
<Picker.Item label="Indian" value="Indian" />
<Picker.Item label="Irish" value="Irish" />
<Picker.Item label="Italian" value="Italian" />
<Picker.Item label="Japanese" value="Japanese" />
<Picker.Item label="Jewish" value="Jewish" />
<Picker.Item label="Kenyan" value="Kenyan" />
<Picker.Item label="Korean" value="Korean" />
<Picker.Item label="Latvian" value="Latvian" />
<Picker.Item label="Libyan" value="Libyan" />
<Picker.Item label="Mediterranean" value="Mediterranean" />
<Picker.Item label="Mexican" value="Mexican" />
<Picker.Item label="Mormon" value="Mormon" />
<Picker.Item label="Nigerian" value="Nigerian" />
<Picker.Item label="Other" value="Other" />
<Picker.Item label="Peruvian" value="Peruvian" />
<Picker.Item label="Polish" value="Polish" />
<Picker.Item label="Portuguese" value="Portuguese" />
<Picker.Item label="Russian" value="Russian" />
<Picker.Item label="Salvadorian" value="Salvadorian" />
<Picker.Item label="Sandwiche Shop" value="Sandwiche Shop" />
<Picker.Item label="Scottish" value="Scottish" />
<Picker.Item label="Seafood" value="Seafood" />
<Picker.Item label="Spanish" value="Spanish" />
<Picker.Item label="Steak House" value="Steak House" />
<Picker.Item label="Sushi" value="Sushi" />
<Picker.Item label="Swedish" value="Swedish" />
<Picker.Item label="Tahitian" value="Tahitian" />
<Picker.Item label="Thai" value="Thai" />
<Picker.Item label="Tibetan" value="Tibetan" />
<Picker.Item label="Turkish" value="Turkish" />
<Picker.Item label="Welsh" value="Welsh" />
</Picker>
</View>
<Text style={styles.fieldLabel}>Price</Text>
<View style={styles.pickerContainer}>
<Picker
style={styles.picker}
selectedValue={this.state.price}
prompt="Price"
onValueChange={
(inItemValue) => this.setState({ price : inItemValue })
}
>
<Picker.Item label="" value="" />
<Picker.Item label="1" value="1" />
<Picker.Item label="2" value="2" />
<Picker.Item label="3" value="3" />
<Picker.Item label="4" value="4" />
<Picker.Item label="5" value="5" />
</Picker>
</View>
<Text style={styles.fieldLabel}>Rating</Text>
<View style={styles.pickerContainer}>
<Picker
style={styles.picker}
selectedValue={this.state.rating}
prompt="Rating"
onValueChange={
(inItemValue) => this.setState({ rating : inItemValue })
}
>
<Picker.Item label="" value="" />
<Picker.Item label="1" value="1" />
<Picker.Item label="2" value="2" />
<Picker.Item label="3" value="3" />
<Picker.Item label="4" value="4" />
<Picker.Item label="5" value="5" />
</Picker>
</View>
<CustomTextInput
label="Phone Number"
maxLength={20}
stateHolder={this}
stateFieldName="phone"
/>
<CustomTextInput
label="Address"
maxLength={20}
stateHolder={this}
stateFieldName="address"
/>
<CustomTextInput
label="Web Site"
maxLength={20}
stateHolder={this}
stateFieldName="webSite"
/>
<Text style={styles.fieldLabel}>Delivery?</Text>
<View style={styles.pickerContainer}>
<Picker
style={styles.picker}
prompt="Delivery?"
selectedValue={this.state.delivery}
onValueChange={
(inItemValue) => this.setState({ delivery : inItemValue })
}
>
<Picker.Item label="" value="" />
<Picker.Item label="Yes" value="Yes" />
<Picker.Item label="No" value="No" />
</Picker>
</View>
</View>
<View style={styles.addScreenButtonsContainer}>
<CustomButton
text="Cancel"
width="44%"
onPress={
() => { this.props.navigation.navigate("ListScreen"); }
}
/>
<CustomButton
text="Save"
width="44%"
onPress={ () => {
AsyncStorage.getItem("restaurants",
function(inError, inRestaurants) {
if (inRestaurants === null) {
inRestaurants = [ ];
} else {
inRestaurants = JSON.parse(inRestaurants);
}
inRestaurants.push(this.state);
AsyncStorage.setItem("restaurants",
JSON.stringify(inRestaurants), function() {
this.props.navigation.navigate("ListScreen");
}.bind(this)
);
}.bind(this)
);
} }
/>
</View>
</View>
</ScrollView>
); }
}
