Commit f6cab58f authored by Milan John Paul Digiuseppe's avatar Milan John Paul Digiuseppe

Merge branch 'settings-screen' into 'master'

Settings screen

See merge request !6
parents 781ff39f f519bd78
......@@ -4,12 +4,13 @@ import { Icon } from 'react-native-elements';
import { ViewStyle } from 'react-native';
import { Color, COLOR_MAP } from '../theme';
const SIZE = 20;
const DEFAULT_SIZE = 20;
interface Props {
color?: Color;
icon: string;
onPress: () => void;
size?: number;
style?: ViewStyle;
}
......@@ -17,16 +18,17 @@ const IconButton: React.FC<Props> = ({
color = 'black',
icon,
onPress,
size = DEFAULT_SIZE,
style,
}) => (
<TouchableOpacity
onPress={onPress}
style={[style, { width: SIZE, height: SIZE }]}
style={[style, { width: DEFAULT_SIZE, height: DEFAULT_SIZE }]}
>
<Icon
color={COLOR_MAP[color]}
name={icon}
size={SIZE}
size={size}
type={'font-awesome-5'}
/>
</TouchableOpacity>
......
import React, { useState } from 'react';
import React, { useCallback } from 'react';
import { Header } from 'react-native-elements';
import { useNavigation } from '@react-navigation/native';
import theme from '../theme';
import DevModal from './DevModal';
import IconButton from './IconButton';
const { colors, spacing } = theme;
const RightComponent = () => {
const { navigate } = useNavigation();
const onSettingsPress = useCallback(() => navigate('Settings'), [navigate]);
return (
<IconButton icon={'cog'} size={20} color={'white'} onPress={onSettingsPress} />
);
};
interface Props {
title: string;
}
const ScreenHeader: React.FC<Props> = ({ title }) => {
const [devModalOpen, setDevModalOpen] = useState(false);
return (
<>
<Header
leftContainerStyle={{ display: 'none' }}
centerComponent={{
text: title,
style: {
fontSize: 32,
color: colors.white,
width: '100%',
},
}}
rightComponent={{
text: 'dev',
onPress: () => setDevModalOpen(true),
style: {
color: colors.white,
},
}}
containerStyle={{
paddingHorizontal: spacing.screenPadding,
backgroundColor: colors.green,
}}
/>
<DevModal isOpen={devModalOpen} onClose={() => setDevModalOpen(false)} />
</>
);
};
const ScreenHeader: React.FC<Props> = ({ title }) => (
<Header
leftContainerStyle={{ display: 'none' }}
centerComponent={{
text: title,
style: {
fontSize: 32,
color: colors.white,
width: '100%',
},
}}
rightComponent={<RightComponent />}
containerStyle={{
paddingHorizontal: spacing.screenPadding,
backgroundColor: colors.green,
}}
/>
);
export default ScreenHeader;
import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import CreateCacheNavigator from './CreateCacheNavigator';
import CreateCacheNavigator, { BackButton } from './CreateCacheNavigator';
import CameraModal from '../screens/create/CameraModal';
import SavedMessagesScreen from '../screens/SavedMessagesScreen';
import DiscoverScreen from '../screens/DiscoverScreen';
import SettingsScreen from '../screens/SettingsScreen';
import DevScreen from '../screens/DevScreen';
const Stack = createStackNavigator();
const AppNavigator = () => (
<Stack.Navigator mode={'modal'} headerMode={'none'}>
<Stack.Navigator
mode={'modal'}
screenOptions={({ route, navigation }) => ({
headerShown: ['Settings'].includes(route.name),
headerLeft: () => (
<BackButton
isX
onPress={() => navigation.goBack()}
/>
),
headerTitleStyle: { fontSize: 24 },
})}
>
<Stack.Screen
name={'Discover'}
component={DiscoverScreen}
/>
<Stack.Screen
name={'Settings'}
component={SettingsScreen}
options={{ title: 'Settings' }}
/>
<Stack.Screen
name={'Create'}
component={CreateCacheNavigator}
......@@ -24,6 +43,10 @@ const AppNavigator = () => (
name={'CameraModal'}
component={CameraModal}
/>
<Stack.Screen
name={'DevScreen'}
component={DevScreen}
/>
</Stack.Navigator>
);
......
......@@ -8,17 +8,17 @@ import CacheSubmitScreen from '../screens/create/CacheSubmitScreen';
import theme from '../theme';
interface BackButtonProps {
close: boolean;
isX: boolean;
onPress: () => void;
}
const BackButton: React.FC<BackButtonProps> = ({ close, onPress }) => (
export const BackButton: React.FC<BackButtonProps> = ({ isX, onPress }) => (
<TouchableOpacity
onPress={onPress}
style={{ marginLeft: theme.spacing.screenPadding }}
>
<Icon
name={close ? 'times' : 'chevron-left'}
name={isX ? 'times' : 'chevron-left'}
type={'font-awesome-5'}
/>
</TouchableOpacity>
......@@ -31,7 +31,7 @@ const CreateCacheNavigator = () => (
({ navigation, route }) => ({
headerLeft: () => (
<BackButton
close={route.name === 'CacheContent'}
isX={route.name === 'CacheContent'}
onPress={() => navigation.goBack()}
/>
),
......
import React, { useCallback } from 'react';
import { StyleSheet, View } from 'react-native';
import { Overlay } from 'react-native-elements';
import { useDispatch, useSelector } from 'react-redux';
import { reverseGeocodeAsync } from 'expo-location';
import { useNavigation } from '@react-navigation/native';
import { geoSearch } from '../store/caches/CachesActions';
import { getUserLatLng } from '../store/location/LocationSelectors';
import { signOutAsync } from '../store/auth/AuthActions';
import GeoButton from './GeoButton';
import GeoButton from '../components/GeoButton';
import theme from '../theme';
const styles = StyleSheet.create({
overlay: {
fullscreen: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
button: {
marginVertical: theme.spacing.small,
},
});
interface Props {
isOpen: boolean;
onClose: () => void;
}
const DevModal: React.FC<Props> = ({ isOpen, onClose }) => {
const DevScreen: React.FC = () => {
const navigation = useNavigation();
const dispatch = useDispatch();
const userLocation = useSelector(getUserLatLng);
const onClose = useCallback(() => navigation.goBack(), [navigation]);
const geosearch = useCallback(() => {
dispatch(geoSearch(userLocation, '1'));
onClose();
}, [onClose, dispatch, userLocation]);
navigation.navigate('Discover');
}, [dispatch, userLocation, navigation]);
const geocode = useCallback(async () => {
const reverseGeocode = useCallback(async () => {
const results = await reverseGeocodeAsync(userLocation);
const {
country,
......@@ -44,31 +46,32 @@ const DevModal: React.FC<Props> = ({ isOpen, onClose }) => {
const signout = useCallback(() => {
dispatch(signOutAsync());
onClose();
}, []);
}, [dispatch, onClose]);
return (
<Overlay isVisible={isOpen} fullScreen>
<View style={styles.overlay}>
<GeoButton
title={'geosearch'}
onPress={geosearch}
/>
<GeoButton
title={'geo code'}
onPress={geocode}
/>
<GeoButton
title={'sign out'}
onPress={signout}
/>
<GeoButton
title={'Close'}
onPress={onClose}
/>
</View>
</Overlay>
<View style={styles.fullscreen}>
<GeoButton
title={'Geosearch'}
onPress={geosearch}
style={styles.button}
/>
<GeoButton
title={'Reverse Geocode'}
onPress={reverseGeocode}
style={styles.button}
/>
<GeoButton
title={'Sign Out'}
onPress={signout}
style={styles.button}
/>
<GeoButton
title={'Close'}
onPress={onClose}
style={styles.button}
/>
</View>
);
};
export default DevModal;
export default DevScreen;
import React, { useCallback } from 'react';
import { View, StyleSheet } from 'react-native';
import { Avatar } from 'react-native-elements';
import { useNavigation } from '@react-navigation/native';
import GeoText from '../components/GeoText';
import theme from '../theme';
import GeoButton from '../components/GeoButton';
const styles = StyleSheet.create({
avatar: {
backgroundColor: theme.colors.mediumgray,
marginTop: theme.spacing.medium,
},
});
const SettingsScreen = () => {
const { navigate } = useNavigation();
const onDevPress = useCallback(() => navigate('DevScreen'), [navigate]);
return (
<View style={{ flex: 1, justifyContent: 'space-between' }}>
<View style={{ alignItems: 'center' }}>
<Avatar
rounded
title={'MD'}
containerStyle={styles.avatar}
size={'xlarge'}
/>
<GeoText
text={'milan_epic_gamer'}
variant={'formHeader'}
style={{ marginTop: theme.spacing.small }}
/>
</View>
<GeoButton
title={'Dev Screen'}
onPress={onDevPress}
style={{ marginBottom: theme.spacing.medium }}
/>
</View>
);
};
export default SettingsScreen;
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