How to Animate Color of Header Back Button in React Native React Navigation 5?

Question

I'm trying to animate the color of header back button from color grey background with white arrow icon to color white background with black arrow icon in react native react navigation 5.

I tried to do the following, but it is throwing RangeError: Maximum call stack size exceeded.

const yOffset = useRef(new Animated.Value(0)).current;

const backButtonBackgroundColorAnimation = yOffset.interpolate({
        inputRange: [0, 130],
        outputRange: ['rgba(0,0,0,0.4)', 'rgba(0,0,0,0)'], // gray transparent to transparent
        extrapolate: "clamp"
      });

      const backArrowColorAnimation = yOffset.interpolate({
        inputRange: [0, 130],
        outputRange: ['rgb(255,255,255)', 'rgb(0,0,0)'], // white to black
        extrapolate: "clamp"
    });


import {Icon} from 'react-native-elements';

headerLeft: (props) => (                          
              <Animated.View style={{backgroundColor: backButtonOpacity}} >                           
                  <Icon                       
                    name='arrowleft'
                    type='antdesign'
                    color='white'
                    size={24}                            
                    containerStyle={{ backgroundColor:backButtonBackgroundColorAnimation, color:backArrowColorAnimation, borderRadius:500, padding: 5, marginLeft:10}}
                    {...props}
                    onPress={() => {
                        navigation.goBack();
                    }}
                    />
              </Animated.View>                                                       
          )

<Animated.ScrollView        
          onScroll={Animated.event(
            [
              {
                nativeEvent: {
                  contentOffset: {
                    y: yOffset,
                  },
                },
              },
            ],
            { useNativeDriver: false }
          )}
          scrollEventThrottle={16}
        >

You are setting background color to backButtonOpacity, this seems wrong since opacity and color are not the same. — Danny
– Danny, Commented Aug 31, 2020 at 14:40
also when you set color in style color:backArrowColorAnimation this seems wrong, you should set the color on <Icon color={backArrowColorAnimation}> instead — Danny
– Danny, Commented Aug 31, 2020 at 14:41

Danny · Accepted Answer · 2020-08-31 15:00:48Z

The issue seems to be that the react-native-elements icon is not an animated component. You can make it animated by using

import { Icon } from 'react-native-elements';
import { Animated } from 'react-native';
const AnimatedIcon = Animated.createAnimatedComponent(Icon);

Also adjust it so that you use style instead of container style.

headerLeft: (props) => (
    <Animated.View style={{ opacity: headerOpacity }}>
      <AnimatedIcon
        name="arrowleft"
        type="antdesign"
        color={backArrowColorAnimation}
        size={24}
        style={{
          backgroundColor: backButtonBackgroundColorAnimation,
          borderRadius: 500,
          padding: 5,
          marginLeft: 10,
        }}
        {...props}
        onPress={() => {
          navigation.goBack();
        }}
      />
    </Animated.View>
  ),

For a full code example see the code on this snack https://snack.expo.io/@dannyhw/react-navigation-animated-header2

Silambarasan Raman · Accepted Answer · 2020-08-29 21:37:15Z

1

I guess using useNativeDriver: true to the interpolation will solve the problem.

But I did not tried it. Please check the header animated view example here. If it's not help you please share your Icon component too.

answered Aug 29, 2020 at 21:37

Silambarasan Raman

1131 silver badge8 bronze badges

2 Comments

kaizen Over a year ago

Hi, i tried setting` useNativeDriver` to true, unfortunately it does not solve the issue. The Icon is import {Icon} from 'react-native-elements';

Danny Over a year ago

this wont work because color cannot be animated using the native driver

Silambarasan Raman · Accepted Answer · 2020-08-29 17:58:57Z

0

If you want to change only the background color and arrow icon color, then why do you need Animated.View?

You can simply use the navigation.setParams() to change the color of the header left and arror icon.

setParams will works like setState for update the route params.

answered Aug 29, 2020 at 17:58

community wiki

Silambarasan Raman

1 Comment

Danny Over a year ago

He is using animated.view because he wants to animate the color change. Using set params would just change it instantly.

Collectives™ on Stack Overflow

How to Animate Color of Header Back Button in React Native React Navigation 5?

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related