first commit

Author: AdityaKshettri

.expo-shared/assets.json

@@ -0,0 +1,4 @@
+{
+  "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
+  "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
+}

.gitignore

@@ -0,0 +1,14 @@
+node_modules/**/*
+.expo/*
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+web-report/
+
+# macOS
+.DS_Store

App.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import {createStore, combineReducers, applyMiddleware} from 'redux';
+import {Provider} from 'react-redux';
+import ReduxThunk from 'redux-thunk';
+
+import PlacesNavigator from './navigation/PlacesNavigator';
+import placesReducer from './store/places-reducer';
+import {init} from './helpers/db';
+
+init()
+	.then(() => {
+		console.log('Initialized database!');
+	})
+	.catch(err => {
+		console.log('Initializing db failed!');
+		console.log(err);
+	});
+
+const rootReducer = combineReducers({
+  	places: placesReducer
+});
+
+const store = createStore(rootReducer, applyMiddleware(ReduxThunk));
+
+export default function App() {
+	return (
+		<Provider store={store}>
+			<PlacesNavigator />
+		</Provider>
+	);
+}

app.json

@@ -0,0 +1,28 @@
+{
+  "expo": {
+    "name": "the-place-app",
+    "slug": "the-place-app",
+    "platforms": [
+      "ios",
+      "android",
+      "web"
+    ],
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    }
+  }
+}

assets/icon.png

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

assets/splash.png

@@ -0,0 +1,19 @@
+import React from 'react';
+import { HeaderButton } from 'react-navigation-header-buttons';
+import { Ionicons } from '@expo/vector-icons';
+import { Platform } from 'react-native';
+
+import Colors from '../constants/Colors';
+
+const CustomHeaderButton = props => {
+  return (
+    <HeaderButton
+      {...props}
+      IconComponent={Ionicons}
+      iconSize={23}
+      color={Platform.OS === 'android' ? 'white' : Colors.primary}
+    />
+  );
+};
+
+export default CustomHeaderButton;

babel.config.js

@@ -0,0 +1,80 @@
+import React, { useState } from 'react';
+import { View, Button, Image, Text, StyleSheet, Alert } from 'react-native';
+import * as ImagePicker from 'expo-image-picker';
+import * as Permissions from 'expo-permissions';
+
+import Colors from '../constants/Colors';
+
+const ImgPicker = props => {
+  const [pickedImage, setPickedImage] = useState();
+
+  const verifyPermissions = async () => {
+    const result = await Permissions.askAsync(
+      Permissions.CAMERA_ROLL,
+      Permissions.CAMERA
+    );
+    if (result.status !== 'granted') {
+      Alert.alert(
+        'Insufficient permissions!',
+        'You need to grant camera permissions to use this app.',
+        [{ text: 'Okay' }]
+      );
+      return false;
+    }
+    return true;
+  };
+
+  const takeImageHandler = async () => {
+    const hasPermission = await verifyPermissions();
+    if (!hasPermission) {
+      return;
+    }
+    const image = await ImagePicker.launchCameraAsync({
+      allowsEditing: true,
+      aspect: [16, 9],
+      quality: 0.5
+    });
+
+    setPickedImage(image.uri);
+    props.onImageTaken(image.uri);
+  };
+
+  return (
+    <View style={styles.imagePicker}>
+      <View style={styles.imagePreview}>
+        {!pickedImage ? (
+          <Text>No image picked yet.</Text>
+        ) : (
+          <Image style={styles.image} source={{ uri: pickedImage }} />
+        )}
+      </View>
+      <Button
+        title="Take Image"
+        color={Colors.primary}
+        onPress={takeImageHandler}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  imagePicker: {
+    alignItems: 'center',
+    marginBottom: 15
+  },
+  imagePreview: {
+    width: '100%',
+    height: 200,
+    marginBottom: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderColor: '#ccc',
+    borderWidth: 1
+  },
+  image: {
+    width: '100%',
+    height: '100%'
+  }
+});
+
+export default ImgPicker;

components/HeaderButton.js

@@ -0,0 +1,124 @@
+import React, { useState, useEffect } from 'react';
+import {
+  View,
+  Button,
+  Text,
+  ActivityIndicator,
+  Alert,
+  StyleSheet
+} from 'react-native';
+import * as Location from 'expo-location';
+import * as Permissions from 'expo-permissions';
+
+import Colors from '../constants/Colors';
+import MapPreview from './MapPreview';
+
+const LocationPicker = props => {
+  const [isFetching, setIsFetching] = useState(false);
+  const [pickedLocation, setPickedLocation] = useState();
+
+  const mapPickedLocation = props.navigation.getParam('pickedLocation');
+
+  const { onLocationPicked } = props;
+
+  useEffect(() => {
+    if (mapPickedLocation) {
+      setPickedLocation(mapPickedLocation);
+      onLocationPicked(mapPickedLocation);
+    }
+  }, [mapPickedLocation, onLocationPicked]);
+
+  const verifyPermissions = async () => {
+    const result = await Permissions.askAsync(Permissions.LOCATION);
+    if (result.status !== 'granted') {
+      Alert.alert(
+        'Insufficient permissions!',
+        'You need to grant location permissions to use this app.',
+        [{ text: 'Okay' }]
+      );
+      return false;
+    }
+    return true;
+  };
+
+  const getLocationHandler = async () => {
+    const hasPermission = await verifyPermissions();
+    if (!hasPermission) {
+      return;
+    }
+
+    try {
+      setIsFetching(true);
+      const location = await Location.getCurrentPositionAsync({
+        timeout: 5000
+      });
+      setPickedLocation({
+        lat: location.coords.latitude,
+        lng: location.coords.longitude
+      });
+      props.onLocationPicked({
+        lat: location.coords.latitude,
+        lng: location.coords.longitude
+      });
+    } catch (err) {
+      Alert.alert(
+        'Could not fetch location!',
+        'Please try again later or pick a location on the map.',
+        [{ text: 'Okay' }]
+      );
+    }
+    setIsFetching(false);
+  };
+
+  const pickOnMapHandler = () => {
+    props.navigation.navigate('Map');
+  };
+
+  return (
+    <View style={styles.locationPicker}>
+      <MapPreview
+        style={styles.mapPreview}
+        location={pickedLocation}
+        onPress={pickOnMapHandler}
+      >
+        {isFetching ? (
+          <ActivityIndicator size="large" color={Colors.primary} />
+        ) : (
+          <Text>No location chosen yet!</Text>
+        )}
+      </MapPreview>
+      <View style={styles.actions}>
+        <Button
+          title="Get User Location"
+          color={Colors.primary}
+          onPress={getLocationHandler}
+        />
+        <Button
+          title="Pick on Map"
+          color={Colors.primary}
+          onPress={pickOnMapHandler}
+        />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  locationPicker: {
+    marginBottom: 15
+  },
+  mapPreview: {
+    marginBottom: 10,
+    width: '100%',
+    height: 150,
+    borderColor: '#ccc',
+    borderWidth: 1
+  },
+  actions: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    width: '100%'
+  }
+});
+
+export default LocationPicker;

components/ImagePicker.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { TouchableOpacity, Image, StyleSheet } from 'react-native';
+
+import ENV from '../env';
+
+const MapPreview = props => {
+  let imagePreviewUrl;
+
+  if (props.location) {
+    imagePreviewUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${
+      props.location.lat
+    },${
+      props.location.lng
+    }&zoom=14&size=400x200&maptype=roadmap&markers=color:red%7Clabel:A%7C${
+      props.location.lat
+    },${props.location.lng}&key=${ENV.googleApiKey}`;
+  }
+
+  return (
+    <TouchableOpacity onPress={props.onPress} style={{ ...styles.mapPreview, ...props.style }}>
+      {props.location ? (
+        <Image style={styles.mapImage} source={{ uri: imagePreviewUrl }} />
+      ) : (
+        props.children
+      )}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  mapPreview: {
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  mapImage: {
+    width: '100%',
+    height: '100%'
+  }
+});
+
+export default MapPreview;