|
| 1 | +# react-native-nitro-maps |
| 2 | + |
| 3 | +High-performance maps for React Native, built on [Nitro Modules](https://nitro.margelo.com) and the New Architecture. |
| 4 | + |
| 5 | +> **Status: Work in Progress** — This library is in early development. The public API is defined but native map rendering is not yet implemented. Components render placeholders. |
| 6 | +
|
| 7 | +## Goals |
| 8 | + |
| 9 | +- **Performance first** — Leverage Nitro Modules and JSI for zero-bridge map interactions. |
| 10 | +- **New Architecture native** — Built exclusively for React Native's New Architecture (Fabric + TurboModules). |
| 11 | +- **Cross-platform** — MapKit on iOS, Google Maps on Android, with a unified TypeScript API. |
| 12 | +- **Developer experience** — Familiar component API inspired by `react-native-maps`, with full TypeScript support. |
| 13 | +- **Tree-shakeable** — ESM-only build with proper `exports` map for optimal bundle size. |
| 14 | + |
| 15 | +## Installation |
| 16 | + |
| 17 | +```bash |
| 18 | +bun add react-native-nitro-maps react-native-nitro-modules |
| 19 | +``` |
| 20 | + |
| 21 | +> Requires React Native 0.78+ with the New Architecture enabled. |
| 22 | +
|
| 23 | +## Usage |
| 24 | + |
| 25 | +```tsx |
| 26 | +import { MapView, Marker, Polyline } from 'react-native-nitro-maps'; |
| 27 | + |
| 28 | +function MyMap() { |
| 29 | + return ( |
| 30 | + <MapView |
| 31 | + style={{ flex: 1 }} |
| 32 | + mapType="standard" |
| 33 | + onRegionChangeComplete={(region) => console.log(region)} |
| 34 | + > |
| 35 | + <Marker |
| 36 | + coordinate={{ latitude: 52.2297, longitude: 21.0122 }} |
| 37 | + title="Warsaw" |
| 38 | + /> |
| 39 | + <Polyline |
| 40 | + coordinates={[ |
| 41 | + { latitude: 52.2297, longitude: 21.0122 }, |
| 42 | + { latitude: 52.237, longitude: 21.017 }, |
| 43 | + ]} |
| 44 | + strokeColor="#FF0000" |
| 45 | + strokeWidth={3} |
| 46 | + /> |
| 47 | + </MapView> |
| 48 | + ); |
| 49 | +} |
| 50 | +``` |
| 51 | + |
| 52 | +### Imperative API |
| 53 | + |
| 54 | +```tsx |
| 55 | +import { useRef } from 'react'; |
| 56 | +import { MapView, type MapViewRef } from 'react-native-nitro-maps'; |
| 57 | + |
| 58 | +function ControlledMap() { |
| 59 | + const mapRef = useRef<MapViewRef>(null); |
| 60 | + |
| 61 | + const flyToWarsaw = () => { |
| 62 | + mapRef.current?.animateCamera({ |
| 63 | + center: { latitude: 52.2297, longitude: 21.0122 }, |
| 64 | + zoom: 12, |
| 65 | + }); |
| 66 | + }; |
| 67 | + |
| 68 | + return <MapView ref={mapRef} style={{ flex: 1 }} />; |
| 69 | +} |
| 70 | +``` |
| 71 | + |
| 72 | +## Public API |
| 73 | + |
| 74 | +### Components |
| 75 | + |
| 76 | +| Component | Description | |
| 77 | +| --- | --- | |
| 78 | +| `MapView` | Root map container | |
| 79 | +| `Marker` | Point annotation | |
| 80 | +| `Polyline` | Line overlay | |
| 81 | +| `Polygon` | Filled area overlay | |
| 82 | +| `Circle` | Circular area overlay | |
| 83 | + |
| 84 | +### Types |
| 85 | + |
| 86 | +| Type | Description | |
| 87 | +| --- | --- | |
| 88 | +| `Coordinate` | `{ latitude, longitude }` | |
| 89 | +| `Region` | Center + span | |
| 90 | +| `Camera` | Position, zoom, heading, pitch | |
| 91 | +| `MapType` | `'standard' \| 'satellite' \| 'hybrid' \| 'terrain'` | |
| 92 | +| `MapViewRef` | Imperative handle for camera control | |
| 93 | +| `MapViewProps` | Props for `MapView` | |
| 94 | +| `MarkerProps` | Props for `Marker` | |
| 95 | +| `PolylineProps` | Props for `Polyline` | |
| 96 | +| `PolygonProps` | Props for `Polygon` | |
| 97 | +| `CircleProps` | Props for `Circle` | |
| 98 | + |
| 99 | +### Utilities |
| 100 | + |
| 101 | +| Function | Description | |
| 102 | +| --- | --- | |
| 103 | +| `regionFromCoordinate(coord, latDelta?, lonDelta?)` | Create a `Region` from a coordinate | |
| 104 | +| `distanceBetween(a, b)` | Haversine distance in meters | |
| 105 | + |
| 106 | +## Roadmap |
| 107 | + |
| 108 | +See [docs/roadmap.md](docs/roadmap.md) for the full development plan. |
| 109 | + |
| 110 | +| Phase | Status | Description | |
| 111 | +| --- | --- | --- | |
| 112 | +| 1. Skeleton | In progress | Project structure, types, placeholder components | |
| 113 | +| 2. Nitro View | Planned | Nitrogen codegen, native MapView HybridView | |
| 114 | +| 3. MapKit (iOS) | Planned | Apple MapKit integration | |
| 115 | +| 4. Google Maps (Android) | Planned | Google Maps SDK integration | |
| 116 | +| 5. Overlays | Planned | Markers, polylines, polygons, circles | |
| 117 | +| 6. Events & gestures | Planned | Press, long-press, region change | |
| 118 | +| 7. Clustering | Planned | Marker clustering | |
| 119 | +| 8. Polish & release | Planned | Performance, docs, v1.0 | |
| 120 | + |
| 121 | +## Planned features |
| 122 | + |
| 123 | +- MapKit and Google Maps rendering |
| 124 | +- Markers with callouts and drag support |
| 125 | +- Polylines, polygons, and circles |
| 126 | +- Camera animations and imperative control |
| 127 | +- Region and press event callbacks |
| 128 | +- Marker clustering |
| 129 | +- Custom map styles |
| 130 | +- Offline tile caching (future) |
| 131 | + |
| 132 | +## Development |
| 133 | + |
| 134 | +```bash |
| 135 | +# Install dependencies |
| 136 | +bun install |
| 137 | + |
| 138 | +# Build the library |
| 139 | +bun run build |
| 140 | + |
| 141 | +# Run linting and type checks |
| 142 | +bun run lint |
| 143 | +bun run typecheck |
| 144 | + |
| 145 | +# Start the example app |
| 146 | +bun run example start |
| 147 | +``` |
| 148 | + |
| 149 | +See [CONTRIBUTING.md](CONTRIBUTING.md) for contribution guidelines. |
| 150 | + |
| 151 | +## Architecture |
| 152 | + |
| 153 | +See [docs/architecture.md](docs/architecture.md) for the technical architecture overview. |
| 154 | + |
| 155 | +## License |
| 156 | + |
| 157 | +MIT — see [LICENSE](LICENSE). |
0 commit comments