Как избежать строки состояния, перекрывающей контент?

Question

У меня проблема с тем, что строка состояния перекрывает содержимое моего приложения.

Это:

Это App.js, в котором содержится мой компонент верхнего уровня, куда я добавил SafeAreaView :

     <SafeAreaView style={{ flex: 1, backgroundColor: '#fff' }}>
        <KeyboardAvoidingView
          style={styles.container}
          behavior="padding"
          enabled
        >
          <ReduxProvider store={store}>
            {Platform.OS === 'ios' && <StatusBar barStyle="default" />}
            <AppNavigator />
          </ReduxProvider>
        </KeyboardAvoidingView>
      </SafeAreaView>

Компонент панели поиска, который вы видите на изображении, имеет поле: <View style={{ marginTop: 22 }}>..., который работает должным образом на остальных устройствах iOS, но не на новых iPhone, например, на XR, который является устройством на скриншоте.

Итак, есть ли идеи о том, как динамически установить это поле, чтобы строка состояния не перекрывала содержимое пользовательского интерфейса?