Code Monkey home page Code Monkey logo

react-native-create-library's Introduction

react-native-create-library

Tool to create a React Native library with a single command.

Why might you need this?

If you are looking to create a native module for React Native, you need some native code for each platform you want to support and then some JavaScript code to bind it all together. Setting this up by yourself can be time-consuming.

This is where this tool comes in. It creates a boilerplate with all current best practices in mind. Why not use react-native new-library? Unfortunately that command doesn't create an up-to-date library, requires an already initialized React Native project and only sets up the iOS side of things.

Caution: This only creates native modules without a view component.

Alternatives

react-native-create-bridge

Installation

Requirements: Node 6.0+

$ npm install -g react-native-create-library

Command-line usage

Navigate into an empty directory to execute the command.

$ react-native-create-library MyFancyLibrary

This will create the folder MyFancyLibrary in which the library will be created in.

Now install dependencies by running this command in the newly created library.

$ npm install
Usage: react-native-create-library [options] <name>

Options:

  -h, --help                                output usage information
  -V, --version                             output the version number
  -p, --prefix <prefix>                     The prefix for the library (Default: `RN`)
  --module-prefix <modulePrefix>            The module prefix for the library (Default: `react-native`)
  --package-identifier <packageIdentifier>  (Android only!) The package name for the Android module (Default: `com.reactlibrary`)
  --namespace <namespace>                   (Windows only!) The namespace for the Windows module
   (Default: The name as PascalCase)
  --platforms <platforms>                   Platforms the library will be created for. (comma separated; default: `ios,android,windows`)
  --github-account <github_account>         The github account where the library is hosted (Default: `github_account`)
  --author-name <name>                      The author's name (Default: `Your Name`)
  --author-email <email>                    The author's email (Default: `[email protected]`)
  --license <license>                       The license type of this library (Default: `Apache-2.0`)
  --generate-example <shouldGenerate>       Will generate a RN example project and link the new library to it (Default: `false`)

Programmatic usage

const createLibrary = require('react-native-create-library');

createLibrary({
  name: 'MyFancyLibrary'
}).then(() => {
  console.log('Oh yay! My library has been created!');
})

Options

{
  name: String, /* The name of the library (Default: Library) */
  prefix: String, /* The prefix for the library (Default: RN) */
  modulePrefix: String, /* The module prefix for the library (Default: react-native) */
  platforms: Array, /* Platforms the library will be created for. (Default: ['ios', 'android', 'windows']) */
  packageIdentifier: String, /* (Android only!) The package name for the Android module (Default: com.reactlibrary) */
  namespace: String, /* (Windows only!) The namespace for the Windows module (Default: The package identifier as PascalCase, which is `Com.Reactlibrary`) */
  githubAccount: String, /* The github account where the library is hosted (Default: `github_account`) */
  authorName: String, /* The author's name (Default: `Your Name`) */
  authorEmail: String, /* The author's email (Default: `[email protected]`) */ 
  license: String, /* The license type of this library (Default: `Apache-2.0`) */
  generateExample: Boolean, /* Will generate a RN example project and link the new library to it (Default: `false`) */
}

Acknowledgements

react-native-share (https://github.com/EstebanFuentealba/react-native-share) has been a great source of inspiration for this project.

License

MIT

react-native-create-library's People

Contributors

buhe avatar davidpotter avatar emps avatar frostney avatar hyochan avatar itinance avatar joshuapinter avatar kadikraman avatar maicki avatar radko93 avatar rozele avatar stoneman1 avatar thorbenprimke avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-native-create-library's Issues

--generate-example not working?

I ran react-native-create-library MyFancyLibrary --generate-example "true" and it did not create an Example app, how should it be used?

I also tried --generate-example true

Support of Swift?

I added a swift class, then it complains:

Check dependencies
Swift is not supported for static libraries.

when I click run.

blank line at top of xcodeproj/project.pbxproj file breaks react-native link

While testing the installation process of a library I created with this tool, running react-native link produced an error 'Expected "{" found "/"'. This is because there is an extra blank line at the top of the xcodeproj/project.pbxproj file that is confusing the link command. After removing the blank line, the link command worked without errors.

Android External Libraries has react-native 0.20.1

First, thank you for a great project!

I'm having some trouble with the android project. When I create a new library and open it for the first time in Android Studio, I see that react-native-0.20.1 is used in the External Libraries (visible in the Project view). (Before I realised this I was having trouble because I wanted to use ReadableArray's toArrayList method, which came later in RN). Clearly this is because this is what's available on MavenCentral (0.20.1 is visible if you search on MavenCentral's site).

I managed to get a later RN version into the external libraries by removing mavenCentral() and adding what is typically found in a RN android project:

mavenLocal()
jcenter()
maven {
    // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
    url "$rootDir/../node_modules/react-native/android"
}

But then I had problems in the host project I was using the library in, the packager was complaining about multiple RN versions. I previously had my library working fine in the same host project (although with RN 0.20.1, though I didn't know it!).

I'm no android expert unfortunately. How should I go about configuring the library so that I can develop java within Android Studio and be sure that the library works correctly in the host?

Thanks, hope someone can help!

header file not found for ios framework

I've included a framework in the xcode project for the RN library I'm creating. Everything compiles fine when I build the ios project in the RN library, but once I npm install the library into my main RN project, run react-native link <project-name>, and then build in xcode, the included framework headers are not found.

I checked the normal build settings (Header, Framework, and Library search paths) and they all have $(inherited) listed. Any ideas why I'm receiving this compile error?

Module `react` does not exist in the Haste module map. for library with only JS(react) code

i created a library using react-native-create-library named myLib and i have a RN app from react-native-cli named myApp.

The library "myLib" does not contain any native code and only JS code which imports react(basically made a component that i want to be shared), here is the package.json

{
"name": "myLib",
"version": "1.0.0",
"description": "Set of components to be used throught the app",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [
"react-native",
"basic-components"
],
"author": {
"name": "Ullas",
},
"license": "",
"deprecated": false,
"dependencies": {
"apisauce": "0.15.2",
"react-native-navbar": "2.1.0"
},
"peerDependencies": {
"react": "16.3.1",
"react-native": "0.55.4"
}
}

when i link this to the RN app "myApp" i get the error :

error: bundling failed: Error: Unable to resolve module react from /Users/ullas/Desktop/myLib/index.js: Module react does not exist in the Haste module map.

even though i have react as part of my node_modules for myApp project.
How can i run this and use the dependencies provided by the peer project for my library rather then define dependencies of its own and duplicating the same?

need help :(

Xcode project fails to build

When I attempt to build the Xcode project generated by this tool using Xcode 8.3.3, I get the following error in the .m file:

fatal error: 'React/RCTBridgeModule.h' file not found
#import <React/RCTBridgeModule.h>
        ^

Here are the steps I followed:

  1. react-native-create-library --prefix '' --package-identifier com.tableau --platforms ios,android Foo
  2. yarn remove react-native --peer
  3. yarn add react-native
  4. yarn add [email protected]
  5. Create a new workspace in the ios directory.
  6. Add the Xcode project to the workspace.
  7. Update the project from the warning.
  8. Build in Xcode.

Still maintained?

I see a lot of unanswered issues and a pull request that is not merged. Is this still up to date/usable?

Maybe version's bump?

Since your last release a lot has changed and maybe that's a good idea to bump version on GitHub?
Especially take into consideration that your Readme is too "up-to-date" according to the last release. :)

Unexpected token

/usr/local/lib/node_modules/react-native-create-library/lib.js:7
const { hasPrefix, createFile, createFolder } = require('./utils');

SyntaxError: Unexpected token {
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:374:25)
at Object.Module._extensions..js (module.js:417:10)
at Module.load (module.js:344:32)
at Function.Module._load (module.js:301:12)
at Module.require (module.js:354:17)
at require (internal/module.js:12:17)
at Object. (/usr/local/lib/node_modules/react-native-create-library/command.js:3:23)
at Module._compile (module.js:410:26)
at Object.Module._extensions..js (module.js:417:10)

Would this still work with a Swift code?

I created a bridge that contains swift files, a bridging header and some ObjC code. Would this still work? I keep getting an error like this when I try to build:

clang: error: no such file or directory: '/Users/jordan/Library/Developer/Xcode/DerivedData/Example-gkdwaunksvxpwadrlaeowlpftbms/Build/Products/Debug-iphonesimulator/libRNHotBox.a'

Contribute this to upstream

It'll be great to improve the react-native create-library the command. Any plans to contribute this to upstream?

Invalid path in the message when a project is created.

Hi!

When I run
react-native-create-library MyTest

I see this in the console:
Created library MyTest in ./MyTest.

But the folder is react-native-my-test, so I spent some time trying to understand where's my new lib.

It seems like a bug to me, the path in the message being different from reality :) .

Thanks.

No recent releases

Hi there - I really appreciate the work you've done with this library but I don't see any releases on npm from the last six months despite all the new work you've been doing. Is there any reason for that?

modules.export seems not to work

Hi guys. I created a library that exports a bunch of components.
The index.js looks like this:

import React from 'react';
import { NativeModules } from 'react-native';
import ClickInfoTask from './app/components/clickInfoTask';

const { RNEduLibrary } = NativeModules;

module.exports = RNEduLibrary;
module.exports.ClickInfoTask = ClickInfoTask;

I installed this using npm install and react-native link and everything works fine on Android.
However, on iOS I got the following error:
null is not an object (evaluating 'module.exports.clickInfoTask = _clickInfoTask2.default')

I logged the imported ClickInfoTask and it's not null.

The ClickInfoTask class:
export default class ClickInfoTask extends Component { /* content of the class */ }

(the project is here: github.com/pepavesely/EduLibrary

I'd much appreciate any help.

Regards,
Josef Vesely

Request to Install dependencies automatically by declaring them

@frostney : Hi, congratulations on the module.
It would be interesting to give the possibility that during the creation of the module, the possibility to automatically install dependencies.
For example:
--dependencies <dependencies> (the name of each dependency separated by a comma: 'com.name0, com.name1, com.name2, ..')

Release version 4.0

With all the code changes and new features recently we should plan to release version 4.0. This should act as an umbrella issue for the 4.0 release.

This would resolve #62, #68

@frostney Could you start the process as the other collaborators don't have access to npm for this package. Thanks!

  • Merge #77
  • Update README.md
  • Release version 4.0

UnknownPluginException: Plugin with id 'com.android.library' not found

The default android project doesn't seem to work for me. I get the errors:

INFO - .project.GradleProjectResolver - Gradle project resolve error 
org.gradle.tooling.BuildException: Could not run build action using Gradle distribution 'https://services.gradle.org/distributions/gradle-2.10-all.zip'.
...
Caused by: org.gradle.internal.exceptions.LocationAwareException: Build file 'blah/MyFancyLibrary/android/build.gradle' line: 2
A problem occurred evaluating root project 'android'.
...
Caused by: org.gradle.api.GradleScriptException: A problem occurred evaluating root project 'android'.
...
Caused by: org.gradle.api.plugins.UnknownPluginException: Plugin with id 'com.android.library' not found.

What am I doing wrong?

'React/RCTBridgeModule.h' file not found

hey guys, I try to create a React Native library with "react-native-create-library". But when I open my iOS library I can't import the RCTBridgeModule.h.
thanks for your answers.

Unexpected token error on Windows

I get this error on Windows:

$ react-native-create-library RNCustomLib
C:\Users\MadChuckle\AppData\Roaming\npm\node_modules\react-native-create-library\lib.js:8
const { hasPrefix, createFile, createFolder } = require('./utils');
      ^

SyntaxError: Unexpected token {
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:373:25)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (C:\Users\MadChuckle\AppData\Roaming\npm\node_modules\react-native-create-library\cli.js:4:23)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)

SyntaxError: Unexpected token

Wow! This will be a great time saver! Thank you for sharing a great tool!

I am getting this error when I create a new project:

npm install -g react-native-create-library
react-native-create-library MyBridgeModule

/Users/edward3/.nvm/versions/node/v5.9.1/lib/node_modules/react-native-create-library/lib.js:8
const { hasPrefix, createFile, createFolder } = require('./utils');
      ^

SyntaxError: Unexpected token {
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:387:25)
    at Object.Module._extensions..js (module.js:422:10)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Module.require (module.js:367:17)
    at require (internal/module.js:16:19)
    at Object.<anonymous> (/Users/edward3/.nvm/versions/node/v5.9.1/lib/node_modules/react-native-create-library/cli.js:4:23)
    at Module._compile (module.js:413:34)
    at Object.Module._extensions..js (module.js:422:10)

Error: more than one library with package name 'com.reactlibrary'

Hey guys, I've noticed after using react-native-create-library for more than one library, I'm getting this error message when building for android:

Error: more than one library with package name 'com.reactlibrary'

This is telling me that when you create the library, the library has the same package name. Can you fix this so it's unique next time? Also, where do I change this within my android code so it does work? Thanks!

Add postinstall removing of example

Using the newest version from master with automatically generated example I faced a problem when I ran react-native start with duplication of dependencies.
example folder is being copied while installing example (because of file:../ dependency). The solution is imo to add some postinstall script (like here I have done) :)

Provide stub method

I believe this came up in a previous issue already. This would provide a stub method in all platforms making it easier to check if everything is working and providing an example method for start off.

Add example project

Create an example project with the library that's already linked and ready to use. (With an option to not generate the example.)

plugin with id' com.andriod.library

looking for a answer for the the plugin with id' com.andriod.library

apply plugin: 'com.android.library'

android {
compileSdkVersion 23
buildToolsVersion "24.0.3"

defaultConfig {
    minSdkVersion 21
    targetSdkVersion 23
    versionCode 1
    versionName "1.0"
    testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"

}
buildTypes {
    release {
        minifyEnabled false
        proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
    }
    debug {
        testCoverageEnabled true
    }
}

}

apply plugin: 'jacoco'
jacoco {
version "0.7.1.201405082137"
}

dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:23.1.1'
compile files('libs/AMZNMediaPlayer.jar')
compile files('libs/exoplayer.jar')
compile project(':ModuleInterface')
compile project(':UAMP')

// Set this dependency to use JUnit 4 rules
androidTestCompile 'com.android.support.test:rules:0.4.1'

androidTestCompile('com.android.support.test:runner:0.4.1') {
    exclude module: 'support-annotations'
}

}

Add Interactive Config Mode

With the growing number of config options, it would be nice to add an interactive config mode. It would certainly make it easier than looking up all the options and typing them on the command line. ;)

Suggested by @frostney here: #58 (review)

Have a choice to initiate the boilerplate depending on RN version

Since almost every RN version introduce some breaking changes while initiating iOS/Android boilerplate code with RN init. If I were to build a library but not necessary have time and effort to always update to latest RN version. Or some app developer is remaining on some older version and want peerDependencies at a certain version. Maybe could look into https://github.com/jacobbubu/rninit? This might mean a redesign but it would make this ulti much more practical. Thanks.

Windows issues

Just used this to build a Windows plugin

https://github.com/GantMan/WinGif

Here's some notes:

  • there should be a .gitignore that at least has a node_modules/ entry.
  • Probably update RNWin from 0.29.0 to 0.36.0 or something a bit newer.
  • The README for manual add in Windows is wrong. I updated my readme to be the correct instructions
  • the generated csproj react windows root should be 3 updirs ..\..\.. and not 2

cc: @rozele

No --version option

Hello, there!

Your readme includes the --version option, but react-native-create-library --version gives error: unknown option --version, which is a bit frustrating, making wonder if the app was set-up correctly.

Thank you.

Header Search Paths

Hi, I couldn't get this to work without running npm install react-native and adding $(SRCROOT)/../node_modules/react-native/React to the xcode project header search paths.

I feel like I'm missing something obvious... any guidance? Btw thanks for the awesome tool!

Create Xcode workspace at root of ios directory

To facilitate the use of CocoaPods, could you modify the tool to generate an Xcode workspace? The first thing I end up having to do is create a workspace and then add the project generated by this tool to that workspace.

CocoaPods

Allow to generate a CocoaPod Podspec designed after current community guidelines.

This should be optional and not active by default. I'm a bit unsure if this is the way to go, since CocoaPods might get phased out and replaced by Buck.

Not linking with newer versions of react-native.

Using:

  • react-native v0.41.2
  • react-native-cli v2.0.1
  • react-native-create-library v1.0.4
  • xcode v8.2.1

I did the following:

  1. react-native-create-library Lib.
  2. react-native init RNLibTest.
  3. "Successfully linking" (doesn't look like it) with both automated (react-native link) and manual way: both following the scaffolded instructions of this repo AND following the linking section of react-native docs.

The result is just saying that the library is undefined as if react-native didn't find it in NativeModules.

Anyone else is encountering this issue? I created a stackoverflow question to keep this issue clean: http://stackoverflow.com/questions/42281942/library-not-linking-with-newer-versions-of-react-native

ping: @frostney

Generated Xcode project gives warning when loaded

When loading the Xcode project in Xcode 8 (I've got 8.3.3 installed), the following warning:

Update to recommended settings Foo.xcodeproj

Clicking the warning, several other messages are displayed:

  1. An iOS Deployment Target earlier than 8.0 is not supported by this version of Xcode. This will update the value for Project 'Foo' to '8.0'.
  2. This will enable the following compiler warnings: Infinite Recursion, No Common Blocks, Suspicious Moves
  3. This will turn on "Enable Testability" for the "Debug" configuration

Please don't include the prefix in the name

react-native-create-library DFP      
/usr/local/lib/node_modules/react-native-create-library/lib.js:25
    throw new Error('Please don\'t include the prefix in the name');
    ^

Error: Please don't include the prefix in the name
    at module.exports (/usr/local/lib/node_modules/react-native-create-library/lib.js:25:11)
    at Object.<anonymous> (/usr/local/lib/node_modules/react-native-create-library/cli.js:30:1)
    at Module._compile (module.js:541:32)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)
    at Module.runMain (module.js:575:10)
    at run (bootstrap_node.js:352:7)
    at startup (bootstrap_node.js:144:9)

Module does not appear in NativeModules object for iOS

The problem

When adding the default iOS module into an app created by react-native init, the library's module does not appear in the NativeModules Javascript object.

Steps to reproduce

  1. Create an app called myapp
react-native init myapp
  1. Create a library called mylib
react-native-create-library mylib
  1. Add mylib as a dependency to myapp using install-local
install-local --save ../mylib
  1. Link mylib
react-native link react-native-mylib
  1. Print out the NativeModules object in App.js in myapp
import {NativeModules, ...} from 'react-native'
...
render() {
  console.log('modules! ', NativeModules);
  ...
}
  1. Run the app and debug it remotely
react-native run-ios

Expected

The Module RNMylib should appear among all of the react native base native modules

Actual

Only the react native base native modules appear and RNMylib cannot be used on the Javascript side of things.

Relevant versions

react-native: 0.56.0
react: 16.4.1
xcode: 9.4.1
simulator: iPhone 6 - 11.4
react-native-create-library: 3.1.2
react-native-cli: 2.0.1

I do see the RNMylib.xcodeproj in my Libraries folder in xcode. It has also been added to the user headers search paths and is listed in the build settings. The react-native link command was definitely successful.

Any help with this would be greatly appreciated. It very well may be that I'm not aware of some config that is required but after poring over the react native docs and various articles on this topic, I'm pretty stumped.

How to add native dependencies?

Hi
I want to add some native ios package as a dependency.
It should go into the Embedded Binaries section.

However if I open the lib created with react-native-create-library I can't see the General section where Embedded Binaries is in.

If I create a normal react native app react-native init and open the xcode projcet I see the general section.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.