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.