├── App.js ├── README.md ├── app.json ├── assets ├── bg.jpg ├── icon.png ├── marker.png └── splash.png ├── babel.config.js ├── package.json └── yarn.lock /App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, ImageBackground, Image } from 'react-native'; 3 | import * as Location from 'expo-location'; 4 | import * as Permissions from 'expo-permissions'; 5 | 6 | export default class App extends React.Component { 7 | state= { 8 | location:null, 9 | geocode:null, 10 | errorMessage:"" 11 | } 12 | componentDidMount(){ 13 | this.getLocationAsync() 14 | } 15 | getLocationAsync = async () => { 16 | let { status } = await Permissions.askAsync(Permissions.LOCATION); 17 | if (status !== 'granted') { 18 | this.setState({ 19 | errorMessage: 'Permission to access location was denied', 20 | }); 21 | } 22 | 23 | let location = await Location.getCurrentPositionAsync({accuracy:Location.Accuracy.BestForNavigation}); 24 | const { latitude , longitude } = location.coords 25 | this.getGeocodeAsync({latitude, longitude}) 26 | this.setState({ location: {latitude, longitude}}); 27 | 28 | }; 29 | getGeocodeAsync= async (location) => { 30 | let geocode = await Location.reverseGeocodeAsync(location) 31 | this.setState({ geocode}) 32 | } 33 | render(){ 34 | const {location,geocode, errorMessage } = this.state 35 | return ( 36 | 37 | 38 | 39 | {geocode ? `${geocode[0].city}, ${geocode[0].isoCountryCode}` :""} 40 | {geocode ? geocode[0].street :""} 41 | {location ? `${location.latitude}, ${location.longitude}` :""} 42 | {errorMessage} 43 | 44 | 45 | 46 | ); 47 | } 48 | } 49 | 50 | const styles = StyleSheet.create({ 51 | container: { 52 | flex: 1, 53 | backgroundColor: '#fff', 54 | alignItems: 'center', 55 | justifyContent: 'center', 56 | 57 | }, 58 | overlay:{ 59 | backgroundColor:"#00000070", 60 | height:"100%", 61 | width:"100%", 62 | justifyContent:"center", 63 | alignItems:"center" 64 | }, 65 | heading1:{ 66 | color:"#fff", 67 | fontWeight:"bold", 68 | fontSize:30, 69 | margin:20 70 | }, 71 | heading2:{ 72 | color:"#fff", 73 | margin:5, 74 | fontWeight:"bold", 75 | fontSize:15 76 | }, 77 | heading3:{ 78 | color:"#fff", 79 | margin:5 80 | } 81 | }); 82 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # React Native Geolocation Example 3 | 4 | 5 | 6 | ![React Native Geolocation Example Featured Image](https://rn-master.com/wp-content/uploads/2019/12/React-Native-Geolocation-Example.png) 7 | 8 | 9 | My name is Youssef el habchi, from [React Native Master](https://rn-master.com) I welcome each and everyone of you. 10 | 11 | 12 | Hello again, welcome to this new article, where we are going React Native Geolocation Example. 13 | In this article we are going to explore how to setup and consume the Location API from Expo. 14 | 15 | By making a simple app screen similar to most weather apps, with a background image, and Geolocation text. 16 | 17 | 18 | Feel free to read the whole article on my blog [React Native Geolocation Example](https://rn-master.com/react-native-geolocation-example) 19 | If you would like to try the app on Expo, I have prepared an expo project, check it from [Expo.io](https://expo.io/@alhydra/react-native-geolocation-example) 20 | 21 | [Need a React Native Developer ? Hire Me](https://rn-master.com/senior-react-native-developer-ready-to-go/) 22 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "React Native Geolocation Example", 4 | "slug": "react-native-geolocation-example", 5 | "privacy": "public", 6 | "sdkVersion": "36.0.0", 7 | "description":"Hello again, welcome to this new article, where we are going React Native Geolocation Example.In this article we are going to explore how to setup and consume the Location API from Expo. Read the full article here https://reactnativemaster.com/react-native-geolocation-example", 8 | "platforms": [ 9 | "ios", 10 | "android", 11 | "web" 12 | ], 13 | "version": "1.0.0", 14 | "orientation": "portrait", 15 | "icon": "./assets/icon.png", 16 | "splash": { 17 | "image": "./assets/splash.png", 18 | "resizeMode": "contain", 19 | "backgroundColor": "#ffffff" 20 | }, 21 | "updates": { 22 | "fallbackToCacheTimeout": 0 23 | }, 24 | "assetBundlePatterns": [ 25 | "**/*" 26 | ], 27 | "ios": { 28 | "supportsTablet": true 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /assets/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alhydra/React-Native-Geolocation-Example/8e34653c88af64cdc4070be9f4f3ae2a476bbfff/assets/bg.jpg -------------------------------------------------------------------------------- /assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alhydra/React-Native-Geolocation-Example/8e34653c88af64cdc4070be9f4f3ae2a476bbfff/assets/icon.png -------------------------------------------------------------------------------- /assets/marker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alhydra/React-Native-Geolocation-Example/8e34653c88af64cdc4070be9f4f3ae2a476bbfff/assets/marker.png -------------------------------------------------------------------------------- /assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alhydra/React-Native-Geolocation-Example/8e34653c88af64cdc4070be9f4f3ae2a476bbfff/assets/splash.png -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "node_modules/expo/AppEntry.js", 3 | "scripts": { 4 | "start": "expo start", 5 | "android": "expo start --android", 6 | "ios": "expo start --ios", 7 | "web": "expo start --web", 8 | "eject": "expo eject" 9 | }, 10 | "dependencies": { 11 | "expo": "~36.0.0", 12 | "expo-location": "~8.0.0", 13 | "expo-permissions": "~8.0.0", 14 | "react": "~16.9.0", 15 | "react-dom": "~16.9.0", 16 | "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz", 17 | "react-native-web": "~0.11.7" 18 | }, 19 | "devDependencies": { 20 | "babel-preset-expo": "~8.0.0" 21 | }, 22 | "private": true 23 | } 24 | --------------------------------------------------------------------------------