react-motion-react-native-translation.js

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity
}                           from 'react-native';
import { Motion, spring }   from 'react-motion';

export default class Example extends Component {

  state = {
    open: false
  };

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity
          style={styles.button}
          onPress={this.handlesOnPress}>
          <Text>
            Press me to toggle
          </Text>
        </TouchableOpacity>
        <Motion style={{x: spring(this.state.open ? 270 : 0)}}>
          {({x}) =>
            <View style={styles.movingCubeContainer}>
              <View
                style={[
                  styles.movingCube,
                  {
                    transform: [{translateX: x}]
                  }
                  ]
                }
              />
            </View>
          }
        </Motion>

      </View>
    );
  }

  handlesOnPress = () => {
    this.setState({open: !this.state.open});
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginLeft: 10,
    marginRight: 10,
    backgroundColor: '#FFF',
  },
  button: {
    alignItems: 'center',
    height: 50,
    marginTop: 70
  },
  movingCubeContainer: {
    borderRadius: 4,
    backgroundColor: 'rgb(240, 240, 232)',
    marginTop: 5,
    marginBottom: 3,
    marginLeft: 10,
    marginRight: 10,
    width: 320,
    height: 50
  },
  movingCube: {
    width: 50,
    height: 50,
    borderRadius: 4,
    backgroundColor: 'rgb(130, 181, 198)'
  }
});

AppRegistry.registerComponent('Example', () => Example);