codeherence / react-native-header

A high-performance, cross-platform animated header component for React Native applications.
MIT License
218 stars 16 forks source link

fix: twitter example for android & improve performance #7

Closed e-younan closed 1 year ago

e-younan commented 1 year ago

Description

This PR introduces a fix for Android bugs that were observed, and improves the performance by removing the layout animation that modifies the height of the Twitter profile banner in favour of a translation.

Motivation and Context

These changes were introduced since a few bugs were observed on Android.

  1. The BlurView component had a bug where it was taking up the whole screen on Android
  2. The animation performance on Android was not as smooth as iOS - this is due to the layout animation on the padding of the header. I have removed this in favour of a translation.
  3. A blank screen has been showing up on Android when the screen is opened sometimes. I have narrowed the issue down to it being due to the BlurView. Apparently, this is a bug that has already been reported. For now, we will disable the BlurView on Android <= 11 in favour of a simple dark mask.

How Has This Been Tested?

This has been tested on a physical Samsung S9+ and a Pixel 6 Pro emulator.

Types of changes

Checklist:

Screenshots

https://user-images.githubusercontent.com/128341688/228505857-91fc992a-4287-4c0d-9674-598e926acccd.mov