iOS Header overlaps layout for Iphone 11

Question

I've got a react native app -> I've currently noticed that the text on my screen overlaps on iphone 10+ devices. How would I create a safearea for the new devices?

I've tried to add a tag to wrap my stack.navigator for the home screen but had no luck so far.

Is this something I would target on my react native or in xcode?

enter image description here

Answer 1

use

import { SafeAreaView } from 'react-native';

to handle safe area I have shown in below code how to handle safe area for iPhone 10 plus device

in below code I have divided the safe area in two-part one is for top safe area and another is the bottom safe area and you place your all component in bottom safe area

render() {
        return (
            <View style={{flex: 1} >
                <SafeAreaView style={{flex: 0}} />
                <SafeAreaView style={{flex: 1}}>
                  //here you can place your component 
                </SafeAreaView>
            </View>

            )
    }