Using `withMappedNavigationParams()` With Nested Navigators Causes Unexpected Rerenders about react-navigation-props-mapper HOT 2 CLOSED

@aarongrider, you may need to pull withMappedNavigationParams out of the component prop like so:

const StackNavigator = () => {
    const Screen1Component = React.useMemo(() => {
        return withMappedNavigationParams()(Screen1);
    }, []);
  return (
      <Stack.Navigator>
        <Stack.Screen
            name="Screen1"
            initialParams={{testParam: 'This is a test!'}}
            component={Screen1Component}
        />
        <Stack.Screen name="Screen2" component={Screen2} />
      </Stack.Navigator>
  );
};

from react-navigation-props-mapper.

hello, @coreyphillips is correct. Basically, you need to make sure when you use component={xyz}, then xyz already needs to be wrapped in withMappedNavigationParams, just like documented. The reason is that when withMappedNavigationParams is used as above, it will create a new component for every time it is executed, and you don't want that.

hope this helps

from react-navigation-props-mapper.