So I've got a react-native module I'm building in it's own repo. In this repo, I've included an example app of how it can be used and I've specified it like this in my ExampleApp's package.json:
"my-module": "file:../"
I'm using metro-with-symlinks which works great for hot reloading my example app when I'm editing my module's source code.
Problem I'm running into now is that I've just added a dependency on my module on #react-native-community/async-storage, like so:
// my-module package.json
"dependencies": {
"#react-native-community/async-storage": "^1.12.1"
...
}
Now, whenever I start my example app, I get Error: [#RNC/AsyncStorage]: NativeModule: AsyncStorage is null. So my example app isn't linking this dependency and I don't know how to make it do so. I can see this when I do a pod install in my example app because the async storage dependency isn't showing up.
Is there any way to get this set up working?
EDIT: I've seen people in my org use peerDependencies for react-native modules like this and require the application to supply the RN module. Is that the "correct" way to go about it for react-native. It doesn't feel very "peerDependency" to me, but maybe this is how RN modules should be developed?
Related
Is it possible to an Expo app example to load a module located in the parent folder AND to see changes in the example app when i rebuild the package (with tsc -w to rebuild on any saved files)?
I precise that the module is not publish on npm yet.
I've already succeed to do that using monorepo architecture with yarn workspaces and expo-yarn-workspaces package.
But what about the case when you don't want to publish your package like a monorepo?
For example, in this repo https://github.com/cuvent/react-native-vision-camera
There is an example RN app in bare workflow and in its package.json there is no mention of the developed package (meaning that it's not installed like a normal dependency).
But in the app src/App.tsx, the package is used like that :
import { Camera, frameRateIncluded, sortFormatsByResolution, filterFormatsByAspectRatio } from 'react-native-vision-camera';
Though, the react-native-vision-camera is used like it's already and normally installed with yarn or npm.
How does it work ?
Thanks.
Finally, I've found something that works for me.
You can find my config for metro if you want here:
https://github.com/grean/react-native-metro-config-app-example
With it, you can access the parent component from the expo app, modify it and immediately see the hot-reload changes.
Create a file metro.config file in your expo root app directory with that code inside:
let config = require('#grean/react-native-metro-config-app-example/index.js');
module.exports = config
For a whole example, you can check this repo out:
https://github.com/grean/react-native-scale-text
I'm new to react native, and I notice when I create a new project using react-native init projectName that it creates something like 600+ folders in the node_modules folder.
I was sort of expecting to be able to create a bare bones project with only essential dependencies and then add new stuff as necessary as I would do in any other language. I don't really know what any of the dependencies are already, and of the half a dozen or so things I've needed so far I've had to install a new dependency and haven't used anything from here except for the essential react and react-native modules.
Is this how you guys all start your projects, or does this contain hundreds of extras that don't need to be in my project, and if so how do I create a bare bones project? I tried looking at options for the init command and saw one called skip-install that looked like it would install w/o installing all the dependencies but it seems to have had no effect.
Node Module folder contains all the dependencies of the whole app. You can check this in every folder's Readme.md file. If you add any new library in your package.json, everything will be listed there.
To start with, create-react-app contains
a compiler (Babel),
a bundler (Webpack),
a linter (ESLint),
a styling pipeline tool (SCSS),
a development server with live reloading,
a code minifier,
a test runner (Jest),
I am using a third party component (vue-image-lightbox) which currently has a bug. I cloned the repo and made the change and want to deploy it with my app to see if it fixes the issue. To do this I installed yalc.
In the component project (vue-image-lightbox) I ran
npm run build
yalc publish
My understanding is that this places my vue-image-lightbox into the yalc store.
Next, I went to my dependent project and ran
npm uninstall vue-image-lightbox (remove the existing component)
yalc add vue-image-lightbox. This creates
a) .yalc directory with the deployed component
b) adds entry to package.json : "vue-image-lightbox": "file:.yalc/vue-image-lightbox",
run npm install to pick up any dependencies
After this I ran my app and went to the component that uses vue-image-lightbox. In the console I not get the warning
"[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option."
All of the registration code works without issue with the git installed component. I don't understand why I see this when I try to use yalc.
The component is registered locally with
import LightBox from 'vue-image-lightbox'
components: { LightBox }
I would love to know what is different about the yalc installed component that is causing this issue. Is there a better way to test out patches on third party components other than yalc?
Thanks!
I have a problem "Unable to resolve module".
// Please, read the question before publish comments with links for first result from google.
This is the import line where I got the error:
import Interactor from 'react-native-native-orientation-interactor';
What I did:
Create a react-native library
Run npm link inside the library folder
Run npm link react-native-native-orientation-interactor inside a demo react-native app
Add import statement
Got the error with import.
If I press Cmd+B on import statement I can open a file from node_modules folder. Also I can see my library (as a link) inside node_modules.
But I didn't find any solution for me.
Upd1: I added my library as a dependency in package.json
"dependencies": {
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-native-orientation-interactor": "*"
},
1 - First of all you have written double native in react-native-native-orientation-interaction
2 - Another thing is, don't add dependencies manually..
Use Proper installation guide like
npm install --save react-native-orientation-interactor
or
yarn add react-native-orientation-interactor
then link the dependency.
3 - And actually I didn't get any module named 'react-native-orientation-interaction'.
react-native-orientation
here is the one of valid module dependency.
always read the whole proper Documentation.( Correct me if I am wrong)
If you are able to link your package correctly, and problem still persists.
From my experience you can do two things to resolve error.
1) Try to install pod in ios/ directory
or
2) Just close the Termianl and re-run
I am new, and when i first created my app based on the documentation using npm create-react-app i found it there were a lot of package included inside folder node_module when i code and i only use react and react DOM and etc from the basic.
node_modules
acorn
timer
ansi
and many more
I wonder if anyone can help my how to understand each use inside the node_module or where can i find the documentation for each use?
or how can i just reduce to what i want to use only to decrease the app size?
The answers are 2:
because you're using an automated scaffolding tool, which essentially does everything for you, and, you have just to code, it is supposed to locally deploy all the packages it needs to work (for example webpack is needed to bundle your code, babel to transpile it, ...
under node_modules you will find all the packages of the whole app. That's means you will find both your dependencies and the dependencies of your dependencies (this rule has some exceptions and you can find them in the npm documentation.
example:
// your code depends on A
var dependency = require('A');
// but then, inside your A dependency you can also find something similar to:
var b = require('B');
how can i just reduce to what i want to use only to decrease the app size?
You basically can't do it. They are all needed.
Most of the libraries that we pull from npm have dependencies. You may use only react and react-dom but there are react-scripts that require lots of stuff. I don't think that you have to worry about the size of the node_modules. That's not what you are suppose to ship in production.
If you want to see what are these all modules about you may open their folder and fine README.md file.