With usage of typescript and using a component conditionally on separate routes i had to use generic types for correct typing.This is my AuthConfirmEmailScreen component with corresponding type declarations.
type AuthConfirmEmailScreenNavigationProp< T extends ParamListBase, D extends string,> = StackNavigationProp<T, D>type AuthConfirmEmailScreenRouteProp< T extends ParamListBase, D extends string,> = RouteProp<T, D>type AuthConfirmEmailScreenProps<T extends ParamListBase, D extends string> = { navigation: AuthConfirmEmailScreenNavigationProp<T, D> route: AuthConfirmEmailScreenRouteProp<T, D>}export const AuthConfirmEmailScreen = < T extends ParamListBase, D extends string,>({ route, navigation,}: AuthConfirmEmailScreenProps<T, D>): JSX.Element => { return (<>...</>)}and then i had to pass the corresponding type declarations where the component will be called.
My stack navigator where i use this component.
...<RegisterStack.Screen name="AuthConfirmEmail" component={({ route, navigation }) => { return (<AuthConfirmEmailScreen<RegisterStackParamList, 'AuthConfirmEmail'> navigation={navigation} route={route} /> ) }}/>...and now i've got a "Looks like you're passing an inline function for 'component' prop for the screen 'MainConfirmEmail' (e.g. component={() => }). Passing an inline function will cause the component state to be lost on re-render and cause perf issues since it's re-created every render. You can pass the function as children to 'Screen' instead to achieve the desired behaviour" warning, how can it be fixed?
Should i just move this part into a separate function and then pass it to component prop?