How can I pass a CustomButton component to createAnimatedComponent?

Question

I'm trying to make a CustomButton animate! I use createAnimatedComponent and ref. The button shows up but the animation does not work! I tried to comment out the colors in the CustomButton just in case the animated colors from the createAnimatedComponent didn't show up because of them, but nothing.

Any help would be appreciated.

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"
  }
});

Thanks in advance.

Hello Jaydeep, thanks for the response. I updated the question and added more info about the colors. Thanks — Fotios Tsakiris, Mar 06 '20 at 07:53

Fotios Tsakiris · Accepted Answer · 2020-03-06T17:26:56.337

After a hint from @Jaydeep Galani I checked the styles in the CustomButton and I did the following changes and now the title of the button animates. Thanks Jaydeep!

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

Here are the final changes so the backgroundColor would also work.

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>
    );
  }

How can I pass a CustomButton component to createAnimatedComponent?

1 Answers1