Reputation: 2093
I'm trying to render a Mapbox map in my react native app. I've followed the docs https://rnmapbox.github.io/docs/install and everything went fine but when calling the actual library in my component it throws this error:
Android Bundled 3643ms (node_modules/expo/AppEntry.js)
ERROR Error: @rnmapbox/maps native code not available.
Make sure you have linked the library and rebuild your app. See https://rnmapbox.github.io/docs/install?rebuild=expo#rebuild, js engine: hermes
The prebuild went without any issue:
npx expo prebuild --clean
✔ Would you like to proceed? … yes
✔ Cleared android, ios code
✔ Created native directories
✔ Updated package.json | no changes
✔ Finished prebuild
✔ Installed CocoaPods
Here is the app.config.ts
import { ConfigContext, ExpoConfig } from 'expo/config';
module.exports = ({ config }: ConfigContext): ExpoConfig => {
return {
...config,
name: 'hot2eat',
slug: 'hot2eat',
version: '1.0.0',
orientation: 'portrait',
icon: './assets/icon.png',
userInterfaceStyle: 'light',
splash: {
image: './assets/splash.png',
resizeMode: 'contain',
backgroundColor: '#ffffff',
},
updates: {
fallbackToCacheTimeout: 0,
},
assetBundlePatterns: ['**/*'],
plugins: [
[
'@rnmapbox/maps',
{
RNMapboxMapsDownloadToken: process.env.MAPBOX_SECRET_KEY,
},
],
[
'expo-build-properties',
{
ios: {
useFrameworks: 'static',
},
},
],
],
ios: {
supportsTablet: true,
bundleIdentifier: 'com.hot2eat.app',
},
android: {
adaptiveIcon: {
foregroundImage: './assets/adaptive-icon.png',
backgroundColor: '#FFFFFF',
},
package: 'com.hot2eat.app',
},
web: {
favicon: './assets/favicon.png',
},
};
};
Am I missing anything? Any help is appreciated, thanks!
Upvotes: 2
Views: 1483
Reputation: 2093
Nevermind, I just need to build the app after running the prebuild command:
npx expo run:android
Which is somemehow missing in the docs.
Upvotes: 1