19

In React Native, there are certain third-party components which compile their own libraries that can be included in your main React project. Examples of such third-party libraries are these:

Now, I would very much like to create my own React Native component with a linked library (iOS only, so I only need the Cocoa library that I would link using this method: https://facebook.github.io/react-native/docs/linking-libraries-ios.html), and so far, all I found is this: http://moduscreate.com/react_native_custom_components_ios/

The resulting project does not, however, specify a library target, and is not linkable to a different project.

I have also tried copying the Touch ID repository and try changing that one's code, but alas, I found it to be uncompilable without being referenced from a different project, which in turn would be the one to be compiled.

Where can I find any guides at all regarding how to do that? Thanks!

arik
  • 28,170
  • 36
  • 100
  • 156

4 Answers4

34

1. Command: new-library

React-native-cli offers the new-library command:

react-native new-library --name <YourNewLibraryName>

Calling this will generate a sample library in your Libraries directory by copying sample file over from the react-native library.

2. Developing

React Native has a couple docs specifically for writing Native Modules and Native UI Components, depending on what you want to achieve.

3. Link component

Link your component once you're done by following the instructions you already mentioned.

purii
  • 6,246
  • 2
  • 26
  • 32
  • Thanks! Bummer about the reputation thing, but your links are much appreciated. – arik Oct 26 '15 at 20:36
  • 2
    following up on my question, how do I make the generated library work with Android? There appears to be a lack of necessary Gradle scripts in the generated folder structure. – arik Nov 20 '15 at 01:39
  • I have to admit, that I have no experience with custom components on Android. Sorry! – purii Nov 20 '15 at 07:16
  • 12
    I could not find the `new-library` command in `react-native-cli@0.2.0`. Instead, this worked for me within my react-native module: `node ./node_modules/react-native/local-cli/cli.js new-library --name newlib` ... but then it created it in the wrong directory. Surely there is an easier way? – pbanka Mar 25 '16 at 17:00
  • As of 2022, it seems to be outdated. Modern approach is described here: https://reactnative.dev/docs/native-modules-setup – forallepsilon Feb 07 '22 at 13:03
2

Take a look at the official Facebook guide Native Modules Setup. It explains how to start:

$ yarn global add create-react-native-module
$ create-react-native-module MyLibrary

This will generate a README.md with next steps as follows:

react-native-my-library

Getting started

$ npm install react-native-my-library --save

Mostly automatic installation

$ react-native link react-native-my-library

Usage

import my-library from 'react-native-my-library';

// TODO: What to do with the module? 
my-library;
Max MacLeod
  • 26,115
  • 13
  • 104
  • 132
1

Using the react-native Module setup

$ yarn global add create-react-native-module
$ create-react-native-module NameOfLibrary

A template would be generated for you, you can write your custom UI code in the index.js and expand on it as deemed fit.

Oto-Obong Eshiett
  • 527
  • 1
  • 8
  • 17
-21

Create Component in react-native :

const App = ( ) => {
  return (
    <Text>Some Text</Text>
  );
}

To register this component you should use:

ReactNative.AppRegistry.registerComponent('your_project_name', ( ) => App);
iPragmatech
  • 419
  • 5
  • 5