CODEWITHSUNDEEP
javascriptandroidreact-nativereact-navigationstack-navigator
Facundo La Rocca
Facundo La Rocca

Reputation: 3866

React Navigation default background color

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

Platforms I'm using:

I have a screen, which acts as a modal form but it is really a full screen. Why is it important the part of "acts as a modal form"? That's because it is kind of modal menu with some options and WITH A TRANSPARENT BACKGROUND COLOR.

This is what I expect:

enter image description here

But what I'm getting is this:

enter image description here

As you can see, in the second example the background color is completely replaced or the components previously loaded is unmounted so the effect I want to acchieve is lost. The idea is to be able to navigate to this screen like any other screen.

If it is not posible to accomplish using react-navigation, what other way can I take to do so?

This component executes actions (redux) since is a cross app component and encapsulates lot of mechanisms and logic inside, that's why I can't use it as a PureComponent relaying on the component which makes use of this one. At least, making this Component as PureComponent would force me to replicate many mechanisms and logic in many other components.

For the sake of the question, and to avoid making the question enormous, both screens have exactly the same style, but the one pushed through StackNavigation replaces the backgroundColor, or unmounts the previus screen.

This is what I've have so far:

//PlaylistSelector.js
render() {
  //Just a full size empty screen to check and avoid bugs
  //Using red instead of transparent, works

  return (
    <View style={{ flex: 1, backgroundColor: 'transparent' }}>
    </View>
  );
}

//Navigator.js
import { StackNavigator } from 'react-navigation';

import Album from './Album'; //This is the screen I expect to keep at the background
import PlaylistSelector from './PlaylistSelector';

const AppNavigator = StackNavigator(
    {
        ...moreScreens,
        Album: { screen: Album },
        PlaylistSelector: {
            screen: PlaylistSelector,
            navigationOptions: {
                style: { backgroundColor: 'red' } //Does not work, red is just to ilustrate, should be transparent,
                cardStyle: { //Does not work,
                    backgroundColor: 'transparent',
                },
                bodyStyle: { //Does not work,
                    backgroundColor: 'transparent',
                },
            }
        }
    },
    {
        initialRouteName: 'Splash',
        headerMode: 'none',
        cardStyle: { //Does not work
            backgroundColor: 'transparent',
        },
        transitionConfig: (): Object => ({ //Does not work
            containerStyle: {
                backgroundColor: 'transparent',
            },
        }),
    }
);

export default AppNavigator;

Upvotes: 34

Views: 88866

Answers (9)

Nguyễn Văn Đ&#236;nh
Nguyễn Văn Đ&#236;nh

Reputation: 1

 options={{
           gestureEnabled: false,
           animation: 'fade',
           animationDuration: 300,
           presentation: 'transparentModal',
         }}

"@react-navigation/native": "6.1.3", "@react-navigation/native-stack": "6.9.12",

Use presentation: 'transparentModal' It works for me.

Upvotes: 0

Abhith Shaji
Abhith Shaji

Reputation: 639

You can do this by setting the 'contentStyle' property inside 'options' with your preferred color . For example see this -

<NavigationContainer >
  <Stack.Navigator>
    <Stack.Screen
      name="Home"
      component={HomeScreen}
      options={{ contentStyle:{backgroundColor: "white",} }}
    />

The above code sets the background color of the screen to "white".

Upvotes: 2

liamirali
liamirali

Reputation: 557

There's a solution in react-navigation v6.x

Setting cardStyle: {backgroundColor: 'transparent'} on screenOptions prop for the Stack Navigator didn't work for me.

But, with the help of this Github issue page, I found a solution that sets a default background color for our NavigatorContainer:

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

...

const navTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    background: 'transparent',
  },
};

...

return (
    <NavigationContainer
      theme={navTheme}
...

There we can change 'transparent' to anything we want.

Upvotes: 24

Sascha Reuter
Sascha Reuter

Reputation: 365

Just throwing what seem most straight forward to me, e.g. setting a headerBackground on screenOptions:

    <Stack.Navigator
      headerMode={"float"}
      screenOptions={{
        headerBackground: () => <View style={{flex: 1, backgroundColor: themeContext.background}} />,
        backgroundColor: themeContext.background
      }}
    >

This doesn't work with transparent headers tho, which might actually be what lead you here in the first place. In that case simply wrap your whole app container into a View like this.

export default function App() {
  return (
    <View style={{flex: 1, backgroundColor: 'red'}}>
      <NavigationContainer linking={linkingConfig}>
        <StatusBar />
        <ApolloProvider client={client}>
          <Provider store={store}>
            <Navigator />
          </Provider>
        </ApolloProvider>
      </NavigationContainer>
    </View>
  )
}

Obviously you want to extract that into it's own (styled) component instead :)

And if you're using Expo, and don't have a seperate dark theme, you can simply set backgroundColor in your app.json.

Upvotes: 1

AleM
AleM

Reputation: 297

this way worked for me:

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

);

Upvotes: 0

Mugen
Mugen

Reputation: 9095

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>
  );
}

Upvotes: 104

Cristian Mora
Cristian Mora

Reputation: 1871

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

Upvotes: 6

Ashoat
Ashoat

Reputation: 529

As of [email protected] 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.

Upvotes: 0

Yammi
Yammi

Reputation: 71

Add opacity:

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

Upvotes: 2

Related Questions