React native camera package causing build to fail - react-native

Unable to find much info on this.
We have a standard React-native CLI project.
Versions
React: 18.2.0
ReactNative: 0.71.1
None of the configuration files have been edited from default as far as i'm aware.
We have added the following npm package to access and manage camera usage
npm install react-native-vision-camera
Without importing the package anywhere in the app. The build is now failing with the following outputs.
I've tried various npm camera packages, they have all suffered similar issues.
If I uninstall the package. The app builds fine again.
Any ideas what i'm doing wrong?

Related

Trying to import realm, but getting error: Missing Realm constructor. Did you run "pod install"? (I'm using windows)

I'm making a mobile application with react native.
I want to use Realm (mongodb).
So after running:
npm install realm
realm was correctly added in the "node_modules" and I tried to import realm with:
import Realm from "realm";
If I do npm start and test the app, I get to following error message:
Error: Missing Realm constructor. Did you run "pod install"? Please see https://realm.io/docs/react-native/latest/#missing-realm-constructor for troubleshooting
I'm using windows and testing the app on an android device. Earlier questions about this matter on the internet suggested it is in my situation not needed to do "pod install".
I also tried to autolink realm, with:
react-native link realm
But then I get the warning:
warn Calling react-native link [packageName] is deprecated in favor of
autolinking. It will be removed in the next major release. Autolinking
documentation:
https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
(node:26016) Warning: Accessing non-existent property 'padLevels' of
module exports inside circular dependency (Use node --trace-warnings ... to show where the warning was created)
Does that mean that the autolinking is not successful, because autolinking will be removed in the next release?
Does any of you have suggestions on how I can successfully import Realm in my react native project?
Here are some of the dependency versions:
"expo": "^44.0.0",
"realm": "^10.14.0"
"react-native": "0.64.3",
Add this package:
npm install realm#hermes
Works for me.
run this command:
expo run:android
you must build your project first
and remember realm is working only on production environment
As the error message suggests, you need to install the pod files for realm to work with iOS. Those are the steps:
In your project folder run npm install realm. It adds the npm package to your react native project
In your iOS folder (cd ios) run pod install. It gets all iOS realm libraries and compiles the iOS-part of your npm package and creates the .xcworkspace.
Add the import to your component: import Realm from "realm";
Switch back to your project folder and run your project: react-native run-ios
Hope that solves your problem!

#walletconnect/client throw Error: While trying to resolve module crypto

I am using https://reactnative.dev/docs/environment-setup 0.64
I npm install #walletconnect/client
put below import in App.js
import WalletConnect from "#walletconnect/client";
after npx react-native run-ios and got below error:
error: Error: While trying to resolve module `crypto` from file `/Users/hahaha/workspace/mobile/reactnative/nonft/node_modules/#pedrouid/iso-crypto/dist/cjs/helpers/env/node.js`, the package `/Users/hahaha/workspace/mobile/reactnative/nonft/node_modules/crypto/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/hahaha/workspace/mobile/reactnative/nonft/node_modules/crypto/index.js`. Indeed, none of these files exist:
I tried to remove node_modules folder and npm install again but still get the same error.
I am sure that it is thrown by #walletconnect/client because when I removed
import WalletConnect from "#walletconnect/client";
then the error gone
crypto is a built in Node module, which isn't available in React Native, as iOS/Android apps don't run with a Node runtime - only web apps do.
There are a few ways to solve this problem, all of them fairly hacky.
One way is to replace the crypto module with a React Native native module that does the same thing. React-native-crypto is the package used by create-react-native-dapp (https://www.npmjs.com/package/create-react-native-dapp) to integrate with WalletConnect: https://www.npmjs.com/package/react-native-crypto
To get this integration working, note that you'll need to be able to link modules and run rn-nodeify, as it mentions in the instructions on that npm package:
npm i --save react-native-crypto
# install peer deps
npm i --save react-native-randombytes
react-native link react-native-randombytes
# install latest rn-nodeify
npm i --save-dev tradle/rn-nodeify
# install node core shims and recursively hack package.json files
# in ./node_modules to add/update the "browser"/"react-native" field with relevant mappings
./node_modules/.bin/rn-nodeify --hack --install
If you're using Expo, note that you'll need to eject Expo before this can work.
Another hacky workaround is to run WalletConnect in a WebView using react-native-webview. There's an old but working example of this that you can just use to plug and play WalletConnect without requiring linking that you can get here: https://github.com/cawfree/react-native-walletconnect
Note that that repo is archived and effectively hardcoded to WalletConnect version 1.0.0, but it's a pretty simple codebase - you can just effectively copy and paste its code and update it to the latest version of WalletConnect to get it working with a later version if desired.
As a final note, there are multiple ways to get node modules running in React Native on top of rn-nodeify. If you'd like to explore other methods of getting node modules running, here's a quick rundown of other possibilities: https://gist.github.com/parshap/e3063d9bf6058041b34b26b7166fd6bd

Struggling to set up nativebase in a React Expo project

I have tried so many different ways to set nativebase up with expo and am still having an issue. At the moment I'm using the
Getting Started documentation found on the nativebase website.
I first create a new app with expo using
expo init myapp
Then I install nativebase using
npm install native-base --save
Then I finally install the font
expo install expo-font
I even copy the App.js found in the getting started documentation, and after I start the app and try to run it on an emulator I face the below error
Unable to resolve "#expo/vector-icons/Fontisto" from "node_modules\native-base\dist\src\basic\IconNB.js"
Failed building JavaScript bundle.
What am I missing? Coming from .NET world this whole process with dependencies is so painful...
*Edit 1
I'm sure someone will make mention of the fact that the error message mentions #expo/vector-icons and I have not installed that. When running before I install this package I get that error, and after I install the mentioned package I still face the exact same error.
Please try with this version of native base :
npm i --save-exact native-base#2.13.8
Expo should release a version with that version .
Hope it helps. feel free for doubts
We can run the below command with Expo
npm i --save-exact native-base#2.13.8
Still this version is not available, but its working, really don't know why?

react native doesn't recognize project

I've made a fresh clone of a react-native project which is 100% ok and working. Installed react-native-cli, trying to run react-native start in the project dir, but I get Command start unrecognized. Make sure that you have run npm install and that you are inside a react-native project.
I tried to init a fresh project just to test, and it worked fine, I was able to run react native commands there and everything worked.
It's definitely not an issue with my project because other people work on it as well and it's 100% ok and valid. This is some issue with react native or some other lib, I suppose. What could that be?
I'm using mac os sierra and project's react native version is 0.40.0
So, I've resolved this issue finally, and, to whoever it may concern: the problem wasn't with react-native. The problem was with npm. I was using yarn, and had npm 5 installed on my system. Also I had a postinstall script, which called rn-nodeify. rn-nodeify, in turn, on the final stage called npm (not yarn), and since it was npm 5 I was experiencing an npm 5 bug, which wiped out my modules. The bug is described e.g. here. Downgrading to npm 4 solved this issue for me.

How to install react native CameraRoll?

I want to use CameraRoll in my react native application.
I've tryed to install it doing :
npm install RCTCameraRoll --save
but i get :
npm ERR! 404
what is the proper way to do it ?
Having just spent two hours on this, it's apparently still confusing nine months after your question.
The official documentation (https://facebook.github.io/react-native/docs/cameraroll.html) points to the linking page which suggests that there's a package to install (which it points out must be referred to in package.json for automatic linking).
RCTCameraRoll is already included in your react-native npm installation (node_modules/react-native/Libraries/CameraRoll). So no need to npm it.
However it's not linked in your Xcode project, so you have to follow the instructions in https://facebook.github.io/react-native/docs/linking-libraries-ios.html for manual linking.
And what about Android? That's not mentioned in the manual linking instructions. No linking seems to be required. import {CameraRoll} from react-native is all that's necessary.