Passing screen-defined function to header triggering "Non-serializable" issue

I have a stack navigator in which one of my screens, I have defined the global header bar to contain a button that will trigger a modal. The issue I have is that I am defining the function to trigger said modal from within the screen component itself and attempting to pass the function via navigation.setParams and I am facing the warning:

> Non-serializable values were found in the navigation state

const ViewB = ({ route, navigation }) => {
  const [showModal, setShowModal] = useState(false);

  useEffect(() => {
    navigation.setParams({showModal: () => setShowModal(true)});
  }, []);

<Stack.Screen name="ViewB" component={ViewB} options={({ route }) => ({
  headerRight: () => (
      <View>
          <Button onPress={() => {
              showModal = route?.params?.["showModal"];
              showModal && showModal();
          }} title="Toggle modal" />
      </View>
  )
})} />

After Googling I did come across the official docs on the issue and also this SO question/answer that explained that RN doesn't like us passing functions to navigation as it could potentially break functionality down the line if things change etc... however I'm unsure of a better way to go about this.

Is there a way in which I can achieve my desired result without upsetting react-native?

Here is a stack with my example

Yes, react-navigation doesn't allow us to pass the methods in navigation props.

As per your requirement there is no need to pass the method in the params to the parent.

you can achieve this by adding the headerRight inside your screen code, checkout the below code changes for better understanding.

const ViewB = ({route, navigation}) => {
  const [showModal, setShowModal] = useState(false);

  useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <View>
          <Button
            onPress={() => {
              setShowModal(true);
            }}
            title="Toggle modal"
          />
        </View>
      ),
    });
  }, [navigation]);

  const onBackPress = () => {
    navigation.navigate(route.params.previousScreen, {
      val: 5,
      val2: 6,
    });
  };

  return (
    <View>
      <Text>ViewB</Text>
      <Text>Params: {JSON.stringify(route.params)}</Text>
      <Button title="back" onPress={onBackPress} />
      {showModal && <Modal onClose={() => setShowModal(false)} />}
    </View>
  );
};

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator mode="modal">
        <Stack.Screen name="ViewA" component={ViewA} />
        <Stack.Screen name="ViewB" component={ViewB} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}