A CLI tool that bridges React Native modules & UI components with ease πŸŽ‰

Overview

react-native-create-bridge

Bridging native modules & UI components made easy! If you're a JavaScript developer writing your first lines of native code or a more experienced developer looking to eliminate boilerplate from your React Native workflow, this tool is for you.

CONTRIBUTORS WANTED

Getting Started

  1. npm install --save react-native-create-bridge or yarn add react-native-create-bridge
  2. From the root of your React Native project, run react-native new-module
  3. The prompts will ask you for:
  • Your bridge module name
  • Whether you want to create a native module or UI component (or both!)
  • The platforms and languages you would like to support. Currently, we default to iOS/Obj-C and Android/Java, but you can also choose iOS/Swift or Android/Kotlin if you prefer.
  • The directory where you would like your JS files. If it doesn't exist, we'll create it for you.
  1. That's it! πŸ“¦ Sit back and we'll deliver your native module for you lightning fast! ⚑️

Next Steps

Depending on your environment, there may be a couple more steps that you have to take. In future versions of react-native-create-bridge, we want to eliminate these steps.

Android/Java

  • To complete the bridging process, look for MainApplication.java in android/app/src/main/java/com/yourapp
  • Add your package to the getPackages function like this:
@Override
  protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new YourModulePackage()
    );
  }
  • Import your package at the top: import com.yourapp.yourmodule.YourModulePackage;

Android/Kotlin

Adding Kotlin support to your project:
  • You will need to install the Android Studio 3 preview
  • In android/build.gradle, add ext.kotlin_version = '1.1.2-4' to the buildscript and classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version" to your dependencies
  • In android/app/build.gradle, add apply plugin: 'kotlin-android' to the top of the file. At the bottom, add compile "org.jetbrains.kotlin:kotlin-stdlib-jre7:$kotlin_version" to your dependencies
  • Now, you can convert any Java file to a Kotlin file by navigating to Code > Convert Java file to Kotlin file in the top menu
Completing the bridging process:
  • If you already followed all the steps above, you can complete the bridging process by looking for MainApplication.kt in android/app/src/main/java/com/yourapp
  • Add your package to the getPackages function like this:
override fun getPackages(): List<ReactPackage> {
  return Arrays.asList(
      MainReactPackage(),
      YourModulePackage(),
  )
}
  • Import your package at the top: import com.yourapp.yourmodule.YourModulePackage

iOS/Obj-C

  • Currently, you will need to add the files manually to your project in Xcode. Right click on the folder with your app name and select Add Files To YourApp. Select the files associated with your module and click Add

iOS/Swift

  • If this is your first Swift module in your project, you will need to make sure you have a Obj-C bridging header to expose any Obj-C code to Swift. Read Importing Obj-C into Swift to learn more.

Goals

  • Delivers bridge module in Obj-C, Swift, Kotlin, & Java
  • Compatible with all versions of React Native, including v0.40+
  • Split out native UI components & modules into their own templates
  • Config to remove comments for more experienced users
  • Modifies existing project files (AppDelegate.h, MainApplication.java) to complete the bridging process
  • Your feature request could be here! Open up an issue and give us feedback 😊

Setting Up Dev Environment

  1. Fork this repo & clone it
  2. cd to where you cloned it
  3. npm install or yarn
  4. After you make changes, link your local package by running npm run package:dev
  5. You can now run react-native new-module locally in a React Native project to test your changes
  6. npm run test will run the Jest test suite

Contributing

react-native-create-bridge is a new project and we would love feedback from the community on how it should evolve. Please report any 🐞 s and let us know how you're using react-native-create-bridge!

If you would like to contribute, please read the contributor guidelines first.

This project adheres to the Contributor Covenant code of conduct. By participating, you are expected to uphold this code. Please report unacceptable behavior to [email protected].

Contributors

A big thank you goes out to these awesome people for their contributions (emoji key):


Kurtis Kemple

πŸ’»

Duy Bao Nguyen

πŸ’»

Mike Grabowski

πŸ’¬

Peggy Rayzis

πŸ’» πŸ“– πŸ‘€

Mihovil

πŸ“

AndrΓ© Neves

πŸ‘€

Jarret Moses

πŸ’» πŸ“–

This project follows the all-contributors specification. Contributions of any kind welcome!

Comments
  • Convert to a plugin

    Convert to a plugin

    Changing this project to a react-native plugin, would mean that after installing it locally into project dependencies, you can run react-native create-bridge instead of having global executable.

    Would be easier to version, adapt to breaking react-native changes and work across projects.

    Since this is not a super documented feature, I would love to send a PR adding this.

    Would you be / other users open to having such workflow instead?

    enhancement 
    opened by grabbou 21
  • feat(react-native-plugin): Convert package into a React Native plugin

    feat(react-native-plugin): Convert package into a React Native plugin

    What: Solving issue https://github.com/peggyrayzis/react-native-create-bridge/issues/19

    Why: This change allows for package to be installed and used locally within projects by use of react-native create-bridge

    How:

    • Adding rnpm plugin path to package.json
    • Adding necessary module.exports to index.js
    • Refactor index.js and file-operations.js to use require and promise based functions
    • Refactor test files to import fileOperations with require

    Checklist:

    opened by jarretmoses 19
  • 2.0.0 npm download missing src folder

    2.0.0 npm download missing src folder

    Dev setup:

    • react-native-create-bridge version: 2.0.0

    What you did:

    yarn add react-native-create-bridge

    What happened:

    $ ls node_modules/react-native-create-bridge/
    
    .npmignore        LICENSE.md        README.md         node_modules/     templates/
    CONTRIBUTING.md   MODULES.md        UI-COMPONENTS.md  package.json      yarn.lock
    

    The src folder is missing from the npm download.

    bug 
    opened by cranberyxl 6
  • Error

    Error "Expected a component class, got [object Object]"

    Hi,

    I installed the latest version of react-native-create-bridge (2.0.1) on react v 0.45.1. Following the steps as described in the tutorial posted by Peggy on youtube, I'm getting the error Expected a component class, got [object Object]. I'm not sure how to fix this error.

    Regards,

    Moses

    opened by mosesmc52 5
  • fix(android): fix JS error when RN version is a github URL

    fix(android): fix JS error when RN version is a github URL

    What:

    In file-operations.js parseFile(), validate the RN version string before doing the version check.

    Why:

    A developer using this tool will see a crash if importing react-native directly from github instead of using a release version.

    How:

    See changes in file-operations.js

    Checklist:

    opened by douglowder 5
  • Linking iOS

    Linking iOS

    In the readme you say:

    To complete the bridging process, look for AppDelegate.h in ios/yourapp Add #import <YourModule/YourModule.h> to the top of the file

    When I do that, I get:

    fatal error: 'RNTestModule/RNTestModule.h' file not found
    

    The files live in the root of ios/ folder - not in the project folder within, i.e. ios/MyApp. Could that be the reason?

    opened by chrise86 5
  • fix(android): update templates & tests to fix RN v0.47.2 breaking change

    fix(android): update templates & tests to fix RN v0.47.2 breaking change

    What: Closing #30

    Why: Breaking change in RN v.0.47.2

    How:

    • Check RN version from package.json
    • Override createJSModules in Android & Kotlin templates for the package if version is below v0.47.2
    • Take out createJSModules override if version is latest or above
    • Updated readAndWriteFiles & parseFile functions to take a config option as second param
    • Updated Jest tests

    Checklist:

    opened by peggyrayzis 4
  • Question: What are the differences between this repo and react-native-create-library?

    Question: What are the differences between this repo and react-native-create-library?

    Hi!

    Thanks for your work, I'll have a look at it :)

    I am currently using react-native-create-library and I was wondering what are the differences (if there are) between this repo and react-native-create-library.

    opened by fdnhkj 3
  • Understanding the plugin and where is .xcodeproj

    Understanding the plugin and where is .xcodeproj

    The following question is probably pretty stupid, but I don't have the answer.

    Context

    I'm creating a plugin for an sdk that's not that popular yet, so there's no plugin for RN. I'm attempting to be the one writing it.

    The short version

    Where's foo.xcodeproj after running the create-bridge command?

    The longer version

    How does this all work? It's cool that the bridge gets created for me, but I'd like to know how it works. Why it works. I get the bridging stuff itself, I just don't know how this is all organized. How do I create the foo.xcodeproj dir? How do I make react-native link work for my third party sdk? Where does the sdk come from? Should I include it in the repository?

    I'm sorry for the chaotic way I'm asking my question. It's mainly because I'm not sure what I should be asking.

    Update: What does this plugin add other than react-native new-library --name foo? That seems pretty inclusive and has the .xcodeproj dir

    ~~Another update: I tried that command, but I can't for the life of me get react native to pick it up for me. NativeModules stays an empty project. Do I have to link it somewhere?~~ I had to call react-native link specific-module-name

    opened by RWOverdijk 2
  • Remove createJSModules from packages of Android templates

    Remove createJSModules from packages of Android templates

    This was a breaking change in RN v0.47.2. Not sure if overriding this method is necessary for native modules to work in earlier versions -- if so, we'll need to check the version in package.json and update the templates accordingly.

    opened by peggyrayzis 2
  • Discuss: Change header search paths to look for header files in the Pods directory

    Discuss: Change header search paths to look for header files in the Pods directory

    Based on the Shoutem team's experience with react-native-create-bridge, they suggested configuring a default option to search for header files in the Pods directory when users are installing their SDKs with Cocoapods.

    Here are some things I'd like to discuss before trying to implement:

    • Carthage vs. Cocoapods: Does this process change if people are using Carthage to manage their dependencies? Would a project use both Carthage & Cocoapods? I'm not sure of best practices here. Ideally, I want create-bridge to make no assumptions about the user's setup.
    • How do we accomplish this programmatically? It looks like they're setting this option in Xcode. If we can't accomplish this w/ code, then it's definitely an opportunity to improve the README.
    opened by peggyrayzis 2
  • Direct local .aar file dependencies are not supported when building an AAR.

    Direct local .aar file dependencies are not supported when building an AAR.

    I have 3 rn modules that uses aar files. They reference it in their own build.gradle file like this:

    compile files('libs/mylib.aar')
    

    Until now, it was working fine.

    I recently upgraded my app project from react native 0.63 to react native 0.66 and now when I assembleRelease it, I get:

    Direct local .aar file dependencies are not supported when building an AAR. The resulting AAR would be broken because the classes and Android resources from any local .aar file dependencies would not be packaged in the resulting AAR. Previous versions of the Android Gradle Plugin produce broken AARs in this case too (despite not throwing this error).

    I workaround the problem by importing those aar files in my app's build.gradle file but that sucks, my app should not be aware of those aar files at all...

    Is there any way to use aar files in rn modules now with gradle 4.2+ ?

    opened by zabojad 0
  • chore(deps): bump tmpl from 1.0.4 to 1.0.5

    chore(deps): bump tmpl from 1.0.4 to 1.0.5

    Bumps tmpl from 1.0.4 to 1.0.5.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • chore(deps): bump path-parse from 1.0.5 to 1.0.7

    chore(deps): bump path-parse from 1.0.5 to 1.0.7

    Bumps path-parse from 1.0.5 to 1.0.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • chore(deps): bump tar from 2.2.1 to 2.2.2

    chore(deps): bump tar from 2.2.1 to 2.2.2

    Bumps tar from 2.2.1 to 2.2.2.

    Commits
    • 523c5c7 2.2.2
    • 7ecef07 Bump fstream to fix hardlink overwriting vulnerability
    • 9fc84b9 Use {} for hardlink tracking instead of []
    • 15e59f1 Only track previously seen hardlinks
    • 4f85851 Ignore potentially unsafe files
    • See full diff in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • chore(deps): bump merge from 1.2.0 to 1.2.1

    chore(deps): bump merge from 1.2.0 to 1.2.1

    Bumps merge from 1.2.0 to 1.2.1.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Releases(v1.2.0)
  • v1.2.0(Jul 11, 2017)

    Now, you can specifically request whether you want to bridge a native module or a UI component with react-native-create-bridge. If you want templates that look like the old ones (combined), you can still request that by selecting both options in the prompt. πŸ˜€

    Source code(tar.gz)
    Source code(zip)
  • v1.1.0(Jun 28, 2017)

    For all you React Native hipsters, we now have Kotlin support! Check the README for detailed instructions on how to add Kotlin to your project.

    Source code(tar.gz)
    Source code(zip)
Owner
Peggy Rayzis
Developer Experience @apollographql πŸš€
Peggy Rayzis
Classical Pokedex App made with React Native CLI

βš›οΈ React Native Movie Pokedex App This project was created with React Native CLI and TypeScript template. Description This project is a new practical

PaΓΊl 9 Sep 7, 2022
App for a password manager using React-Native, Expo.CLI and AsyncStorage

App for a password manager using React-Native, Expo.CLI and AsyncStorage

Thomas Jeff Costa 1 May 3, 2022
A practical app made with RN CLI and TypeScript

βš›οΈ React Native Movie Pokedex App This project was created with React Native CLI and TypeScript template. Description This project is a practical conf

PaΓΊl 2 Feb 1, 2022
F.A.N Report - Facebook Audience Network Performance Tool (available both iOS and Android).

Audience Network - Facebook Ads Performance Tool Check your Facebook Audience Network performance quickly with the app. It shows number of ad requests

kf 53 Aug 9, 2022
Crypto Capsule: a free tool used for sending cryptocurrencies into the future

?? ⏲️ Crypto Capsule Crypto Capsule is a free tool used for sending cryptocurrencies into the future. It is essentially a timelock-as-a-service. It is

null 10 Jul 2, 2022
Filip Danisko 5 Jan 25, 2022
Anwer Solangi 17 May 6, 2022
Ecoleta Application using React Native, Expo, TypeScript, react-native-maps, react-native-picker-select, react-native-svg

Ecoleta Application using React Native, Expo, TypeScript, react-native-maps, react-native-picker-select, react-native-svg, @react-navigation/native, @react-navigation/stack, expo-constants, expo-font, expo-location and expo-mail-composer consuming the features of the Node.js - Ecoleta API

Osvaldo Kalvaitir Filho 6 May 17, 2022
:clipboard: mobile app for a consultancy hub - made with react native, expo, styled components and typescript

Consulty Consulty App A marketplace to find a consultant for your next step. ?? Project | Features | Integrations | Technologies | Getting Started | L

Daniel Jorge 5 Apr 19, 2022
A react-native-drawer implemented example and scaffolding for react-native-router-flux.

Deprecated - This repo uses obsolete versions of react-native-router-flux and react-native-drawer. I update the repo for now. But I may not update on

null 50 Feb 14, 2022
🦁 πŸƒ πŸ“± An animal matching puzzle card game– built with turn-based game engine boardgame.io and React-Native + React-Native-Web

Matchimals.fun an animal matching puzzle card game ?? ?? ?? Download for iOS from the App Store ?? Download for Android from the Google Play Store ??

iGravity Studios 133 Sep 10, 2022
A weather app developed in React Native. It is the React Native version of SwiftWeather.

ReactNativeWeather A weather app developed in React Native. It is the React Native version of SwiftWeather How to run the app Install react-native If

Jake Lin 22 Jun 7, 2022
πŸ“²πŸ’¬ react-native-fontext is a lightweight library to integrate fonts in your React Native application that works seamlessly in android and iOS devices.

???? react-native-fontext is a lightweight library to integrate fonts in your React Native application that works seamlessly in android and iOS devices.

mroads 9 Dec 3, 2021
A simply readable Hacker News app for iOS & Android, built with React Native. V2 now over here https://github.com/cheeaun/hackerweb-native-2

HackerWeb A simply readable Hacker News app for iOS and Android. Read about the story here: Building HackerWeb for iOS. Preview iOS Android Developmen

Lim Chee Aun 179 Jul 1, 2022
An Expo config plugin for painless setup of `react-native-firebase`, without touching native code.

Expo with-react-native-firebase An Expo config plugin for paineless setup of react-native-firebase, without touching any native code! You can learn mo

BartΕ‚omiej Klocek 27 Aug 25, 2022
ReactNative app with, react-query, react-tracked, immer, react-navigation, storybook, jest, restyle, react-native-reanimated

React native init 사전에 brew, npx, Xcode 등은 기본적으둜 μ„€μ •λ˜μ–΄μžˆλ‹€κ³  κ°€μ •ν•©λ‹ˆλ‹€. npm version: 6.13.4 npx react-native init ScaffoldPlayground --template react-native-te

JB Paul 2 Dec 17, 2021
Audiobook mobile application accomplished with React Native and React ecosystem, just a single code base.

Audiobook App Open Source Audiobook mobile application accomplished with React Native and React ecosystem, just a single code base for both android an

null 269 Sep 14, 2022
React Native basic app using React Query with GraphQL Code generator and Hasura

A basic React Native app to demonstrate React Query with GraphQL Code generator features. The GraphQL API is powered by Hasura.

Advantys 60 Sep 28, 2022