Glitchy iOS search bar when using Section List

Open
#1,730 3 comments 0 reactions 1 assignee View on GitHub

Nobody has claimed this yet.

Assessment

This issue has not been assessed yet.

Description

platform:ios repro-provided

Description

Hi, I wanted to report this issue I am having regarding a glitchy iOS search bar.

Please see the video below for a demonstration of the glitch.

https://user-images.githubusercontent.com/65245574/222759799-584c10a6-a0fb-4886-b14c-bcd14f50912c.mp4

Similarly, you can see the search bar glitch with these images:

Screenshot 2023-03-03 at 15 00 00

Whereas it should be as such:

Screenshot 2023-03-03 at 15 01 00

Overview

Ideal app desired functionality: have sticky headers (located correctly), search bar (Normal behaviour) and (Non-glitchy) pull to refresh.

Here is an overview of the problem:

  • To get the sticky headers to work, we have to use SafeAreaView  
  • By using SafeAreaView, this results in glitchy pull to refresh 
  • To fix the glitchy pull to refresh, we set the headerTransparent as true (To fix another trigger of glitchy refresh) and set the marginTop to be the header height. This is so that the content is pushed down accordingly, allowing for the sticky headers to "stick" in the right location (instead of up top and behind the header)
  • This results in a glitch with the search input, in that it doesn't expand and collapse correctly        
  • I believe the reason why the search input now doesn't behave correctly is due to the margin top.

About the search bar glitch, normal behaviour consists of "locking" in and out of view depending on if most of the search bar is show. When you pull to refresh (repository linked below), it initially shows the full search bar. However, it does not keep this behaviour when we scroll down then back up.

Refresh glitch replication

To demonstrate the glitchy pull to refresh, you can set the headerTransparent property to false within the useLayoutEffect hook in the App.tsx file. And if that is enabled then you can comment out the marginTop in the first View component as that is pushing the content the same as the headerHeight (for when it is transparent).
E.g.

      headerTransparent: true, // set to false here to demonstrate glitchy activity indicator/pull to refresh.

And

     marginTop: headerHeight,  // Comment out if headerTransparent is false. I.e testing out glitchy refresh control.

Can you let me know if I'm doing anything wrong or advice with this issue?

Thanks!

Steps to reproduce
git clone https://github.com/KenanBouvier/ExampleRNScreenIssue
cd ExampleRNScreenIssue
npm install
cd ios
pod install
npm start
(Open iOS simulator)
Snack or a link to a repository

https://github.com/KenanBouvier/ExampleRNScreenIssue

Screens version

^3.20.0

React Native version

0.71.3

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

iPhone 14 - iOS 16.1

Acknowledgements

Yes

Dominant language
TypeScript
Stars
3.7k
Forks
714
Avg merge
2d 23h
Merged PRs (30d)
71

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from software-mansion/react-native-screens

All issues in software-mansion/react-native-screens

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.