Sticky header with Dynamic Island or Notch in React Natvie

Question

I would like to create sticky header in my app. I used a FlatList with stickyHeaderIndices prop. It works fine with android devices and devices without Notch and Dynamic Island. But when it's devices with Notch or Dynamic Island, the content goes below it.

I tried to add some paddings to the content if dynamic island or notch exists, but it will be wrong initialy with design.

Answer 1

You should wrap your code inside a SafeAreaView.

Here's an example of keeping a View component as the parent component.

return (
    <View style={{ flexDirection: "row" }}>
      <Image
        style={{ width: 100, height: 100 }}
        source={require("../../images/camera.png")}
      />
      <Text>Is this hidden?</Text>
    </View>
  );

And my Image and Text goes under the Dynamic Island or Notch.

But when I wrap the same in SafeAreaView my UI does not gets intervened.

return (
    <SafeAreaView>
      <View style={{ flexDirection: "row" }}>
        <Image
          style={{ width: 100, height: 100 }}
          source={require("../../images/camera.png")}
        />
        <Text>Is this hidden?</Text>
      </View>
    </SafeAreaView>
  );