Animate SplashScreen

Animate-SplashScreen

import React, {useEffect, useState} from 'react';
import {
  View,
  SafeAreaView,
  StatusBar,
  Animated,
  StyleSheet,
  Text,
} from 'react-native';
import {Colors} from '_styles';
import {useNavigation} from 'react-navigation-hooks';

const SplashScreen = () => {
  const [state] = useState({
    animated: new Animated.Value(0),
    isDone: false,
  });

  const {navigate} = useNavigation();

  const animatedStart = () => {
    Animated.sequence([
      Animated.delay(700),
      Animated.timing(state.animated, {
        toValue: 100,
        duration: 1000,
        useNativeDriver: true, // This is important!
      }),
    ]).start(() => navigate('StarterScreen'));
  };

  const imageScale = {
    transform: [
      {
        translateY: state.animated.interpolate({
          inputRange: [0, 40, 100],
          outputRange: [0, 30, -1000],
        }),
      },
    ],
  };

  useEffect(() => animatedStart());

  return {
    animatedStart,
    imageScale,
    state,
  };
};

export default () => {
  const {imageScale} = SplashScreen();
  return (
    <SafeAreaView style={styles.container}>
      <StatusBar
        backgroundColor={Colors.GREEN_PRIMARY}
        barStyle="light-content"
      />
      <View style={styles.containerImage}>
        <Animated.Image
          source={require('../assets/images/icon_logo.png')}
          style={[styles.image, imageScale]}
          resizeMethod="scale"
        />
        <Text style={styles.textDescription}>v.0.1.1</Text>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Colors.GREEN_PRIMARY,
  },
  containerImage: {
    flex: 1,
    alignItems: 'center',
    marginVertical: 100,
  },
  image: {
    flex: 1,
    resizeMode: 'contain',
  },
  textDescription: {
    color: 'white',
    fontFamily: 'Roboto-Regular',
    fontSize: 16,
    textAlign: 'center',
  },
});