React Native Beautiful Responsive UI | Loadscreen & Splash Screen
React Native Beautiful Responsive UI | Loadscreen & Splash Screen
by on on android

React Native Beautiful Responsive UI | Loadscreen & Splash Screen

React Native Splash Screen Animation using the React Native Animated API


Animations are a cool way to present your application for a good user experience. If you are coming from YouTube, this is the same source for the video, feel free to copy the codes.

So we are making use of the animated from react native which we used to achieve the bounce effects using the native drive api.

I am not explaining much but I need to make this available because of the YouTube video

import React, {Component} from 'react';
import {
  View,
  Image,
  Text,
  StyleSheet,
  Animated,
  ActivityIndicator,
} from 'react-native';

class LoadingScene extends Component {

  componentDidMount() {
    const {LogoAnime, LogoText} = this.state;
    Animated.parallel([
      Animated.spring(LogoAnime, {
        toValue: 1,
        tension: 10,
        friction: 2,
        duration: 1000,
      }).start(),
      Animated.timing(LogoText, {
        toValue: 1,
        duration: 1200,
      }),
    ]).start(() => {
      this.setState({
        loadingSpinner: true,
      });
      setTimeout(switchToAuth, 1500);
    });
  }
  render() {
    return (
      <View style={styles.container}>
        <Animated.View
          style={{
            opacity: this.state.LogoAnime,
            top: this.state.LogoAnime.interpolate({
              inputRange: [0, 1],
              outputRange: [80, 0],
            }),
          }}>
          <Image source={Logo} />
          {this.state.loadingSpinner ? (
            <ActivityIndicator
              style={{
                position: 'absolute',
                left: 0,
                right: 0,
                top: 0,
                bottom: 0,
                alignItems: 'center',
                justifyContent: 'center',
              }}
              size="large"
              color="#5257f2"
            />
          ) : null}
        </Animated.View>
        <Animated.View style={{opacity: this.state.LogoText}}>
          <Text style={styles.logoText}> LogoText </Text>
        </Animated.View>
      </View>
    );
  }
}

Here is the video, feel free to watch it.