I'm getting a build error when trying to run my React Native 0.77.2 Android app. The build fails with multiple undefined symbol errors related to react-native-safe-area-context , react-native-screens & react-native-svg.
NOTE: Android build is successfull only when I try to run/assemble the app I get these errors
Environment:
React Native: 0.77.2
Platform: Android
Build System: Gradle 8.10.2
OS: macOS
Node: 22
Error Message:
> Task :app:buildCMakeDebug[arm64-v8a] FAILED
C/C++: ld.lld: error: undefined symbol: facebook::react::Sealable::Sealable()
>>> referenced by Props.cpp:17 (/Users/.../node_modules/react-native-safe-area-context/android/build/generated/source/codegen/jni/react/renderer/components/safeareacontext/Props.cpp:17)
C/C++: ld.lld: error: undefined symbol: facebook::react::Sealable::~Sealable()
C/C++: ld.lld: error: undefined symbol: facebook::react::DebugStringConvertible::getDebugName() const
C/C++: ld.lld: error: undefined symbol: facebook::react::DebugStringConvertible::getDebugValue() const
C/C++: ld.lld: error: undefined symbol: facebook::react::DebugStringConvertible::getDebugChildren() const
C/C++: ld.lld: error: undefined symbol: facebook::react::HostPlatformViewProps::getDebugProps() const
C/C++: ld.lld: error: undefined symbol: facebook::react::BaseViewProps::getDebugProps() const
C/C++: ld.lld: error: undefined symbol: facebook::react::YogaStylableProps::getDebugProps() const
C/C++: ld.lld: error: undefined symbol: vtable for facebook::react::DebugStringConvertible
clang++: error: linker command failed with exit code 1 (use -v to see invocation)
What I've tried:
Clean Build:
cd android && ./gradlew clean npx react-native cleanDeleted node_modules and reinstalled:
rm -rf node_modules npm installCleared gradle cache
The error seems to be related to C++ linking issues where react-native-safe-area-context is trying to link against React Native internal symbols that don't exist or aren't exported in RN 0.77.2.
Has anyone encountered this issue with React Native 0.77.2? How can I resolve these undefined symbol errors?
Full error log:
My Package.json
{
"name": "market-app-test",
"description": "test-app",
"version": "0.0.187",
"main": "src/index.tsx",
"module": "src/index.tsx",
"react-native": "src/index.tsx",
"local": "src/index.tsx",
"browser": "src/index.web.tsx",
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"start:reset": "react-native start --reset-cache",
"android:clean": "cd android && ./gradlew clean && cd ..",
"ios:clean": "cd ios && xcodebuild clean && cd ../",
"pod-install": "npx pod-install ios/",
"test": "echo \"Run tests from root\" && exit 1",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx",
"clean": "del dist",
"build": "npm run clean && bob build"
},
"files": [
"src",
"conf",
"typings",
"dist",
"__mocks__",
"!**/__tests__"
],
"license": "UNLICENSED",
"dependencies": {
"@bam.tech/react-native-image-resizer": "^3.0.11",
"@notifee/react-native": "^7.5.0",
"@react-native-camera-roll/camera-roll": "^7.9.0",
"@react-native-clipboard/clipboard": "1.11.0",
"@react-native-community/netinfo": "^11.4.1",
"@react-native-firebase/analytics": "17.3.2",
"@react-native-firebase/app": "17.3.2",
"@react-native-firebase/crashlytics": "17.3.2",
"@react-native-firebase/messaging": "17.3.2",
"@react-native-firebase/perf": "17.3.2",
"@rest-hooks/endpoint": "3.7.0",
"@rest-hooks/hooks": "3.1.11",
"@rest-hooks/react": "7.2.5",
"@rest-hooks/rest": "6.3.8",
"@sentry/browser": "*",
"@shopify/flash-list": "^1.7.1",
"big-integer": "1.6.51",
"core-js": "^3.40.0",
"date-fns": "^2.28.0",
"js-cookie": "3.0.1",
"jwt-decode": "^4.0.0",
"memoize-one": "^5.2.1",
"nanoid": "^3.3.1",
"newrelic": "^9.2.0",
"newrelic-react-native-agent": "1.5.3",
"react-error-boundary": "3.1.4",
"react-native-audio-recorder-player": "^3.6.12",
"react-native-bootsplash": "4.x",
"react-native-create-thumbnail": "^2.0.1",
"react-native-device-info": "^11.1.0",
"react-native-document-picker": "9.x",
"react-native-file-access": "^2.5.3",
"react-native-file-viewer": "^2.1.5",
"react-native-otp-verify": "^1.1.8",
"react-native-permissions": "^3.9.0",
"react-native-render-html": "^6.3.4",
"save": "^2.9.0",
"schema-dts": "^1.1.2",
"search-insights": "^2.2.3",
},
"peerDependencies": {
"@lottiefiles/react-lottie-player": "3.x",
"@react-native-masked-view/masked-view": "*",
"@react-navigation/bottom-tabs": "6.x",
"@react-navigation/core": "6.x",
"@react-navigation/native": "6.x",
"@react-navigation/native-stack": "6.x",
"@react-navigation/stack": "6.x",
"@sentry/browser": "*",
"firebase": "9.x",
"lottie-react-native": "6.x",
"react": "*",
"react-native": "*",
"react-native-bootsplash": "4.x",
"react-native-date-picker": "4.x",
"react-native-document-picker": "9.x",
"react-native-fast-image": "8.x",
"react-native-fs": "2.*",
"react-native-geolocation-service": "*",
"react-native-gesture-handler": "2.x",
"react-native-haptic-feedback": "1.x",
"react-native-linear-gradient": "2.x",
"react-native-maps": ">=0.29.0",
"react-native-safe-area-context": "3.x",
"react-native-screens": "3.x",
"react-native-shimmer-placeholder": "2.x",
"react-native-svg": "*",
"react-native-video": "5.x",
"react-native-webview": "13.x"
},
"peerDependenciesMeta": {
"react-native-fast-image": {
"optional": true
},
"react-native-gesture-handler": {
"optional": true
},
"@sentry/browser": {
"optional": true
},
"@sentry/tracing": {
"optional": true
},
"firebase": {
"optional": true
}
},
"devDependencies": {
"@babel/core": "7.21.0",
"@babel/plugin-proposal-numeric-separator": "7.18.6",
"@babel/preset-env": "7.20.2",
"@babel/preset-typescript": "7.21.0",
"@babel/runtime": "7.21.0",
"@react-native-async-storage/async-storage": "1.20.0",
"@react-native/babel-preset": "0.73.21",
"@react-native/eslint-config": "0.73.2",
"@react-native/metro-config": "0.73.5",
"@react-native/typescript-config": "0.73.1",
"@react-native-masked-view/masked-view": "0.3.2",
"@react-navigation/bottom-tabs": "7.3.10",
"@react-navigation/core": "7.10.0",
"@react-navigation/native": "7.1.6",
"@react-navigation/native-stack": "7.3.10",
"@react-navigation/stack": "7.2.10",
"@rest-hooks/test": "10.2.1",
"@sentry/browser": "6.19.7",
"@sentry/tracing": "6.19.7",
"@tsconfig/react-native": "2.0.3",
"@types/jest": "29.4.0",
"@types/js-cookie": "3.0.2",
"@types/react": "^18.2.6",
"@types/react-test-renderer": "18.0.0",
"@typescript-eslint/eslint-plugin": "5.53.0",
"@typescript-eslint/parser": "5.53.0",
"babel-jest": "^29.6.3",
"del-cli": "^4.0.1",
"dotenv": "^16.0.0",
"eslint": "8.34.0",
"firebase": "9.9.4",
"jest": "^29.6.3",
"prettier": "2.8.8",
"lottie-react-native": "6.3.1",
"react": "18.2.0",
"react-native": "0.73.11",
"react-native-builder-bob": "0.18.2",
"react-native-date-picker": "4.2.9",
"react-native-document-picker": "9.1.2",
"react-native-fast-image": "8.6.1",
"react-native-fs": "2.19.0",
"react-native-geolocation-service": "^5.3.0-beta.4",
"react-native-gesture-handler": "2.9.0",
"react-native-haptic-feedback": "1.13.0",
"react-native-image-picker": "4.10.2",
"react-native-linear-gradient": "2.5.6",
"react-native-maps": "0.31.1",
"react-native-safe-area-context": "3.4.1",
"react-native-screens": "3.29.0",
"react-native-shimmer-placeholder": "2.0.8",
"react-native-svg": "15.12.0",
"react-native-svg-transformer": "1.5.0",
"react-native-safe-area-context": "5.4.1",
"react-native-screens": "4.11.1",
"react-native-video": "5.2.1",
"react-native-webview": "13.10.5",
"react-test-renderer": "18.2.0",
"typescript": "5.0.4"
},
"jest": {
"preset": "react-native",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
]
},
"react-native-builder-bob": {
"source": "src",
"output": "dist",
"targets": [
"commonjs",
"module",
[
"typescript",
{
"project": "tsconfig.build.json",
"tsc": "../../node_modules/typescript/bin/tsc"
}
]
]
}
}
My Build.gradle
// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
ext {
buildToolsVersion = "34.0.0"
minSdkVersion = 24 as Integer
compileSdkVersion = 34 as Integer
targetSdkVersion = 34 as Integer
ndkVersion = "25.1.8937393"
kotlinVersion = kotlin_version
kotlin_version = kotlin_version
glideVersion = glide_version
playServicesVersion = "18.0.1"
playServicesLocationVersion = "19.0.1"
enableHermes = true
nodeModulesDir = gradle.NODE_MODULES_DIR
applicationId = application_id
}
repositories {
google()
mavenCentral()
}
dependencies {
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
classpath 'com.android.tools.build:gradle:7.3.1'
classpath 'com.google.gms:google-services:4.4.2'
classpath 'com.google.firebase:perf-plugin:1.4.2'
classpath 'com.google.firebase:firebase-crashlytics-gradle:2.9.4'
classpath 'com.newrelic.agent.android:agent-gradle-plugin:7.6.2'
classpath 'com.facebook.react:react-native-gradle-plugin'
}
}
allprojects {
repositories {
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
url("$gradle.NODE_MODULES_DIR/react-native/android")
}
maven {
// Android JSC is installed from npm
url("$gradle.NODE_MODULES_DIR/jsc-android/dist")
}
maven {
url "$gradle.NODE_MODULES_DIR/@notifee/react-native/android/libs"
}
mavenCentral {
// We don't want to fetch react-native from Maven Central as there are
// older versions over there.
content {
excludeGroup "com.facebook.react"
}
}
google()
maven { url 'https://www.jitpack.io' }
}
}
apply plugin: "com.facebook.react.rootproject"
