fix(Android): disappearing content on modal pop

apps/App.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { enableFreeze } from 'react-native-screens';
-import Example from './Example';
-// import * as Test from './src/tests';
+//import Example from './Example';
+ import * as Test from './src/tests';
 
 enableFreeze(true);
 
 export default function App() {
-  return <Example />;
-  // return <Test.Test42 />;
+  //return <Example />;
+   return <Test.TestAndroidModal />;
 }

apps/src/tests/TestAndroidModal/index.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { HeaderButton, Text } from '@react-navigation/elements';
+import {
+  createStaticNavigation,
+  StaticParamList,
+} from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+//import { Image } from "react-native";
+import { Home } from './screens/Home';
+import { Profile } from './screens/Profile';
+import { Settings } from './screens/Settings';
+import { Updates } from './screens/Updates';
+import { NotFound } from './screens/NotFound';
+
+const HomeTabs = createBottomTabNavigator({
+  screens: {
+    Home: {
+      screen: Home,
+      options: {
+        title: 'Feed',
+      },
+    },
+    Updates: {
+      screen: Updates,
+      options: {
+      },
+    },
+  },
+});
+
+const RootStack = createNativeStackNavigator({
+  screens: {
+    HomeTabs: {
+      screen: HomeTabs,
+      options: {
+        title: 'Home',
+        headerShown: false,
+      },
+    },
+    Profile: {
+      screen: Profile,
+      linking: {
+        path: ':user(@[a-zA-Z0-9-_]+)',
+        parse: {
+          user: (value) => value.replace(/^@/, ''),
+        },
+        stringify: {
+          user: (value) => `@${value}`,
+        },
+      },
+    },
+    Settings: {
+      screen: Settings,
+      options: ({ navigation }) => ({
+        presentation: 'modal',
+        animation: 'slide_from_bottom',
+        headerShown: true,
+        headerRight: () => (
+          <HeaderButton onPress={navigation.goBack}>
+            <Text>Close</Text>
+          </HeaderButton>
+        ),
+      }),
+    },
+    NotFound: {
+      screen: NotFound,
+      options: {
+        title: '404',
+      },
+      linking: {
+        path: '*',
+      },
+    },
+  },
+});
+
+const Navigation = createStaticNavigation(RootStack);
+
+export default function App() {
+  return (
+    <Navigation
+      linking={{
+        enabled: 'auto',
+        prefixes: [
+          // Change the scheme to match your app's scheme defined in app.json
+          'helloworld://',
+        ],
+      }}
+    />
+  );
+}
+
+type RootStackParamList = StaticParamList<typeof RootStack>;
+
+declare global {
+  namespace ReactNavigation {
+    interface RootParamList extends RootStackParamList { }
+  }
+}

apps/src/tests/TestAndroidModal/screens/Home.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Button, Text } from '@react-navigation/elements';
+import { StyleSheet, View } from 'react-native';
+
+export function Home() {
+  return (
+    <View style={styles.container}>
+      <Text>Home Screen</Text>
+      <Text>Open up 'src/App.tsx' to start working on your app!</Text>
+      <Button screen="Profile" params={{ user: 'jane' }}>
+        Go to Profile
+      </Button>
+      <Button screen="Settings">Go to Settings</Button>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: 10,
+  },
+});

apps/src/tests/TestAndroidModal/screens/NotFound.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Text, Button } from '@react-navigation/elements';
+import { StyleSheet, View } from 'react-native';
+
+export function NotFound() {
+  return (
+    <View style={styles.container}>
+      <Text>404</Text>
+      <Button screen="HomeTabs">Go to Home</Button>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: 10,
+  },
+});

apps/src/tests/TestAndroidModal/screens/Profile.tsx

@@ -0,0 +1,25 @@
+import { Text } from '@react-navigation/elements';
+import { StaticScreenProps } from '@react-navigation/native';
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+type Props = StaticScreenProps<{
+  user: string;
+}>;
+
+export function Profile({ route }: Props) {
+  return (
+    <View style={styles.container}>
+      <Text>{route.params.user}'s Profile</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: 10,
+  },
+});

apps/src/tests/TestAndroidModal/screens/Settings.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Text } from '@react-navigation/elements';
+import { StyleSheet, View } from 'react-native';
+
+export function Settings() {
+  return (
+    <View style={styles.container}>
+      <Text>Settings Screen</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: 10,
+  },
+  row: {
+    flexDirection: 'row',
+    gap: 10,
+  },
+});

apps/src/tests/TestAndroidModal/screens/Updates.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Text } from '@react-navigation/elements';
+import { StyleSheet, View } from 'react-native';
+
+export function Updates() {
+  return (
+    <View style={styles.container}>
+      <Text>Updates Screen</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: 10,
+  },
+});

apps/src/tests/TestAndroidTransitions.tsx

@@ -1,15 +1,19 @@
-import { NavigationContainer, RouteProp } from "@react-navigation/native";
-import { NativeStackNavigationProp, createNativeStackNavigator } from "@react-navigation/native-stack";
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { NavigationContainer, RouteProp } from '@react-navigation/native';
+import { NativeStackNavigationProp, createNativeStackNavigator } from '@react-navigation/native-stack';
 // import { NativeStackNavigationProp, createNativeStackNavigator } from "react-native-screens/native-stack";
-import React from "react";
-import { Button, TextInput, View } from "react-native";
+import React from 'react';
+import { Button, TextInput, View } from 'react-native';
 
 type RouteParamList = {
   Home: undefined;
   Second: undefined;
   FormSheet: undefined;
   Modal: undefined;
   NestedStackHost: undefined;
+  TabsHost: undefined;
+  TabsHome: undefined;
+  TabsModal: undefined;
 }
 
 type RouteProps<RouteName extends keyof RouteParamList> = {
@@ -18,7 +22,7 @@ type RouteProps<RouteName extends keyof RouteParamList> = {
 }
 
 const Stack = createNativeStackNavigator<RouteParamList>();
-// const Stack = createNativeStackNavigator();
+const Tabs = createBottomTabNavigator<RouteParamList>();
 
 function Home({ navigation }: RouteProps<'Home'>): React.JSX.Element {
   return (
@@ -56,7 +60,7 @@ function FormSheet({ navigation }: RouteProps<'FormSheet'> | RouteProps<'Modal'>
         <Button title="Go back" onPress={() => navigation.goBack()} />
       </View>
       <View style={{ alignItems: 'center' }}>
-        <TextInput style={{ marginVertical: 12, paddingVertical: 8, backgroundColor: 'lavender', borderRadius: 24, width: '80%' }} placeholder="Trigger keyboard..."></TextInput>
+        <TextInput style={{ marginVertical: 12, paddingVertical: 8, backgroundColor: 'lavender', borderRadius: 24, width: '80%' }} placeholder="Trigger keyboard..." />
       </View>
     </View>
   );
@@ -69,18 +73,56 @@ function Modal({ navigation }: RouteProps<'Modal'>): React.JSX.Element {
         <Button title="Go back" onPress={() => navigation.goBack()} />
       </View>
       <View style={{ alignItems: 'center' }}>
-        <TextInput style={{ marginVertical: 12, paddingVertical: 8, backgroundColor: 'lavender', borderRadius: 24, width: '80%' }} placeholder="Trigger keyboard..."></TextInput>
+        <TextInput style={{ marginVertical: 12, paddingVertical: 8, backgroundColor: 'lavender', borderRadius: 24, width: '80%' }} placeholder="Trigger keyboard..." />
       </View>
     </View>
   );
 }
 
+function TabsHome({ navigation }: RouteProps<'TabsHome'>): React.JSX.Element {
+  return (
+    <View style={{ flex: 1, backgroundColor: 'lightsalmon', gap: 12 }}>
+      <View style={{ marginTop: 12 }}>
+        <View>
+          <Button title="Go Modal" onPress={() => navigation.navigate('Modal')} />
+        </View>
+      </View>
+    </View>
+  );
+}
+
+function TabsModal({ navigation }: RouteProps<'TabsModal'>): React.JSX.Element {
+  return (
+    <View style={{ flex: 1, backgroundColor: 'lightgreen' }}>
+      <View style={{ marginVertical: 12 }}>
+        <Button title="Go back" onPress={() => navigation.goBack()} />
+      </View>
+      <View style={{ alignItems: 'center' }}>
+        <TextInput style={{ marginVertical: 12, paddingVertical: 8, backgroundColor: 'lavender', borderRadius: 24, width: '80%' }} placeholder="Trigger keyboard..." />
+      </View>
+    </View>
+  );
+}
+
+
+function TabsHost(): React.JSX.Element {
+  return (
+    <Tabs.Navigator>
+      <Tabs.Screen name="TabsHome" component={TabsHome} />
+      <Tabs.Screen name="TabsModal" component={TabsModal} />
+    </Tabs.Navigator>
+  );
+}
+
 export default function App() {
   return (
     <NavigationContainer>
-      <Stack.Navigator screenOptions={{
-        statusBarTranslucent: false
+      <Stack.Navigator initialRouteName="TabsHost" screenOptions={{
+        statusBarTranslucent: false,
       }}>
+        <Stack.Screen name="TabsHost" component={TabsHost} options={{
+          headerShown: false,
+        }} />
         <Stack.Screen name="Home" component={Home} />
         <Stack.Screen name="Second" component={Second} options={{
           headerShown: false,
@@ -89,12 +131,13 @@ export default function App() {
           presentation: 'formSheet',
           sheetAllowedDetents: [0.5, 0.7],
           contentStyle: {
-            backgroundColor: 'lightgreen'
+            backgroundColor: 'lightgreen',
           },
         }} />
         <Stack.Screen name="Modal" component={Modal} options={{
           presentation: 'modal',
-          headerShown: false,
+          animation: 'slide_from_bottom',
+          headerShown: true,
         }} />
       </Stack.Navigator>
     </NavigationContainer>