I have created a react native project and I want to save my UI components on a separate library for reusability. I have created an library mentioned here on the docs but found no proper guidance about package.json, example folder and how does a react-native library works.
Related
Im looking everywhere but i cant find anything somebody can explain this question ?
I want to be create my own component library i cant find it
Creating a React Native component library can be a great way to standardize your UI components and speed up your development process. Here are the steps to create a React Native component library:
Set up a new React Native project: Create a new React Native project using the react-native init command. You can choose any name you like for your project.
Create your components: Create the components that you want to include in your library. Each component should be a separate file and should be self-contained.
Export your components: Export each component using the export default statement. This will make the component available for use in other projects.
Create an index file: Create an index.js file in the root of your project. In this file, you can export all of your components as a single object using the export statement.
Publish your library: Publish your library to a package manager like NPM or Yarn. This will make your library available for others to install and use in their projects.
Document your library: Create documentation for your library, including installation instructions, usage examples, and a list of available components. You can use tools like JSDoc or Markdown to create your documentation.
Update your library: Keep your library up-to-date by fixing bugs, adding new features, and improving documentation. You can release new versions of your library to the package manager as needed.
Once you have created your React Native component library, you can use it in any React Native project by installing it from the package manager and importing the components that you need. This can save you time and help you maintain consistency in your UI design across multiple projects.
I want to publish a react native library to npm with native codes (Java and Objective C). I have created a react native app and the native modules and native UI components are working fine in the app but I don't know how to publish my code as a react native library.
If you have completed all the tests, you can do this with a simple library.
that is create-react-native-library
This is shown in the official document of react-native.
You can also use create-react-native-module, a library with multiple added functions based on react-native-create-library
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 am creating a react native library using this library, but my issue is how to add an external library (e.g library.framework) into it.
When I drag the library to a normal application project I see the library added to Frameworks, Libraries, and Embedded content under the "General tab" and I am able to use it perfectly.
Image - using the library in a normal application project
But when I create an react native module and try to use the library I created it the created-react-library > ios. The is no general tab, hence the library cannot be accessed.
Image - using the library in a react native create module > ios project
what is the proper way of using an external library in a react-native-create-library module?
You need to select a target under your project, to see the general tab.
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.