How to update the state of one component when passing from another component?

Question

React

There is a component RequestScreenfrom which, by tapping on TouchableOpacity, a transition is made to another component - TasksMapand the coordinates of the point on which the map is centered are transmitted:

<TouchableOpacity
      style={styles.locationContainer}
      onPress={() =>
        navigation.navigate('TasksMap', {coords: route.params.latlng})
      }>
      <Mark />
      <Text style={styles.location}>{route.params.location}</Text>
</TouchableOpacity>

TasksMap has a taskLatlng state. How to change this state based on route.params.coords when moving from RequestScreento TasksMap?

const TasksMapScreen: React.FunctionComponent<Props> = () => {
  const route = useRoute();

  const tasks = [
    {
      id: 5602481,
      category: 'lights',
      text: 'задача 1',
      location: 'адрес 1',
      latlng: {
        latitude: 54.1925489,
        longitude: 37.6705917,
      },
      distance: 200,
      date: '08.06.2019',
      price: 300,
      isResolved: false,
      reworkings: 0,
    },
    {
      id: 5602482,
      category: 'garbage',
      text: 'задача 2',
      location: 'адрес 2',
      latlng: {
        latitude: 54.1541381,
        longitude: 37.5843054,
      },
      distance: 200,
      date: '08.06.2019',
      price: 0,
      deadline: '18.06.2019',
      isResolved: false,
      reworkings: 0,
    },
  ];

  const problems = [
    {key: 'all', text: 'Все проблемы'},
    {key: 'free', text: 'Новые'},
    {key: 'paid', text: 'На исполнении'},
  ];

  const initialMarkerLatlng = tasks[0].latlng;

  const [zoom, setZoom] = useState(14);
  const [taskLatlng, selectTask] = useState(initialMarkerLatlng);

  const region = {
    ...initialMarkerLatlng,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421,
  };

  const mapView = useRef(null);

  useEffect(() => {
    if (mapView.current) {
      mapView.current?.animateCamera(
        {
          center: route.params?.coords,
          zoom: 15,
        },
        1000,
      );
    }
  }, []);

  return (
    <View style={styles.container}>
      <MapView
        ref={mapView}
        style={styles.map}
        minZoomLevel={zoom}
        maxZoomLevel={zoom}
        showsCompass={false}
        initialRegion={region}>
        {tasks.map((task) => (
          <Marker
            coordinate={task.latlng}
            title=""
            key={task.id}
            onPress={() => selectTask(task.latlng)}>
            <TaskMarker
              category={task.category}
              price={task.price}
              isResolved={task.isResolved}
              reworkings={task.reworkings}
            />
          </Marker>
        ))}
      </MapView>

      <View style={styles.buttonBlock}>
        <Button style={styles.buttonItem} rounded>
          <RouteIcon width={13} height={15} />
        </Button>
        <Button
          style={[styles.buttonItem, styles.semiRoundedTop]}
          rounded
          onPress={() => setZoom(zoom + 1)}>
          <Text style={styles.buttonText}>+</Text>
        </Button>
        <Button
          style={[styles.buttonItem, styles.semiRoundedBottom]}
          rounded
          onPress={() => setZoom(zoom - 1)}>
          <Text style={styles.buttonText}>−</Text>
        </Button>
        <Button style={styles.buttonItem} rounded>
          <GeopositionIcon width={11} height={11} />
        </Button>
      </View>
    </View>
  );
};

Answer 1

navigation.navigate('TasksMap', {coords: route.params.latlng})

at this point, I would take componentWillRecieveProps and catch the moment when new props arrive and replace the state. You can try to do the same with a hook.