Passing values back from modal using React Navigation - Stack Overflow

admin管理员组

文章数量:1324837

This should be a fairly simple situation but I'm not having success with it. Using React Navigation v6 (React Native)

I have a modal which I'm navigating to via navigation.navigate(). It's a modal, so it can be closed by swiping down. The client wants the values from the modal to be passed back to the calling screen. However I can't see a way to do that because I am not calling goBack().

Thanks.

This should be a fairly simple situation but I'm not having success with it. Using React Navigation v6 (React Native)

I have a modal which I'm navigating to via navigation.navigate(). It's a modal, so it can be closed by swiping down. The client wants the values from the modal to be passed back to the calling screen. However I can't see a way to do that because I am not calling goBack().

Thanks.

• react-native
• react-navigation

Share Improve this question Follow asked Jan 12 at 7:16 Shawn LauzonShawn Lauzon 6,28244 gold badges3636 silver badges4747 bronze badges 1

• Could you please provide some code snippet? – Jatin Bhuva Commented Jan 13 at 10:07

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

You can pass a callback function to the modal through the navigation params.

    // Parent Screen
import React, { useState } from "react";
import { View, Button, Text } from "react";

const ParentScreen = ({ navigation }) => {
  const [value, setValue] = useState("");

  const handleValueChange = (newValue) => {
    setValue(newValue);
  };

  return (
    <View>
      <Text>Selected Value: {value}</Text>
      <Button
        title="Open Modal"
        onPress={() =>
          navigation.navigate("ModalScreen", { onValueChange: handleValueChange })
        }
      />
    </View>
  );
};

export default ParentScreen;

// Modal Screen
import React from "react";
import { View, Button } from "react";

const ModalScreen = ({ route, navigation }) => {
  const { onValueChange } = route.params;

  const passValueBack = () => {
    onValueChange("Value from Modal");
  };

  return (
    <View>
      <Button title="Pass Value Back" onPress={passValueBack} />
    </View>
  );
};

export default ModalScreen;

本文标签： Passing values back from modal using React NavigationStack Overflow