WIP feat(Android): support modal stack presentation

TestsExample/App.js

@@ -99,5 +99,5 @@ import Test2008 from './src/Test2008';
 enableFreeze(true);
 
 export default function App() {
-  return <Test42 />;
+  return <Test1649 />;
 }

TestsExample/android/app/build.gradle

@@ -115,6 +115,8 @@ dependencies {
     } else {
         implementation jscFlavor
     }
+
+    implementation("com.google.android.material:material:1.9.0")
 }
 
 apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

TestsExample/android/app/src/main/res/values/styles.xml

@@ -1,9 +1,8 @@
 <resources>
 
     <!-- Base application theme. -->
-    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
+    <style name="AppTheme" parent="Theme.Material3.DayNight.NoActionBar">
         <!-- Customize your theme here. -->
         <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
     </style>
-
 </resources>

TestsExample/src/Test1649.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Button, StyleSheet, View, Text, ScrollView } from 'react-native';
+import { TouchableOpacity, GestureHandlerRootView, Gesture, TextInput } from 'react-native-gesture-handler';
 import { NavigationContainer, ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
@@ -13,48 +14,62 @@ const Stack = createNativeStackNavigator();
 export default function App(): JSX.Element {
   const initialScreenOptions: NativeStackNavigationOptions = {
     stackPresentation: 'formSheet',
-    sheetAllowedDetents: 'all',
-    sheetLargestUndimmedDetent: 'medium',
+    sheetAllowedDetents: [0.45, 0.86],
+    sheetLargestUndimmedDetent: 0,
     sheetGrabberVisible: false,
-    sheetCornerRadius: -1,
-    sheetExpandsWhenScrolledToEdge: true,
+    sheetCornerRadius: 20,
+    sheetExpandsWhenScrolledToEdge: false,
   };
 
   return (
-    <NavigationContainer>
-      <Stack.Navigator
-        screenOptions={{
-          // headerRight: () => <View style={styles.headerView} />,
-          headerTitleStyle: {
-            color: 'cyan',
-          },
-          headerShown: true,
-          headerHideBackButton: false,
-        }}>
-        <Stack.Screen name="First" component={First} />
-        <Stack.Screen
-          name="Second"
-          component={Second}
-          options={{
-            fullScreenSwipeEnabled: true,
-          }}
-        />
-        <Stack.Screen
-          name="SheetScreen"
-          component={SheetScreen}
-          options={{
-            ...initialScreenOptions,
-          }}
-        />
-        <Stack.Screen
-          name="SheetScreenWithScrollView"
-          component={SheetScreenWithScrollView}
-          options={{
-            ...initialScreenOptions,
-          }}
-        />
-      </Stack.Navigator>
-    </NavigationContainer>
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <NavigationContainer>
+        <Stack.Navigator
+          screenOptions={{
+            // headerRight: () => <View style={styles.headerView} />,
+            headerTitleStyle: {
+              color: 'cyan',
+            },
+            headerShown: true,
+            headerHideBackButton: false,
+          }}>
+          <Stack.Screen name="First" component={First} />
+          <Stack.Screen
+            name="Second"
+            component={Second}
+            options={{
+              // stackPresentation: 'modal',
+              fullScreenSwipeEnabled: true,
+            }}
+          />
+          <Stack.Screen
+            name="SheetScreen"
+            component={SheetScreen}
+            options={{
+              // stackAnimation: 'slide_from_bottom',
+              stackAnimation: 'none',
+              stackPresentation: 'formSheet',
+              ...initialScreenOptions,
+            }}
+          />
+          <Stack.Screen
+            name="SheetScreenWithScrollView"
+            component={SheetScreenWithScrollView}
+            options={{
+              ...initialScreenOptions,
+            }}
+          />
+          <Stack.Screen
+            name="Third"
+            component={Third}
+            options={{
+              // stackPresentation: 'modal',
+              fullScreenSwipeEnabled: true,
+            }}
+          />
+        </Stack.Navigator>
+      </NavigationContainer>
+    </GestureHandlerRootView>
   );
 }
 
@@ -76,8 +91,13 @@ function Second({
 }: {
   navigation: NativeStackNavigationProp<ParamListBase>;
 }) {
+  const navigateToFirstCallback = () => {
+    console.log('Navigate to first callback called');
+    navigation.navigate('First');
+  };
+
   return (
-    <>
+    <View style={{backgroundColor: 'orchid', flex: 1}}>
       <Button
         title="Open the sheet"
         onPress={() => navigation.navigate('SheetScreen')}
@@ -86,7 +106,43 @@ function Second({
         title="Open the sheet with ScrollView"
         onPress={() => navigation.navigate('SheetScreenWithScrollView')}
       />
-    </>
+      <Button
+        title="Go back to first screen"
+        onPress={navigateToFirstCallback}
+      />
+      <TouchableOpacity onPress={() => console.log('GH Button clicked')}>
+        <Text>GH BUTTON</Text>
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+function Third({
+  navigation,
+}: {
+  navigation: NativeStackNavigationProp<ParamListBase>;
+}) {
+  const navigateToSecondCallback = () => {
+    console.log('Navigate Back');
+    navigation.goBack();
+    navigation.navigate('Second');
+  };
+
+  return (
+    <View>
+      <Button
+        title="Open the sheet"
+        onPress={() => navigation.navigate('SheetScreen')}
+      />
+      <Button
+        title="Open the sheet with ScrollView"
+        onPress={() => navigation.navigate('SheetScreenWithScrollView')}
+      />
+      <Button
+        title="Go back to second screen"
+        onPress={navigateToSecondCallback}
+      />
+    </View>
   );
 }
 
@@ -116,8 +172,20 @@ function SheetScreen({
     }
   }
 
+  const ref = React.useRef(null);
+
   return (
-    <View style={styles.centeredView}>
+    <View style={[styles.containerView, { backgroundColor: 'firebrick' }]}>
+      <TextInput
+        style={{
+          backgroundColor: 'lightblue',
+          paddingHorizontal: 5,
+          margin: 5,
+          borderRadius: 5,
+        }}
+        value={'hello'}
+        ref={ref}
+      />
       <Button
         title="Tap me for the first screen"
         onPress={() => navigation.navigate('First')}
@@ -126,6 +194,13 @@ function SheetScreen({
         title="Tap me for the second screen"
         onPress={() => navigation.navigate('Second')}
       />
+      <Button
+        title="Tap me for the third screen / blur"
+        onPress={() => {
+          // navigation.goBack();
+          navigation.navigate('Third');
+        }}
+      />
       <Button
         title="Change the corner radius"
         onPress={() => {
@@ -192,7 +267,7 @@ function SheetScreenWithScrollView({
   return (
     <>
       <View style={styles.centeredView}>
-        <ScrollView>
+        <ScrollView nestedScrollEnabled={true}>
           <SheetScreen navigation={navigation} />
           {[...Array(40).keys()].map(val => (
             <Text key={`${val}`}>Some component {val}</Text>
@@ -207,7 +282,10 @@ const styles = StyleSheet.create({
   headerView: {
     height: 20,
     width: 20,
-    backgroundColor: 'red',
+    // backgroundColor: 'red',
+  },
+  containerView: {
+    flex: 1,
   },
   centeredView: {
     justifyContent: 'center',

android/build.gradle

@@ -146,8 +146,8 @@ repositories {
 
 dependencies {
     implementation 'com.facebook.react:react-native:+'
-    implementation 'androidx.appcompat:appcompat:1.5.0'
-    implementation 'androidx.fragment:fragment:1.3.6'
+    implementation 'androidx.appcompat:appcompat:1.6.1'
+    implementation 'androidx.fragment:fragment-ktx:1.6.1'
     implementation 'androidx.coordinatorlayout:coordinatorlayout:1.2.0'
     implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0'
     implementation 'com.google.android.material:material:1.9.0'