CODEWITHSUNDEEP
react-nativereact-native-navigation
Leem.fin
Leem.fin

Reputation: 42622

Change the default light grey background color

By default, every screen I created in react-native project use a very light grey color as its background color. As you see here:

enter image description here

I wonder instead of I set backgroundColor for each screen of my project, is there a global place in react-native project that I can set the backgroundColor once for all screens in my project? For example, I would like all my screens use blue color as background color.

Upvotes: 8

Views: 14292

Answers (3)

nirmal
nirmal

Reputation: 2180

in stack navigator you can change it with

<Stack.Navigator screenOptions={{ contentStyle: {backgroundColor: '#f6f6f6f'}}}>

note: #f6f6f6f is colour code of red colour you can change it as per your requirement, below is extra code snippets in case

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <>
      <StatusBar style='auto' />
      <NavigationContainer>
        <Stack.Navigator screenOptions={{ contentStyle: {backgroundColor: '#f6f6f6f'}}}>
          <Stack.Screen name="List Page" component={ListPage} />
          <Stack.Screen name="List Page 2" component={ListPage} />
        </Stack.Navigator>
      </NavigationContainer>
    </>
  );
}

Upvotes: 3

Guruparan Giritharan
Guruparan Giritharan

Reputation: 16334

As you are already using react-navigation it has a theme provider which you can provide a custom theme, the code would be like below,

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

const MyTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    primary: 'rgb(255, 45, 85)',
    background:'red'
  },
};

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

You can have a look the documentation for more information

Upvotes: 18

Champion
Champion

Reputation: 774

I prefer to use react-native-global-props: https://www.npmjs.com/package/react-native-global-props Very simple: Install, Import and Declare.

import { setCustomText } from 'react-native-global-props';

Declare it in your highest order component.

const customViewProps = {
  style: {
    backgroundColor: '#d3d3d3' // light gray
  }
};

setCustomView(customViewProps);

Now it's for all View in your app.

Upvotes: 0

Related Questions