React Native Modal with transparent using Navigator without using Modal

Question

React Native documentation says RN apps should rather use Navigator to create Modals (https://facebook.github.io/react-native/docs/modal.html#content).

How can I create a transparent modal using Navigator, without using Modal? I'd like the user to see the current page in the background. Thank you.

Answer 1

To answer the updated question, all you need to do is change your configureScene to something like this:

configureScene(route, routeStack){
  if(route.type == 'Modal') {
    return Navigator.SceneConfigs.FloatFromBottom
  }
  return Navigator.SceneConfigs.PushFromRight 
}

Then, pass the type of 'Modal' when wanting a modal:

_navigate(name, type='Normal') {
  this.props.navigator.push({
    component: Home,
    passProps: {
      name: name
    },
    type: type
  })
}

There is an example set up here.

https://rnplay.org/apps/ALL-Sw