React-navigation 5x usage of Stack.Screen screenProps - react-native

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>
);
};