diff --git a/FabricExample/package.json b/FabricExample/package.json index 5d8d2e10b5..98abfd4913 100644 --- a/FabricExample/package.json +++ b/FabricExample/package.json @@ -12,6 +12,7 @@ "@react-native-masked-view/masked-view": "^0.2.8", "@react-navigation/bottom-tabs": "^6.5.7", "@react-navigation/native": "^6.1.6", + "@react-navigation/native-stack": "^6.9.13", "@react-navigation/stack": "^6.3.16", "react": "18.2.0", "react-native": "0.71.11", diff --git a/FabricExample/src/constants/screenNames.ts b/FabricExample/src/constants/screenNames.ts index c4e59080bf..d1ec875ef1 100644 --- a/FabricExample/src/constants/screenNames.ts +++ b/FabricExample/src/constants/screenNames.ts @@ -9,4 +9,5 @@ export enum ScreenNames { NON_UI_PROPS = 'NON_UI_PROPS', INTERACTIVE_KEYBOARD = 'INTERACTIVE_KEYBOARD', INTERACTIVE_KEYBOARD_IOS = 'INTERACTIVE_KEYBOARD_IOS', + NATIVE_STACK = 'NATIVE_STACK', } diff --git a/FabricExample/src/navigation/ExamplesStack/index.tsx b/FabricExample/src/navigation/ExamplesStack/index.tsx index 4cc4266bfa..d182c430fd 100644 --- a/FabricExample/src/navigation/ExamplesStack/index.tsx +++ b/FabricExample/src/navigation/ExamplesStack/index.tsx @@ -11,6 +11,7 @@ import StatusBar from '../../screens/Examples/StatusBar'; import NonUIProps from '../../screens/Examples/NonUIProps'; import InteractiveKeyboard from '../../screens/Examples/InteractiveKeyboard'; import InteractiveKeyboardIOS from '../../screens/Examples/InteractiveKeyboardIOS'; +import NativeStack from '../NestedStack'; export type ExamplesStackParamList = { [ScreenNames.ANIMATED_EXAMPLE]: undefined; @@ -21,6 +22,7 @@ export type ExamplesStackParamList = { [ScreenNames.NON_UI_PROPS]: undefined; [ScreenNames.INTERACTIVE_KEYBOARD]: undefined; [ScreenNames.INTERACTIVE_KEYBOARD_IOS]: undefined; + [ScreenNames.NATIVE_STACK]: undefined; }; const Stack = createStackNavigator(); @@ -51,6 +53,9 @@ const options = { [ScreenNames.INTERACTIVE_KEYBOARD_IOS]: { title: 'Interactive keyboard 🍏', }, + [ScreenNames.NATIVE_STACK]: { + title: 'Native stack', + }, }; const ExamplesStack = () => ( @@ -95,6 +100,11 @@ const ExamplesStack = () => ( component={InteractiveKeyboardIOS} options={options[ScreenNames.INTERACTIVE_KEYBOARD_IOS]} /> + ); diff --git a/FabricExample/src/navigation/NestedStack/index.tsx b/FabricExample/src/navigation/NestedStack/index.tsx new file mode 100644 index 0000000000..bbd83df93c --- /dev/null +++ b/FabricExample/src/navigation/NestedStack/index.tsx @@ -0,0 +1,34 @@ +import React from 'react'; + +import { + createNativeStackNavigator, + NativeStackNavigationOptions, +} from '@react-navigation/native-stack'; + +import { ScreenNames } from '../../constants/screenNames'; +import KeyboardAnimation from '../../screens/Examples/KeyboardAnimation'; + +export type NativeStackParamList = { + [ScreenNames.NATIVE_STACK]: {}; +}; + +const Stack = createNativeStackNavigator(); + +const options: Record = { + [ScreenNames.NATIVE_STACK]: { + headerShown: false, + statusBarTranslucent: true, + }, +}; + +const NativeStack = () => ( + + + +); + +export default NativeStack; diff --git a/FabricExample/src/screens/Examples/Main/constants.ts b/FabricExample/src/screens/Examples/Main/constants.ts index b332282621..94c06e752b 100644 --- a/FabricExample/src/screens/Examples/Main/constants.ts +++ b/FabricExample/src/screens/Examples/Main/constants.ts @@ -34,4 +34,9 @@ export const examples: Example[] = [ info: ScreenNames.INTERACTIVE_KEYBOARD_IOS, icons: '👆📱', }, + { + title: 'Native stack', + info: ScreenNames.NATIVE_STACK, + icons: '⚛️', + }, ]; diff --git a/FabricExample/yarn.lock b/FabricExample/yarn.lock index 4a2e127a82..b82204095c 100644 --- a/FabricExample/yarn.lock +++ b/FabricExample/yarn.lock @@ -1401,6 +1401,19 @@ resolved "https://registry.yarnpkg.com/@react-navigation/elements/-/elements-1.3.17.tgz#9cb95765940f2841916fc71686598c22a3e4067e" integrity sha512-sui8AzHm6TxeEvWT/NEXlz3egYvCUog4tlXA4Xlb2Vxvy3purVXDq/XsM56lJl344U5Aj/jDzkVanOTMWyk4UA== +"@react-navigation/elements@^1.3.18": + version "1.3.18" + resolved "https://registry.yarnpkg.com/@react-navigation/elements/-/elements-1.3.18.tgz#d8364b40276f3efb9c229c39da3b8b465f18f0a2" + integrity sha512-/0hwnJkrr415yP0Hf4PjUKgGyfshrvNUKFXN85Mrt1gY49hy9IwxZgrrxlh0THXkPeq8q4VWw44eHDfAcQf20Q== + +"@react-navigation/native-stack@^6.9.13": + version "6.9.13" + resolved "https://registry.yarnpkg.com/@react-navigation/native-stack/-/native-stack-6.9.13.tgz#f308c398ee18fcd45de8ec7c04fe0641735feb31" + integrity sha512-ejlepMrvFneewL+XlXHHhn+6y3lwvavM4/R7XwBV0XJxCymujexK+7Vkg7UcvJ1lx4CRhOcyBSNfGmdNIHREyQ== + dependencies: + "@react-navigation/elements" "^1.3.18" + warn-once "^0.1.0" + "@react-navigation/native@^6.1.6": version "6.1.6" resolved "https://registry.yarnpkg.com/@react-navigation/native/-/native-6.1.6.tgz#84ff5cf85b91f660470fa9407c06c8ee393d5792" diff --git a/example/package.json b/example/package.json index 395209bd60..9687f79525 100644 --- a/example/package.json +++ b/example/package.json @@ -13,6 +13,7 @@ "@react-native-masked-view/masked-view": "^0.2.8", "@react-navigation/bottom-tabs": "^6.5.7", "@react-navigation/native": "^6.1.6", + "@react-navigation/native-stack": "^6.9.13", "@react-navigation/stack": "^6.3.16", "lottie-react-native": "^5.1.5", "react": "18.2.0", diff --git a/example/src/constants/screenNames.ts b/example/src/constants/screenNames.ts index 462ff8c462..ee2655d376 100644 --- a/example/src/constants/screenNames.ts +++ b/example/src/constants/screenNames.ts @@ -10,4 +10,5 @@ export enum ScreenNames { NON_UI_PROPS = 'NON_UI_PROPS', INTERACTIVE_KEYBOARD = 'INTERACTIVE_KEYBOARD', INTERACTIVE_KEYBOARD_IOS = 'INTERACTIVE_KEYBOARD_IOS', + NATIVE_STACK = 'NATIVE_STACK', } diff --git a/example/src/navigation/ExamplesStack/index.tsx b/example/src/navigation/ExamplesStack/index.tsx index 4ff7138112..b31e58d15a 100644 --- a/example/src/navigation/ExamplesStack/index.tsx +++ b/example/src/navigation/ExamplesStack/index.tsx @@ -12,6 +12,7 @@ import LottieAnimation from '../../screens/Examples/Lottie'; import NonUIProps from '../../screens/Examples/NonUIProps'; import InteractiveKeyboard from '../../screens/Examples/InteractiveKeyboard'; import InteractiveKeyboardIOS from '../../screens/Examples/InteractiveKeyboardIOS'; +import NativeStack from '../NestedStack'; export type ExamplesStackParamList = { [ScreenNames.ANIMATED_EXAMPLE]: undefined; @@ -23,6 +24,7 @@ export type ExamplesStackParamList = { [ScreenNames.NON_UI_PROPS]: undefined; [ScreenNames.INTERACTIVE_KEYBOARD]: undefined; [ScreenNames.INTERACTIVE_KEYBOARD_IOS]: undefined; + [ScreenNames.NATIVE_STACK]: undefined; }; const Stack = createStackNavigator(); @@ -56,6 +58,9 @@ const options = { [ScreenNames.INTERACTIVE_KEYBOARD_IOS]: { title: 'Interactive keyboard 🍏', }, + [ScreenNames.NATIVE_STACK]: { + title: 'Native stack', + }, }; const ExamplesStack = () => ( @@ -105,6 +110,11 @@ const ExamplesStack = () => ( component={InteractiveKeyboardIOS} options={options[ScreenNames.INTERACTIVE_KEYBOARD_IOS]} /> + ); diff --git a/example/src/navigation/NestedStack/index.tsx b/example/src/navigation/NestedStack/index.tsx new file mode 100644 index 0000000000..bbd83df93c --- /dev/null +++ b/example/src/navigation/NestedStack/index.tsx @@ -0,0 +1,34 @@ +import React from 'react'; + +import { + createNativeStackNavigator, + NativeStackNavigationOptions, +} from '@react-navigation/native-stack'; + +import { ScreenNames } from '../../constants/screenNames'; +import KeyboardAnimation from '../../screens/Examples/KeyboardAnimation'; + +export type NativeStackParamList = { + [ScreenNames.NATIVE_STACK]: {}; +}; + +const Stack = createNativeStackNavigator(); + +const options: Record = { + [ScreenNames.NATIVE_STACK]: { + headerShown: false, + statusBarTranslucent: true, + }, +}; + +const NativeStack = () => ( + + + +); + +export default NativeStack; diff --git a/example/src/screens/Examples/Main/constants.ts b/example/src/screens/Examples/Main/constants.ts index 4852f33137..850691989c 100644 --- a/example/src/screens/Examples/Main/constants.ts +++ b/example/src/screens/Examples/Main/constants.ts @@ -39,4 +39,9 @@ export const examples: Example[] = [ info: ScreenNames.INTERACTIVE_KEYBOARD_IOS, icons: '👆📱', }, + { + title: 'Native stack', + info: ScreenNames.NATIVE_STACK, + icons: '⚛️', + }, ]; diff --git a/example/yarn.lock b/example/yarn.lock index 9c55787620..f240dce8d6 100644 --- a/example/yarn.lock +++ b/example/yarn.lock @@ -1587,6 +1587,19 @@ resolved "https://registry.yarnpkg.com/@react-navigation/elements/-/elements-1.3.17.tgz#9cb95765940f2841916fc71686598c22a3e4067e" integrity sha512-sui8AzHm6TxeEvWT/NEXlz3egYvCUog4tlXA4Xlb2Vxvy3purVXDq/XsM56lJl344U5Aj/jDzkVanOTMWyk4UA== +"@react-navigation/elements@^1.3.18": + version "1.3.18" + resolved "https://registry.yarnpkg.com/@react-navigation/elements/-/elements-1.3.18.tgz#d8364b40276f3efb9c229c39da3b8b465f18f0a2" + integrity sha512-/0hwnJkrr415yP0Hf4PjUKgGyfshrvNUKFXN85Mrt1gY49hy9IwxZgrrxlh0THXkPeq8q4VWw44eHDfAcQf20Q== + +"@react-navigation/native-stack@^6.9.13": + version "6.9.13" + resolved "https://registry.yarnpkg.com/@react-navigation/native-stack/-/native-stack-6.9.13.tgz#f308c398ee18fcd45de8ec7c04fe0641735feb31" + integrity sha512-ejlepMrvFneewL+XlXHHhn+6y3lwvavM4/R7XwBV0XJxCymujexK+7Vkg7UcvJ1lx4CRhOcyBSNfGmdNIHREyQ== + dependencies: + "@react-navigation/elements" "^1.3.18" + warn-once "^0.1.0" + "@react-navigation/native@^6.1.6": version "6.1.6" resolved "https://registry.yarnpkg.com/@react-navigation/native/-/native-6.1.6.tgz#84ff5cf85b91f660470fa9407c06c8ee393d5792"