From 7cdf678c50be0ddd419e28b7b97aa88eda109116 Mon Sep 17 00:00:00 2001 From: hurali97 Date: Wed, 6 Jul 2022 01:41:27 +0500 Subject: [PATCH 1/6] chore: added dependencies required to run test example --- TestsExample/ios/Podfile.lock | 4 ++-- TestsExample/package.json | 3 ++- TestsExample/yarn.lock | 13 +++++++++++++ 3 files changed, 17 insertions(+), 3 deletions(-) diff --git a/TestsExample/ios/Podfile.lock b/TestsExample/ios/Podfile.lock index f825da7733..e3fabfc462 100644 --- a/TestsExample/ios/Podfile.lock +++ b/TestsExample/ios/Podfile.lock @@ -385,7 +385,7 @@ PODS: - React-RCTText - ReactCommon/turbomodule/core - Yoga - - RNScreens (3.13.1): + - RNScreens (3.14.1): - React-Core - React-RCTImage - SocketRocket (0.6.0) @@ -595,7 +595,7 @@ SPEC CHECKSUMS: ReactCommon: 74a3b8ee497c6d50ce86ef57e15c4c5bf654b83d RNGestureHandler: bad495418bcbd3ab47017a38d93d290ebd406f50 RNReanimated: 89886d02e4748077c0dd3c645286b15a9bca097b - RNScreens: d50711364166e9ab83230898b64f09dcd6e0a4f1 + RNScreens: aa9a97835afbbdc18a4757870b2b59b7d9fae16a SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608 Yoga: 4935173923cabaa830e195be3e8e4cac045a8f90 YogaKit: f782866e155069a2cca2517aafea43200b01fd5a diff --git a/TestsExample/package.json b/TestsExample/package.json index a40059bc84..bd07630b69 100644 --- a/TestsExample/package.json +++ b/TestsExample/package.json @@ -14,11 +14,12 @@ "@react-navigation/bottom-tabs": "^6.3.1", "@react-navigation/drawer": "^6.4.1", "@react-navigation/native": "^6.0.10", + "@react-navigation/native-stack": "^6.7.0", "@react-navigation/stack": "^6.2.1", "nanoid": "^3.2.0", + "postinstall-postinstall": "^2.1.0", "react": "18.0.0", "react-native": "0.69.0", - "postinstall-postinstall": "^2.1.0", "react-native-gesture-handler": "^2.5.0", "react-native-reanimated": "3.0.0-rc.0", "react-native-safe-area-context": "^4.0.1-rc.5", diff --git a/TestsExample/yarn.lock b/TestsExample/yarn.lock index 23c35ef9d2..912e76e113 100644 --- a/TestsExample/yarn.lock +++ b/TestsExample/yarn.lock @@ -1368,6 +1368,19 @@ resolved "https://registry.yarnpkg.com/@react-navigation/elements/-/elements-1.3.3.tgz#9f56b650a9a1a8263a271628be7342c8121d1788" integrity sha512-Lv2lR7si5gNME8dRsqz57d54m4FJtrwHRjNQLOyQO546ZxO+g864cSvoLC6hQedQU0+IJnPTsZiEI2hHqfpEpw== +"@react-navigation/elements@^1.3.4": + version "1.3.4" + resolved "https://registry.yarnpkg.com/@react-navigation/elements/-/elements-1.3.4.tgz#abb48136508c1e60862dc14a101ce02ff685a337" + integrity sha512-O0jICpjn3jskVo4yiWzZozmj7DZy1ZBbn3O7dbenuUjZSj/cscjwaapmZZFGcI/IMmjmx8UTKsybhCFEIbGf3g== + +"@react-navigation/native-stack@^6.7.0": + version "6.7.0" + resolved "https://registry.yarnpkg.com/@react-navigation/native-stack/-/native-stack-6.7.0.tgz#57e6390e3e4e46b3a7f580810c3d384b4676b7e5" + integrity sha512-03CuSwbBvP9+iXgjrTRRw+aog+KZXbhPzqCWVExzIWNOzf5/PJEcdtlm9KDrx2aHHDtDA6LRLKQA4UIlJOmNzA== + dependencies: + "@react-navigation/elements" "^1.3.4" + warn-once "^0.1.0" + "@react-navigation/native@^6.0.10": version "6.0.10" resolved "https://registry.yarnpkg.com/@react-navigation/native/-/native-6.0.10.tgz#c58aa176eb0e63f3641c83a65c509faf253e4385" From 00f7d253b5f80bfea0532090a39f8f5bc31cc9f7 Mon Sep 17 00:00:00 2001 From: hurali97 Date: Wed, 6 Jul 2022 01:42:13 +0500 Subject: [PATCH 2/6] test: added code to repro and see the fixed issue --- TestsExample/App.js | 4 +++- .../test-modal-presentation/ModalGroup.tsx | 9 ++++++++ .../test-modal-presentation/ScreenGroup.tsx | 11 ++++++++++ .../test-modal-presentation/StackBuilder.tsx | 16 ++++++++++++++ .../src/test-modal-presentation/index.tsx | 19 +++++++++++++++++ .../test-modal-presentation/modals/ModalA.tsx | 21 +++++++++++++++++++ .../test-modal-presentation/modals/index.tsx | 9 ++++++++ .../screens/ScreenA.tsx | 15 +++++++++++++ .../screens/ScreenB.tsx | 16 ++++++++++++++ .../test-modal-presentation/screens/index.tsx | 12 +++++++++++ 10 files changed, 131 insertions(+), 1 deletion(-) create mode 100644 TestsExample/src/test-modal-presentation/ModalGroup.tsx create mode 100644 TestsExample/src/test-modal-presentation/ScreenGroup.tsx create mode 100644 TestsExample/src/test-modal-presentation/StackBuilder.tsx create mode 100644 TestsExample/src/test-modal-presentation/index.tsx create mode 100644 TestsExample/src/test-modal-presentation/modals/ModalA.tsx create mode 100644 TestsExample/src/test-modal-presentation/modals/index.tsx create mode 100644 TestsExample/src/test-modal-presentation/screens/ScreenA.tsx create mode 100644 TestsExample/src/test-modal-presentation/screens/ScreenB.tsx create mode 100644 TestsExample/src/test-modal-presentation/screens/index.tsx diff --git a/TestsExample/App.js b/TestsExample/App.js index cdd5348eb0..8974667d86 100644 --- a/TestsExample/App.js +++ b/TestsExample/App.js @@ -4,6 +4,7 @@ import React from 'react'; import {enableFreeze} from 'react-native-screens'; import {ReanimatedScreenProvider} from 'react-native-screens/reanimated'; +import TestModalPresentation from './src/test-modal-presentation'; import Test42 from './src/Test42'; import Test111 from './src/Test111'; import Test263 from './src/Test263'; @@ -84,7 +85,8 @@ enableFreeze(true); export default function App() { return ( - + {/* */} + ); } diff --git a/TestsExample/src/test-modal-presentation/ModalGroup.tsx b/TestsExample/src/test-modal-presentation/ModalGroup.tsx new file mode 100644 index 0000000000..989d5c8447 --- /dev/null +++ b/TestsExample/src/test-modal-presentation/ModalGroup.tsx @@ -0,0 +1,9 @@ +import StackBuilder from './StackBuilder'; +import Modals from './modals'; + + +export default StackBuilder(Modals, { + headerShown: false, + animation: 'fade_from_bottom', + presentation: 'containedTransparentModal', +}); diff --git a/TestsExample/src/test-modal-presentation/ScreenGroup.tsx b/TestsExample/src/test-modal-presentation/ScreenGroup.tsx new file mode 100644 index 0000000000..9f747014c7 --- /dev/null +++ b/TestsExample/src/test-modal-presentation/ScreenGroup.tsx @@ -0,0 +1,11 @@ +import StackBuilder from './StackBuilder'; +import Screens from './screens'; + + +export default StackBuilder(Screens, { + headerShadowVisible: false, + headerTintColor: 'black', + headerBackTitleVisible: false, + fullScreenGestureEnabled: true, + contentStyle: { backgroundColor: 'white' }, +}); diff --git a/TestsExample/src/test-modal-presentation/StackBuilder.tsx b/TestsExample/src/test-modal-presentation/StackBuilder.tsx new file mode 100644 index 0000000000..df0497c1e6 --- /dev/null +++ b/TestsExample/src/test-modal-presentation/StackBuilder.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { createNativeStackNavigator, NativeStackNavigationOptions } from '@react-navigation/native-stack'; + +export const NativeStack = createNativeStackNavigator(); + +export default (configs: any, groupOptions?: NativeStackNavigationOptions) => { + return () => ( + + {configs.map(config => { + const { options, ...anyConfig } = config; + const { statusBarStyle, statusBarAnimation, statusBarHidden, ...anyOption } = options || {}; + return ; + })} + + ); +}; diff --git a/TestsExample/src/test-modal-presentation/index.tsx b/TestsExample/src/test-modal-presentation/index.tsx new file mode 100644 index 0000000000..274a333029 --- /dev/null +++ b/TestsExample/src/test-modal-presentation/index.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { + NavigationContainer as NavigationContainerNative, +} from '@react-navigation/native'; + +import ModalGroup from './ModalGroup'; +import ScreenGroup from './ScreenGroup'; +import { NativeStack } from './StackBuilder'; + +export default function TestModalPresentation() { + return ( + + + {ScreenGroup()} + {ModalGroup()} + + + ); +} diff --git a/TestsExample/src/test-modal-presentation/modals/ModalA.tsx b/TestsExample/src/test-modal-presentation/modals/ModalA.tsx new file mode 100644 index 0000000000..e50f408c7d --- /dev/null +++ b/TestsExample/src/test-modal-presentation/modals/ModalA.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import { Button, Text, View, StyleSheet } from 'react-native'; + +type Props = {}; + +export default function ModalA(props: Props) { + return ( + + + + ModalA, with opacity and backgroundColor + At ModalA, we still can gesture swipe the screenB back to screenA, +