React Native SafeAreaView background color - How to assign two different background color for top and bottom of the screen?

Question

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

Answer 1

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 (
      
        
        
      
    )
  }
}
const styles = StyleSheet.create({
  ...,
  safeArea: {
    flex: 1,
    backgroundColor: '#FF5236'
  },
  fixBackground: {
    backgroundColor: 'orange',
    position: 'absolute',
    bottom: 0,
    right: 0,
    left: 0,
    height: 100,
    zIndex: -1000,
  }
})