Change the default light grey background color

Question

By default, every screen I created in react-native project use a very light grey color as its background color. As you see 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.

score 17 · Accepted Answer · answered Jul 29 '20 at 18:28

17

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

answered Jul 29 '20 at 18:28

Guruparan Giritharan

15,660
4
27
50

1

What is the effect of that `primary` if `background` is `red`? – Leem.fin Jul 29 '20 at 19:35
And now, there is a grey line between my header and screen component, how to remove that grey line? – Leem.fin Jul 29 '20 at 19:37
Sorry that was part of the sample, you can remove that actually – Guruparan Giritharan Jul 29 '20 at 19:38
@Leem.fin for the grey line you have to provide the border color just like background border:'red' or any other color you like – Guruparan Giritharan Jul 29 '20 at 19:42
Hi, I just realize the android still shows that grey line, it is only solved in iOS. Any idea? – Leem.fin Jul 29 '20 at 19:57
Hey, I couldnt find anything specific to ios in the docs :( – Guruparan Giritharan Jul 30 '20 at 03:50

score 2 · Answer 2 · answered Jul 22 '22 at 09:07

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

score 0 · Answer 3 · answered Jul 29 '20 at 18:20

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.

Change the default light grey background color

3 Answers3

Linked