CODEWITHSUNDEEP
react-nativereact-navigation
cseelus
cseelus

Reputation: 1669

Change Navigator backgroundColor globally

The default Navigator and with this the App background is some light gray, around #e4e3eb.

Can I change this via the Navigator configuration (I use a StackNavigator)?

Note: I don't want to change the header backgroundColor, already did that via headerStyle.

Is there a comprehensive

Upvotes: 6

Views: 8458

Answers (3)

Telmo Dias
Telmo Dias

Reputation: 4168

For create-react-native-app TypeScript version, the cardStyle would go into the options of the screen item. Below is an example for a product page :

(...)
const ProductsStack = createStackNavigator<TabOneParamList>();

function TabOneNavigator() {
  return (
    <ProductsStack.Navigator>
      <ProductsStack.Screen
        name="ProductsScreen"
        component={ProductsScreen}
        options={{
          cardStyle: {
            backgroundColor: 'white',
          }
        }}
      />
    </ProductsStack.Navigator>
  );
}
(...)

Upvotes: 3

AleM
AleM

Reputation: 297

you can use defaultNavigationOptions instead of navigationOptions :

const globalNavigator = createStackNavigator(
{
    screen1: screen1,
    screen2: screen2,
}, 
{
    defaultNavigationOptions: () => ({
        cardStyle: {
            backgroundColor: "rgba(0,0,0,0.5)",
        },
    }),
    headerMode: "none",
})

Upvotes: 9

Mike M
Mike M

Reputation: 4436

Kind of late to the question, but yes, you can change the background of the Stack Navigator card using the cardStyle option attribute.

const HomeStack = createStackNavigator( {
  s1: {screen:screen1},
  s2: {screen:screen2},
  s3: {screen:screen3},
  s4: {screen:screen4},
},{
    navigationOptions: {
      headerStyle:{backgroundColor:'#FFFF00'},
      headerTintColor:'white',
      gesturesEnabled:false
    },
    cardStyle: {
      backgroundColor: 'white'
    }
  }
);

Upvotes: 13

Related Questions