I just created a new react-native expo app.
I installed a few dependencies:
{
"name": "qrcode",
"version": "1.0.0",
"scripts": {
"start": "expo start --dev-client",
"android": "expo run:android",
"ios": "expo run:ios",
"web": "expo start --web"
},
"dependencies": {
"expo": "46.0.0",
"expo-dev-client": "~1.3.1",
"expo-permissions": "~13.2.0",
"expo-splash-screen": "~0.16.2",
"expo-status-bar": "~1.4.2",
"react": "18.0.0",
"react-native": "0.69.6",
"react-native-qrcode-svg": "^6.2.0",
"react-native-svg": "^13.2.0",
"expo-barcode-scanner": "~11.4.0"
},
"devDependencies": {
"#babel/core": "^7.12.9"
},
"private": true
}
I am running on eas build instead of using the expo go app.
I am trying to use the react-native-qrcode-svg package but it doesn't work
I always keep getting the error:
TypeError: _qrcode.default.create is not a function. (In '_qrcode.default.create(value, {
errorCorrectionLevel: errorCorrectionLevel
})', '_qrcode.default.create' is undefined)
I am extremely surprised of the lack of solution or direction to solve this error on the internet. I have never come across the anything like this tbh lol.
Please what could be the problem or a possible solution?
Related
I have used eas buidl -p android --profile preview to build my .apk file. But I am not getting why app is stuck at Splash Screen. I am not getting what is the cause. Please help me out and thank you in advance.
my pcakage.json
"name": "appName-mob",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"build": "eas build -p android"
},
"dependencies": {
"#expo-google-fonts/inter": "^0.2.2",
"#expo/vector-icons": "^13.0.0",
"#react-native-community/netinfo": "9.3.0",
"#react-navigation/bottom-tabs": "^6.3.3",
"#react-navigation/native": "^6.0.12",
"#react-navigation/native-stack": "^6.8.0",
"#tanstack/react-query": "^4.3.9",
"axios": "^0.27.2",
"expo": "~46.0.9",
"expo-app-loading": "~2.1.0",
"expo-font": "~10.2.0",
"expo-splash-screen": "~0.16.2",
"expo-status-bar": "~1.4.0",
"react": "18.0.0",
"react-icons": "^4.4.0",
"react-native": "0.69.6",
"react-native-gesture-handler": "~2.5.0",
"react-native-safe-area-context": "4.3.1",
"react-native-svg": "12.3.0",
"react-native-svg-transformer": "^1.0.0",
"react-native-view-more-text": "^2.1.0",
"expo-linear-gradient": "~11.4.0",
"#react-native-async-storage/async-storage": "~1.17.3"
},
"devDependencies": {
"#babel/core": "^7.18.6",
"babel-loader": "^8.2.5",
"babel-plugin-module-resolver": "^4.1.0",
"babel-preset-react-native": "^4.0.1",
"path": "^0.12.7"
},
"private": true
}```
in development mode clear application cache and storage then test your app
Thank you for your time. But this problem has been solved. Actually it wasn't a problem in the development server. So, I made a development build and ran my code there and got the log of UIManager Issue which was then resolved by installing react-native-screens. I would suggest if this happen to any of you again just make a development build and test your code there. It was very much helpful.
I am making an app in react native expo. It runs on web browser but fails to run on android simulator or expo go app on my phone. i get 2 errors :-
Error: Requiring module "node_modules\react-native-reanimated\src\Animated.js", which threw an exception: Error: Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin?
Invariant Violation: "main" has not been registered. This can happen if:
Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
any help would be appreciated
my expo sdk : 44,
my package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"#react-native-async-storage/async-storage": "~1.15.0",
"#react-native-community/masked-view": "^0.1.10",
"axios": "^0.24.0",
"expo": "^44.0.0",
"expo-status-bar": "~1.2.0",
"ngrok": "^4.2.2",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-gesture-handler": "~2.1.0",
"react-native-reanimated": "~2.3.1",
"react-native-safe-area-context": "3.3.2",
"react-native-screens": "~3.10.1",
"react-native-web": "0.17.1",
"react-navigation": "^4.4.4",
"react-navigation-stack": "^2.10.4",
"react-navigation-tabs": "^2.11.0",
"react-native-maps": "0.29.4"
},
"devDependencies": {
"#babel/core": "^7.12.9"
},
"private": true
}
my babel.config
module.exports = function (api) {
api.cache(true);
return {
presets: ["babel-preset-expo"],
plugins: ["react-native-reanimated/plugin"],
};
};
As mentioned in the reanimated doc,
Install yarn add react-native-reanimated#next
Edit babel plugin config
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: ['react-native-reanimated/plugin'],
};
};
Clear Metro Bundler cache & start expo expo start --clear
That should solve the issue!
I've had the same error before, and I did 2 things:
Actually installed react-native-reanimated by typing
yarn add react-native-reanimated#next in cmd.
Made sure everything in my expo was up to date by typing
expo update and pressing y to get every module on the compatible version.
Stop the server
run expo r -c to clear the cache.
I'm developing an android app in react native and it is crash when I install it to my android device, my android device is running on android 10.
package.json
{
"name": "WifiSwitch",
"version": "0.0.2",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#react-native-community/async-storage": "^1.12.1",
"#react-native-community/masked-view": "^0.1.10",
"#react-native-community/viewpager": "^5.0.11",
"#react-navigation/native": "^5.8.10",
"#react-navigation/stack": "^5.12.8",
"axios": "^0.21.1",
"native-base": "^2.15.0",
"react": "16.13.1",
"react-native": "^0.65.1",
"react-native-android-wifi": "^0.0.41",
"react-native-best-viewpager": "^1.0.4",
"react-native-gesture-handler": "^1.9.0",
"react-native-image-picker": "^4.0.6",
"react-native-reanimated": "^1.13.2",
"react-native-safe-area-context": "^3.1.9",
"react-native-screens": "^2.16.1",
"react-native-tcp-socket": "^4.5.5",
"react-native-uuid": "^2.0.1",
"react-native-vector-icons": "^7.1.0"
},
"devDependencies": {
"#babel/core": "^7.12.10",
"#babel/runtime": "^7.12.5",
"#react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^26.6.3",
"eslint": "^7.17.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.64.0",
"react-test-renderer": "16.13.1"
},
"jest": {
"preset": "react-native"
}
}
I recommend you to debug your application using adb logcat
Steps to configure
Connect your device to your computer
Run adb devices to check out if your device is detected.
If the command doesn't work because "adb is not a command", go to your ANDROID_HOME path, then open platform-tools
Now run adb logcat: This command will output all logs (debug and error levels) coming from your Android Device.
Install your application again. I recommend you to use react-native run-android. More info: https://reactnative.dev/docs/running-on-device
When your app is going to crash, you will see a Crash Log in the adb logcat output. Search for your app package name.
For your convenience, you could as well have a look here to filter only your app: Filter LogCat to get only the messages from My Application in Android?
Whenever you get a crash log, a stack trace is also provided. That can help you trace the issue.
I have created .apk of my create the native project. It is working fine in android 5 and 6 version devices. It is failing in the higher version of the devices.
I have used below link to create the signed apk file.
https://facebook.github.io/react-native/docs/signed-apk-android#docsNav
When I installed the react-native project in higher version of the devices using react-native run-android it is working fine. But , in case of .apk it is failing.
Can you help me to resolve this,
my package.json file is ,
{
"name": "awsUpload",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"aws-sdk": "^2.395.0",
"link": "^0.1.5",
"react": "16.6.3",
"react-native": "^0.58.3",
"react-native-aws3": "0.0.8",
"react-native-device-info": "^0.26.2",
"react-native-fetch-blob": "^0.10.8",
"react-native-file-upload": "^1.0.4",
"react-native-image-picker": "^0.28.0",
"react-native-material-dropdown": "^0.11.1",
"react-native-navigator": "^0.4.2",
"react-native-router-flux": "^4.0.6",
"react-navigator": "0.0.0-0",
"uniqid": "^5.0.3"
},
"devDependencies": {
"babel-core": "7.0.0-bridge.0",
"babel-jest": "24.0.0",
"jest": "24.0.0",
"metro-react-native-babel-preset": "0.51.1",
"react-test-renderer": "16.6.3"
},
"jest": {
"preset": "react-native"
}
}
In logs, it is giving below error,
Failed to get property persist.sys.media.traces
java.lang.IllegalStateException: Handler (android.os.Handler) {e12e3b3} sending message to a Handler on a dead thread
I was fetching the device location using a set of codes. In the higher version of Android devices due to security reason, It was not allowing my app to fetch it. I add the android device permission by referring following link.
Link is,
https://stackoverflow.com/questions/45822318/how-do-i-request-permission-for-android-device-location-in-react-native-at-run-t
I have an issue with react native release APK.
The app run on debug mode but it crash immediately on release mode
Got these message from the logcat which is probably causing this problem
Module AppRegistry is not a registered callable module (calling unmountApplicationComponentAtRootTag)
11-01 08:28:24.531 6644 6662 E ReactNativeJS: undefined is not an object (evaluating 'd.View.propTypes.style')
11-01 08:28:24.534 6644 6662 E ReactNativeJS: Module AppRegistry is not a registered callable module (calling runApplication)
Here is my packages :
{
"name": "jbw",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"color": "^2.0.0",
"intl": "^1.2.5",
"native-base": "^2.3.3",
"prop-types": "^15.6.0",
"react": "16.0.0-beta.5",
"react-native": "0.49.3",
"react-native-fontawesome": "^5.7.0",
"react-native-keyboard-aware-scroll-view": "^0.4.1",
"react-native-linear-gradient": "^2.3.0",
"react-native-loading-spinner-overlay": "^0.5.2",
"react-native-masked-text": "^1.6.2",
"react-native-modal": "^4.1.1",
"react-native-popup-dialog": "^0.9.38",
"react-native-super-grid": "^1.0.4",
"react-native-vector-icons": "^4.4.2",
"react-navigation": "^1.0.0-beta.15"
},
"devDependencies": {
"babel-jest": "21.2.0",
"babel-preset-react-native": "4.0.0",
"jest": "21.2.1",
"react-test-renderer": "16.0.0-beta.5"
},
"jest": {
"preset": "react-native"
}
}
Got the problem, caused by
View.PropTypes
deprecated on 0.49
should move to
import { ViewPropTypes } from 'react-native';
Try to do the following steps:
cd android
sudo ./gradlew clean
If not works, you can check your index.android.js on the line:
AppRegistry.registerComponent('MyAppName', () => MyRootComponent);
Verify if the name in (MyAppName) is the same of the name that are in MainActivity.java in the method getMainComponentName()
just make sure that you have:
"react-native": "0.50.3",
"react": "^16.0.0"
then do:
watchman watch-del-all
cd android
./gradlew clean
./gradlew assembleDebug
and everything will work well
credit to: #mobdim https://github.com/facebook/react-native/issues/16745#issuecomment-343443988
i should mention that i had to fix also the problem mentioned here by Ganesh Cauda