React Native maps

React Native maps

yarn add react-native-maps

//code
import React, { Component } from 'react';
import { View } from 'react-native'
import MapView from 'react-native-maps'
class App extends Component {
    state = {}
    render() {
        return (
            <View style={{flex:1, top:0, bottom:0, left:0,right:0}}>

                <MapView style={{ width: '100%', height: '100%' }}
                    initialRegion={{
                        latitude: 37.78825,
                        longitude: -122.4324,
                        latitudeDelta: 0.0922,
                        longitudeDelta: 0.0421,
                    }}>
                </MapView>
 
            </View>
                );
            }
        }
     
export default App;

.........................................................................................................................................................................................................
Go to Android Folder and open it AndroidManifest.xml
and Edit it 

like that Android/app/src/main/AndroidManifest.xml

 <meta-data   
       android:name="com.google.android.geo.API_KEY"
       android:value="YOUR_API_KEY"/>
    </application>
................................................................................................................................................................................................................................

Step -1 
https://console.cloud.google.com/apis/credentials?project=passportjs-191915

Choose Library ->

choose Maps SDK for Android  -->

enable  for API  -->

Create API for Maps -->
Back to Menu
https://console.developers.google.com/apis/credentials?project=noted-tesla-252116

Display -->

Thanks :)
............................................................................................................................................................................................................................

Example -2

import React, { Component } from 'react'
import { View, Text, Image } from 'react-native'
import bg from './src/assets/hello.jpg'
import MapView from 'react-native-maps';

class App extends Component {
    render() {
        return (
            <View style={{
                position: 'absolute',
                top: 0,
                left: 0,
                right: 0,
                bottom: 0,
                justifyContent: 'flex-end',
                alignItems: 'center',
             
            }}
            >
                <MapView style={{
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    right: 0,
                    bottom: 0,
                }}
                    initialRegion={{
                        latitude: 37.78825,
                        longitude: -122.4324,
                        latitudeDelta: 0.0922,
                        longitudeDelta: 0.0421,
                    }}
                />
            </View>

        )
    }
}
export default App
............................................................................................................................................................................................................................
Example #3

import React, { Component } from  'react';
import { StyleSheet } from  'react-native';
import MapView from  'react-native-maps';

export default class App extends Component {
    render() {
        return <MapView style = {styles.map}
            initialRegion = {{
                latitude: 13.139238380834923,
                longitude: 80.25188422300266,
                latitudeDelta: 0.0922,
                longitudeDelta: 0.0421,
                }}/>;
    }
}

const styles = StyleSheet.create({
    map: {
        height: 100,
        flex: 1
        }
});

Happy Coding :)
............................................................................................................................................................................................................................
Example : #3 [How to add react-native-google-places-autocomplete]

Install
npm i react-native-google-places-autocomplete