Contact person: Integrate MapLibre With RN 0.82

Phone:Show

Email:Show

Location: Tyngsboro, United States

Budget: Recommended by industry experts

Time to start: As soon as possible

Project description:
"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(() => {
[login to view URL]('MapLibreGL keys:', MapLibreGL && [login to view URL](MapLibreGL));
}, []);

return (
<SafeAreaProvider>
<SafeAreaView style={[login to view URL]} edges={['top', 'right', 'bottom', 'left']}>
<[login to view URL] style={[login to view URL]}>
<[login to view URL] zoomLevel={12} centerCoordinate={[-74.006, 40.7128]} />
<[login to view URL]
id="osm"
tileSize={256}
urlTemplates={['[login to view URL]{z}/{x}/{y}.png']}
>
<[login to view URL] id="osmLayer" sourceID="osm" />
</[login to view URL]>
</[login to view URL]>
</SafeAreaView>
</SafeAreaProvider>
);
}

const styles = [login to view URL]({
container: { flex: 1 },
map: { flex: 1 },
});" (client-provided description)