Navigation error with react native latest version 0.61.4 - javascript

I upgraded my old project in react native version(0.61.4) then getting error related navigation option undefined.
Old project dependency version:--
"react": "16.8.3",
"react-native": "0.59.5",
"react-navigation": "1.0.0-beta.3",
New Project dependency versions:--
"react": "16.9.0",
"react-native": "0.61.4",
"react-navigation": "^4.0.10",
"react-navigation-stack": "^1.10.3",
Note:-- I also tried with navigation version 2, 3.
please help

I think the problem is the jump from react-navigation v1 to v4.
Check the createNavigator params
In v4 you should have a navigationConfig param passed like this:
createNavigator(NavigationView, router, navigationConfig);
https://reactnavigation.org/docs/en/custom-navigators.html#createnavigator
If still not working probably you should check the breaking changes from here
https://reactnavigation.org/blog/2018/05/07/react-navigation-2.0.html
and also from v3 and v4.

Adding to Florin's answer, make sure you export wrap your root navigator with appContainer.
Docs: https://reactnavigation.org/docs/en/app-containers.html

Related

ValidationError: Invalid options object. Dev Middleware has been initialized using an options object that does not match the API schema

Currently learning React JS, I am still newbie regarding these technologies.
After updating the webpack from 4.30.0 to 5.10.0 then I run npm start, some errors appeared as below. I have tried to delete node_modules and reinstall, then npm start, it doesn't change anything.
Dependencies :
"webpack": "^5.10.0",
"webpack-cli": "^4.2.0",
"webpack-dev-middleware": "4.0.2",
"webpack-hot-middleware": "2.25.0",
"webpack-pwa-manifest": "4.3.0",
Error :
Solved similar issue with upgrading
"webpack-dev-server": "^4.0.0-beta.3",
I believe 3.x is not fully compatible.

Reactjs - Uncaught TypeError: $node.attr(...).tooltip is not a function

I am working on SummerNote mention library and getting error -
Uncaught TypeError: $node.attr(...).tooltip is not a function
i am using "react-summernote": "^2.0.0",
react version - "react": "^16.8.6",
bootstrap - "bootstrap": "^4.4.1",
react-bootstrap - "react-bootstrap": "^1.0.1",
is there any help on this?
According to this issue comment, bootstrap needs to be installed to prevent that error.
Another comment lower down says that Popper.js needs to be installed, as well.
npm i bootstrap #popperjs/core
I see that you already have bootstrap installed, so just installing #popperjs/core should fix it.

console.error: React Native version mismatch

im getting this error, React Native version mismatch.
It says my javascript is version 0.62.0-rc.5 and my Native is version 0.61.4
It tells me to make sure to rebuild the native code.
Im using exponential to build my project. I've tried to change react native version a couple of times with no success.
Here are my dependencies:
"dependencies": {
"expo": "~36.0.0",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
"react-native-web": "~0.11.7"
},
Here is the error:
What should i do next?

_react.default.memo is not a function | wrapWithConnect issues

When wrapping a component with connect()(Component), I am getting an error on my React Native application. "_react.default.memo is not a function (In _react.default.memo(ConnectFunction), _react.default.memo is undefined. How can I resolve this issue?
Screenshot of the error
I believe this issue is based on my version numbers with React and Redux. But I am unable to locate the culprit. This application is in very early development, but perhaps I just forgot to connect something with my store.
Currently my versions from package.json are the following
"dependencies": {
"expo": "^32.0.6",
"react": "^16.8.6",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-navigation": "^3.8.1",
"react-redux": "^7.0.2",
"redux": "^4.0.1"
},
"devDependencies": {
"babel-preset-expo": "^5.1.1",
"schedule": "^0.4.0"
}
I have tried rolling back react-redux to 6.0.0 and react to 16.5.0 as described in this thread but, I get a different error.
Unable to resolve "./utils/batch" from "node_modules/react-redux/lib/index.js"
I have tried uninstalling and reinstalling react-redux. (including deleting the folder). I don't even see a call to utils/batch inside that index.js file.
Any help would be greatly appreciated. The component renders correctly before connect is added. Exception happens when export default connect()(ComponentName) is invoked.
if needed, my repository is found here. Since then, though, I have toyed with the versions.
Switching to React Redux 6.0.0 npm install react-redux#6.0.0.
In order to get rid of the Unable to resolve "./utils/batch" from "node_modules/react-redux/lib/index.js"
Clear expo caches with expo r -c.
https://forums.expo.io/t/how-to-clear-the-react-native-packager/1352
I think I was just able to resolve this. I finally caved and installed yarn letting Yarn take over the dependency install seemed to have worked.
My dependencies are running at
"dependencies": {
"expo": "^32.0.6",
"react": "16.8.6",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-navigation": "^3.8.1",
"react-redux": "^6.0.0",
"redux": "^4.0.1"
},
"devDependencies": {
"babel-preset-expo": "^5.1.1",
"schedule": "^0.4.0"
},
and my app is back to running with everything acting compatible again. Not sure what was done differently with Yarn. But I am relieved that I got this back up. I hope this helps others!

"Unknown named module" error in react native

I'm creating an app using react native but some imports raise the error from the title: "Unknown named module". This happens with two packages, react-native-material-design and react-native-db-models, so I suspect the problem isn't on the modules but in my setup.
I tried linking the packages with react-native link and repackaging the app using react-native run-android, but none of these solved this issue. I've looked up examples of imports on github, and even copying working code raises the same error.
I tried installing the modules using either yarn and npm. I tried with relative paths like ../../react-native-db-models. Didn't work!
This is how I import the modules:
import RNDBModel from 'react-native-db-models';
import { List, Button, Toolbar, } from 'react-native-material-design';
These are my project dependencies:
"dependencies": {
"react": "15.4.1",
"react-native": "0.39.2",
"react-native-db-models": "^0.1.3",
"react-native-material-design": "^0.3.7",
"react-native-md-textinput": "^2.0.4",
"react-native-vector-icons": "0.8.5",
"react-redux": "^5.0.1",
"redux": "^3.6.0",
"redux-logger": "^2.7.4"
},
If React/React Native is incompatible with these modules, how do I figure out which version should I use? Maybe the error has nothing to do with imports and has something to do with my project?
The package server started by react-native start seems to have a cache of the node modules. Stopping and restarting the server solved the issue.
Always restart your react server after installing modules!
A quick check on the package's repository shows 'List' module is no longer available. Here is a link to why it was removed.
So, you will have to remove 'List' module from your import:
import { Button, Toolbar, } from 'react-native-material-design';

Categories