react-native android won't run on device - react-native

i just started a project and im trying to start the but it already has this error showing:
error: node_modules\react-native\Libraries\Image\ImageAnalyticsTagContext.js: Property body[6] of BlockStatement expected node to be of a type ["Statement"] but instead got "AssignmentExpression"

this is a known issue caused by a bug in a newly released version of babel. it will impact all new react-native and expo apps. you can resolve it with yarn resolutions in a new project:
--- a/package.json
+++ b/package.json
## -25,5 +25,8 ##
},
"jest": {
"preset": "react-native"
+ },
+ "resolutions": {
+ "#babel/plugin-transform-react-display-name": "7.14.5"
}
}
After insert resulutions key on the package.json, run yarn install
Credits: https://github.com/brentvatne
Issue Link: https://github.com/facebook/react-native/issues/31961

Run this command:
npm install --save-dev #babel/plugin-transform-react-display-name

The problem is due to a babel update that affected the RN project. copy #babel from some other project and paste in node_modules or Download the #babel folder from here and replace the existing folder in the node_modules.#Babel Download
And run
npm start --reset-cache

Related

React Native Android Project Not Found

I am getting this error.
error Android project not found. Are you sure this is a React Native project? If your Android files are located in a non-standard location (e.g. not inside 'android' folder), consider setting `project.android.sourceDir` option to point to a new location.
info Run CLI with --verbose flag for more details.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
There is no solution on this link.
"dependencies": {
"react": "17.0.2",
"react-native": "0.68.2"
}
```
Package.json file
Hi i have solved with 3 steps.
Clear node_modules
add this to package.json
"resolutions": {
"glob": "7.2.0" }
And reinstall with npm install
If this is not work please install glob with npm i glob#7.2.0
you can fix it without reinstalling, just go into the node_modules folder, find glob, and open the common.js file.
in line 114 you will find options.allowWindowsEscape = true, change it to false and it will work perfectly!
You can install glob npm i glob
Its works for me.

get userPackagerOpts.sourceExts is not iterable while runing the expo app

I am getting the following error while runing the expo app.
$ expo-cli start --tunnel
[00:24:51] Starting project at C:\Users\DEMO\Desktop\worldsweets
[00:24:51] Expo DevTools is running at http://localhost:19002
[00:24:59] userPackagerOpts.sourceExts is not iterable
[00:24:59] TypeError: userPackagerOpts.sourceExts is not iterable
at startReactNativeServerAsync (C:\#expo\xdl#57.9.12\src\Project.ts:1788:80)
at Object.startAsync (C:\#expo\xdl#57.9.12\src\Project.ts:2407:5)
at action (C:\Users\DEMO\AppData\Roaming\npm\node_modules\expo-cli\src\commands\start.ts:181:3)
at C:\Users\DEMO\AppData\Roaming\npm\node_modules\expo-cli\src\commands\start.ts:354:16
at Command.<anonymous> (C:\Users\DEMO\AppData\Roaming\npm\node_modules\expo-cli\src\exp.ts:80:7)
I believe this is an old bug that has been reintroduced in expo-cli v3.21.2 or v3.21.3. I am using expo-cli v3.21.3 and ran into this issue too.
This post on the expo forum suggested adding "sourceExts": ["js", "jsx", "svg", "svgx"] to your app.json under packagerOpts and worked to get my project running again.
app.json
"packagerOpts": {
"assetExts": ["ttf"],
"sourceExts": ["js", "jsx", "svg", "svgx"]
}
Update the expo-cli version to 3.17.10.
This new version seems to fix this issue.
npm install expo-cli#3.17.10 --save
Related question: https://forums.expo.io/t/userpackageropts-sourceexts-is-not-iterable/35271/4
You just need to update your expo-cli
Run this command
npm install -g expo-cli
Problem Solved

Error when I try to run an app in android Ionic 4

I have this error when I try to run my app in android
An unhandled exception occurred: [BABEL] C:\Users\UserName\Desktop\Ionic\MyProject\www\32-es2015.js: Could not find plugin "proposal-numeric-separator". Ensure there is an entry in ./available-plugins.js for it. (While processing: "C:\Users\UserName\Desktop\Ionic\MyProject\node_modules\#babel\preset-env\lib\index.js")
See "C:\Users\UserN~1\AppData\Local\Temp\ng-GJZvQx\angular-errors.log" for further details.
[ERROR] An error occurred while running subprocess ng.
as mentioned in this workaround
delete node_modules and package-lock.json
add "resolutions": { "#babel/preset-env": "^7.8.7" } to package.json
npm install npm-force-resolutions --save-dev
npm install
npx npm-force-resolutions
npm install again
run or build your app
if the error persist in future builds of your app try from step 5 before build it.
open package.json
"dependencies": {
"#babel/compat-data": "7.8.0"
}
run command
npm install
and then build your project and it should work.

Javascript bundler building stuck at 99%

Expo react-native app does not load on connected iphone
When I start my app using the command below:
expo start --tunnel
I get the following error:
Logs for your project will appear below. Press Ctrl+C to exit.
Unable to resolve "react-native-vector-icons/AntDesign" from
"node_modules/react-native-elements/src/helpers/getIconType.js"
Building JavaScript bundle [=================================================================================================== ] 99%
I am using ios 10.13.6 High Sierra.
Anybody have seen this issue before? any suggestions to debug or resolve this issue?
it looks like you are not using the babel preset which is set up when you initialize a project in expo. this preset remaps react-native-vector-icons to #expo/vector-icons, so you would not see this error if you were using it.
if you are using sdk32, you can fix that by creating babel.config.js in your project (and removing .babelrc if there is one) and adding this to babel.config.js:
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
};
};
now close the packager and run expo start -c.
if you are using an older sdk version than sdk32, you can just edit .babelrc (or create it if it doesn't exist) and change it to this:
{
"presets": ["babel-preset-expo"],
"env": {
"development": {
"plugins": ["transform-react-jsx-source"]
}
}
}
I removed react-native-elements from package.json. I then ran the following command:
rm -rf node_modules package-lock.json; npm install
then issued the following command:
expo start -c --tunnel
This seemed to have fixed the issue. I need the native-react-elements package so the next thing is that I am going to add it back and try to test with different versions of react-native-elements package.

Expo : cannot find a module LogReporter

I have created a React Native Project and I was trying to open that project in Expo XDE. It throws the following error:
Cannot find module ...\node_modules\expo\tools\LogReporter
Firstly I created a React Native project by cloning a KitchenSink Project.
Link:
NativeBase-KitchenSink
When I started the project by issuing series of commands inside the project root directory:
npm install and then expo start
I saw that the app.json was also not proper, which was the following:
{
"name": "NativebaseKitchenSink",
"displayName": "NativebaseKitchenSink"
}
After issuing expo start react-native reported that the app.json is not to be found in the current directory.
[17:05:08] Starting project at
D:\Projects\ReactNativeProjects\AwesomeProject [17:05:10] Error:
Missing app.json. See https://docs.expo.io/ [17:05:10] Couldn't start
project. Please fix the errors and restart the project. [17:05:10]
Error: Couldn't start project. Please fix the errors and restart the
project.
at C:\xdl#51.4.0\src\Project.js:1565:11
at Generator.next ()
at step (C:\Users\hp\AppData\Roaming\npm\node_modules\expo-cli\node_modules\xdl\build\Project.js:2033:191)
at C:\Users\hp\AppData\Roaming\npm\node_modules\expo-cli\node_modules\xdl\build\Project.js:2033:361
at process._tickCallback (internal/process/next_tick.js:68:7)
I changed app.json to:
{
"expo": {
"name": "AwesomeProject",
"description": "A Kitchen Sink project.",
"slug": "AwesomeProject",
"privacy": "public",
"sdkVersion": "30.0.0",
"platforms": [
"ios",
"android"
],
"ios": {
"supportsTablet": true
},
"android": {
"package": "com.abhsax.first"
},
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/logo.png",
"splash": {
"image": "./assets/splashscreen.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
]
}
}
There were some updates in the project when I issued npm install again. Then I issued:
expo start
This error came:
(node:2044) UnhandledPromiseRejectionWarning: Error: Cannot find
module
'D:\Projects\ReactNativeProjects\AwesomeProject\node_modules\expo\tools\LogReporter'
Why am I getting this error, and how can I fix it?
check your package.json if it contains all needed dependencies and run npm install in the home directory of the project
if a package is missing you can add it with
npm install <package_name> --save
if you are using yarn run:
yarn add expo
I did:
yarn add expo
and it worked for me =)
See docs:
introducing-button-yarn-and-a-public-roadmap
and
npm-vs-yarn-in-react-native
These documents say that since the project configured using Yarn, you have to follow Yarn way. [Note: There is a file yarn.lock inside the root directory of the project, you have posted]
Therefore such projects are dealt by following the instructions in the documentation.
Please see How do I create a React Native project using Yarn? to actually create a react-native project using Yarn.
And please be sure to remove node_modules folder and issue command npm install before adding react native CLI using yarn. You have to remove package-lock.json from your project root. This will be to prevent mixing different package managers : npm and yarn.
Instead, it will be a good idea not to use npm, and in order to generate node_modules, just issue command:
yarn
Last link recommends to install every package you need using yarn, and not to use any other package manager:
yarn global add react-native-cli
to add react-native:
yarn add react-native
to add missing packages:
yarn add react-base --save
and to install expo using yarn:
yarn add expo
install expo-cli
yarn add expo-cli
It is possible that you can do without Expo. Just focus on react-native and yarn.
Generate android and ios folders:
react-native eject
Start yarn:
yarn start
run build of your choice, and make sure the SDKs are installed.
react-native run-android
Please also see: Uncaught TypeError: Cannot read property 'forEach' of undefined, on a KitchenSink demo
Happy Coding :-)
Install the Expo modules
npm install --save
i.e.
npm install expo --save
rollback with npm install -g expo-cli#2.4.3