Integrate MapLibre With RN 0.82

Заказчик: AI | Опубликовано: 03.10.2025
Бюджет: 30 $

I have a fresh React Native 0.82 code-base and I need MapLibre’s @maplibre/maplibre-react-native package fully installed, linked, and proven to work on iOS. The goal is simple: when the sample screen opens, an OpenStreetMap tile layer should render without errors or blank tiles. Scope • Set up all native dependencies (CocoaPods, Gradle steps not required for iOS). • Create a minimal demo screen that loads the default OSM raster tiles. • Make sure the project builds and runs on the latest Xcode / iOS simulator and a real device. • Document every step clearly so I can reproduce the setup on a clean clone. Style If extra styling or custom layers are needed later, I’ll supply those JSON style files; for now the default OSM look is fine. Deliverable 1. A Git branch (or repo fork) containing the working React Native 0.82 project with MapLibre added. 2. A concise README detailing install commands, Podfile changes and any troubleshooting notes. 3. Short video or screenshots confirming the map renders on iOS. I’ll test the build on my end; payment will be released once the demo screen reliably shows the live OSM map. import React, { useEffect } from 'react'; import { StyleSheet } from 'react-native'; import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context'; import MapLibreGL from '@maplibre/maplibre-react-native'; export default function App() { // Log keys once on mount useEffect(() => { console.log('MapLibreGL keys:', MapLibreGL && Object.keys(MapLibreGL)); }, []); return ( <SafeAreaProvider> <SafeAreaView style={styles.container} edges={['top', 'right', 'bottom', 'left']}> <MapLibreGL.MapView style={styles.map}> <MapLibreGL.Camera zoomLevel={12} centerCoordinate={[-74.006, 40.7128]} /> <MapLibreGL.RasterSource id="osm" tileSize={256} urlTemplates={['https://tile.openstreetmap.org/{z}/{x}/{y}.png']} > <MapLibreGL.RasterLayer id="osmLayer" sourceID="osm" /> </MapLibreGL.RasterSource> </MapLibreGL.MapView> </SafeAreaView> </SafeAreaProvider> ); } const styles = StyleSheet.create({ container: { flex: 1 }, map: { flex: 1 }, });