React Native center Animated Icon

Question

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.

To test it, just paste the code bellow to your App.js and you'll see the animation.

If you don't have Expo, just change the import to react-native-vecto-icons.

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 = () => {
    Animated.timing(this.state.iconSize, {
      toValue: 1500,
      duration: 1000,
      easing: Easing.back(0.8)
    }).start(() => this.setState({ isAnimating: false }));
  };

  componentDidMount() {
    let x = setTimeout(() => {
      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 (
        <Animated.View
          style={{
            flex: 1,
            alignItems: "center",
            justifyContent: "center",
            backgroundColor: "#1b95e0"
          }}
        >
          <AnimatedIcon
            name={"logo-twitter"}
            style={{
              alignSelf: "center",
              fontSize: this.state.iconSize
            }}
            color={"#fff"}
          />
        </Animated.View>
      );

    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Text>TWITTER APP :)</Text>
      </View>
    );
  }
}

CLICK HERE TO SEE THE ANIMATION

You would be better using an image of the twitter icon rather than using the font, that way you can align it exactly. — Andrew
I've tried using an Image and it worked, but I want to use Icons because I plan on doing this with other Icons in future apps. — André Monteiro

shruti garg shruti garg · Accepted Answer · 2019-03-02T18:16:32

Just change alignSelf property in style of Animated Icon to textAlign. That will make Icon in center of screen.Below is updated code.

import React from 'react';
import { Animated, Easing, Text, View } from 'react-native';
import { Ionicons as Icon } from '@expo/vector-icons';

const 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 = () => {
    Animated.timing(this.state.iconSize, {
      toValue: 1500,
      duration: 1000,
      easing: Easing.back(0.8),
    }).start(() => this.setState({ isAnimating: false }));
  };

  componentDidMount() {
    let x = setTimeout(() => {
      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 (
        <View
          style={{
            flex: 1,
            alignItems: 'center',
            justifyContent: 'center',
            backgroundColor: '#1b95e0',
          }}>
          <AnimatedIcon
            name={'logo-twitter'}
            style={{
              textAlign: 'center',
              fontSize: this.state.iconSize,
            }}
            color={'#fff'}
          />
        </View>
      );

    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>TWITTER APP :)</Text>
      </View>
    );
  }
}

React Native center Animated Icon

1 Answers