Issue opening modals on Android

The router is working great for my app thus far. I have quite a few screens (considering the form factor) and its great to have a standard and predictable routing solutions across the screens.

But i seem to have a problem whenever i attempt to show a Modal with my app crashing if the modal has a new navigation handler embedded in it. While my actual implementation is a lot more complicated, i attempted a much simpler example (content taken from #262) in an attempt to reproduce it without any overhead.

The app does crash with this as well:

const modalNavigator = new StateNavigator([
  { key: 'settings' },
  { key: 'details', trackCrumbTrail: true }
]);

modalNavigator.navigate('settings');

const { settings, details } = modalNavigator.states;

settings.renderScene = () => (
  <NavigationContext.Consumer>
    {({ stateNavigator }) => (
      <TouchableHighlight
        style={{ flex: 1 }}
        onPress={() => {
          stateNavigator.navigate('details');
        }}>
          <Text>
          Detail
          </Text>
      </TouchableHighlight>
    )}
  </NavigationContext.Consumer>
);

details.renderScene = () => {
  return (<View style={{ flex: 1 }}>
    <Text>  
      Details 
    </Text>
  </View>)
}

const App: React.FunctionComponent = () => {
  const [showModal, setShowModal] = useState(false);
  const _modalClosed = () => {
    setShowModal(false)
  }
  return (<View style={{ flex: 1 }}>
    <Text onPress={()=>setShowModal(true)}>
      Open Modal
    </Text>
    <View>
    <Modal visible={showModal} onRequestClose={_modalClosed}>
      <NavigationHandler stateNavigator={modalNavigator}>
        <NavigationStack />
      </NavigationHandler>
      
</Modal>
</View>
  </View>)
}

export default App;

If i remove the NavigationHandler block, it doesn’t crash anymore.

I am on v6.4.1.

I have bottom tabs (JS tabs from a single stateNavigator) that then opens top tabs(Navigator tabs). Inside the top tabs i have a few instances where i need a more focussed interface - mostly wizard-like flows. I want to open these scenes ‘out’ of the top tabs (visually) and present them as standard screens with only perhaps a header i.e no bottom and top tabs. Once the focussed tasks are done (across a few scenes) i intend to return the users back to where they started out with.

There is no straight forward way to do it currently on the router, or at least i haven’t found any yet. The alternate option is the Modal approach which was what i was trying until i came across the issue.

[grahammendick]

Don’t forget to set primary={false} on the modal stack.

[grahammendick]

Glad to hear it’s working great for you!

The technique in #262 only works on iOS. It doesn’t work on Android because the React Native Modal doesn’t support Fragments.

We could write our own Modal component that does support Fragments. But I don’t think it’s worth it because we’d still run up against the React Native Gesture Handler Modal bug.

A better solution for Android is to create your own subflow using a standard View containing a new NavigationStack. (For iOS, you should stick with the React Native Modal)

const App: React.FunctionComponent = () => {
  const [showModal, setShowModal] = useState(false);
  return (<View style={{flex: 1}}>
    <Text onPress={()=> setShowModal(true)}>
      Open Modal
    </Text>
    {showModal && <View style={{position: 'absolute', top: 20, bottom: 20, left: 20, right: 20}}>
        <NavigationHandler stateNavigator={modalNavigator}>
          <NavigationStack />
        </NavigationHandler>
      </View>}
  </View>)
}