Scrollable content gets cut off by the header with a search bar on iOS 12

[SimpleCreations]

Description

When focusing the search bar on iOS 12, the top portion of the ScrollView is cut off.
Also, a white flash can be seen at the bottom of the screen when the search bar loses focus, and the backdrop seems to cover the entire screen including the header.

Demo:

Simulator.Screen.Recording.-.iPhone.5s.-.2021-09-10.at.18.37.42.mp4

There is no issue on iOS 13+:

Simulator.Screen.Recording.-.iPhone.11.Pro.-.2021-09-10.at.18.35.48.mp4

Screenshots

Steps To Reproduce

1. Have a ScrollView with some content and a header with a search bar.
2. Focus the search bar.

Expected behavior

• The top element of the ScrollView is fully visible.
• The backdrop only covers the area under the header.
• When the search bar loses focus, the backdrop animation is smooth.

Actual behavior

• The top element of the ScrollView is partially obscured by the header.
• The backdrop covers the entire screen including the header and the search bar itself.
• When the search bar loses focus, a white area can be seen at the bottom of the screen for the duration of the animation.

Snack or minimal code example

import React from "react";
import { ScrollView, Text } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "react-native-screens/native-stack";

const Stack = createNativeStackNavigator();

const Screen = () => (
  <ScrollView>
    {new Array(40).fill(null).map((_, i) =>
      <Text key={i} style={{fontSize: 20}}>{i}</Text>)}
  </ScrollView>
);

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="Screen"
        screenOptions={{
          headerTitle: "Title",
          searchBar: {}
        }}>
        <Stack.Screen
          name="Screen"
          component={Screen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

Package versions

• React: 17.0.1
• React Native: 0.64.1
• React Native Screens: 3.7.0

[github-actions]

Issue validator

The issue is valid!

[Ubax]

Hi @SimpleCreations
Could you please try following solution:

• Add headerTranslucent: true, to screenOptions
• Add contentInsetAdjustmentBehavior="automatic" to ScrollView props

This fixed the issue in my case

[Ubax]

@SimpleCreations I'm closing it for now. If the issue still occurs with the instructions I provided above, please let us know.