react-native-web-maps

react-native-maps for Web.

Overview

react-native-web-maps allow you to using react-native-maps seamlessly on the web, it base on @react-google-maps/api.

Usage

npm i @preflower/react-native-web-maps

webpack.config.js

  module.exports = {
    ...
    resolve: [
      alias: [
        ...
        'react-native': 'react-native-web',
+       /* set alias from react-native-maps to @preflower/react-native-web-maps */
+       'react-native-maps': '@preflower/react-native-web-maps'
      ]
    ]
  }

App.web.tsx/jsx

<!-- Before use Google Maps, you need to initialize it first -->
import { LoadScript } from '@preflower/react-native-web-maps'

const App = () => {
  return (
    <LoadScript googleMapsApiKey="...">
      ...content
    </LoadScript>
  )
}

Support Components

react-native-web-maps only override 👇 components, and export all other @react-google-maps/api apis

MapView

| Prop | Support | Note | |-------------------- |--------- |---------------------------------------------------------------------------------------- | | region | ⭕️ | | | initialRegion | ⭕️ | | | mapType | ⭕️ | | | customMapStyle | ⭕️ | | | zoomEnabled | ½⭕️ | different with react-native-maps, gesture (scroll and zoom) will be blocked when false | | zoomTapEnabled | ⭕️ | | | zoomControlEnabled | ⭕️ | | | minZoomLevel | ⭕️ | | | maxZoomLevel | ⭕️ | |

| Event | Support | |------------------------ |--------- | | onMapReady | ⭕️ | | onRegionChange | ⭕️ | | onRegionChangeComplete | ⭕️ | | onPress | ⭕️ | | onDoublePress | ⭕️ | | onPanDrag | ⭕️ |

| Method | Support | |----------------- |--------- | | getCamera | ⭕️ | | animateCamera | ⭕️ | | setCamera | ⭕️ | | animateToRegion | ⭕️ |

Marker

| Prop | Support | Note | |------------ |--------- |-------------------------------- | | image | ⭕️ | consistent with icon property | | icon | ⭕️ | consistent with image property | | coordinate | ⭕️ | | | anchor | ⭕️ | | | draggable | ⭕️ | | | opacity | ⭕️ | |

| Event | Support | |------------- |--------- | | onPress | ⭕️ | | onDrag | ⭕️ | | onDragStart | ⭕️ | | onDragEnd | ⭕️ |

Polygon

| Prop | Support | Note | |------------- |--------- |------ | | coordinates | ⭕️ | | | strokeWidth | ⭕️ | | | strokeColor | ⭕️ | | | fillColor | ⭕️ | | | geodesic | ⭕️ | | | tappable | ⭕️ | |

| Event | Support | |------------- |--------- | | onPress | ⭕️ |

Polyline

| Prop | Support | Note | |------------- |--------- |------ | | coordinates | ⭕️ | | | strokeWidth | ⭕️ | | | strokeColor | ⭕️ | | | geodesic | ⭕️ | | | tappable | ⭕️ | |

| Event | Support | |------------- |--------- | | onPress | ⭕️ |

Notice

• In addition to style, other style property (such as mapContainerStyle) not support React-Native StyleSheet, because react-native-web convert it into class, it will result exception

Develop Plan

At present, library is only used by myself, so i only developed the features that i needed, if someone needs feature that currently not supported, please commit issue or PR to let me know.

License

MIT