React-navigation 5x usage of Stack.Screen screenProps

Question

I want to pass something by screenProps in React-navigation v5.x.x. I am one of the newcomers in react-native. Can anyone help me?

Answer 1

There's no screenProps in React Navigation 5. You can use React's Context feature instead to pass data down the tree without an extra API.

https://reactnavigation.org/docs/upgrading-from-4.x#global-props-with-screenprops

Answer 2

in my case I am passing my data like :

props.navigation.navigate('toScreen', {
    resumeDetail: data,
})

and you can access it like :

detail = this.props.navigation.state.params.resumeDetail;

Answer 3

https://reactnavigation.org/docs/screen/#children

Render callback to return React Element to use for the screen:

<Stack.Screen name="Profile">
 {(props) => <ProfileScreen {...props} />}
</Stack.Screen>

You can use this approach instead of the component prop if you need to pass additional props. Though we recommend using React context for passing data instead.

Note: By default, React Navigation applies optimizations to screen components to prevent unnecessary renders. Using a render callback removes those optimizations. So if you use a render callback, you'll need to ensure that you use React.memo or React.PureComponent for your screen components to avoid performance issues.

This is what I use at the moment:

// ...

export const ScanPage = React.memo(ScanComponent);

function useScreenWithProps(
  PageComponent: React.FC<Props>,
  props: Props
) {
  // Take note of the double arrow,
  // the value useMemo returns is a function that returns a component.
  return useMemo(
    () => (navigationProps: NavigationProps) => (
      <PageComponent {...navigationProps} {...props} />
    ),
    [PageComponent, props]
  );
}

const Stack = createStackNavigator();

const Navigator: React.FC<Props> = (props) => {
  const scan = useScreenWithProps(ScanPage, props);
  const activate = useScreenWithProps(ActivatePage, props);
  const calibrate = useScreenWithProps(CalibratePage, props);
  const success = useScreenWithProps(SuccessPage, props);
  const error = useScreenWithProps(ErrorPage, props);

  return (
    <Stack.Navigator>
      <Stack.Screen name="Scan">{scan}</Stack.Screen>
      <Stack.Screen name="Activate">{activate}</Stack.Screen>
      <Stack.Screen name="Calibrate">{calibrate}</Stack.Screen>
      <Stack.Screen name="Success">{success}</Stack.Screen>
      <Stack.Screen name="Error">{error}</Stack.Screen>
    </Stack.Navigator>
  );
};