React Navigation default background color

Question

I\'m using react-navigation and stack-navigator to manage my screens.

Platforms I\'m using:

• Android
• React Native: 0.47.1
• React Naviga

Answer 1

As of react-navigation@2.17.0 there is a config option transparentCard that makes this possible.

const RootNavigator = createStackNavigator(
  {
    App,
    YourModal,
  },
  {
    headerMode: 'none',
    mode: 'modal',
    transparentCard: true,
  },
);

This won't blur the background for you; it will just make it transparent. To properly blur it, you'll need to do something like this. Make sure you start the background way above the top edge of the screen, since the card will animate in from the bottom, and you probably want the screen to gradually blur instead of the opacity having a sharp edge as it animates in.