didam

app/splashScreen.js

@@ -2,14 +2,59 @@ import React, { Component } from 'react';
 import { Container } from 'native-base';
 import Colors from './library/colors';
 import LinearGradient from 'react-native-linear-gradient';
-import { View, Text } from 'react-native';
+import { View, Text, Image, StyleSheet, Dimensions} from 'react-native';
+import Animated, { Easing } from 'react-native-reanimated';
+const { Value, timing } = Animated;
 import AsyncStorage from '@react-native-community/async-storage'
 import { StackActions, NavigationActions } from 'react-navigation';
+import Images from './library/images';
+
+const height = Dimensions.get('screen').height
+const width = Dimensions.get('screen').width
 
 class SplashScreen extends Component {
+    constructor(props) {
+      super(props);
+      this.state = {
+        text: false
+      }
+      this._transX = new Value(-500);
+      this._transY = new Value(0);
+      this.opacityVal = new Value(0)
+
+      this._config = {
+        duration: 500,
+        toValue: height + 50,
+        easing: Easing.inOut(Easing.ease),
+      };
+      this.config2 = {
+        duration: 800,
+        toValue: height *.2,
+        easing: Easing.inOut(Easing.ease),
+      }
+      this.config4 = {
+        duration: 500,
+        toValue: height *.35 ,
+        easing: Easing.inOut(Easing.ease),
+      }
+      this.config5 = {
+        duration: 2000,
+        toValue: width * .31,
+        easing: Easing.inOut(Easing.ease),
+      };
+      
+      this._anim = timing(this._transX, this._config);
+      this._anim2 = timing(this._transX, this.config2)
+      this._anim4 = timing(this._transX, this.config4)
+      this._anim5 = timing(this._transY, this.config5)
+    }
 
     componentDidMount() {
-      setTimeout(() => { this.navigateToLogin() }, 3000)
+      this._anim.start()
+      setTimeout(()=> {this._anim2.start()},600)
+      setTimeout(()=> {this._anim4.start()}, 1500)
+      this._anim5.start(() => {this.setState({text: true})})
+      setTimeout(() => {this.navigateToLogin()},2500)
     }
 
     navigateToLogin() {
@@ -25,22 +70,38 @@ class SplashScreen extends Component {
 
   render() {
     return (
-      <Container style={{backgroundColor: Colors.yellowBasic, justifyContent:'center'}}>
+      <Container style={{backgroundColor: '#e4b300'}}>
           {/* <LinearGradient colors={[Colors.yellowBasic, Colors.yellowBasic, Colors.yellowBasic, '#e3c600', '#d4b900' ]} style={{flex: 1}} angle={110} useAngle> */}
             {/* <View style={{marginTop: 75, width: '100%', backgroundColor:'#fcfcfc'}}> */}
-                <View style={{backgroundColor:'transparent', alignSelf:'center', alignItems:'center'}}>
+                {/* <View style={{backgroundColor:'transparent', alignSelf:'center', alignItems:'center'}}>
                     <LinearGradient style={{height: 40, width: 40, borderBottomLeftRadius: 13, borderTopLeftRadius: 13, borderTopRightRadius: 13, alignItems:'center', justifyContent: 'center',}} colors={[Colors.blackBasic, Colors.blackBasic]}>
                         <LinearGradient style={{ alignItems:'center', justifyContent: 'flex-end', height: 25, width: 25, borderTopLeftRadius: 8, borderBottomLeftRadius: 8, borderBottomRightRadius: 8}} colors={[Colors.yellowBasic, Colors.yellowBasic]}>
                             <View style={{backgroundColor: Colors.blackBasic, height: 1, width: 15, marginBottom: 5}}/>
                         </LinearGradient>
                     </LinearGradient>
                     <Text style={{color: Colors.blackBasic, marginLeft: 5}}>Wait for sec ...</Text>
-                </View>
+                </View> */}
             {/* </View> */}
           {/* </LinearGradient> */}
+          <Animated.View style={{transform: [{ translateY: this._transX, translateX: this._transY}]}}>
+            <Image source={Images.LogoApps} style={{width: 150, height: 150}}/>
+          </Animated.View>
+          {this.state.text && <View style={{position:'absolute', zIndex: 1, padding: 0, backgroundColor: 'transparent', top: height * .525, left: width * .31}}>
+            <Text style={{fontStyle: 'italic', color: '#fff', fontSize: 20, marginTop: 10, marginLeft: 2}}> Adira Appraisal</Text>
+          </View>}
+          {/* <Animated.View style={[styles.box, { transform: [{ translateY: this._transX, translateX: this._transY}] }]} /> */}
       </Container>
     );
   }
 }
 
+const styles = StyleSheet.create({
+  box: {
+    width: 50,
+    height: 50,
+    backgroundColor: 'purple',
+    borderRadius: 5,
+  },
+});
+
 export default SplashScreen;