Integrate MapLibre With RN 0.82

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 },
});