Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/shirakaba/react-nativescript

React renderer for NativeScript
https://github.com/shirakaba/react-nativescript

android ios nativescript react typescript

Last synced: 4 days ago
JSON representation

React renderer for NativeScript

Host: GitHub
URL: https://github.com/shirakaba/react-nativescript
Owner: shirakaba
License: mit
Created: 2019-03-20T09:15:26.000Z (over 5 years ago)
Default Branch: master
Last Pushed: 2023-08-23T06:47:47.000Z (10 months ago)
Last Synced: 2024-06-18T17:13:39.208Z (9 days ago)
Topics: android, ios, nativescript, react, typescript
Language: TypeScript
Homepage: https://react-nativescript.netlify.com
Size: 11.3 MB
Stars: 276
Watchers: 13
Forks: 14
Open Issues: 14
Metadata Files:
- Readme: README.md
- Changelog: changes.md
- License: LICENSE

Lists

awesome-react-renderer - react-nativescript - React renderer for NativeScript (Mobile)

README

**React NativeScript** is A React renderer for NativeScript, allowing you to write a NativeScript app using the familiar React style.

I'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.

## Setup

```sh
# Make sure that you have `tns` (the NativeScript CLI) installed:
# https://docs.nativescript.org/start/quick-setup

tns create myApp --react

cd myApp
npm install

# The Preview and Playground apps are awaiting an update from
# RNS v0 to v1, so the `tns preview` workflow isn't supported
# yet. We're working on it. – 18th July 2020
#
# tns preview
# or
tns run ios
# or
tns run android
```

## Documentation

* [React NativeScript docs](https://react-nativescript.netlify.com)
* [NativeScript docs](https://docs.nativescript.org/introduction.html)

## Example real-world app

See the [Apps](https://react-nativescript.netlify.app/docs/samples/apps) showcase in the docs to see various apps built with React NativeScript.

One example is my `rpstrackerrns` issue-tracking example app, which demonstrates how you can make fully native, professional-looking UIs with RNS:

Login Page

Backlog Page

Detail Page

## Plugins

Although 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).

React 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).

## Why not just use React Native? 🤷‍♂️

React 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!

React Native

React NativeScript

UI renderer

React

Programming language

JavaScript (with TypeScript typings available)

Platforms

iOS + Android + many more

iOS + Android

Bundler

Metro

Webpack

Codebase

Absolutely unfathomable

Very approachable to new contributors

Javascript VM threading

Separate 'JS' thread

Main (UI) thread

Native API access

Synchronicity

Mostly asynchronous. 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.

Synchronous: The JS VM has direct bindings to the native context, and sits on the main (UI) thread.

Type marshalling

Only supports JSON-serialisable types^[iOS]^[Android], and only passes by value rather than by reference.

Can marshal nearly any data type^[iOS]^[Android] 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 very clever.

Bindings

Users must write their own bindings^[iOS]^[Android] (except possibly for the advanced feature of C++ TurboModules) and try not to get anything wrong.

Bindings between the Objective-C/Java runtimes and JavaScript will be automatically generated^[iOS]^[Android] for any source code included in your app.

Typings

Users must write the typings for their native modules manually^[iOS]^[Android] (except possibly for the advanced feature of C++ TurboModules) and try not to get anything wrong!

Typings can be automatically generated for bindings^[iOS]^[Android], and typings for the whole platform SDK are already provided.

Swift and Kotlin support

For Swift, can write implementation but must expose to React Native via an accompanying Obj-C file and manually-written bindings. Documentation also very limited. Not sure what's involved for Kotlin, but it is supported.

For Swift, just follow a few steps such as adding the @objc tag to the methods, and you're good to go! Not sure what's involved for Kotlin, but it is supported.

UI access

Very 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.

All NativeScript UI elements provide full, synchronous API access to the underlying UI component. e.g. on iOS, with a ref to a React NativeScript <frame> component, you can access the underlying UINavigationController along with all of its APIs and make synchronous UI measurements.

Hot reloading

All native code changes (except possibly JSI and worklets) require app recompilation.

Any 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.

## FAQ

**Is it production-ready?**

It's based on React, NativeScript Core, and NativeScript Vue, which are each individually production-ready. Make of that what you will.

**Can this consume React Native projects?**

No, 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... 👩‍🔬👨‍🔬

**Can this consume React Native native modules?**

Certainly 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 🤔

Stanisł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).

## Contributing 🙋‍♀️

Ideally get in contact via the [Discord channel](https://discord.gg/kcTwmBUuTE) before starting any PRs!