I'm implementing a <SafeAreaView> on my React Native app. Most of my screens are in a ScrollView. When I add the <SafeAreaView>, it obstructs the content. While I want this bottom area to be "safe", I'd like the user to be able to see the content behind it, otherwise, the space is wasted.
How do I implement a "transparent" safe area?
Simplified example:
class ExampleScreen extends Component { render() { return (<SafeAreaView><Scrollview><Text>Example</Text><Text>Example</Text><Text>Example</Text> (etc)</Scrollview></SafeAreaView> ); }}Output:
Desired Output:
