Is react-navigation compatible with react-native-macos? - react-native

I've created a fresh new React Native MacOS app and added in react-navigation. I am using React-Native 0.64 as the MacOS guide notes that it is the latest compatible version of React Native for react-native-macos.
I have the following dependencies installed via npm
"dependencies": {
"#react-native-community/masked-view": "^0.1.11",
"#react-navigation/native": "^6.0.12",
"#react-navigation/native-stack": "^6.8.0",
"react": "17.0.1",
"react-native": "0.64.3",
"react-native-gesture-handler": "^2.6.0",
"react-native-macos": "^0.64.30",
"react-native-reanimated": "^2.10.0",
"react-native-safe-area-context": "^4.3.3",
"react-native-screens": "^3.17.0",
"react-navigation-stack": "^2.10.4"
},
When I try to install the react-navigation packages and follow up with the pod-install command we see the following:
$ pod --version
1.11.3
$ pod install
Auto-linking React Native modules for target `slidesmacos-iOS`: RNCMaskedView, RNGestureHandler, RNReanimated, RNScreens, and react-native-safe-area-context
Analyzing dependencies
[!] CocoaPods could not find compatible versions for pod "react-native-safe-area-context":
In Podfile:
react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
Is react-navigation available for react-native-macos?

It seems that you didn't install or the CocoaPods can't find a valid local installation for that lib (react-native-safe-area-context).
You can search what libs can be used for each platform at this website (with the flag ?macos=true) and the react-navigation is one of the recommended ones.
About your problem, did you follow up on all the steps from the install guide? It was mentioned about dependencies for Expo managed and Bare projects. The idea of it is that you need to install 2 more dependencies and one of them is what is missing:
react-native-screens
react-native-safe-area-context
There is also this answer to a similar question where the steps to fix are just some updates. One comment to that answer also stated that it was necessary to run pod repo update or pod install --repo-update. This could also help you.

Related

When I run `npm i <package>`, sometimes it doesn't install latest version. Is it because of other packages?

In my React Native project I have the following packages:
"redux": "^4.0.5",
"redux-persist": "^4.10.2",
"redux-persist-filesystem-storage": "^2.2.0",
I want to upgrade redux-persist to the latest version (6.0.0), so I ran npm i redux-persist, but the version in my package.json stayed the same.
Why would this be? Is it because of the versions of the other packages?
You can try specifying the version you want to install, like npm install redux-persist#<version>

React-native-reanimated executing external native build for cmake

When I install react-native-reanimated in my project after try to run my app it's show me bellow error:
Cause: executing external native build for cmake /Users/MyPC/React-Native/Citi-App-Old-version/node_modules/react-native-reanimated/android/CMakeLists.txt
Version of use:
"react": "16.13.1",
"react-native": "0.63.0",
"react-native-reanimated": "^2.8.0",
Can you please help me for fixed this error?
You need to upgrade your React Native version or downgrade Reanimated because even reanimated 2.6.0 depends on React Native 0.68 but your version is 0.63

The native module for Flipper seems unavailable. Please verify that `react-native-flipper` is installed

I have updated React Native from v0.61.4 to v0.62.2 to try and use Flipper.
When I build and run the app The Metro Bundler throws the warning:
The native module for Flipper seems unavailable. Please verify that react-native-flipper is installed as yarn dependency to your project and, for iOS, that pod install is run in the ios directory.
I have installed it using npm.
My package.json looks like this:
"dependencies": {
"react": "16.13.1",
"react-native": "0.62.2",
"react-native-flipper": "^0.45.0",
"react-redux": "^7.1.3",
"redux": "^4.0.4",
"redux-flipper": "^1.2.0",
"redux-thunk": "^2.3.0",
...
In Flipper, React DevTools can connect to the app but when I try to use the Hermes Debugger or plugins they cannot be used:
When I run this:
adb shell am start -n com.app/com.facebook.flipper.android.diagnostics.FlipperDiagnosticActivity
I get this error:
Error type 3
Error: Activity class {com.app/com.facebook.flipper.android.diagnostics.FlipperDiagnosticActivity} does not exist.
What could be the reason for the modules not installing correctly?

Undefined is not an object (evaluating ExponentConstants.linkinguri)

Can someone guide me on this issue which shows up once I try using expo in my react native project.
Dependencies:
"expo": "^21.0.2",
"react": "^16.0.0-alpha.12",
"react-native": "^0.48.4",
"react-native-animatable": "^1.2.4",
"react-native-snap-carousel": "^3.3.2",
"react-native-swiper": "^1.5.13",
"react-navigation": "^1.0.0-beta.13"
Error Message
If I use create-react-native-app to initiate my project, I don't see the issue that you mentioned. But if I use react-native init to create my project, I see the same issue. To fully take advantage of the integration of react native and expo client, do the following:
npm install -g create-react-native-app
create-react-native-app YourProjectName
cd YourProjectName
npm start
Hope that helps.

Not using the Expo fork of react-native

I'm using expo with react native. All is fine, but i get this warning and the app takes a long time in loading :
[exp] Warning: Not using the Expo fork of react-native. See https://docs.expo.io/.
How can i fix it please.
If you create a react native app with the command from the getting started page: $create-react-native-app AwesomeProject then the package.json file has the following dependencies:
"dependencies": {
"expo": "^20.0.0",
"react": "16.0.0-alpha.12",
"react-native": "^0.47.0"
}
If you create an app directly in the Expo XDE, you will see in the package.json, they use a fork of react-native:
"dependencies": {
"expo": "^20.0.0",
"react": "16.0.0-alpha.12",
"react-native": "https://github.com/expo/react-native/archive/sdk-20.0.0.tar.gz"
},
Changing the react-native module path to https://github.com/expo/react-native/archive/sdk-20.0.0.tar.gz and running npm install will fix the problem.
That's how I fixed it:
I updated my "react-native" dependency to the latest one available:
"https://github.com/expo/react-native/archive/sdk-23.0.0.tar.gz"
I removed all dependency that I had installed by mistake in my previous expo app that actually required react-native link using the npm uninstall --save command:
react-native-image-to-base64,
react-native-cloudinary
Then I also had to remove them from the General > Linked Frameworks and Libraries
Now it works! I'm having issues with the Facebook Login now but at least it doesn't crash my app.
Good luck to you.