All Projects โ†’ peggyrayzis โ†’ React Native Create Bridge

peggyrayzis / React Native Create Bridge

Licence: mit
A CLI tool that bridges React Native modules & UI components with ease ๐ŸŽ‰

Programming Languages

javascript
184084 projects - #8 most used programming language
java
68154 projects - #9 most used programming language
swift
15916 projects
kotlin
9241 projects

Projects that are alternatives of or similar to React Native Create Bridge

Coronavirus Tracker Cli
Track conronavirus cases from command line. curl https://corona-stats.online/
Stars: โœญ 954 (-1.24%)
Mutual labels:  cli
Gub
CLI tool for create an npm package from any repos. ๐Ÿณ
Stars: โœญ 31 (-96.79%)
Mutual labels:  cli
Termd
Render markdown in the terminal
Stars: โœญ 32 (-96.69%)
Mutual labels:  cli
Libcmdf
Single-header library for writing CLI applications in C/C++
Stars: โœญ 30 (-96.89%)
Mutual labels:  cli
Wfw
command-line interface for Workflowy
Stars: โœญ 30 (-96.89%)
Mutual labels:  cli
Wp Pot Cli
Run wp-pot script via cli
Stars: โœญ 31 (-96.79%)
Mutual labels:  cli
Emodbus
Modbus library for both RTU and TCP protocols. Primarily developed on and for ESP32 MCUs.
Stars: โœญ 29 (-97%)
Mutual labels:  bridge
Oas Generator
NodeJS RESTful APIs scaffolding based OpenAPI 3.x specs using oas-tools and express.
Stars: โœญ 32 (-96.69%)
Mutual labels:  cli
Simulators
build and launch multi iOS simulators
Stars: โœญ 31 (-96.79%)
Mutual labels:  cli
Video To Ascii
It is a simple python package to play videos in the terminal using characters as pixels
Stars: โœญ 960 (-0.62%)
Mutual labels:  cli
Rispa Cli
Modular project management
Stars: โœญ 30 (-96.89%)
Mutual labels:  cli
Ignr.py
Python-based command line client to download .gitignore templates from gitignore.io
Stars: โœญ 30 (-96.89%)
Mutual labels:  cli
Lumberjack
A terminal-ui log watcher written in Go using the Flux architecture
Stars: โœญ 31 (-96.79%)
Mutual labels:  cli
Mber
Fast and minimal Ember.js CLI alternative, without broccoli.
Stars: โœญ 30 (-96.89%)
Mutual labels:  cli
Dpx
๐Ÿ“ฆ CLI to run a Deno package without installing it (like npx for Deno)
Stars: โœญ 32 (-96.69%)
Mutual labels:  cli
Wait4x
Wait4X is a cli tool to wait for everything! It can be wait for a port to open or enter to rquested state.
Stars: โœญ 30 (-96.89%)
Mutual labels:  cli
Unidump
hexdump(1) for Unicode data
Stars: โœญ 31 (-96.79%)
Mutual labels:  cli
Npm Build Boilerplate
A collection of packages that build a website using npm scripts.
Stars: โœญ 963 (-0.31%)
Mutual labels:  cli
Geektime Cli
CLI for time.geekbang.org (ๆžๅฎขๆ—ถ้—ด) bye
Stars: โœญ 32 (-96.69%)
Mutual labels:  cli
Mod Pbxproj
A python module to manipulate XCode projects
Stars: โœญ 959 (-0.72%)
Mutual labels:  cli

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

  • [x] Delivers bridge module in Obj-C, Swift, Kotlin, & Java
  • [x] Compatible with all versions of React Native, including v0.40+
  • [x] 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!

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].