This is a new React Native project, bootstrapped using @react-native-community/cli.

Getting Started

npm install @juanpablocs/rn-interactive-maps

Android

Add your API key to your manifest file (android/app/src/main/AndroidManifest.xml):

<application>
   <!-- You will only need to add this meta-data tag, but make sure it's a child of application -->
   <meta-data
     android:name="com.google.android.geo.API_KEY"
     android:value="Your Google maps API Key Here"/>
</application>

Implement Component

MapView component

import MapView from '@juanpablocs/rn-interactive-maps';

const App = () => {
  return (
    <MapView
      markers={[]}
      zoom={10}
      style={styles.map}
      onMarkerPress={console.log}
    />
  )
}
const styles = StyleSheet.create({
  map: {
    ...StyleSheet.absoluteFillObject,
  },
})

Props 💅

| Prop | Description | Type | Default | Required | | :------------------------------: | :------------------------------------------------------------------------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----: | :------: | | markers | List of coords | Marker[]; | - | true | | zoom | Level zoom | number | - | true | | onMarkerPress | Tap click | (event: MarkerPressEventData) => void | - | false | | currentMarker | Center current marker | Marker | - | false |

Typing of Marker

type Marker = {
  lat: number;
  lng: number;
  title?: string;
  id?: string;
  image?: string;
};
// usage
import { Marker } from '@juanpablocs/rn-interactive-maps';

Start your Application

Let Metro Bundler run in its own terminal. Open a new terminal from the root of your React Native project. Run the following command to start your Android or iOS app:

For Android

# using npm
npm run android

# OR using Yarn
yarn android

Congratulations! :tada:

You've successfully run and modified your React Native App. :partying_face: