{"id":20380547,"url":"https://github.com/tobua/create-react-native-plugin","last_synced_at":"2025-04-12T08:34:26.165Z","repository":{"id":43165114,"uuid":"203005985","full_name":"tobua/create-react-native-plugin","owner":"tobua","description":"Template for creating React Native plugins without native code.","archived":false,"fork":false,"pushed_at":"2024-09-07T16:21:18.000Z","size":1206,"stargazers_count":9,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-26T03:41:39.951Z","etag":null,"topics":["boilerplate","bootstrap","flowjs","javascript","plugin","react-native","template"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/create-react-native-plugin","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tobua.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-08-18T13:22:55.000Z","updated_at":"2025-01-23T07:18:24.000Z","dependencies_parsed_at":"2024-06-12T23:55:26.746Z","dependency_job_id":"cfb87f16-61a8-4a6d-bc56-b9b82b54fd60","html_url":"https://github.com/tobua/create-react-native-plugin","commit_stats":{"total_commits":37,"total_committers":2,"mean_commits":18.5,"dds":0.05405405405405406,"last_synced_commit":"aa18f4d744eddbe27b59ce86a11d344922a770d2"},"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tobua%2Fcreate-react-native-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tobua%2Fcreate-react-native-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tobua%2Fcreate-react-native-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tobua%2Fcreate-react-native-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tobua","download_url":"https://codeload.github.com/tobua/create-react-native-plugin/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248540809,"owners_count":21121427,"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":["boilerplate","bootstrap","flowjs","javascript","plugin","react-native","template"],"created_at":"2024-11-15T02:07:49.384Z","updated_at":"2025-04-12T08:34:26.145Z","avatar_url":"https://github.com/tobua.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# create-react-native-plugin\n\n\u003cimg align=\"right\" src=\"https://github.com/tobua/create-react-native-plugin/raw/main/logo.png\" width=\"20%\" alt=\"Create React Native Plugin\" /\u003e\n\nStarting point for creating React Native plugins in TypeScript without native code.\n\n- Publish plugin as TypeScript with Bun\n- Setup demo app with plugin installed\n- Copy plugin changes over to demo app\n- Jest, ESLint and Prettier configured\n\n## Usage\n\n```\nbun create react-native-plugin react-native-my-plugin\nbunx create-react-native-plugin@latest react-native-my-plugin\n```\n\nThis will bootstrap a new plugin inside a folder named `react-native-my-plugin` accordingly. Inside that folder the commands mentioned hereafter are available. The prefix `react-native-` is optional and will be removed where the React Native context is implied.\n\nStart working on your plugin by editing `index.tsx` which will be the entry point for the plugin.\n\n## App\n\nSince you probably don't want to blind-code the whole plugin use the following command to generate an up-to-date React Native app which includes the plugin:\n\n```\nbun app\n```\n\nThis will create an app inside `/app` where except `/app/App.tsx` all files are gitignored. Here you can try out various use cases of the plugin and use this as a way to demonstrate the plugin. The app can be started as usual by running `bun ios` or `bun android` inside the `/app` folder.\n\n```\nbun copy\n```\n\nRunning the above in the root folder will watch the plugin source code for any kind of changes and copy over the changes to the app which will then automatically hot-reload.\n\nDon't forget to always check your plugin both on Android and iOS even though your not using native code the provided components might still differ depending on the platform.\n\n## Tests\n\nThe template is configured to work with Jest out of the box. All non-native functionality can be tested from the terminal. With the following command you can run the tests which are found in a folder with the same name:\n\n```\nbun run test\n```\n\n## Troubleshooting\n\nIf you have issues building the app for iOS try the following\n\n- Update XCode in the App Store (installation takes time)\n- Update Cocoapods with `sudo gem install cocoapods`\n- Update Pod dependencies in `app/ios` folder with `pod update`\n\n## Examples\n\nThe following plugins have been created with create-react-native-plugin as a starting point.\n\n- [Reactigation](https://github.com/tobua/reactigation)\n  JS-only navigation for React Native.\n- [React Native Cols](https://github.com/tobua/react-native-cols)\n  Grid for React Native.\n- [React Native Indicate](https://github.com/tobua/react-native-indicate)\n  Scroll indicator for views with overflow.\n- [Naxos](https://github.com/tobua/naxos)\n  UI Library.\n- [Responsive React Native](https://github.com/tobua/responsive-react-native)\n  Automatically transforms StyleSheet values responsively.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/tobua/create-react-native-plugin/raw/main/app.png\" alt=\"Plugin running in Preview App\" width=\"250\"\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftobua%2Fcreate-react-native-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftobua%2Fcreate-react-native-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftobua%2Fcreate-react-native-plugin/lists"}