Как я могу передать компонент CustomButton для createAnimatedComponent?

Question

Я пытаюсь сделать анимацию CustomButton! Я использую createAnimatedComponent и ref. Кнопка появляется, но анимация не работает! Я попытался закомментировать цвета в CustomButton на случай, если анимированные цвета из createAnimatedComponent не появятся из-за них, но ничего.

Любая помощь будет признательна.

CustomCreateAnimatedComp. js

const AnimatedButton = Animated.createAnimatedComponent(CustomButton);

export default class CustomCreateAnimatedComp extends Component {
  state = {
    animation: new Animated.Value(0)
  };
  // for the ref button
  // Here our customButton gets detected by animated,
  // and we forward the setNativeProps to native button
  setNativeProps = props => {
    this.button.setNativeProps(props);
  };

  startAnimation = () => {
    Animated.timing(this.state.animation, {
      toValue: 1,
      duration: 1500
    }).start(() => {
      Animated.timing(this.state.animation, {
        toValue: 0,
        duration: 300
      }).start();
    });
  };

  render() {
    const animatedColor = this.state.animation.interpolate({
      inputRange: [0, 1],
      outputRange: [["white", "black"]
    });

    return (
      <View style={styles.container}>
        {/* Animated works also on props (like color) not only styles */}
        <AnimatedButton
          ref={(ref) => (this.button = ref)}
          title="Press Me"
          onPress={this.startAnimation}
          color={animatedColor}
        />
      </View>
    );
  }
}

CutomButton. js

export default class CustomButton extends React.Component {
  render() {
    return (
      <TouchableWithoutFeedback
        onPress={this.props.onPress}
        style={{ ...this.props.touchableStyle }}
      >
        <View
          onPress={this.props.onPress}
          style={{ ...styles.buttonStyle, ...this.props.style }}
        >
          <Text style={{ ...styles.text, ...this.props.textStyle }}>
            {this.props.title}
          </Text>
        </View>
      </TouchableWithoutFeedback>
    );
  }
}

const styles = StyleSheet.create({
  buttonStyle: {
    marginVertical: 5,
    paddingBottom: 3,
    borderRadius: 15,
    alignSelf: "center",
    backgroundColor: "tomato",
    elevation: 7
  },
  text: {
    color: "white",
    textAlign: "center"
  }
});

Заранее спасибо.

Answer 1

После подсказки от @Jaydeep Galani я проверил стили в CustomButton и сделал следующие изменения, и теперь название кнопки анимируется. Спасибо Jaydeep!

  <Text style={[ styles.text, {color: this.props.color} ]}>
            {this.props.title}
  </Text>

Вот последние изменения, поэтому backgroundColor также будет работать.

export default class CustomButton extends React.Component {
  render() {
    return (
      <TouchableWithoutFeedback
        onPress={this.props.onPress}
      >
        <View
          onPress={this.props.onPress}
          style={[ styles.buttonStyle, {backgroundColor: this.props.backgroundColor}]  }
        >
          <Text style={[ styles.text, {color: this.props.color} ]}>
            {this.props.title}
          </Text>
        </View>
      </TouchableWithoutFeedback>
    );
  }
}

render() {
    const animatedColor = this.state.animation.interpolate({
      inputRange: [0, 1],
      outputRange: ["white", "black"]
    });

    const animatedBackgroundColor = this.state.animation.interpolate({
      inputRange: [0, 1],
      outputRange: ["tomato", "lightblue"]
    });

    return (
      <View style={styles.container}>
        {/* Animated works also on props (like color) not only styles */}
        <AnimatedButton
          ref={(ref) => (this.button = ref)}
          title="Press Me"
          onPress={this.startAnimation}
          color={animatedColor}
          backgroundColor={animatedBackgroundColor}
          // textStyle={animatedColor}
        />
      </View>
    );
  }