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

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