React native, edit data from another screen

Question

I made 2 screens one home screen and 2nd edit screen I need to edit data of home screen from edit screen and save it and that data should also update in home and detail screen. How can I do this without redux or context. Can anyone tell me.

Home.js

class Home extends Component {
  state = {
    post: [
      {
        key: "1",
        title: "A Good Boi",
        des: "He's a good boi and every one know it.",
        image: require("../assets/dog.jpg"),
      },
    ],
  };

  render() {
    return (
        <FlatList
          data={this.state.post}
          renderItem={({ item }) => (
            <>
              <TouchableOpacity
                activeOpacity={0.7}
                onPress={() => this.props.navigation.navigate("Edit", item)}
                style={styles.Edit}
              >
                <MaterialCommunityIcons
                  name="playlist-edit"
                  color="green"
                  size={35}
                />
              </TouchableOpacity>
              <Card
                title={item.title}
                subTitle={item.des}
                image={item.image}
                onPress={() => this.props.navigation.navigate("Details", item)}
              />
            </>
          )}
        />

Edit.js

class ListDetails extends Component {
  render() {
    const listing = this.props.route.params;
    return (
      <View>
        <Image style={styles.image} source={listing.image} />
        <View style={styles.detailContainer}>
          <AppTextInput value={listing.title} />
          <AppTextInput value={listing.des} />
        </View>
        <AppButton
          text="Save"
          onPress={() => this.props.navigation.goBack("Home")}
        />
      </View>

Details.js

 const listing = this.props.route.params;
    return (
      <View>
        <Image style={styles.image} source={listing.image} />
        <View style={styles.detailContainer}>
          <Text style={styles.title}>{listing.title}</Text>
          <Text style={styles.des}>{listing.des}</Text>
        </View>
      </View>
    );

Answer 1

You can pass a function from your home screen to setState for it in your edit screen. In case navigating to edit screen causes the home screen unmounted, you can change the navigate method to push of stack navigator (I haven't tested yet). The code now should look like:

HomeScreen.js:

onEdit=(data)=>{
  setState(...);
}
...
<TouchableOpacity
  activeOpacity={0.7}
  onPress={() => this.props.navigation.navigate("Edit", {item, onEdit})} //use push instead if error occured
  style={styles.Edit}
>
...

Edit.js

class ListDetails extends Component {
  render() {
    const {item:listing, onEdit} = this.props.route.params;
    return (
      <View>
        <Image style={styles.image} source={listing.image} />
        <View style={styles.detailContainer}>
          <AppTextInput value={listing.title} />
          <AppTextInput value={listing.des} />
        </View>
        <AppButton
          text="Save"
          onPress={() => { onEdit(...); this.props.navigation.goBack("Home");}}
        />
      </View>