Commit 2826dd69 authored by Milan DiGiuseppe's avatar Milan DiGiuseppe

added bg video. AppLoader manages static assets

parent 4cbea335
......@@ -4118,6 +4118,15 @@
"url-parse": "^1.4.4"
}
},
"expo-av": {
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/expo-av/-/expo-av-8.0.0.tgz",
"integrity": "sha512-n1qOXi0jk6stY4q5RZqmQS90Rg9HDDGWE7EfLABhcyUA1EGJJbrupjpn75sxzNYMksad+oiGp0NULTHlKfa01A==",
"requires": {
"lodash": "^4.17.15",
"nullthrows": "^1.1.0"
}
},
"expo-camera": {
"version": "8.2.0",
"resolved": "https://registry.npmjs.org/expo-camera/-/expo-camera-8.2.0.tgz",
......
/* eslint-disable global-require */
/* eslint-disable @typescript-eslint/no-var-requires */
/* eslint-disable @typescript-eslint/camelcase */
import React from 'react';
import React, { createContext } from 'react';
import { AppLoading } from 'expo';
import {
useFonts,
......@@ -20,12 +22,26 @@ import {
} from '@expo-google-fonts/nunito';
import { View, StyleSheet } from 'react-native';
import { useSelector } from 'react-redux';
import { Asset } from 'expo-asset';
import { getAuthLoading } from './store/auth/AuthSelectors';
const signInVideoAsset = Asset.fromModule(require('../assets/SigninBackground.mp4'));
const geoLogoAsset = Asset.fromModule(require('../assets/LogoShadow.png'));
interface AssetContext {
signInVideo: Asset;
geoLogo: Asset;
}
export const AssetContext = createContext<AssetContext>({
signInVideo: signInVideoAsset,
geoLogo: signInVideoAsset,
});
/**
* Renders loading screen until everything necessary for app is loaded:
* - fonts
* - auth token
* - static assets
*/
const AppLoader: React.FC = ({ children }) => {
const [fontsLoaded] = useFonts({
......@@ -47,14 +63,20 @@ const AppLoader: React.FC = ({ children }) => {
const authLoading = useSelector(getAuthLoading);
if (!fontsLoaded || authLoading) {
// Load static assets
signInVideoAsset.downloadAsync();
geoLogoAsset.downloadAsync();
if (!fontsLoaded || !signInVideoAsset.downloaded || !geoLogoAsset.downloaded || authLoading) {
return <AppLoading />;
}
return (
<View style={StyleSheet.absoluteFill}>
{children}
</View>
<AssetContext.Provider value={{ signInVideo: signInVideoAsset, geoLogo: geoLogoAsset }}>
<View style={StyleSheet.absoluteFill}>
{children}
</View>
</AssetContext.Provider>
);
};
......
import React from 'react';
import {
View, Image, ImageBackground, StyleSheet,
} from 'react-native';
import React, { useContext } from 'react';
import { View, Image, StyleSheet } from 'react-native';
import { SocialIcon } from 'react-native-elements';
import { Video } from 'expo-av';
import { signInAsyncFacebook, signInAsyncGoogle } from '../store/auth/AuthActions';
import LogoImage from '../../assets/LogoShadow.png';
import SignInBackgroundImage from '../../assets/SignInBackground.png';
import theme from '../theme';
import { AssetContext } from '../AppLoader';
const styles = StyleSheet.create({
backgroundVideo: {
...StyleSheet.absoluteFillObject,
zIndex: 1,
},
logo: {
flex: 1,
width: 300,
height: 107,
alignSelf: 'center',
resizeMode: 'contain',
zIndex: 2,
},
buttonContainer: {
width: '100%',
paddingHorizontal: theme.spacing.screenPadding,
paddingVertical: theme.spacing.large,
zIndex: 2,
},
});
const SignInScreen = () => (
<ImageBackground
source={SignInBackgroundImage}
style={{
flex: 1,
}}
>
{/* TODO: Replace GEO image with svg once shadows are supported */}
<Image
source={LogoImage}
style={styles.logo}
/>
<View style={styles.buttonContainer}>
{/* TODO: create SocialIcon component/wrapper and apply our font styles */}
<SocialIcon
title={'Sign in with Facebook'}
button
type={'facebook'}
onPress={signInAsyncFacebook}
/>
<SocialIcon
title={'Sign in with Google'}
button
type={'google'}
onPress={signInAsyncGoogle}
const SignInScreen = () => {
const { signInVideo, geoLogo } = useContext(AssetContext);
return (
<Video
source={signInVideo}
shouldPlay
isLooping
style={styles.backgroundVideo}
resizeMode={'cover'}
>
{/* TODO: Replace GEO image with svg once shadows are supported */}
<Image
source={{ uri: geoLogo.localUri! }}
style={styles.logo}
/>
</View>
</ImageBackground>
);
<View style={styles.buttonContainer}>
{/* TODO: create SocialIcon component/wrapper and apply our font styles */}
<SocialIcon
title={'Sign in with Facebook'}
button
type={'facebook'}
onPress={signInAsyncFacebook}
/>
<SocialIcon
title={'Sign in with Google'}
button
type={'google'}
onPress={signInAsyncGoogle}
/>
</View>
</Video>
);
};
export default SignInScreen;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment