From 997a18d9b16f6eb20613fb021f7be100d146a230 Mon Sep 17 00:00:00 2001 From: kacperkapusciak Date: Wed, 18 Aug 2021 17:14:46 +0200 Subject: [PATCH 1/2] feat: warn when using native-stack from rns in v6 --- .../navigators/createNativeStackNavigator.tsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/native-stack/navigators/createNativeStackNavigator.tsx b/src/native-stack/navigators/createNativeStackNavigator.tsx index 4653f00dc2..44e56a0fd9 100644 --- a/src/native-stack/navigators/createNativeStackNavigator.tsx +++ b/src/native-stack/navigators/createNativeStackNavigator.tsx @@ -35,6 +35,18 @@ function NativeStackNavigator({ screenOptions, }); + // Starting from React Navigation v6 @react-navigation/native-stack should be used. + // react-native-screens/native-stack works kinda okay for v6 (still) but types + // are different and it isn't supported for v6 so we have to warn users about this. + React.useEffect(() => { + // navigation.dangerouslyGetParent was removed in v6 + if (navigation.dangerouslyGetParent === undefined) { + console.warn( + 'It appears that you are importing native-stack from react-native-screens. Since version 6 of react-navigation, native-stack should be used as separate package @react-navigation/native-stack to take full advantage of new functionalities added to react-navigation' + ); + } + }, [navigation]); + React.useEffect( () => navigation?.addListener?.('tabPress', (e) => { From 7c22e558423fd3d66c242c23092e9288c8cf69a9 Mon Sep 17 00:00:00 2001 From: kacperkapusciak Date: Wed, 18 Aug 2021 17:51:16 +0200 Subject: [PATCH 2/2] fix: comment, make warning message less formal --- .../navigators/createNativeStackNavigator.tsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/native-stack/navigators/createNativeStackNavigator.tsx b/src/native-stack/navigators/createNativeStackNavigator.tsx index 44e56a0fd9..ea106c0ee0 100644 --- a/src/native-stack/navigators/createNativeStackNavigator.tsx +++ b/src/native-stack/navigators/createNativeStackNavigator.tsx @@ -35,14 +35,13 @@ function NativeStackNavigator({ screenOptions, }); - // Starting from React Navigation v6 @react-navigation/native-stack should be used. - // react-native-screens/native-stack works kinda okay for v6 (still) but types - // are different and it isn't supported for v6 so we have to warn users about this. + // Starting from React Navigation v6, `native-stack` should be imported from + // `@react-navigation/native-stack` rather than `react-native-screens/native-stack` React.useEffect(() => { - // navigation.dangerouslyGetParent was removed in v6 - if (navigation.dangerouslyGetParent === undefined) { + // @ts-ignore navigation.dangerouslyGetParent was removed in v6 + if (navigation?.dangerouslyGetParent === undefined) { console.warn( - 'It appears that you are importing native-stack from react-native-screens. Since version 6 of react-navigation, native-stack should be used as separate package @react-navigation/native-stack to take full advantage of new functionalities added to react-navigation' + 'Looks like you are importing `native-stack` from `react-native-screens/native-stack`. Since version 6 of `react-navigation`, it should be imported from `@react-navigation/native-stack`.' ); } }, [navigation]);