Object is not a function in Expo(react-native) app - react-native

My App is not starting. Please help me. Is that the problem with the libraryies ot with the code?
edit 1:
another mistake when doing render
Error: Problem validating fields in app.json. See https://docs.expo.io/workflow/configuration/
• should NOT have additional property 'nodeModulesPath'.
app.json file:
{
"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": {
"#expo/vector-icons": "^12.0.4",
"#react-native-community/masked-view": "^0.1.10",
"#react-navigation/bottom-tabs": "^5.11.10",
"#react-navigation/native": "^5.9.4",
"expo": "~41.0.1",
"expo-status-bar": "~1.0.4",
"firebase": "^8.2.3",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
"react-native-gesture-handler": "^1.10.3",
"react-native-reanimated": "^1.13.2",
"react-native-safe-area-context": "^3.2.0",
"react-native-screens": "^3.0.0",
"react-native-stack": "^1.0.0-alpha11",
"react-native-web": "~0.13.12",
"react-navigation": "^4.4.4",
"react-navigation-stack": "^2.10.4"
},
"devDependencies": {
"#babel/core": "^7.9.0"
},
"private": true
}
edit 2:
I uninstalled react-native-stack, but there is a mistake: Error: Module not found: Can't resolve 'react-native-stack'
I installed it again:
npm install react-native-stack
Then I have the same problem in the render (look the first picture) and this mistakes in console:
1 (yellow)
`Some of your project's dependencies are not compatible with currently installed expo package version:
- react-native-reanimated - expected version range: ~2.1.0 - actual version installed: ^1.13.2
Your project may not work correctly until you install the correct versions of the packages.
To install the correct versions of these packages, please run: expo install [package-name ...]`
2 (red)
`Error: Problem validating fields in app.json. See https://docs.expo.io/workflow/configuration/
• should NOT have additional property 'nodeModulesPath'.`
The render answer:
`√ Expo Webpack
Compiled successfully in 5.25s
i 「wds」: Project is running at http://0.0.0.0:19006/
i 「wds」: webpack output is served from /
i 「wds」: Content not from webpack is served from C:\Users\Лёха\AppData\Roaming\npm\node_modules\expo-cli\node_modules\#expo\webpack-config\web-default
i 「wds」: 404s will fallback to /
edit 3
I was wrong, so I deleted react-native-stack again
npm uninstall react-native-stack
Then I deleted the import in App.js file:
import {createStackNavigator} from 'react-native-stack'
I still have it in yarn.lock file, but I think rm -rf node_modules should work. I just don't understand, how to use it.
`

EDIT
you are probably not having react-native-screens in your node_modules? For react-navigation for each module you are using you have other modules that you need to import in addition. This is not done automatically.
old answer
You are using useScreens() outside of a component. By the way useScreens() is deprecated and should be replaced with enableScreens

Related

React Native : Error cannot find symbol com.swmansion.gesturehandler.react.RNGestureHandlerPackage

I know that many related problems already asked but still none of them worked.
Error :
> Configure project :react-native-firebase_firestore
:react-native-firebase_firestore package.json found at /home/username/StudioProjects/agl-admin/node_modules/#react-native-firebase/firestore/package.json......
> Task :app:compileDebugJavaWithJavac FAILED
/home/username/StudioProjects/agl-admin/android/app/src/main/java/com/agladmin/MainApplication.java:12: error: cannot find symbol
import com.swmansion.gesturehandler.react.RNGestureHandlerPackage;
^
symbol: class RNGestureHandlerPackage
location: package com.swmansion.gesturehandler.react
/home/username/StudioProjects/agl-admin/android/app/src/main/java/com/agladmin/MainApplication.java:49: error: cannot find symbol
packages.add(new RNGestureHandlerPackage());
^
symbol: class RNGestureHandlerPackage
2 errors
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':app:compileDebugJavaWithJavac'.
> Compilation failed; see the compiler error output for details.
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
....
Most Matching Question : " com.swmansion.gesturehandler.react" ERROR APPEARS
package.json
{
"name": "agl-admin",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start": "expo start --dev-client",
"android": "expo run:android",
"ios": "expo run:ios",
"web": "expo start --web"
},
"dependencies": {
"#expo-google-fonts/poppins": "^0.2.2",
"#react-native-firebase/app": "^14.5.1",
"#react-native-firebase/firestore": "^14.5.1",
"#react-navigation/drawer": "^6.3.1",
"#react-navigation/native": "^6.0.8",
"#react-navigation/stack": "^6.1.1",
"expo": "~44.0.2",
"expo-app-loading": "^1.3.0",
"expo-font": "~10.0.4",
"expo-splash-screen": "~0.14.1",
"expo-status-bar": "~1.2.0",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-gesture-handler": "^2.3.2",
"react-native-paper": "^4.11.2",
"react-native-reanimated": "^2.4.1",
"react-native-safe-area-context": "3.3.2",
"react-native-screens": "~3.10.1",
"react-native-splash-screen": "^3.3.0",
"react-native-web": "0.17.1",
"react-navigation": "^4.4.4"
},
"devDependencies": {
"#babel/core": "^7.12.9"
},
"private": true
}
What I've :
In android\settings.gradle include ':react-native.... these two where already there
In MainAplication.java import com.swmansion.gesturehandler.react.RNGestureHandlerPackage; already there
and new RNGestureHandlerPackage() List was not there so i added.
rm -rf node_modules
npm cache clean --force
./gradlew clean
and then reinstall all.
=============== UPDATE =================
I fixed it by React downgrading to "react-native-gesture-handler": "~2.1.3"
and resting cache. T
In the new version (RNGH 2) you have to remove .react, so it's just import com.swmansion.gesturehandler.RNGestureHandlerPackage;!
Make sure added you add react-native-reanimated plugin into babel.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: ['react-native-reanimated/plugin'],
};

NetInfo has been removed from React Native

Before you try to automatically delete this as a duplicate, hear me out.
I have spent all day googling this and trying everything.
My project is a React Native app using Expo.
Recently, when I was adding some packages to get testing working, I started to get this error:
Invariant Violation: NetInfo has been removed from React Native. It can now be installed and imported from '#react-native-community/netinfo' instead of 'react-native'. See https://github.com/react-native-community/react-native-netinfo
As people suggested, I tried searching through my Node Modules folder for any old style imports of the netInfo package, but there were none.
I have tried rolling back my node modules to a previous state from and older commit by deleting the node_modules folder, replacing package.json with an older setup that I know worked and npm i to reinstall.
I need something else to try.
Here is my package.json that I know worked in the past, but is giving me the error anyway
{
"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": {
"#expo/vector-icons": "^12.0.5",
"#fortawesome/fontawesome-svg-core": "^1.2.36",
"#fortawesome/free-regular-svg-icons": "^5.15.4",
"#fortawesome/free-solid-svg-icons": "^5.15.4",
"#fortawesome/react-native-fontawesome": "^0.2.7",
"#react-native-async-storage/async-storage": "^1.15.9",
"#react-navigation/native": "^6.0.2",
"#react-navigation/stack": "^6.0.7",
"#redux-offline/redux-offline": "^2.6.0-expo.0",
"expo": "^42.0.3",
"expo-app-loading": "1.1.2",
"expo-location": "~12.1.2",
"expo-sqlite": "~9.2.1",
"expo-status-bar": "~1.0.4",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
"react-native-get-random-values": "^1.7.0",
"react-native-safe-area-context": "3.2.0",
"react-native-screens": "~3.4.0",
"react-native-web": "~0.13.12",
"react-redux": "^7.2.5",
"redux": "^4.1.1",
"redux-thunk": "^2.3.0",
"uuid": "^8.3.2"
},
"devDependencies": {
"#babel/core": "^7.9.0",
"eslint": "^8.1.0",
"eslint-plugin-react": "^7.26.1",
"eslint-plugin-react-native": "^3.11.0",
"redux-devtools-extension": "^2.13.9"
},
"private": true
}
Recently, when I was adding some packages to get testing working
Since NetInfo is not used directly in your code, I imagine that one of the packages you recently added is still attempting to access NetInfo via React Native.
First you'll need to determine which package is causing this. Then either update it to a newer version which imports NetInfo from #react-native-community/netinfo, or remove the package entirely.
TLDR: Remove Redux Offline, and all of it's imports. #redux-offline/redux-offline: "^2.6.0-expo.0",
Wow, this was a day and a half of work duzy. It was weird too, because I tried going way back to an old commit and rebuilding there, but I would still get the error. So on a whim, I downloaded my repo from github, then went to and old commit, installed the packages, and it worked! Still have no idea why my original local repo wouldn't.
So I split the difference between the working commit and the broken commit until I found the source of the problem, and the culprit was #redux-offline/redux-offline: "^2.6.0-expo.0",
No idea why it was causing the issue, maybe I just have it set up wrong, I hand't gotten it working anyway, so I'm removing it for now till I have time to do it right.

Metro bundler: Error: EISDIR: illegal operation on a directory, read

When I reload my bundle this exception is uncaught:
Error: EISDIR: illegal operation on a directory, read
at Object.readSync (fs.js:592:3)
at tryReadSync (fs.js:366:20)
at Object.readFileSync (fs.js:403:19)
at UnableToResolveError.buildCodeFrameMessage (/home/brady/obs-websocket-app/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:347:17)
at new UnableToResolveError (/home/brady/obs-websocket-app/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:333:35)
at ModuleResolver.resolveDependency (/home/brady/obs-websocket-app/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:211:15)
at DependencyGraph.resolveDependency (/home/brady/obs-websocket-app/node_modules/metro/src/node-haste/DependencyGraph.js:413:43)
at /home/brady/obs-websocket-app/node_modules/metro/src/lib/transformHelpers.js:317:42
at /home/brady/obs-websocket-app/node_modules/metro/src/Server.js:1471:14
at Generator.next (<anonymous>)
My package.json
{
"main": "src/index.js",
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"web": "expo start --web",
"start": "react-native start",
"test": "jest"
},
"dependencies": {
"#types/node": "^14.14.35",
"events": "^3.3.0",
"expo": "~40.0.0",
"expo-splash-screen": "~0.8.0",
"expo-updates": "~0.4.0",
"obs-websocket-js": "^4.0.2",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "~0.64.0",
"react-native-elements": "^3.3.2",
"react-native-gesture-handler": "~1.8.0",
"react-native-reanimated": "~1.13.0",
"react-native-screens": "~2.15.0",
"react-native-unimodules": "~0.12.0",
"react-native-web": "~0.13.12"
},
"devDependencies": {
"#babel/core": "~7.9.0",
"#types/react": "~16.9.35",
"#types/react-dom": "~16.9.8",
"#types/react-native": "~0.63.2",
"babel-preset-expo": "~8.3.0",
"jest-expo": "~40.0.0",
"typescript": "~4.0.0"
},
"jest": {
"preset": "react-native"
},
"private": true
}
Replace this code in `MainApplication.java
#Override
protected String getJSMainModuleName() {
return "src/index"; <---add this
}
For IOS
// packages/myapp/ios/myapp/AppDelegate.m:56
return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:#"src/index" fallbackResource:nil];
Apparently there's an issue with moving index.js to src/index.js. I moved it back to the project root and it's working fine now.
Solved by deleting and creating new android emulator...
I got same error, but all going well after I yarn global remove wml
yarn global remove wml
that save my life
if you have never install wml, just consider some other related global libs
----update-----
I got the error again even I uninstall wml staff, but I found my issue's root cause was the watchman, after run brew uninstall watchman, all going well
An old instance of the remote debugger running caused this for me. Not sure of the "whys", but if you want to kill the debugger programmatically, add this to the top of your App.tsx or whatever your top-level entry file is:
import { NativeModules } from 'react-native';
NativeModules.DevSettings.setIsDebuggingRemotely(false);
Credit to Christophe Marois over at this answer How to disable Remote JS Debugging in React-Native
If you are using create-react-native-library for native modules and getting this error. Do the following:
cd example
npx react-native start
In rootDir, yarn example run

"App not installed" error after building android app with "expo build:android"

after I ran expo build:android i got the apk file built successfully but when I try to install it in many devices, it is not being installed and it shows "App not installed" error [image].
here is my package.json:
{
"name": "some-app",
"main": "node_modules/expo/AppEntry.js",
"private": true,
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject"
},
"dependencies": {
"axios": "^0.18.0",
"expo": "^31.0.2",
"react": "16.5.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz",
"react-navigation": "^3.1.2",
"react-redux": "^6.0.0",
"redux": "^4.0.1",
"redux-persist": "^5.10.0"
},
"devDependencies": {
"babel-preset-expo": "^5.0.0"
}
}
the problem was in the android packager name in my app.json
so it was like that:
"package": "com.<myName>.<appName>"
i replaced myName with the appName like that :
"package": "com.<appName>.<appName>"
and it worked like a magic and I was able to successfully build and install the app on multiple devices
Make sure to uninstall any previous version of the App installed as they may have the same package name.
On your main screen of the phone, scroll down the status bar of the phone.
Select the “Airplane Mode”, and press “Turn ON”
Now go and try to install your application
While installing a notification may appear about “Blocked by Play Protect”
Then press “Install anyway”
The solution for me was the disk space of my phone.
Solution:
-> Try to uninstall some apps and after this try to install. ;-) worked fine for me
Those two solutions didn't make it for me. What made it for me was just to install the last Os on my phone and the apk install finally worked. Hope my answer can help someone as it took me a long time to find out why.
Also check if your mobile device has space. I cleared up about 2GB of dummy data on my device and the app installed.

Unrecognized command 'run-eject'

I want to eject my react-native so I can install mobx but running both 'yarn run eject' and 'npm run eject' doesn't work.i think this is new issue and so couldn't find help online. any help would be appreciated.
this is my package.json file and the error given below.
{
"name": "a2x",
"version": "0.1.0",
"private": true,
"devDependencies": {
"babel-preset-react-native-stage-0": "^1.0.1",
"jest": "^22.4.4",
"jest-react-native": "^18.0.0",
"react-test-renderer": "16.3.1"
},
"scripts": {
"start": "react-native start",
"android": "react-native run-android",
"ios": "react-native run-ios",
"test": "jest",
"eject": "react-native run-eject"
},
"jest": {
"preset": "react-native"
},
"dependencies": {
"axios": "^0.18.0",
"mobx": "^5.5.0",
"mobx-react": "^5.2.8",
"react": "16.3.1",
"react-native": "~0.55.2",
"react-native-elements": "^0.19.1",
"react-navigation": "^2.0.1"
}
}
Try npm run eject..not npm run-eject
But if you trying to add native dependencies later i think better to start project using react native init. not using create-react-native-app.
Actual command is react-native eject.
It will create new folder for android and iOS to run it seperately on native.
As you said you are getting error of Both the iOS and Android folders already exist!, so please delete it and try with this command.
If you already have android and ios folder with some native implementation, there is no need to use eject command at all.
regarding npm run reject command, I guess this will be more useful to clear everything.
Always working for me, only follow two steps
first install in your project
yarn add react-native-eject
and then run
react-native eject
make sure you have install yarn in your pc