React Native, values are not updating

Question

I made a edit screen and trying to update the value of post through navigation v4 by using getParams and set setParams but when I change the old value and click save buttton to save it, it's not updating it and no error is showing either. It's still showing old values. Can someone please help me, below is my code

EditScreen.js

class EditScreen extends Component {

  render() {
    const { params } = this.props.navigation.state;
    return (
      <KeyboardAvoidingView
        behavior="position"
        keyboardVerticalOffset={Platform.OS === "ios" ? 0 : 100}
      >
        <Image
          style={styles.image}
          source={this.props.navigation.getParam("image")}
        />

        <View style={styles.detailContainer}>
          <AppTextInput
            value={this.props.navigation.getParam("title")}
            onChangeText={(text) =>
              this.props.navigation.setParams({ title: text })
            }
          />
          <AppTextInput
            value={this.props.navigation.getParam("des")}
            onChangeText={(text) =>
              this.props.navigation.setParams({ des: text })
            }
          />
        </View>
        <AppButton
          text="Save"
          style={styles.button}
          onPress={() => {
            this.props.navigation.getParam("onEdit");
            this.props.navigation.goBack();
          }}
        />
      </KeyboardAvoidingView>

Home.js

class Home extends Component {
  state = {
    modal: false,
    post: [
      {
        key: "1",
        title: "A Good Boi",
        des: "He's a good boi and every one know it.",
        image: require("../assets/dog.jpg"),
      },
      {
        key: "2",
        title: "John Cena",
        des: "As you can see, You can't see me!",
        image: require("../assets/cena.jpg"),
      },
    ],
  };

  onEdit = (data) => {
    const newPosts = this.state.post.map((item) => {
      if (item.key === data.key) return data;
      else return item;
    });
    this.setState({ post: newPosts, editMode: false });
  };

  render() {
    return (
      <Screen style={styles.screen}>
        <FlatList
          data={this.state.post}
          renderItem={({ item }) => (
            <>
              <TouchableOpacity
                activeOpacity={0.7}
                onPress={() =>
                  this.props.navigation.navigate("Edit", {
                    image: item.image,
                    title: item.title,
                    des: item.des,
                    onEdit: this.onEdit,
                  })
                }
                style={styles.Edit}
              >
                <MaterialCommunityIcons
                  name="playlist-edit"
                  color="green"
                  size={35}
                />
              </TouchableOpacity>
              <Card onPress={() => this.props.navigation.push("Details", item)}>
                <Image style={styles.image} source={item.image} />
                <View style={styles.detailContainer}>
                  <Text style={styles.title} numberOfLines={1}>
                    {item.title}
                  </Text>
                  <Text style={styles.subTitle} numberOfLines={2}>
                    {item.des}
                  </Text>
                </View>
              </Card>
            </>

Answer 1

I recommend you to keep the data in the component state:

constructor(props) {
 super(props);
 // get the data that you need from navigation params
 const { key, title, ..} = this.props.navigation.state.params
 this.state = {key, title, ..}
}

then :

  <AppTextInput
    value={this.state.title}
    onChangeText={(text) =>
      this.setState({ title: text })
    }
  />

    <AppButton
      text="Save"
      style={styles.button}
      onPress={() => {
        this.props.navigation.getParam("onEdit")(this.state);
        this.props.navigation.goBack();
      }}
    />

Answer 2

Maybe try this:

<AppButton
    text="Save"
    style={styles.button}
    onPress={() => {
        this.props.navigation.getParam("onEdit")(this.props.navigation.state.params);
        this.props.navigation.goBack();
    }}
/>

and:

this.props.navigation.navigate("Edit", {
                    key: item.key,
                    image: item.image,
                    title: item.title,
                    des: item.des,
                    onEdit: this.onEdit,
                  })