Using Third-Party Native Libraries

# 1. Evaluate BEFORE install (see checklist below)
# 2. Install with Expo's resolver - not bare npm
npx expo install react-native-maps
 
# 3. Register config plugin in app.config.ts (if the library ships one)
# 4. Regenerate native projects and verify
npx expo prebuild --clean
npx expo-doctor
 
# 5. Build a development client - third-party native code is NOT in Expo Go
npx expo install expo-dev-client
npx expo run:ios
# or: eas build --profile development --platform all

// app.config.ts - typical third-party plugin registration
import type { ExpoConfig } from "expo/config";
 
export default ({ config }: { config: ExpoConfig }): ExpoConfig => ({
  ...config,
  plugins: [
    [
      "react-native-maps",
      {
        iosGoogleMapsApiKey: process.env.GOOGLE_MAPS_IOS_KEY,
        androidGoogleMapsApiKey: process.env.GOOGLE_MAPS_ANDROID_KEY,
      },
    ],
  ],
});

#!/usr/bin/env bash
# scripts/verify-native-dep.sh - run after adding a native library
set -euo pipefail
 
PKG="${1:?Usage: ./verify-native-dep.sh <package-name>}"
 
echo "▶ Installing $PKG via expo install..."
npx expo install "$PKG"
 
echo "▶ Running expo-doctor..."
npx expo-doctor
 
echo "▶ Resolving autolinking (iOS)..."
npx expo-modules-autolinking resolve --platform ios | grep -i "${PKG##*/}" || true
 
echo "▶ Clean prebuild dry run..."
npx expo prebuild --clean --no-install
 
echo "✅ $PKG passed local verification - still build on device"

npx create-expo-app@latest MapsCookbook --template blank-typescript@sdk-57 --yes
cd MapsCookbook
npx expo install expo-dev-client react-native-maps

// app.config.ts
import type { ExpoConfig } from "expo/config";
 
const defineConfig = ({ config }: { config: ExpoConfig }): ExpoConfig => ({
  ...config,
  name: "MapsCookbook",
  slug: "maps-cookbook",
  plugins: [
    [
      "react-native-maps",
      {
        iosGoogleMapsApiKey: process.env.GOOGLE_MAPS_IOS_KEY ?? "",
        androidGoogleMapsApiKey: process.env.GOOGLE_MAPS_ANDROID_KEY ?? "",
      },
    ],
  ],
});
 
export default defineConfig;

// App.tsx
import MapView, { Marker } from "react-native-maps";
import { StyleSheet, View } from "react-native";
 
export default function App() {
  return (
    <View style={styles.container}>
      <MapView
        style={styles.map}
        initialRegion={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
      >
        <Marker
          coordinate={{ latitude: 37.78825, longitude: -122.4324 }}
          title="San Francisco"
        />
      </MapView>
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: { flex: 1 },
  map: { flex: 1 },
});

# Regenerate native dirs and run on simulator
npx expo prebuild
npx expo run:ios
 
# Start Metro for the dev client (not Expo Go)
npx expo start --dev-client

# Confirm New Architecture in generated project
grep -r "newArchEnabled" android/ ios/ 2>/dev/null || true
 
# Force-verify with a release build on device (not just debug Metro)
npx expo run:ios --configuration Release

# List modules that will compile into the binary
npx expo-modules-autolinking resolve --platform ios
npx expo-modules-autolinking resolve --platform android
 
# React Native community autolinking (non-Expo packages)
npx react-native config