diff --git a/assets/SigninBackground.mp4 b/assets/SigninBackground.mp4 new file mode 100644 index 0000000000000000000000000000000000000000..94023391aaaa38314ec7010f6e4038cfaed907ff Binary files /dev/null and b/assets/SigninBackground.mp4 differ diff --git a/package-lock.json b/package-lock.json index 8d373a8dc78346d45e22d9495f36448c76f9c013..0b690b626ee51ccb2afb7f9258ffd3e135bde59d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index d6c08b8952fb457ad448001a0191194f6a7516d6..ccd6bdc7ca936cd2b432ab6d5134c19030b9303b 100644 --- a/package.json +++ b/package.json @@ -43,7 +43,9 @@ "react-native-swiper": "^1.6.0", "react-native-touchable-scale": "^2.1.1", "react-native-web": "^0.11.7", - "react-redux": "^7.1.1" + "react-redux": "^7.1.1", + "expo-av": "~8.0.0", + "expo-asset": "~8.0.0" }, "devDependencies": { "@babel/core": "^7.0.0", diff --git a/src/AppLoader.tsx b/src/AppLoader.tsx index 263d02d26a4d0924ec72cacffcd69231ad20a5f3..434023d1fd72cc30b59bd236dc4858e10d8c1136 100644 --- a/src/AppLoader.tsx +++ b/src/AppLoader.tsx @@ -1,5 +1,7 @@ +/* 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({ + 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 ; } return ( - - {children} - + + + {children} + + ); }; diff --git a/src/screens/SignInScreen.tsx b/src/screens/SignInScreen.tsx index 9956e772a019d5ec41f55425e5502951711b3216..7c72a900b2c212e4177bf018e47f83d755c63303 100644 --- a/src/screens/SignInScreen.tsx +++ b/src/screens/SignInScreen.tsx @@ -1,56 +1,63 @@ -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 = () => ( - - {/* TODO: Replace GEO image with svg once shadows are supported */} - - - {/* TODO: create SocialIcon component/wrapper and apply our font styles */} - - { + const { signInVideo, geoLogo } = useContext(AssetContext); + return ( + - -); - + + {/* TODO: create SocialIcon component/wrapper and apply our font styles */} + + + + + ); +}; export default SignInScreen;