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.

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

Comments

About the Author

akamit

I am Akash Mittal, an overall computer scientist. If you want to guest post, need help in your projects, want to advertise, Feel free to contact me at [email protected]

View All Articles