aretherecookies-mobile/js/pages/LandingPage.js

// @flow
import React from 'react';
import { View, Text } from 'react-native';
import wttpImage from '../imgs/toilet-paper-solid.png';
import { Link } from 'react-router-native';
import RouterButton from 'react-router-native-button';
import { compose, withHandlers, withState } from 'recompose';
import { withRouterContext } from '../enhancers/routeEnhancers';
import AsyncStorage from '@react-native-community/async-storage';

import theme from '../ui-theme';

type Props = {
	skipIfAlreadyChosen: () => void,
	setLoading: (val: boolean) => void,
	loading: boolean,
	router: {
		history: {
			replace: (route: string) => void,
		},
	},
};

const LandingPage = ({ skipIfAlreadyChosen, loading }: Props) => {
	if (loading) {
		skipIfAlreadyChosen();
		return null;
	}

	return (
		<View
			style={{
				flexDirection: 'column',
				alignItems: 'center',
				justifyContent: 'center',
				flex: 1,
				height: '100%',
			}}>
			{ <Image
				source={wttpImage}
				style={{ height: 320, marginBottom: 10 }}
				resizeMode="contain"
			/> }
			<Text style={{ fontSize: 24, marginBottom: 30, textAlign: 'center', width: 330 }}>
				We need to use your location to bring you the best experience possible.
			</Text>
			<View style={{ width: 275, marginBottom: 30 }}>
				<RouterButton to="/list/food" replace title="OK, fine" color={theme.palette.primaryColor} />
			</View>
			<Link to="/zipcode" replace>
				<Text style={{ color: theme.palette.primaryColor, marginBottom: 20, fontSize: 16 }}>
					I'd rather not.
				</Text>
			</Link>
		</View>
	);
};

export default compose(
	withRouterContext,
	withState('loading', 'setLoading', true),
	withHandlers({
		skipIfAlreadyChosen: (props: Props) => async () => {
			const zipcode = await AsyncStorage.getItem('zipcode');
			if (zipcode) {
				props.router.history.replace('/list/food');
			} else {
				props.setLoading(false);
			}
		},
	})
)(LandingPage);