3

What I have

I'm trying to create a header animation with Native Stack Navigator. The animation consists of changing the background color from transparent to light gray when the user scrolls down.

The problem

Although the animation works as expected on iOS, on Android the headerTransparent property is causing some issues as the animation is not displayed when the user scrolls down in Android.

Demo

I create a reproducible Snack to easily check the issue. if you run the application on Android and remove the headeTransparent property you will see that the animation now works.

Cristian Flórez
  • 2,277
  • 5
  • 29
  • 51
  • The blur effect doesn't apply on Android toolbar. if you want to apply this effect then you have to create custom view. – Harsh Patel Jan 24 '23 at 12:36

1 Answers1

-1

The issue you're experiencing may be related to the way the animation is being set up. One potential problem is that you are setting the background color of the header using the 'interpolateColor' function, which may not work correctly on Android. Another issue may be that you are using the useAnimatedStyle hook to create the style for the header background, which may not work as expected on Android.

One solution that you may try is to use the useNativeDriver option when creating the animation.

const animateHeaderStyle = useAnimatedStyle(() => ({
     backgroundColor: interpolateColor(
     translationY.value,
     [0, 200],
     ['transparent', 'lightgray'],
     'RGB',
),
height: headerHeight,
}), [translationY], {useNativeDriver: true});
Pedro Viegas
  • 1
  • 4
  • Are you sure that useAnimatedStyle receives a third argument? https://www.reanimated2.com/docs/ can you create a clearer example, what you post in the example does not work – Cristian Flórez Jan 24 '23 at 23:22
  • Also, you should add reliable sources where the information can be corroborated such as: "one potential problem is that you are setting the background color of the header using the 'interpolateColor' function" – Cristian Flórez Jan 24 '23 at 23:26