react-native-maps for Web, base on @react-google-maps/api
!license
react-native-maps for Web.
react-native-web-maps allow you to using react-native-maps seamlessly on the web, it base on @react-google-maps/api.
``bash`
npm i @preflower/react-native-web-maps
webpack.config.js
`diff`
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
`
import { LoadScript } from '@preflower/react-native-web-maps'
const App = () => {
return (
...content
)
}
`
only override 👇 components, and export all other @react-google-maps/api apis$3
| 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 | ⭕️ |
$3
| Prop | Support | Note |
|------------ |--------- |-------------------------------- |
| image | ⭕️ | consistent with icon property |
| icon | ⭕️ | consistent with image property |
| coordinate | ⭕️ | |
| anchor | ⭕️ | |
| draggable | ⭕️ | |
| opacity | ⭕️ | |
| Event | Support |
|------------- |--------- |
| onPress | ⭕️ |
| onDrag | ⭕️ |
| onDragStart | ⭕️ |
| onDragEnd | ⭕️ |
$3
| Prop | Support | Note |
|------------- |--------- |------ |
| coordinates | ⭕️ | |
| strokeWidth | ⭕️ | |
| strokeColor | ⭕️ | |
| fillColor | ⭕️ | |
| geodesic | ⭕️ | |
| tappable | ⭕️ | |
| Event | Support |
|------------- |--------- |
| onPress | ⭕️ |
$3
| 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 exceptionAt 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.
MIT