How do I create a React Native component and publish it to NPM? I know I need a GitHub repo but what are the steps? Should there be a specific folder structure? And how do I get it exactly to npm?
So you want to contribute to the open source community? That’s awesome! Helping to grow React Native’s fairly young ecosystem is great.
When I decided to take on this task not long ago, I noticed there wasn’t much material around publishing React Native components to NPM. So I’m hoping this post will help make the process much easier for others.
Initial Setup
First, let’s create a folder where our React Native component will live.
mkdir <folder_name> && cd <folder_name>
# For example
mkdir my-component && cd my-component
Once inside the folder, we need to initialize a new NPM package by typing npm init. This will create a package.json file that will hold some important metadata about the React Native component.
A series of questions will be displayed such as package name, version, description, keywords, etc.
Read more
Create a local nodejs package directory using npm init ->
LINK
Create a git repo using git init and commit it.
Add your code and update the git.
Publish the code to npm. Follow this LINK
Related
I'm currently working on my Homework with VUE.Js which i found something cool in web which it was using After Effect animation in projects. so here's my question, How should i import it in project and use it?
Documentation said i should install via npm and use it by a simple code in vue.js file, but it won't work, so i guess i should use app.js file to import it, but i don't know how should i make it work. Can anyone explain how i can use it in my project? i don't need a full code to bother anyone, just how should i import from app.js and how should i use json file to make it appear in project.
Here's the Github link : https://github.com/chenqingspring/vue-lottie
Problem was in Development Mode.
Since i was using npm run watch , I thought it's normal like other npm packages but it wasn't, then i restarted with npm run prod and it's worked. doesn't matter if i use npm run watch or npm run dev. it only work when i'm using npm run prod.
I want to create a library in react-native that doesn't need any linking and any native code, namely, it is just a pure-javascript component.
Nowadays, I only found the react-native-create-library but it is oriented for native modules. I can create my library with this one but wouldn't be very "lean".
Do you know some library/article to create an full-javascript library for react-native ?
Thank you very much!
Here are the steps:
run npm init in cmd
give answers to all questions.
create components here
create index.js file and import your component in that
export you module in index.js file
login in npm by using npm login command
List item npm publish to publish it on npm.
here is the library which I created for TextInput https://github.com/shashinbhayani/rn-textfield/tree/master/src
you can check there how I created the library.
How do I send a react native project? (Maybe over Email)
What i know is that i can send the package.json and the source files and they can npm install these dependencies.. but there are many manually linked components and what about the android and ios folders?
Thanks a lot.
You can simply create an archive and send where you want, to reduce size you can exclude node_modules directory, which can be loaded with npm install command. Also, you can exclude following directories
ios/build
ios/DerivedData
android/.gradle
android/app/build
android/app/release
I started with a create-react-native app. Then, I wanted to add a dependency. So, I ran react-native link:
`react-native link` can not be used in Create React Native App projects. If you need to include a library that relies on custom native code, you might have to eject first. See https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md for more information.
So, I ran npm run eject and it successfully ejected. There are many changes to the package.json and some scripts have been added.
But, if I now run react-native link, I still get the same error!! How can I successfully run this command? How does it determine that I'm still using create-react-native?
I'm guessing there's some flag somewhere that still says it's using create-react-native, but I don't know where it is. Any help is appreciated.
react-native link
only works when you have added any new package eg:- npm i react-native-vector-icons. then you need to import package name to various class manually but if you dont want to do it you can directly run the command
react-native link react-native-vector-icons OR react-native link
this will automatically add import the package to your ios and android files.
Try these steps it will work.
I'm developing react-native app based on the latest 0.15.0 release via the NPM install/update method. Looking through the react-native MapView documentation it appears that it should support "image" prop in the "annotations" prop and "overlays" prop in the MapView. However, those props didn't work in my RN release.
After looking through the various branches in the react-native GitHub, I discovered that only the master branch has those props in MapView (See this). Since I'm keeping up with the RN releases via NPM. It is unclear to me how I can develop against the RN master branch.
Any idea?
One way that I can think of is to do a git pull of the master branch in my npm's node_modules and overwrite the react-native module. However, that seems drastic and I would also pull in many unneeded parts that requires deletion.
Another idea is to manually copy the master branch's MapView component and the corresponding iOS native files RCTMap… over but that seems inelegant and tedious.
Looking for a more elegant solution here.
You should be able to specify a git dependency in your package.json, like this:
"dependencies": {
"react-native": "facebook/react-native",
},
npm will automatically clone the repo when installing. If you want to pin to a particular commit (highly recommended), do facebook/react-native#f025049b.
(Note that this strategy won't work for some packages like react itself which require a build step before npm, but react-native should work fine like this.)
You could clone react native's repo locally and install it on your project:
> git clone https://github.com/facebook/react-native.git
> cd MyProject
> npm install ../react-native
For those in a similar position, but unwilling or unable for whatever reason to follow the master branch, you might consider waiting for the features.
From one of the primary contributors (paraphrased): React Native has a roughly 2 week cadence. A release candidate (rc) is derived from master at some point which begins the cycle. Two weeks later, it is promoted to release, and a new release candidate is created from the current state of master. The cycle then repeats. The MapView features you are hoping to use should show up in the next rc.