{"id":13773587,"url":"https://github.com/shirakaba/react-nativescript","last_synced_at":"2025-04-05T02:12:41.242Z","repository":{"id":34402912,"uuid":"176696892","full_name":"shirakaba/react-nativescript","owner":"shirakaba","description":"React renderer for NativeScript","archived":false,"fork":false,"pushed_at":"2023-08-23T06:47:47.000Z","size":11882,"stargazers_count":285,"open_issues_count":14,"forks_count":14,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-03-29T01:13:11.485Z","etag":null,"topics":["android","ios","nativescript","react","typescript"],"latest_commit_sha":null,"homepage":"https://react-nativescript.netlify.com","language":"TypeScript","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/shirakaba.png","metadata":{"files":{"readme":"README.md","changelog":"changes.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-03-20T09:15:26.000Z","updated_at":"2025-02-11T03:30:31.000Z","dependencies_parsed_at":"2024-01-15T03:41:20.384Z","dependency_job_id":null,"html_url":"https://github.com/shirakaba/react-nativescript","commit_stats":{"total_commits":747,"total_committers":5,"mean_commits":149.4,"dds":0.02008032128514059,"last_synced_commit":"d7f32c1e1de0b3317823d8b63d7da0b316c59ddd"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shirakaba%2Freact-nativescript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shirakaba%2Freact-nativescript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shirakaba%2Freact-nativescript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shirakaba%2Freact-nativescript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shirakaba","download_url":"https://codeload.github.com/shirakaba/react-nativescript/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247276189,"owners_count":20912288,"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":["android","ios","nativescript","react","typescript"],"created_at":"2024-08-03T17:01:17.562Z","updated_at":"2025-04-05T02:12:41.223Z","avatar_url":"https://github.com/shirakaba.png","language":"TypeScript","funding_links":[],"categories":["Mobile","TypeScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n    \u003cimg src=\"github_img/RNS_logo.svg\" width=\"270\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://badge.fury.io/js/react-nativescript\"\u003e\u003cimg src=\"https://badge.fury.io/js/react-nativescript.svg\" alt=\"npm version\" height=\"18\"\u003e\u003c/a\u003e\n    \u003c!-- \u003ca href=\"https://github.com/shirakaba/nside\"\u003e\n        \u003cimg src=\"http://githubbadges.com/star.svg?user=shirakaba\u0026repo=react-nativescript\u0026style=flat\"/\u003e\n    \u003c/a\u003e --\u003e\n    \u003c!-- \u003ca href=\"https://github.com/shirakaba/nside/fork\"\u003e\n        \u003cimg src=\"http://githubbadges.com/fork.svg?user=shirakaba\u0026repo=react-nativescript\u0026style=flat\"/\u003e\n    \u003c/a\u003e --\u003e\n    \u003ca href=\"https://opensource.org/licenses/mit-license.php\"\u003e\n        \u003cimg src=\"https://badges.frapsoft.com/os/mit/mit.png?v=103\"/\u003e\n    \u003c/a\u003e\n    \u003c!-- \u003ca href=\"http://makeapullrequest.com\"\u003e\n        \u003cimg src=\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat\"/\u003e\n    \u003c/a\u003e --\u003e\n    \u003ca href=\"https://twitter.com/intent/follow?screen_name=LinguaBrowse\"\u003e\n        \u003cimg src=\"https://img.shields.io/twitter/follow/LinguaBrowse.svg?style=social\u0026logo=twitter\"/\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n**React NativeScript** is A React renderer for NativeScript, allowing you to write a NativeScript app using the familiar React style.\n\nI'm always hanging out in the `#react` chat of the [NativeScript Discord](https://discord.gg/kcTwmBUuTE) if you'd like to talk about this project.\n\n## Setup\n\n```sh\n# Make sure that you have `tns` (the NativeScript CLI) installed:\n#   https://docs.nativescript.org/start/quick-setup\n\ntns create myApp --react\n\ncd myApp\nnpm install\n\n# The Preview and Playground apps are awaiting an update from\n# RNS v0 to v1, so the `tns preview` workflow isn't supported\n# yet. We're working on it. – 18th July 2020\n#\n# tns preview\n# or\ntns run ios\n# or\ntns run android\n```\n\n## Documentation\n\n* [React NativeScript docs](https://react-nativescript.netlify.com)\n* [NativeScript docs](https://docs.nativescript.org/introduction.html)\n\n## Example real-world app\n\nSee the [Apps](https://react-nativescript.netlify.app/docs/samples/apps) showcase in the docs to see various apps built with React NativeScript.\n\nOne example is my `rpstrackerrns` issue-tracking example app, which demonstrates how you can make fully native, professional-looking UIs with RNS:\n\n\u003ctable\u003e\n    \u003ctbody\u003e\n        \u003ctr\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                \u003cimg width=\"200px\" src=\"/github_img/LoginPage.png\"/\u003e\n            \u003c/td\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                \u003cimg width=\"200px\" src=\"/github_img/BacklogPage.png\"/\u003e\n            \u003c/td\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                \u003cimg width=\"200px\" src=\"/github_img/DetailPage.png\"/\u003e\n            \u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                \u003cp\u003e\u003cb\u003eLogin Page\u003c/b\u003e\u003c/p\u003e\n            \u003c/td\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                \u003cp\u003e\u003cb\u003eBacklog Page\u003c/b\u003e\u003c/p\u003e\n            \u003c/td\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                \u003cp\u003e\u003cb\u003eDetail Page\u003c/b\u003e\u003c/p\u003e\n            \u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n\n\n## Plugins\n\nAlthough NativeScript lets you write native code inline as JavaScript, you can also write modules purely using native code (e.g. Objective-C and Java), and access the code directly in NativeScript via JavaScript. When a common, cross-platform JavaScript API is provided for such modules, it is called a \"plugin\", and can be thought of as equivalent to a React Native \"native module\". NativeScript has a rich ecosystem of these plugins – see the [NativeScript Marketplace](https://market.nativescript.org/?tab=plugins).\n\nReact NativeScript uses the same plugins API as NativeScript Vue and NativeScript Angular, so all those plugins should be compatible (although generally needing to be consumed with `any` type, as most plugins are only typed for NativeScript Core). Instructions on how to integrate plugins, and provide typings for React, can be found in the [React NativeScript plugins documentation](https://react-nativescript.netlify.app/docs/core-concepts/plugins).\n\n## Why not just use React Native? 🤷‍♂️\n\nReact NativeScript shares most of the good parts of React Native, but above all gives a first-class development experience for interacting with native code. Never write another native module again – you can write your native code inline using JavaScript!\n\n\u003ctable\u003e\n    \u003ctbody\u003e\n        \u003ctr\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n            \u003c/td\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                \u003ch3\u003eReact Native\u003c/h3\u003e\n            \u003c/td\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                \u003ch3\u003eReact NativeScript\u003c/h3\u003e\n            \u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                \u003cstrong\u003eUI renderer\u003c/strong\u003e\n            \u003c/td\u003e\n            \u003ctd align=\"center\" valign=\"middle\" colspan=\"2\"\u003e\n                \u003cp\u003eReact\u003c/p\u003e\n            \u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                \u003cstrong\u003eProgramming language\u003c/strong\u003e\n            \u003c/td\u003e\n            \u003ctd align=\"center\" valign=\"middle\" colspan=\"2\"\u003e\n                \u003cp\u003eJavaScript (with TypeScript typings available)\u003c/p\u003e\n            \u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                \u003cstrong\u003ePlatforms\u003c/strong\u003e\n            \u003c/td\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                \u003cp\u003eiOS + Android + many more\u003c/p\u003e\n            \u003c/td\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                \u003cp\u003eiOS + Android\u003c/p\u003e\n            \u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                \u003cstrong\u003eBundler\u003c/strong\u003e\n            \u003c/td\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                \u003cp\u003eMetro\u003c/p\u003e\n            \u003c/td\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                \u003cp\u003eWebpack\u003c/p\u003e\n            \u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                \u003cstrong\u003eCodebase\u003c/strong\u003e\n            \u003c/td\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                \u003cp\u003eAbsolutely unfathomable\u003c/p\u003e\n            \u003c/td\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                \u003cp\u003eVery approachable to new contributors\u003c/p\u003e\n            \u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                \u003cstrong\u003eJavascript VM threading\u003c/strong\u003e\n            \u003c/td\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                \u003cp\u003eSeparate 'JS' thread\u003c/p\u003e\n            \u003c/td\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                \u003cp\u003eMain (UI) thread\u003c/p\u003e\n            \u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                \u003cstrong\u003eNative API access\u003c/strong\u003e\n            \u003c/td\u003e\n            \u003ctd align=\"center\" valign=\"middle\" colspan=\"2\"\u003e\n            \u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                Synchronicity\n            \u003c/td\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                \u003cp\u003eMostly \u003cstrong\u003easynchronous.\u003c/strong\u003e Typically involves sending JSON-serialisable messages back-and-forth over a native-to-JS bridge. Synchronous only in advanced cases such as JSI and C++ TurboModules, and static values from native modules.\u003c/p\u003e\n            \u003c/td\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                \u003cp\u003e\u003cstrong\u003eSynchronous:\u003c/strong\u003e The JS VM has direct bindings to the native context, and sits on the main (UI) thread.\u003c/p\u003e\n            \u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                Type marshalling\n            \u003c/td\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                \u003cp\u003eOnly supports JSON-serialisable types\u003csup\u003e\u003ca href=\"https://reactnative.dev/docs/native-modules-ios.html#argument-types\"\u003e[iOS]\u003c/a\u003e\u003c/sup\u003e\u003csup\u003e\u003ca href=\"https://reactnative.dev/docs/native-modules-android#argument-types\"\u003e[Android]\u003c/a\u003e\u003c/sup\u003e, and only passes by value rather than by reference.\u003c/p\u003e\n            \u003c/td\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                \u003cp\u003eCan marshal nearly any data type\u003csup\u003e\u003ca href=\"https://docs.nativescript.org/core-concepts/ios-runtime/marshalling-overview\"\u003e[iOS]\u003c/a\u003e\u003c/sup\u003e\u003csup\u003e\u003ca href=\"https://docs.nativescript.org/core-concepts/android-runtime/marshalling/overview\"\u003e[Android]\u003c/a\u003e\u003c/sup\u003e back and forth between the JS and native contexts, and even passes by reference from native to JS, allowing APIs to be called on native class instances from the JS context. Memory management of native references held by JS is \u003ca href=\"https://docs.nativescript.org/core-concepts/memory-management\"\u003every\u003c/a\u003e clever.\u003c/p\u003e\n            \u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                Bindings\n            \u003c/td\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                \u003cp\u003eUsers must write their own bindings\u003csup\u003e\u003ca href=\"https://reactnative.dev/docs/native-modules-ios.html#argument-types\"\u003e[iOS]\u003c/a\u003e\u003c/sup\u003e\u003csup\u003e\u003ca href=\"https://reactnative.dev/docs/native-modules-android#argument-types\"\u003e[Android]\u003c/a\u003e\u003c/sup\u003e (except possibly for the advanced feature of C++ TurboModules) and try not to get anything wrong.\u003c/p\u003e\n            \u003c/td\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                \u003cp\u003eBindings between the Objective-C/Java runtimes and JavaScript will be automatically generated\u003csup\u003e\u003ca href=\"https://docs.nativescript.org/core-concepts/ios-runtime/overview#metadata\"\u003e[iOS]\u003c/a\u003e\u003c/sup\u003e\u003csup\u003e\u003ca href=\"https://docs.nativescript.org/core-concepts/android-runtime/metadata/overview\"\u003e[Android]\u003c/a\u003e\u003c/sup\u003e for any source code included in your app.\u003c/p\u003e\n            \u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                Typings\n            \u003c/td\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                \u003cp\u003eUsers must write the typings for their native modules manually\u003csup\u003e\u003ca href=\"https://reactnative.dev/docs/native-modules-ios.html#argument-types\"\u003e[iOS]\u003c/a\u003e\u003c/sup\u003e\u003csup\u003e\u003ca href=\"https://reactnative.dev/docs/native-modules-android#argument-types\"\u003e[Android]\u003c/a\u003e\u003c/sup\u003e (except possibly for the advanced feature of C++ TurboModules) and try not to get anything wrong!\u003c/p\u003e\n            \u003c/td\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                \u003cp\u003eTypings can be automatically generated for bindings\u003csup\u003e\u003ca href=\"https://docs.nativescript.org/plugins/use-native-ios-libraries#generating-typescript-typings\"\u003e[iOS]\u003c/a\u003e\u003c/sup\u003e\u003csup\u003e\u003ca href=\"https://docs.nativescript.org/core-concepts/android-runtime/metadata/generating-typescript-declarations\"\u003e[Android]\u003c/a\u003e\u003c/sup\u003e, and typings for the whole platform SDK are \u003ca href=\"https://docs.nativescript.org/core-concepts/accessing-native-apis-with-javascript#intellisense-and-access-to-the-native-apis-via-typescript\"\u003ealready provided\u003c/a\u003e.\u003c/p\u003e\n            \u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                Swift and Kotlin support\n            \u003c/td\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                \u003cp\u003eFor Swift, can write implementation but \u003ca href=\"https://reactnative.dev/docs/native-modules-ios.html#exporting-swift\"\u003emust expose to React Native via an accompanying Obj-C file\u003c/a\u003e and manually-written bindings. Documentation also very limited. Not sure what's involved for Kotlin, but it \u003ca href=\"https://callstack.com/blog/writing-a-native-module-for-react-native-using-kotlin/\"\u003eis supported\u003c/a\u003e.\u003c/p\u003e\n            \u003c/td\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                \u003cp\u003eFor Swift, just \u003ca href=\"https://docs.nativescript.org/plugins/use-native-ios-libraries#apis-written-in-swift\"\u003efollow a few steps\u003c/a\u003e such as adding the \u003ccode\u003e@objc\u003c/code\u003e tag to the methods, and you're good to go! Not sure what's involved for Kotlin, but it \u003ca href=\"https://nativescript.org/blog/nativescript-6.1-kotlin-support-is-here\"\u003eis supported\u003c/a\u003e.\u003c/p\u003e\n            \u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                UI access\n            \u003c/td\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                \u003cp\u003eVery limited access to the underlying UI components (e.g. with a ref to a View component, you cannot do much – you can't traverse the UI tree, make synchronous measurements, or call the underlying APIs of the UI component). Exceptions may include the advanced case of Reanimated 2 worklets.\u003c/p\u003e\n            \u003c/td\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                \u003cp\u003eAll NativeScript UI elements provide full, synchronous API access to the underlying UI component. e.g. on iOS, with a ref to a React NativeScript \u003ccode\u003e\u0026lt;frame\u0026gt;\u003c/code\u003e component, you can access the underlying UINavigationController along with all of its APIs and make synchronous UI measurements.\u003c/p\u003e\n            \u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                Hot reloading\n            \u003c/td\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                \u003cp\u003eAll native code changes (except possibly JSI and worklets) require app recompilation.\u003c/p\u003e\n            \u003c/td\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                \u003cp\u003eAny native API accesses via JS can be hot reloaded. Native code written in Obj-C / Java does, however, still require an app recompile upon change.\u003c/p\u003e\n            \u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n\n## FAQ\n\n**Is it production-ready?**\n\nIt's based on React, NativeScript Core, and NativeScript Vue, which are each individually production-ready. Make of that what you will.\n\n**Can this consume React Native projects?**\n\nNo, but it *could* with a lot of hard work. Allowing React NativeScript to run projects that were written for React Native is a huge project, but it's theoretically very possible – it would be a project on exactly the same scale as [React Native Web](https://github.com/necolas/react-native-web). See [react-nativescript-compat-react-native](https://github.com/shirakaba/react-nativescript-compat-react-native) for work towards this, where I've ported part of RNTester as a proof-of-concept... 👩‍🔬👨‍🔬\n\n**Can this consume React Native native modules?**\n\nCertainly not UI-based native modules. But all flavours of NativeScript can consume native code, so it can probably consume React Native native modules, though may take a small bit of refactoring 🤔\n\nStanisław Chmiela ([@sjchmiela](https://twitter.com/sjchmiela)) produced a [proof-of-concept](https://gist.github.com/sjchmiela/e1fcb7ca255e77e92bb2c64bc63b7fee) for importing Expo Unimodules into NativeScript that could be used as a basis for this effort. Original discussion [here](https://twitter.com/sjchmiela/status/1158402590499057665?s=20).\n\n## Contributing 🙋‍♀️\n\nIdeally get in contact via the [Discord channel](https://discord.gg/kcTwmBUuTE) before starting any PRs!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshirakaba%2Freact-nativescript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshirakaba%2Freact-nativescript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshirakaba%2Freact-nativescript/lists"}