diff --git a/TestsExample/App.js b/TestsExample/App.js index cdd5348eb0..6740a81b81 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,7 @@ enableFreeze(true); export default function App() { return ( - + ); } diff --git a/TestsExample/package.json b/TestsExample/package.json index 08a33722c8..05dcdeb73e 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": "2.9.1", "react-native-safe-area-context": "^4.0.1-rc.5", 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..319c12d3da --- /dev/null +++ b/TestsExample/src/test-modal-presentation/modals/ModalA.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { Button, Text, View } 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, +