title: React Native center Animated Icon
body: <p>I've been using expo to develop some cool programs and I'm trying to build a clone of Twitter. I got a little problem while building the loading animation of twitter app.
  I'm using IonIcons "twitter-logo" to build this and the problem is that the Icon doesn't stay centered like in the original app, it gets animated weirdly.</p>
  
  <p><strong>To test it, just paste the code bellow to your App.js and you'll see the animation.</strong></p>
  
  <p>If you don't have Expo, just change the import to react-native-vecto-icons.</p>
  
  <pre><code>import React from "react";
  import { Animated, Easing, Text, View } from "react-native";
  import Icon from "@expo/vector-icons/Ionicons";
  
  AnimatedIcon = Animated.createAnimatedComponent(Icon);
  
  export default class RootComponent extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        isLoading: true,
        isAnimating: false,
        iconSize: new Animated.Value(60)
      };
    }
  
    startAnimation = () =&gt; {
      Animated.timing(this.state.iconSize, {
        toValue: 1500,
        duration: 1000,
        easing: Easing.back(0.8)
      }).start(() =&gt; this.setState({ isAnimating: false }));
    };
  
    componentDidMount() {
      let x = setTimeout(() =&gt; {
        let isLoading = !this.state.isLoading;
        let isAnimating = !this.state.isAnimating;
        this.setState({ isLoading, isAnimating });
        this.startAnimation();
        clearTimeout(x);
      }, 2000);
    }
  
    render() {
      if (this.state.isLoading || this.state.isAnimating)
        return (
          &lt;Animated.View
            style={{
              flex: 1,
              alignItems: "center",
              justifyContent: "center",
              backgroundColor: "#1b95e0"
            }}
          &gt;
            &lt;AnimatedIcon
              name={"logo-twitter"}
              style={{
                alignSelf: "center",
                fontSize: this.state.iconSize
              }}
              color={"#fff"}
            /&gt;
          &lt;/Animated.View&gt;
        );
  
      return (
        &lt;View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}&gt;
          &lt;Text&gt;TWITTER APP :)&lt;/Text&gt;
        &lt;/View&gt;
      );
    }
  }
  </code></pre>
  
  <p><a href="https://gfycat.com/SoggyHarshFruitfly" rel="nofollow noreferrer">CLICK HERE TO SEE THE ANIMATION</a></p>