React-Native. Creating sliding animation

Question

I am trying to create an animation that i can't figure out. Let's say i have a square (100x100)in the center of the view. I would like any length text to slide from the "behind" of it to the right side of view. Obviously i want the text not to be visible but only animation.

I would be glad if someone could help me.

Cheers

Answer 1

Basically you need to set your animated x value to -(width of your square), so in this case -100, and set a dynamic style to an Animated.View. The trick is just calling an animation handled by Animation.spring (but you could use Animation.timing or any of the methods offered by the Animated API) and setting transform: [{translateX: myAnimatedValue}].

It's really not that different from CSS3 transforms. You have an element off-canvas and you gradually make it visible to the user. I hope this could be useful.

import React, { Component } from 'react';
import {
  View,
  Animated
} from 'react-native';

// const styles = ...

export default class SlidingExample extends Component {

  state = {
    visible: false,
    x: new Animated.Value(-100),
  };

  slide = () => {
    Animated.spring(this.state.x, {
      toValue: 0,
    }).start();
    this.setState({
      visible: true,
    });
  };

  render() {
    // in practice you wanna toggle this.slide() after some props validation, I hope
    this.slide();
    return (
      <View>
        <Animated.View
          style={[styles.slideView, {
            transform: [
              {
                translateX: this.state.x
              }
            ]
          }]}
        >
          {/* your content, such as this.props.children */}
        </Animated.View>
      </View>;
    );
  }
}