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.

Answer 2

Since you want 'Modal', you can use 'Modal' built in react-native.

https://facebook.github.io/react-native/docs/modal.html

Answer 3

this way worked for me:

const MyDrawerNavigator = createStackNavigator(
    {
        screen1: {
            screen: screen1,
        },
        screen2: {
            screen: screen2,
        },
    },
    {
        navigationOptions: () => ({
            cardStyle: {
                backgroundColor: "rgba(0,0,0,0.5)",
            },
        }),
    }

);

Answer 4

This was really changed in latest React Navigation versions. See

https://reactnavigation.org/docs/themes/

For example

import * as React from 'react';
import { NavigationContainer, DefaultTheme } from '@react-navigation/native';

const MyTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    background: 'red'
  },
};

export default function App() {
  return (
    <NavigationContainer theme={MyTheme}>{/* content */}</NavigationContainer>
  );
}

Answer 5

With react-navigation v3.x You can use the transparentCard pro:

const MainNavigator = createStackNavigator(
  {
    BottomTabs: {
      screen: BottomTabsStack,
    },
    Modal: {
      screen: ModalScreen,
    }
  },
  {
    headerMode: 'none',
    mode: 'modal',
    transparentCard: true,
    cardStyle: { opacity: 1 } //This prop is necessary for eventually issue.
  }
);

You can find a complete example below:

https://snack.expo.io/@cristiankmb/stacks-in-tabs-with-header-options-with-modal

Answer 6

Add opacity:

cardStyle: {
  backgroundColor: "transparent",
  opacity: 1
}