jsReact Native: How to animate a view's position with translateX?

Question

I am trying to move my view off screen when the "Enter Now" button is pressed:

export class Onboarding extends Component {

  constructor(props) {
    super(props);
    this.state = {
      offsetX: new Animated.Value(0),
    }
  }

  hideOnboarding() {
    console.log("hiding"); // <-------- prints out when button pressed
    Animated.timing(
      this.state.offsetX,
      { toValue: new Animated.Value(-100) }
    ).start();
  }

  render() {
    return (
      <Animated.View style={{ transform: [{translateX: this.state.offsetX}] }}>
        ...
        <TouchableOpacity onPress={ () => { this.hideOnboarding() } }>
          <View style={styles.enterButton}>
            <Text style={styles.buttonText}>Enter Now</Text>
          </View>
        </TouchableOpacity>
      </Animated.View>
    );

But nothing is moving when I tap my button. My console statement works though. Does anyone know what I'm doing wrong?

Answer 1

I think you need to change:

{ toValue: new Animated.Value(-100) }

to

{ toValue: -100 }