How to get the default background colour in React Native?

Setting and customizing the background color in React Native is a core aspect of app design, impacting user perception and app aesthetics. By default, React Native provides a white background on both iOS and Android, but understanding why—and learning how to customize it globally or per-screen—empowers you as a developer to offer polished, branded UI experiences for your users.

In this blog, we’ll cover the default behavior, ways to override it with both JavaScript and native code, and how to set up custom themes that adapt to system settings like dark mode. If you’re looking to create high-quality apps or need to scale your React Native team, Elightwalk can provide expert developers to accelerate your project.

Understanding React Native’s Default Background Color

When you start a new React Native application, you might notice the app’s background is white. This is not by accident—React Native’s default background color is:

• iOS: White by default; on iOS 13+, it may use system background colors that respond to light and dark mode.
• Android: Also white by default, unless the color is overridden in your native code.

This would imply that when you do not specify the background color in your JavaScript, the application would display a white background by default. However, there are exceptions where a more explicit handling is required for such things as the splash screen, the navigation container, or when cleanup happens on the native side, rendering halfway.

How to Set the Background Color in React Native

1. Using JavaScript Styles

Set the background color explicitly using the style prop for your container View to ensure the same background across all devices and components:

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const App = () => (
  
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ffffff', // Set your preferred color here
  },
});
  

This will always build your screen background as white (or any color you assign to it), provided all the child components are properly styled or are themselves transparent.

2. Global Background via Navigation Themes

For React Navigation users, setting a global background for all the screens is as good as defining a custom theme:

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

const MyTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    background: '#ffffff', // Or your branded color
  },
};

export default function App() {
  return (
    
      {/* your navigators */}
    
  );
}
  

In this case, every screen within the navigator assumes the same background and can be easily switched between light and dark mode backgrounds.

3. Native Code Customization

In some instances, you may find flashes of an unintended background color, especially during the following sections of your app: app launches, splash screens, and transitions. If you want to have complete control, set the background color at the native level:

For iOS:

Open AppDelegate.m and find the line that initializes RCTRootView. Just below, insert:

rootView.backgroundColor = [UIColor whiteColor]; // Or a UIColor instance
  

For custom colors:

rootView.backgroundColor = [[UIColor alloc] initWithRed:0.01f green:0.75f blue:0.54f alpha:1];
  

For Android:

In MainActivity.java, after initializing your ReactRootView, add:

mReactRootView.setBackgroundColor(Color.parseColor("#ffffff")); // Or any hex color
  

These changes guarantee that before your JavaScript executes, the user sees your intended background color—not the platform default.

4. Handling Splash and Transition Flash Issues

Sometimes, users see a brief flash of the default background (or a residual splash screen image) when transitions happen. Native customization (as above) or using packages such as react-native-background-color for Android can help erase this effect by ensuring the color is set at the root view.

Adapting to Light and Dark Modes

Several modern applications tailor themselves to the device theme of the user. For example, React Native and other third-party libraries (like React Navigation) will help you create an app that can quickly switch from light and dark themes. Just put your colors into a theme object and change them based on the user preferences:

import { useColorScheme } from 'react-native';

const colors = {
  light: { background: '#fff' },
  dark: { background: '#000' },
};

const App = () => {
  const scheme = useColorScheme();
  const backgroundColor = scheme === 'dark' ? colors.dark.background : colors.light.background;
  return 

This helps ensure that your application looks visually consistent with the user's expectations and adds value in terms of accessibility.

Conclusion

Customizing your React Native app's background color is essential for delivering a polished user experience. Whether you're styling individual screens, setting up global navigation themes, or diving into native code for complete control, a deep understanding of these techniques enables you to create seamless, visually coherent apps.

If you want your next React Native project to launch smoothly—without color glitches or UI inconsistencies—consider partnering with top professionals.  Hire React Native developers from Elightwalk and leverage our expertise for faster, higher-quality results.