|
@ -1,51 +1,22 @@ |
|
|
import React from "react"; |
|
|
import React from "react"; |
|
|
import { Animated, Easing, Text, View } from "react-native"; |
|
|
import { Image, Platform, Text, View } from "react-native"; |
|
|
import { useEffect, useState } from "react"; |
|
|
import { useEffect, useState } from "react"; |
|
|
import { styles } from './styles/AppStyles'; |
|
|
import { styles } from './styles/AppStyles'; |
|
|
import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'; |
|
|
|
|
|
import Icons from '../themes/Icons'; |
|
|
|
|
|
import Colors from "../themes/Colors"; |
|
|
|
|
|
import Metrics from "../themes/Metrics"; |
|
|
|
|
|
const spinValue = new Animated.Value(0); |
|
|
|
|
|
|
|
|
|
|
|
function Splash(props){ |
|
|
function Splash(props){ |
|
|
|
|
|
let splashLogo = null; |
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
if (Platform.OS === 'android') { |
|
|
Animated.loop( |
|
|
splashLogo = {uri: 'asset:/squarelogo.png'}; |
|
|
Animated.timing(spinValue, { |
|
|
} else { |
|
|
toValue: 1, |
|
|
splashLogo = {url: 'squarelogo'} |
|
|
duration: 3000, |
|
|
} |
|
|
easing: Easing.linear, |
|
|
|
|
|
useNativeDriver: true, |
|
|
|
|
|
})).start(); |
|
|
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
|
|
const spin = spinValue.interpolate({ |
|
|
|
|
|
inputRange: [0, 1], |
|
|
|
|
|
outputRange: ['0deg', '360deg'], |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
return ( |
|
|
<View style={[styles.flex]}> |
|
|
<View style={[styles.flex, styles.centeredJustify]}> |
|
|
<View style={styles.flexHalf}> |
|
|
<Image |
|
|
<Text style={[styles.headerTitleFont, styles.centeredText, styles.darkText]}> |
|
|
style={[styles.centeredSelf, styles.splashLogo]} |
|
|
Square Not Square |
|
|
source={splashLogo} |
|
|
</Text> |
|
|
/> |
|
|
</View> |
|
|
|
|
|
<View style={styles.flexHalf}> |
|
|
|
|
|
<Text style={[styles.largeFont, styles.centeredText, styles.darkText]}> |
|
|
|
|
|
Loading... |
|
|
|
|
|
</Text> |
|
|
|
|
|
</View> |
|
|
|
|
|
<View style={[styles.flex, styles.centeredItems]}> |
|
|
|
|
|
<Animated.View style={{ transform: [{ rotate: spin }]}}> |
|
|
|
|
|
<MaterialIcon |
|
|
|
|
|
name={Icons.squareIcons.square} |
|
|
|
|
|
color={Colors.material.green800} |
|
|
|
|
|
size={Metrics.icons.splashIcon} |
|
|
|
|
|
/> |
|
|
|
|
|
</Animated.View> |
|
|
|
|
|
</View> |
|
|
|
|
|
</View> |
|
|
</View> |
|
|
); |
|
|
); |
|
|
} |
|
|
} |
|
|