create map.js

digibus/src/screen/map_screen/mapscreen.js

+import React, { PropTypes, Component, useState, useEffect, useCallback } from 'react';
+import { View, StyleSheet, Text, Image } from 'react-native';
+import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
+import MapView, { PROVIDER_GOOGLE, Marker } from 'react-native-maps';
+import pin from '../../assert/images/bun_on.png';
+
+const MapScreen = () => {
+    return (
+        <View style={style.main}>
+            <View style={style.holder}>
+                <MapView
+                    provider={PROVIDER_GOOGLE}
+                    style={style.mpView}
+                    region={{
+                        latitude: 6.9040,
+                        longitude: 79.9550,
+                        latitudeDelta: 0.010,
+                        longitudeDelta: 0.0050,
+                    }}
+                >
+                    <Marker
+                        coordinate={{ latitude: 6.9040, longitude: 79.9550 }}
+                        title="this is a marker"
+                        description="this is a marker example"
+                    >
+                        <Image
+                            source={require('../../assert/images/bus.png')}
+                            style={{ width: 46, height: 48 }}
+                            resizeMode="contain" />
+                    </Marker>
+                </MapView>
+            </View>
+        </View>
+    )
+}
+
+const style = StyleSheet.create({
+    main: {
+        flex: 1,
+        backgroundColor: '#fff'
+    },
+    holder: {
+        height: hp('100%'),
+        width: wp('100%'),
+        alignItems: 'center',
+
+    },
+    mpView: {
+        height: hp('90%'),
+        width: wp('96%'),
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginTop: 20,
+        borderRadius: wp('5%'),
+    }
+});
+
+export default MapScreen;
\ No newline at end of file