search

facebook / react-native

A framework for building native applications using React
https://reactnative.dev
MIT License
118.8k stars 24.29k forks source link

Error setting property 'borderRadius' of RCTText with tag #43: JSON value 'N' of type NSString cannot be converted to NSNumber #36302

Closed LayMui closed 1 year ago

LayMui commented 1 year ago

Description

with using the latest version "react": "^18.2.0", "react-native": "^0.71.3",

when build on xcode 14.2, I got the error seen on the iOS Simulator JSON value 'N' of type NSString cannot be converted to NSNumber

React Native Version

0.71.3

Output of npx react-native info

info Fetching system and libraries information... (node:48325) Warning: Accessing non-existent property 'padLevels' of module exports inside circular dependency (Use node --trace-warnings ... to show where the warning was created) System: OS: macOS 13.2.1 CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz Memory: 61.52 MB / 16.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 16.19.1 - /usr/local/opt/node@16/bin/node Yarn: 1.22.19 - /usr/local/bin/yarn npm: 8.19.3 - /usr/local/opt/node@16/bin/npm Watchman: 2023.02.20.00 - /usr/local/bin/watchman Managers: CocoaPods: 1.11.3 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1 Android SDK: API Levels: 28, 29, 30, 31, 32 Build Tools: 28.0.3, 29.0.2, 30.0.2, 31.0.0, 32.0.0, 32.1.0 System Images: android-30 | Google Play Intel x86 Atom, android-31 | Google APIs Intel x86 Atom_64, android-31 | Google Play Intel x86 Atom_64 Android NDK: Not Found IDEs: Android Studio: 2021.1 AI-211.7628.21.2111.8309675 Xcode: 14.2/14C18 - /usr/bin/xcodebuild Languages: Java: 11.0.11 - /usr/bin/javac npmPackages: @react-native-community/cli: ^10.2.0 => 10.2.0 react: ^18.2.0 => 18.2.0 react-native: ^0.71.3 => 0.71.3 react-native-macos: ^0.68.66 => 0.68.66 npmGlobalPackages: react-native: Not Found

Steps to reproduce

yarn install cd ios pod install

Go to xcode 14.2 and build to launch the app on iOS Simulator

Snack, code example, screenshot, or link to a repository

package.json: { "name": "nativeIntegration", "version": "0.0.1", "private": true, "scripts": { "device": "source ~/.zshrc && adb -s 52102aedb8f46493 reverse tcp:8081 tcp:8081", "android": "react-native run-android", "android:on:device": "yarn device && yarn android", "ios": "react-native run-ios", "start": "react-native start", "test": "jest", "appium:start": "appium --allow-insecure chromedriver_autodownload", "lint": "eslint .", "dev:local:android": "export NODE_ENV=local_dev && yarn android", "cleanup": "rm -rf node_modules && yarn cache clean --force && watchman watch-del-all", "clean-start": "yarn start -- --reset-cache", "clean-and-start": "yarn cleanup && yarn install && yarn clean-start", "clean:report": "rimraf target && rm -fr reporter/.html && rm -fr reporter/json rm -fr reporter/json && rm -fr reporter/report", "test:ios": "failsafe clean update:app test:execute:ios", "ios.bs.ipa": "failsafe clean test:execute:ios:ipa", "android.bs.apk": "failsafe clean test:execute:android:apk", "update:app": "sh scripts/ios.sh", "test:execute:ios:production": "cross-env NODE_ENV=production wdio config/wdio.ios.app.conf.ts --cucumberOpts.tagExpression '@test'", "test:execute:ios:dev": "cross-env NODE_ENV=dev wdio config/wdio.ios.app.conf.ts", "test:execute:ios:stage": "cross-env NODE_ENV=stage wdio config/wdio.ios.app.conf.ts", "test:execute:ios:preprod": "cross-env NODE_ENV=preprod wdio config/wdio.ios.app.conf.ts", "test:execute:ios:bs.1.ipa": "wdio config/wdio.ios.app.bs.1.ts --cucumberOpts.tagExpression '@test'", "test:execute:ios:bs.2.ipa": "wdio config/wdio.ios.app.bs.2.ts --cucumberOpts.tagExpression '@test'", "test:execute:ios:ipa:local": "cross-env NODE_ENV=production wdio config/wdio.ios.ipa.ts", "update:apk": "sh scripts/android.sh", "test:android": "failsafe clean update:apk test:execute:android", "test:execute:android:production": "cross-env NODE_ENV=production wdio config/wdio.android.app.conf.ts --cucumberOpts.tagExpression '@test'", "test:execute:android:dev": "cross-env NODE_ENV=dev wdio config/wdio.android.app.conf.ts", "test:execute:android:stage": "cross-env NODE_ENV=stage wdio config/wdio.android.app.conf.ts", "test:execute:android:preprod": "cross-env NODE_ENV=preprod wdio config/wdio.android.app.conf.ts", "test:execute:android:bs:1.apk": "wdio config/wdio.android.app.bs.1.ts --cucumberOpts.tagExpression '@test'", "test:execute:android:bs:2.apk": "wdio config/wdio.android.app.bs.2.ts --cucumberOpts.tagExpression '@test'", "report:allure": "allure generate ./allure-results --clean && allure open", "report:cucumber": "node reporter/index.js && open reporter/cucumber_report.html" }, "dependencies": { "@babel/plugin-proposal-decorators": "^7.13.15", "@babel/preset-flow": "^7.17.12", "@babel/preset-react": "^7.17.12", "@babel/preset-typescript": "^7.17.12", "@haul-bundler/cli": "^0.23.0", "@react-native-async-storage/async-storage": "*", "@react-native-community/checkbox": "^0.5.14", "@react-native-community/cli": "^10.2.0", "@react-native-community/masked-view": "^0.1.11", "@react-native-firebase/app": "^17.3.1", "@react-native-picker/picker": "^2.2.0", "@react-navigation/native": "^6.0.6", "@react-navigation/stack": "^6.0.11", "@testing-library/react-native": "^9.1.0", "@types/jquery": "^3.5.14", "@wdio/allure-reporter": "^7.18.0", "allure-commandline": "^2.17.2", "appium": "^1.22.2", "appium-doctor": "^1.16.0", "axios": "^0.27.2", "babel-plugin-transform-typescript-metadata": "^0.3.2", "chalk": "^5.0.1", "cross-env": "^7.0.3", "cucumber-html-reporter": "^5.5.0", "fs-extra": "^10.1.0", "i18n-js": "^3.8.0", "libphonenumber-js": "1.10.9", "moment": "^2.29.4", "multiple-cucumber-html-reporter": "^1.20.0", "node-fetch": "^3.2.0", "react": "^18.2.0", "react-native": "^0.71.3", "react-native-auth0": "^2.16.0", "react-native-background-timer": "^2.4.1", "react-native-device-info": "^8.1.4", "react-native-gesture-handler": "^2.2.0", "react-native-macos": "^0.68.66", "react-native-reanimated": "^2.3.0", "react-native-safe-area-context": "^3.2.0", "react-native-screens": "^3.10.2", "react-native-sensitive-info": "^5.5.8", "react-native-sms-retriever": "^1.1.1", "react-native-svg": "^12.1.1", "react-native-svg-transformer": "^1.0.0", "react-native-svg-uri": "^1.2.3", "react-native-webview": "^11.26.0", "ts-jest": "^28.0.5", "wdio-multiple-cucumber-html-reporter": "^1.1.1" }, "devDependencies": { "@babel/core": "^7.20.12", "@babel/preset-env": "^7.20.2", "@cucumber/cucumber": "^7.3.2", "@react-native-community/eslint-config": "^3.0.1", "@serenity-js/assertions": "^3.0.0-rc.11", "@serenity-js/console-reporter": "^3.0.0-rc.11", "@serenity-js/core": "^3.0.0-rc.11", "@serenity-js/cucumber": "^3.0.0-rc.11", "@serenity-js/mocha": "^3.0.0-rc.11", "@serenity-js/serenity-bdd": "^3.0.0-rc.11", "@serenity-js/web": "^3.0.0-rc.11", "@serenity-js/webdriverio": "^3.0.0-rc.11", "@types/node": "^18.11.9", "@typescript-eslint/eslint-plugin": "^5.10.0", "@typescript-eslint/parser": "^5.10.0", "@wdio/appium-service": "^7.8.0", "@wdio/browserstack-service": "^7.16.3", "@wdio/cli": "^7.11.0", "@wdio/cucumber-framework": "^7.9.0", "@wdio/local-runner": "^7.9.0", "@wdio/mocha-framework": "^7.16.3", "@wdio/sauce-service": "^7.16.3", "@wdio/spec-reporter": "^7.9.0", "appium": "^1.22.2", "babel-jest": "^27.4.6", "browserstack-local": "^1.4.5", "dotenv": "^10.0.0", "eslint": "^8.7.0", "eslint-plugin-import": "^2.25.2", "eslint-plugin-simple-import-sort": "^7.0.0", "eslint-plugin-unicorn": "^40.1.0", "eslint-plugin-unused-imports": "^2.0.0", "eslint-plugin-wdio": "^7.4.2", "expect-webdriverio": "^3.1.2", "is-ci": "^3.0.0", "jest": "^27.4.7", "metro-react-native-babel-preset": "^0.66.0", "npm-failsafe": "^0.4.3", "prettier": "^2.7.1", "react-native-dotenv": "^3.4.2", "react-test-renderer": "^17.0.2", "rimraf": "^3.0.2", "ts-node": "^10.4.0", "twilio": "^3.67.1", "typescript": "^4.5.5", "wdio-appium-service": "^0.2.3", "wdio-chromedriver-service": "^7.2.0", "wdio-cucumberjs-json-reporter": "^4.4.1", "webdriverio": "^7.16.14" }, "jest": { "preset": "react-native", "transformIgnorePatterns": [ "node_modules/(?!(jest-)?@?react-native|@react-native-community|@react-navigation)" ], "setupFiles": [ "/jest.setup.js" ] } }

podfile: require_relative '../node_modules/react-native/scripts/react_native_pods' require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

platform :ios, '11.0'

ENV['SWIFT_VERSION'] = '5' platform :ios, '13.0'

pod 'Firebase', :modular_headers => true pod 'FirebaseCoreInternal', :modular_headers => true pod 'GoogleUtilities', :modular_headers => true pod 'FirebaseCore', :modular_headers => true

target 'nativeIntegration' do config = use_native_modules!

use_react_native!( :path => config[:reactNativePath],

to enable hermes on iOS, change false to true and then install pods

:hermes_enabled => false

)

target 'nativeIntegrationTests' do inherit! :complete

Pods for testing

end

Enables Flipper.

#

Note that if you have use_frameworks! enabled, Flipper will not work and

you should disable the next line.

use_flipper!()

post_install do |installer| react_native_post_install(installer) end end

Amurmurmur commented 1 year ago

@LayMui Can you check if you have borderRadius set to 'none' somewhere conditionally or in general if so just replace it to '0px' instead.

LayMui commented 1 year ago

I search through the code. there is no borderRadius set to 'none'

Screenshot 2023-02-28 at 12 10 13 PM
LayMui commented 1 year ago

this does not happen in < "react": "^17.0.2", < "react-native": "^0.67.5",

but happen in "react": "^18.2.0", "react-native": "^0.71.3",

LayMui commented 1 year ago

I have to run npx react-native-asset the error goes away but is there a way to automate this?

LayMui commented 1 year ago

this issue is resolved cause of the internal Design system component used the fix is borderRadius: Metrics.borderRadius.N, before the fix it was borderRadius: Metrics.borderRadius.'N'

static defaultProps = {
    addBoxBackground: false,
borderRadius: Metrics.borderRadius.N,
    bulletColor: Colors.colorType.neutral.base,
    dataDetectorType: DataDetectorTypes.NONE,
    ellipsizeMode: EllipsizeModeTypes.TAIL,}

not sure why the older version of RN 0.67.x this issue does not show up