software-mansion/react-native-screens

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

SimpleCreations opened this issue · 3 comments

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

Issue validator

The issue is valid!

Ubax commented

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 commented

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