{"id":13725984,"url":"https://github.com/peggyrayzis/react-native-create-bridge","last_synced_at":"2025-05-15T17:01:40.159Z","repository":{"id":42791467,"uuid":"78658602","full_name":"peggyrayzis/react-native-create-bridge","owner":"peggyrayzis","description":"A CLI tool that bridges React Native modules \u0026 UI components with ease 🎉","archived":false,"fork":false,"pushed_at":"2023-01-12T09:51:27.000Z","size":606,"stargazers_count":1021,"open_issues_count":51,"forks_count":64,"subscribers_count":28,"default_branch":"master","last_synced_at":"2024-10-11T16:13:30.030Z","etag":null,"topics":["bridge","cli","java","kotlin","objective-c","react-native","swift"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/peggyrayzis.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-11T16:42:51.000Z","updated_at":"2024-10-06T15:54:11.000Z","dependencies_parsed_at":"2023-02-09T11:16:48.239Z","dependency_job_id":null,"html_url":"https://github.com/peggyrayzis/react-native-create-bridge","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peggyrayzis%2Freact-native-create-bridge","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peggyrayzis%2Freact-native-create-bridge/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peggyrayzis%2Freact-native-create-bridge/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peggyrayzis%2Freact-native-create-bridge/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/peggyrayzis","download_url":"https://codeload.github.com/peggyrayzis/react-native-create-bridge/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247737788,"owners_count":20987721,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bridge","cli","java","kotlin","objective-c","react-native","swift"],"created_at":"2024-08-03T01:02:45.702Z","updated_at":"2025-04-07T22:07:43.162Z","avatar_url":"https://github.com/peggyrayzis.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# react-native-create-bridge\nBridging native modules \u0026 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.\n\n# CONTRIBUTORS WANTED\n\n## Getting Started\n1. `npm install --save react-native-create-bridge` or `yarn add react-native-create-bridge`\n2. From the root of your React Native project, run `react-native new-module`\n3. The prompts will ask you for:\n  - Your bridge module name\n  - Whether you want to create a native module or UI component (or both!)\n  - 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.\n  - The directory where you would like your JS files. If it doesn't exist, we'll create it for you.\n4. That's it! 📦 Sit back and we'll deliver your native module for you lightning fast! ⚡️\n\n## Next Steps\nDepending 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.\n\n#### Android/Java\n  - To complete the bridging process, look for `MainApplication.java` in `android/app/src/main/java/com/yourapp`\n  - Add your package to the getPackages function like this:\n\n  ```\n  @Override\n    protected List\u003cReactPackage\u003e getPackages() {\n      return Arrays.\u003cReactPackage\u003easList(\n          new MainReactPackage(),\n          new YourModulePackage()\n      );\n    }\n  ```\n  - Import your package at the top: `import com.yourapp.yourmodule.YourModulePackage;`\n\n#### Android/Kotlin\n  ##### Adding Kotlin support to your project:\n  - You will need to install the [Android Studio 3 preview](https://developer.android.com/studio/preview/index.html)\n  - 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`\n  - 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\n  - Now, you can convert any Java file to a Kotlin file by navigating to `Code \u003e Convert Java file to Kotlin file` in the top menu\n\n  ##### Completing the bridging process:\n  - 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`\n  - Add your package to the getPackages function like this:\n  ```\n  override fun getPackages(): List\u003cReactPackage\u003e {\n    return Arrays.asList(\n        MainReactPackage(),\n        YourModulePackage(),\n    )\n  }\n  ```\n  - Import your package at the top: `import com.yourapp.yourmodule.YourModulePackage`\n\n#### iOS/Obj-C\n  - 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`\n\n#### iOS/Swift\n  - 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](https://developer.apple.com/library/content/documentation/Swift/Conceptual/BuildingCocoaApps/MixandMatch.html) to learn more.\n\n## Goals\n- [x] Delivers bridge module in Obj-C, Swift, Kotlin, \u0026 Java\n- [x] Compatible with all versions of React Native, including v0.40+\n- [x] Split out native UI components \u0026 modules into their own templates\n- [ ] Config to remove comments for more experienced users\n- [ ] Modifies existing project files (`AppDelegate.h`, `MainApplication.java`) to complete the bridging process\n- [ ] Your feature request could be here! Open up an issue and give us feedback 😊\n\n## Setting Up Dev Environment\n1. Fork this repo \u0026 clone it\n2. `cd` to where you cloned it\n3. `npm install` or `yarn`\n4. After you make changes, link your local package by running `npm run package:dev`\n5. You can now run `react-native new-module` locally in a React Native project to test your changes\n6. `npm run test` will run the Jest test suite\n\n## Contributing\n`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`!\n\nIf you would like to contribute, please read the [contributor guidelines](https://github.com/peggyrayzis/react-native-create-bridge/blob/master/CONTRIBUTING.md) first.\n\nThis project adheres to the Contributor Covenant [code of conduct](http://contributor-covenant.org/version/1/3/0/).\nBy participating, you are expected to uphold this code. Please report unacceptable behavior to peggyrayzis@gmail.com.\n\n## Contributors\nA big thank you goes out to these awesome people for their contributions ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n| [\u003cimg src=\"https://avatars3.githubusercontent.com/u/3629876?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003eKurtis Kemple\u003c/sub\u003e](https://twitter.com/kurtiskemple)\u003cbr /\u003e[💻](https://github.com/peggyrayzis/react-native-create-bridge/commits?author=kkemple \"Code\") | [\u003cimg src=\"https://avatars0.githubusercontent.com/u/3772710?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003eDuy Bao Nguyen\u003c/sub\u003e](https://github.com/bduyng)\u003cbr /\u003e[💻](https://github.com/peggyrayzis/react-native-create-bridge/commits?author=bduyng \"Code\") | [\u003cimg src=\"https://avatars2.githubusercontent.com/u/2464966?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003eMike Grabowski\u003c/sub\u003e](https://github.com/grabbou)\u003cbr /\u003e[💬](#question-grabbou \"Answering Questions\") | [\u003cimg src=\"https://avatars1.githubusercontent.com/u/18017067?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003ePeggy Rayzis\u003c/sub\u003e](https://twitter.com/peggyrayzis)\u003cbr /\u003e[💻](https://github.com/peggyrayzis/react-native-create-bridge/commits?author=peggyrayzis \"Code\") [📖](https://github.com/peggyrayzis/react-native-create-bridge/commits?author=peggyrayzis \"Documentation\") [👀](#review-peggyrayzis \"Reviewed Pull Requests\") | [\u003cimg src=\"https://avatars1.githubusercontent.com/u/24268882?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003eMihovil\u003c/sub\u003e](https://github.com/Air-Miha)\u003cbr /\u003e[📝](#blog-Air-Miha \"Blogposts\") | [\u003cimg src=\"https://avatars0.githubusercontent.com/u/2574011?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003eAndré Neves\u003c/sub\u003e](http://andrenev.es)\u003cbr /\u003e[👀](#review-andrerfneves \"Reviewed Pull Requests\") |\n| :---: | :---: | :---: | :---: | :---: | :---: |\n| [\u003cimg src=\"https://avatars0.githubusercontent.com/u/4745679?s=460\u0026v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003eJarret Moses\u003c/sub\u003e](https://github.com/jarretmoses)\u003cbr /\u003e[💻](https://github.com/peggyrayzis/react-native-create-bridge/commits?author=jarretmoses \"Code\") [📖](https://github.com/peggyrayzis/react-native-create-bridge/commits?author=jarretmoses \"Documentation\") |\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeggyrayzis%2Freact-native-create-bridge","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpeggyrayzis%2Freact-native-create-bridge","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeggyrayzis%2Freact-native-create-bridge/lists"}