[RNKC-053] - native-stack + statusBarTranslucent issue (#50)

## Description Added integration of `native-stack` into example application. ## Motivation and Context This example shows, that `statusBarTranslucent` + `native-stack` + `react-native 0.69` doesn't work together 😄 ## Changelog ### JS - added `native-stack` example; ## How Has This Been Tested? Tested manually :) ## Screenshots (if appropriate): |Expected|Actual| |---------|-------| |<img width="255" alt="image" src="https://user-images.githubusercontent.com/22820318/184424127-5e5912f8-acc8-4135-8d75-844797cbaeb1.png">|<img width="260" alt="image" src="https://user-images.githubusercontent.com/22820318/184427263-44435502-58df-471f-b749-0d9b7f7b868b.png">| Pay an attention to the position of yellow TextInput and bubbles. In Actual result it seems like window is shrinking, that's why they are displaying higher, than expected. ## Checklist - [x] CI successfully passed
kirillzyusko · Aug 17, 2023 · b8f1240 · b8f1240
1 parent e34cbad
commit b8f1240
Show file tree

Hide file tree

Showing 12 changed files with 128 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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<ExamplesStackParamList>();
@@ -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]}
     />
+    <Stack.Screen
+      name={ScreenNames.NATIVE_STACK}
+      component={NativeStack}
+      options={options[ScreenNames.NATIVE_STACK]}
+    />
   </Stack.Navigator>
 );
 

diff --git a/FabricExample/src/navigation/NestedStack/index.tsx 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<NativeStackParamList>();
+
+const options: Record<string, NativeStackNavigationOptions> = {
+  [ScreenNames.NATIVE_STACK]: {
+    headerShown: false,
+    statusBarTranslucent: true,
+  },
+};
+
+const NativeStack = () => (
+  <Stack.Navigator initialRouteName={ScreenNames.NATIVE_STACK}>
+    <Stack.Screen
+      name={ScreenNames.NATIVE_STACK}
+      component={KeyboardAnimation}
+      options={options[ScreenNames.NATIVE_STACK]}
+    />
+  </Stack.Navigator>
+);
+
+export default NativeStack;
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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<ExamplesStackParamList>();
@@ -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]}
     />
+    <Stack.Screen
+      name={ScreenNames.NATIVE_STACK}
+      component={NativeStack}
+      options={options[ScreenNames.NATIVE_STACK]}
+    />
   </Stack.Navigator>
 );
 

diff --git a/example/src/navigation/NestedStack/index.tsx 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<NativeStackParamList>();
+
+const options: Record<string, NativeStackNavigationOptions> = {
+  [ScreenNames.NATIVE_STACK]: {
+    headerShown: false,
+    statusBarTranslucent: true,
+  },
+};
+
+const NativeStack = () => (
+  <Stack.Navigator initialRouteName={ScreenNames.NATIVE_STACK}>
+    <Stack.Screen
+      name={ScreenNames.NATIVE_STACK}
+      component={KeyboardAnimation}
+      options={options[ScreenNames.NATIVE_STACK]}
+    />
+  </Stack.Navigator>
+);
+
+export default NativeStack;
diff --git 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
@@ -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"