React Native non-native library - react-native

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.

Related

Create npm package of my react native app

Right now I am working on npm package for my react native app,My app contain lots of things, like have a native modules, lots of dependencies,I am using this to create npm package for my app.
Question 1 - Above package (Mentioned as this) is good for create npm package for my react native app?
Question 2 - As I mentioned that my react native app contain native modules too how can I manage into npm package?
Many thanks in advance

How to import react native component library into react native project?

I need to develop multiple react native projects which share common UI elements. I plan to create a UI component library and use it in all these apps.
What would be the best way to import the RN library into my RN project?
I think the cleanest way to go about it would be to publish the ui library to npm. Doing this would let you install and update the ui library the same way you would any other npm package.
e.g. if the npm package name is my-awesome-ui-components
Installing: npm i my-awesome-ui-components
Updating: npm update my-awesome-ui-components
Importing:
import { Switch, Text, Button, } from 'my-awesome-ui-components'
Here's a cool guide for getting started with publishing to npm.
Here's the npm docs on publishing privately (if thats what you need to do)

How to link native library to react native application and what is the folder structure?

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

Still cannot use `react-native link` after ejecting a Create React Native App

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.

How do I publish a react native component to NPM

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