Menu
I'm using SafeAreaView from React Native 0.50.1 and it's working pretty good except for the one part. I assigned the orange background color to the SafrAreaView but can't figure out to change the bottom unsafe area background to black.
Here is the code and I included expected the result and actual result. What is the best way to make the bottom part of the screen black instead of orange?
import { ... SafeAreaView } from 'react-native'; class Main extends React.Component { render() { return ( <SafeAreaView style={styles.safeArea}> <App /> </SafeAreaView> ) } } const styles = StyleSheet.create({ ..., safeArea: { flex: 1, backgroundColor: '#FF5236' } })I want to have orange top and black bottom.
But below is what I get now.
547
No, you cannot change the background color of a webview, but you can use another view with your background color cover on your web view.
Conditional Changing the Background Color in Reactimport React from 'react'; import './App. css'; function App() { const isBackgroundRed = true; return ( <div className={isBackgroundRed ? 'background-red' : 'background-blue'} /> ); } export default App; JSX allows us to write JavaScript inside of HTML.
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.
I was able to solve this using a version of Yoshiki's and Zach Schneider's answers. Notice how you set the top SafeAreaView's flex:0 so it doesn't expand.
render() { return ( <Fragment> <SafeAreaView style={{ flex:0, backgroundColor: 'red' }} /> <SafeAreaView style={{ flex:1, backgroundColor: 'gray' }}> <View style={{ flex: 1, backgroundColor: 'white' }} /> </SafeAreaView> </Fragment> ); } 
171
I was able to solve this by using some absolute position hacking. See the following tweak. Not future proof by any means, but it solves the problem I had.
import { ... SafeAreaView, View } from 'react-native'; class Main extends React.Component { render() { return ( <SafeAreaView style={styles.safeArea}> <App /> <View style={styles.fixBackground} /> </SafeAreaView> ) } } const styles = StyleSheet.create({ ..., safeArea: { flex: 1, backgroundColor: '#FF5236' }, fixBackground: { backgroundColor: 'orange', position: 'absolute', bottom: 0, right: 0, left: 0, height: 100, zIndex: -1000, } })If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
