Como animar a cor do botão Voltar do cabeçalho no React Native React Navigation 5?

Question

Estou tentando animar a cor do botão voltar do cabeçalho do fundo cinza colorido com o ícone de seta branca para o fundo branco colorido com o ícone de seta preta na navegação de reação nativa de reação 5.

Eu tentei fazer o seguinte, mas está jogandoRangeError: 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}
        >

Answer 1

O problema parece ser que o ícone react-native-elements não é um componente animado. Você pode torná-lo animado usando

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

Também ajuste-o para que você use estilo em vez de estilo de contêiner.

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>
  ),

Para um exemplo de código completo, veja o código neste lanchehttps://snack.expo.io/@dannyhw/react-navigation-animated-header2

Answer 2

Acho que usar useNativeDriver: truea interpolação resolverá o problema.

Mas eu não tentei. Por favor, verifique o exemplo de visualização animada do cabeçalho aqui. Se não ajudar, compartilhe seu componente Icon também.

Answer 3

Se você deseja alterar apenas a cor do plano de fundo e a cor do ícone da seta, por que você precisa do Animated.View?

Você pode simplesmente usar o navigation.setParams() para alterar a cor do cabeçalho esquerdo e do ícone da seta.

setParams funcionará como setState para atualizar os parâmetros da rota.