I am trying to create a react native component npm package following:
https://www.freecodecamp.org/news/how-to-publish-a-react-native-component-to-npm-its-easier-than-you-think-51f6ae1ef850/
but I do not understand at which step the npm package is created. Can I create the package and test its installation before publishing it to npm?
Thanks
The npm package is created at beginning of article.
To test it, in an application you can add your package with yarn add file:path_relative_component.
But I don't have the 'tips' to test it without lost a lot of time with delete node_modules folder and execute command. See Develop own NPM package for react-native
Related
I forked a React Native npm library react-native-calendars to make some changes to it. I now want to implement these changes in my project. I have installed it in my project using:
npm i git+<my_forked_git_repo_url>
This successfully added the package to my node_modules, however I still get an error in my code when I try and import react-native-calendars saying Cannot find module. After doing some research I found (here) that I must create a build using npm run build and add it to the forked repository.
However, when I run npm run build it creates a build directory in my ios/ directory (since I am targeting iOS). Is this expected, or should I have a new build/ directory in the root directory? The contents of this build/ directory include a ...-buildRequest.json, ...-desc.xcbuild, ...-manifest.xcbuild, ...-targetFile.txt, and a BuildDescriptionCacheIndex-....
You could:
install the original package
paste your changes into the package's code in node_modules
install patch-package if you don't already have it (follow the instructions here)
run npx patch-package react-native-calendars
This will create a diff between the original package and your changes. Then your changes will be applied every time you run yarn or npm.
I have developed an npm package for React Native (myPackage).
As might you know React Native doesn't have built-in support to handle SVG images so I am using this package react-native-svg for handling SVGs in my myPackage
After developing I have created a new React Native app (create-react-native-app my-project) and installed myPackage through npm I myPackage
so, the problem is when I install myPackage in my-project it installed successfully and listed in node_modules but I am getting an error that the RNSVGPath was not found but it actually exists in node_modules
Workaround:
It works if I install the package again in my-project
It shouldn't be like this because my-project must use dependencies of myPackage. I don't want to install manually react-native-svg
If you're using react-native-cli or the expo bare workflow, it's probably because you didn't run pod install after installation
I created an Expo project because I thought it would be easier to the person I'm teaching to code in React Native. But my instinct is to just use yarn or npm. Am I damaging project structure in any way?
https://docs.expo.dev/workflow/using-libraries/#using-expo-sdk-libraries
The expo install command will pick a version of the library that is compatible with your project and then use your JavaScript package manager (such as npm) to install it.
I created a package which uses react-native-webview as a dependency and I published it to npm.
My steps to create and publish a package are:
npm init
npm link react-native-webview
npm install react-native-webview
npm publish
Everything worked perfectly and I successfully published my package.
However, after the installation of my package using npm install <package_name> in another project, when I run the project I always get this error:
requireNativeComponent: "RNCWebView" was not found in the UIManager
I don't know why I am getting this. I also checked the dependencies in node_modules folder and all are present. But when I install react-native-webview dependency explicitly into my project It works perfectly fine.
This error is due to native link not present in between the UIManager and the JS core
You can either run react-native link react-native-webview or link it manually
use react-native link command to link dependencies
run
npx react-native link react-native-webview
I am creating a stencil project which uses an npm package inside it, is there any options to add an npm package inside stencil project. Any suggestions I searching for a solution for quite a while.
This is how i use ck-editor in angular
<ck-editor name="editor" #myEditor [(ngModel)]="templateSetValue.template_content"
(change)="handleEditorData($event)">
</ck-editor>
Is it possible to use the same is stencil project
https://www.npmjs.com/package/ngx-ckeditor
Not sure if I understood the question correctly, but to add a package from npm in your Stencil.js project, you can just install it, like you would in any other node project:
npm install <some-package>
For example nprogress:
npm install nprogress #types/nprogress
and then import it in your code like
import nprogress from 'nprogress';
nprogress.start();
// ...