Turn off all edges?

I would like to be able to pass an empty array to the edges prop of SafeAreaView when I don’t want any safe area edges. The use case is a reusable component that on some screens I want it to take into account Safe Area, and other screens already take Safe Area into account and I don’t want double padding. So I’d like to pass a prop to my reusable component that can be used like so:

const MyComponent = ({ needsSafeArea }) => {
  const edges = [];
  if (needsSafeArea) {
    edges.push('top');
  }

  return (<SafeAreaView edges={edges}>
    {/* My cool component */}    
  </SafeAreaView>);
};

This code currently results in all edges being activated when needsSafeArea is false. If there’s a better way to handle my use case then please let me know.

[duggster]

Yes this is a workaround, but not great because you either have to duplicate the code inside or create another layer of abstraction by factoring out the common code into yet another component. It would be much more readable and maintainable to just keep the SafeAreaView structure in place and control the behavior by props.

An empty edges array seemed intuitive to indicate no edges at first (before I re-read the docs), but probably it would be less disruptive to existing code if an optional flag was added called something like ‘disabled’.

[CptFabulouso]

I’ve also come to few use cases where I’d use that passing edges={[]} turns off all edges. It’s surprising to me it doesn’t, because the code clearly says what I want and that is to use no edges. If it would work like that and you would have opposite condition like “if something is true, I want only top edge, otherwise use default edges” you could still do that by edges={condition? ['top'] : undefined}, so to me it seems like win-win.

Anyway, best workaround I found is to use useSafeAreaInsets

import React from 'react';
import { View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

const MyComponent = ({ needsSafeArea }) => {
 const { top } = useSafeAreaInsets();
 return (
   <View style={{paddingTop: needsSafeArea? top : 0}}>
     {/* My cool component */}    
   </View>
 );
};