React native Fixed header / footer iphone X - iphone

Question

As a personal project to learn ReactNative, i am building an instagram like app (Fixed header, footer and scrollable content section). What would be a best practice to make this kind of layout?
The problem is that, in iPhone X this doesn't work quite well. If I use the SafeAreaView component i can get the Header section to work, but then I lose the ability to correctly position the footer. By using the following code:
render() {
const {width, height} = Dimensions.get('window');
return (
<View style={[{backgroundColor: '#F00'}]}>
<View style={{backgroundColor: '#AFD', height: 50}}>
<Text>Head</Text>
</View>
<View style={{backgroundColor: '#DFC', height: height-100}}>
<Text>Body</Text>
</View>
<View style={{backgroundColor: '#CDF', height: 50}}>
<Text>Toes</Text>
</View>
</View>
);
}
I get:
If I use the SafeAreaView component, it gets a bit better for the header but the footer loses the reference completely:
<SafeAreaView style={[{backgroundColor: '#F00'}]}>
<View style={{backgroundColor: '#AFD', height: 50}}>
<Text>Head</Text>
</View>
<View style={{backgroundColor: '#DFC', height: height-100}}>
<Text>Body</Text>
</View>
<View style={{backgroundColor: '#CDF', height: 50}}>
<Text>Footer</Text>
</View>
</SafeAreaView>
My last option was then to use the SafeAreaView for the header part, which then makes the header too small (the content gets clipped if i don't account for the extra height, which doesn't help so much)
<View style={[{backgroundColor: '#F00'}]}>
<SafeAreaView style={{backgroundColor: '#AFD', height: 50}}>
<Text>Head</Text>
</SafeAreaView>
<View style={{backgroundColor: '#DFC', height: height-100}}>
<Text>Body</Text>
</View>
<View style={{backgroundColor: '#CDF', height: 50}}>
<Text>Footer</Text>
</View>
</View>
So, what would be a best practice to achieve this layout? Also, is there any good resources for layouts in ReactNative besides the documentation?
thanks in advance!

Answer 1

Use https://github.com/miyabi/react-native-safe-area module. It's very easy to use and works as per requirement. Works well on different iOS versions, automatically adjusts on orientation change. You just have to addEventListener and all will be handled automatically.
Follow instructions from https://github.com/miyabi/react-native-safe-area#installation