import i18n from 'i18n-js'; import React from 'react'; import { StyleSheet, View } from 'react-native'; import { Subheading, useTheme } from 'react-native-paper'; import Rotation from '../../components/animations/rotation'; import { DefaultView } from '../../components/containers'; import SpaceSky from '../../components/decorations/space-sky'; import { SESSION_KEY } from '../../constants/session'; import { useGlobals } from '../../contexts/global'; import SolarSystem from '../../svgs/SolarSystem'; import Storer from '../../utils/storer'; /** * @param navigation * @returns {*} * @constructor */ function LoadingScreen({ navigation }) { const [{ session }, dispatch] = useGlobals(); const { colors } = useTheme(); const [phrase, setPhrase] = React.useState(0); const phrases = [ i18n.t('Analyzing name'), i18n.t('Analyzing birth date'), i18n.t('Analyzing gender'), i18n.t('Analyzing relationship status'), i18n.t('Analyzing favourite number'), i18n.t('Concluding analysis'), ]; React.useEffect(() => { const intervalNumber = setInterval(() => { if (phrase < 5) { setPhrase(phrase + 1); } else { const preSession = { ...session, ...{ days: 1, daysRow: 1, basicsDone: true }, }; Storer.set(SESSION_KEY, preSession).then(() => { dispatch({ type: 'setSession', fields: preSession, }); }); } }, 3000); return () => clearInterval(intervalNumber); }); return ( <DefaultView> <SpaceSky /> <View style={{ flex: 1 }} /> <View style={styles.loadingContainer}> <Rotation style={{ opacity: 0.7 }} rotate> <SolarSystem /> </Rotation> </View> <View style={{ flex: 3 }}> <Subheading style={[styles.textSubheading, { color: colors.primary }]}> {phrases[phrase]} </Subheading> </View> </DefaultView> ); } const styles = StyleSheet.create({ constellation: { zIndex: 0, position: 'absolute', bottom: 20, left: 20, opacity: 0.1, }, leo: { zIndex: 0, position: 'absolute', top: 20, right: 20, opacity: 0.2, }, counterContainer: { position: 'absolute', top: 20, left: 20, }, loadingContainer: { flex: 1, alignSelf: 'center', paddingTop: 40, zIndex: 1, }, textSubheading: { textAlign: 'center', marginTop: 20, }, }); export default LoadingScreen;