Home > Back-end >  Google Map is not showing in react native only Google Logo is visible
Google Map is not showing in react native only Google Logo is visible

Time:01-18

I assigned correct Api key and why map is not showing? I App.js Code

import MapView from 'react-native-maps';

export default function App() {
  return (
    <View style={styles.container}>
     <MapView 
    initialRegion={{
      latitude: 37.78825,
      longitude: -122.4324,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421,
    }}
  />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

My android emulator shows this result

enter image description here

CodePudding user response:

Add the style to MapView and give absoluteFillObject.

MapView: {
    ...StyleSheet.absoluteFillObject,
    top: 10, //depends on your screen
    backgroundColor: 'transparent',
  }

CodePudding user response:

I have tried the following in an example project. Please try like this -

const App = () => {return (
  <MapView
      style={{flex: 1}}
      provider={PROVIDER_GOOGLE}
      minZoomLevel={6}
      onMapReady={() => {}}
  >
  
  </MapView>);};

Kindly let me know if this works for you.

  •  Tags:  
  • Related