I am building an application using react native and the code depends on a third party library which only offers pre-built browserify bundle.
It works fine in the browser, but when I am using it in react native, it is throwing error as cannot find module .
I think it might be some piece of code which cannot work in react native but can work in browser but with the error I cannot figure it out.
Is there a solution for this.
Thanks.
Related
I am trying to build simple app to creative native library and link with react native app.
I am facing issue like
Error : Unable to resolve module react-native-fingerprint from App.js: react-native-fingerprint could not be found within the project.
Note : 'react-native-fingerprint' which is been created and want to link with app.
I guess you're using react-native-fingerprint-scanner. Since library you mentioned doesn't exist.
In case if you using this library react-native-fingerprint-scanner.
Installation
npm install react-native-fingerprint-scanner --save
or
yarn add react-native-fingerprint-scanner
Link to Native Platforms
react-native link react-native-fingerprint-scanner
Even after this it is not working. Following this guide
my question might be a little bit silly or ambiguous since I am fairly new to react native.
I'm trying to use the following repository for my react-native project https://github.com/smekalka/react-native-universal-pedometer. I have noticed that the repo is implemented in .java with platform folder unlike the regular .js or .ts files I used to see. Is this repository considered native module as react native doc describe?
Or in general how I can tell the whatever lib I am using is a native module.
The project is previously tested are under the support of expo-cli. I experienced the error null is not n object while using this repo. If so, I am probably going to eject the expo-cli and rewrite my code so I can use and even create own native-module for full control, some core implementations that written in other languages or expo-cli does not support.
Yes, the android and ios directories in the repository contain the 'native' code used to implement the platform-specific hooks that the Javascript will be able to pick up. Expo is not able to use these native modules or native code so your assumption is correct; you will need to eject your app in order to use this module.
If your app is below version 0.60 of React Native, after installing the module you will need to run react-native link react-native-universal-pedometer to link the native code to the Javascript runtime. If you're above 0.60, it will link automatically when installed.
I understand that react-native link (see post) is an automatic way to install native dependencies. The post above explain how to use the link command but lacking the detail of when to use it. Should it be used after adding a component, every code change or after introducing new module to the app?
Why we use react-native-link??
In this post, I will explain why we use react native link command and when we need to use this command or not?
First, we will understand what is native module??
Native Modules
Native modules are usually distributed as npm packages, apart from the typical javascript files and resources they will contain an Android and ios library project.
React Native provides an impressive amount of native modules that give you direct access to core platform APIs on both Android and IOS.
For example react-native-maps, react-native-firebase, react-native-socketio etc.
These modules or packages contained both platform (Android and Ios) code.
Now coming on to the react native link
Those libraries which are use native code, in that case you'll have to add these files to your app. For linking those library with react native code need to run react-native-link
Here are the few steps to link your libraries that contain native code
Automatic linking
Step 1
Install a library with native dependencies:
$ npm install --save
Step 2
Link your native dependencies:
$ react-native link
Done! All libraries with native dependencies should be successfully linked to your iOS/Android project.
Where we don't use react-native-link??
Those components which are only written in javascript they are not using any native code (Android and Ios). There is no need to run react-native-link.
For example rn-modal-picker, react-native-check-box etc.
You should check out this other answer: The use of react-native-link command?
You only need to run react-native link NAME_OF_PACKAGE when you install a new package that has a native codebase, or without arguments if you want to do it for multiple of them.
I'm new in React Native, please bear with me. I have a library, which works fine in NodeJS and in browser. I would like to make it usable in React Native too.
I created an example project, imported the library but it threw an exception - Unable to resolve module `http`. If I try to import the browser version, document is not available.
Since then I'm scratching my head - how am I supposed to make my library to work in React Native if neither the core NodeJS modules, nor document are available?
React Native does not have access to Node.js modules such as http, so any code that relies on that functionality is not going to work. You will have to remove or replace it. As for document, window and other DOM-specific APIs, RN does not use a DOM at all, instead it uses its own rendering mechanism that is coupled to the native APIs. You will also have to remove all those calls and replace them with React Native-compatible ones.
Im having a bit of an issue after upgrading to React Native 0.30. Using mocha, and babel I transpile the react native source before test run. I'm now seeing issues where modules cannot be found.
Here's an example:
Error: Cannot find module 'AssetRegistry'
The corresponding file can be found here https://github.com/facebook/react-native/blob/master/Libraries/Image/AssetSourceResolver.js#L21. It looks as if babel cannot locate the AssetRegistry file that is local in this directory.
Ok so it turns out that react-native-maps was calling an internal react-native library. react-native-mock has most of the internals mocked for react native however the internal library for the Image utility was not mocked.
I just used mockery to mock the library and all seems to work now.