CODEWITHSUNDEEP
iphonereact-nativereact-native-ios
rafudu
rafudu

Reputation: 43

React native Fixed header / footer iphone X

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:

iphone X without SafeAreaView

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>

Using SafeAreaView fixes the header but loses the footer

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>

Using SafeAreaView for the header

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!

Upvotes: 2

Views: 7439

Answers (1)

Vishwesh Jainkuniya
Vishwesh Jainkuniya

Reputation: 2839

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

Upvotes: 3

Related Questions