title: react native animating multiple views as a circle
body: <p>I want 2 views which transform like a circle with no rotation at the same time. The first view starts at the top and the second view at the bottom. I already asked how to do it with one view. I dont get it run with two views.
  <a href="https://stackoverflow.com/questions/47911256/react-native-circle-transform-translate-animation">Question Before</a></p>
  
  <p><a href="https://i.stack.imgur.com/2xUOq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2xUOq.png" alt="enter image description here"></a></p>
  
  <pre><code>//import liraries
  import React, { Component } from 'react';
  import { View, Text, StyleSheet, Animated, Button, TouchableOpacity } from 'react-native';
  
  // create a component
  export default class App extends Component {
    constructor() {
        super()
        this.animated = new Animated.Value(0);
        this.animated2 = new Animated.Value(0);
  
        var range = 1, snapshot = 50, radius = 100;
        /// translateX
        var inputRange = []
        var outputRange = [] 
        var outputRange2 = []
        for (var i=0; i&lt;=snapshot; ++i) {
            var value = i/snapshot;
            var move = Math.sin(value * Math.PI * 2) * radius;
            inputRange.push(value);
            outputRange.push(move);
            outputRange2.push(-move);
        }
        translateX = this.animated.interpolate({ inputRange, outputRange });
        translateX2 = this.animated2.interpolate({inputRange, outputRange2})
  
        /// translateY
        var inputRange = [] 
        var outputRange = []
        var outputRange2 = []
        for (var i=0; i&lt;=snapshot; ++i) {
            var value = i/snapshot;
            var move = -Math.cos(value * Math.PI * 2) * radius;
            inputRange.push(value);
            outputRange.push(move);
            outputRange2.push(-move);
        }
        translateY = this.animated.interpolate({ inputRange, outputRange });
        translateY2 = this.animated2.interpolate({inputRange, outputRange2})
  
    }
  
      animate() {
        this.animated.setValue(0)
        Animated.timing(this.animated, {
          toValue: 1,
          duration: 10000,
        }).start();
        this.animated2.setValue(0)
        Animated.timing(this.animated2, {
          toValue: 1,
          duration: 10000,
        }).start();
      }
  
  
      render() {
        //const transform = [{ translateY: this.translateY }, {translateX: this.translateX}];
        return (
          &lt;View style={styles.container}&gt;
            &lt;Animated.View style={
              [{ transform: [{ translateY: translateY }, {translateX: translateX}] }]}&gt;
              &lt;TouchableOpacity style={styles.btn}&gt;
                &lt;Text&gt;hallo&lt;/Text&gt;
              &lt;/TouchableOpacity&gt;
            &lt;/Animated.View&gt;
            &lt;Animated.View style={
              [{ transform: [{ translateY: translateY2 }, {translateX: translateX2}] }]}&gt;
              &lt;TouchableOpacity style={styles.btn}&gt;
                &lt;Text&gt;hallo&lt;/Text&gt;
              &lt;/TouchableOpacity&gt;
            &lt;/Animated.View&gt;
            &lt;Button title="Test" onPress={() =&gt; { 
              this.animate() 
              }} /&gt;
          &lt;/View&gt;
        );
      }
    }
  
    // define your styles
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#2c3e50',
      },
      btn2: {
        justifyContent: 'center',      
        alignItems: 'flex-end',
        alignSelf: 'flex-end'
      },
      btn: {
        backgroundColor: 'red',
        justifyContent: 'center',
        alignItems: 'center',
        width: 50,
      }
    });
  </code></pre>