How can I render a fullscreen dialog from React Native code in a ReactFragment?

Question

I have some React Native code embedded in a native app running on iOS and Android. In both cases it's only taking up part of the screen, with the rest rendered natively. So there's a top section (native), a tab bar at the bottom (native) and a main section in the middle of the screen (native in most cases, but for one tab I'm now trying to render this using React Native - this is implemented using ReactFragment in Android and RCTRootView in a UIViewController in iOS).

Now I have a button in my React code that I'd like to bring up a full screen dialog over the native and React Native content. Most suggestions to use navigation as a way to handle this will only let me control the content within the fragment, but I need to make this full screen; to cover both the content RN is currently rendering and also the surrounding native elements.

Is there an existing mechanism for doing this, or am I going to have to start writing more custom native modules (to trigger navigation to a new full screen native dialog which can bring in React code)? Seems like a problem someone must have faced before...

Answer 1

Use React navigation to achieve this full screen dialog kind of view.

You can use this snack to create a full screen dialog over the native and React Native content.

import * as React from 'react';
import { View, Text, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text style={{ fontSize: 30 }}>This is the home screen!</Text>
      <Button
        onPress={() => navigation.navigate('MyModal')}
        title="Open Modal"
      />
    </View>
  );
}

function ModalScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text style={{ fontSize: 30 }}>This is a modal!</Text>
      <Button onPress={() => navigation.goBack()} title="Dismiss" />
    </View>
  );
}

function DetailsScreen() {
  return (
    <View>
      <Text>Details</Text>
    </View>
  );
}

const MainStack = createStackNavigator();
const RootStack = createStackNavigator();

function MainStackScreen() {
  return (
    <MainStack.Navigator>
      <MainStack.Screen name="Home" component={HomeScreen} />
      <MainStack.Screen name="Details" component={DetailsScreen} />
    </MainStack.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <RootStack.Navigator mode="modal" headerMode="none">
        <RootStack.Screen name="Main" component={MainStackScreen} />
        <RootStack.Screen name="MyModal" component={ModalScreen} />
      </RootStack.Navigator>
    </NavigationContainer>
  );
}

export default App;