White screen background color in React Native


In React Native we can use backgroundColor property of stylesheet to change the screen color to white, black, yellow etc. React Native beginners makes mistake by using background property instead of backgroundColor. This works in React and HTML but not in React native. The hex code for white color is #FFFFFF or #FFF. In this article we will create white screen background color in React Native.

Code Example

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

function App() {
  return (
    <View style={styles.app}>
      <Text>Background color is white</Text>
      <Button title={'This is button'} />

const styles = StyleSheet.create({
  app: {
    backgroundColor: 'white'


export default App;

In this code we have created a View and put Text and Button as children. The outer View is decorated with style from styles.app. There is only 1 property in style and that is backgroundColor. For now we set it to white but you can use any color like red, yellow or even any hex code.

    Tweet this to help others

Live Demo

Sign Up for Our Newsletters

Get only the best articles delivered to your mail

You May Also Like

React convert JSON to CSV

React convert JSON to CSV using JSONToCSVConvertor function. Suppose you have a table (GUI react table tool) and you want to export it into excel, then this function will come…
View Post

How to check react version?

Table of Contents Hide Check react version through command lineCheck version programmaticallyLive DemoRelated Posts: It is important to know how to check react version in order to keep the libraries…
View Post