status-im/react-native-desktop-qt

A Desktop port of React Native, driven by Qt, forked from Canonical

⚠️⚠️⚠️

React Native Desktop project support stopped..

---

React Native Desktop ·

Cross-platform React Native Desktop port based on Qt framework.

Supported operating systems:

• Linux (checked with Ubuntu >= 16.04 LTS)
• Mac OS (checked with Mac OS X versions)
• Windows

Apps using react-native-desktop

Documentation

Getting started

• Install Prerequisites
• Take a look at list of supported React Native components and APIs

Creating your own app

• Create new App
• Learn about 3rd-party react-native modules support
• Troubleshooting
• FAQ

Debugging react-native-desktop apps

To access In-App Developer Menu press CTRL+R (Command+R).
In-App Developer Menu is available in Debug builds.

• Inspecting JS code
• Using GammaRay for inspecting Qt internals

Contributing

Any kind of contribution is welcome! Check the list of opened issues or create new one.

Docs you may find helpful:

• How react-native-desktop works internally
• Environment setup guide for contributors
• Yoga layout engine in react-native-desktop
• Merging React Native

ClojureScript React Native apps support

Re-Natal fork extended with desktop platform support.

License

React Native Desktop is provided under BSD licensed.

react-native-desktop-qt's Issues

Fix missing setChildren method of UIManager

The error can be seen by running TicTacToe example and clicking on the app window (or by resizing the window manually).

Switch to Yoga layout engine

React Native Linux currently uses layout engine implemented in Layout.c and Layout.h files. It looks like it was default engine for React Native when Canonical wrote the code.

Currently React Native uses Yoga layout engine, so we need to switch to it in order to provide the same layout behavior.

Check <Image> onLoad,onError,onLoadStart,onLoadEnd properties

Create IntegrationTest to test supported native modules

Support <ActivityIndicator> in RNTester

Currently ActivityIndicatorExample doesn't work in RNTester.

Check if RNTester ImageExample can be run with react-native-linux

Migrate to the latest Qt

Currently supported Qt 5.5.1 from qt5-defaults is pretty outdated.

It should be good idea to update to the latest Qt 5.9 http://blog.qt.io/blog/2017/05/31/performance-improvements-with-qt-5-9-lts/

Possible issue with update might be delivery of latest Qt 5.9 builds to different unix distributions

CI builds support with tests running

We need the way to run builds and do unit testing.

For example, in react-native-windows builds and unit tests are running on Appveyor using npm test. Native binaries executed from js

Implement basic <ActivityIndicator>

TicTacToe header text in a wrong position

Description

TicTacToe app window has a header text EXTREME T3 that should be at the top accordingly to javascript code:

return (
      <View style={styles.container}>
        <Text style={styles.title}>EXTREME T3</Text>
        <View style={styles.board}>
          {rows}
        </View>
        <GameEndOverlay
          board={this.state.board}
          onRestart={this.restartGame}
        />
      </View>
    );

But in react-native-qt it draws at the bottom:

<Text> not updated in RNTester.ImageExample.getSize

getSize example in RNTester works well, but text with width and height updates only after mouse click

<Image> border doesn't overlap image

In RNTester for ios you can see that border should overlap image.
In linux version image overlaps border.

implement <Image> blurRadius prop

RedBox doesn't work

RedBox should show information about current error and stack trace.
Need to be fixed.

<Image> fails to load from base64 source

Description

<Image> works well with url as a source, but doesn't work with base64 uir. The example of code listed below works well on react native for ios but not for Linux

Code example

var base64Icon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACSR7JhAAADtUlEQVR4Ac3YA2Bj6QLH0XPT1Fzbtm29tW3btm3bfLZtv7e2ObZnms7d8Uw098tuetPzrxv8wiISrtVudrG2JXQZ4VOv+qUfmqCGGl1mqLhoA52oZlb0mrjsnhKpgeUNEs91Z0pd1kvihA3ULGVHiQO2narKSHKkEMulm9VgUyE60s1aWoMQUbpZOWE+kaqs4eLEjdIlZTcFZB0ndc1+lhB1lZrIuk5P2aib1NBpZaL+JaOGIt0ls47SKzLC7CqrlGF6RZ09HGoNy1lYl2aRSWL5GuzqWU1KafRdoRp0iOQEiDzgZPnG6DbldcomadViflnl/cL93tOoVbsOLVM2jylvdWjXolWX1hmfZbGR/wjypDjFLSZIRov09BgYmtUqPQPlQrPapecLgTIy0jMgPKtTeob2zWtrGH3xvjUkPCtNg/tm1rjwrMa+mdUkPd3hWbH0jArPGiU9ufCsNNWFZ40wpwn+62/66R2RUtoso1OB34tnLOcy7YB1fUdc9e0q3yru8PGM773vXsuZ5YIZX+5xmHwHGVvlrGPN6ZSiP1smOsMMde40wKv2VmwPPVXNut4sVpUreZiLBHi0qln/VQeI/LTMYXpsJtFiclUN+5HVZazim+Ky+7sAvxWnvjXrJFneVtLWLyPJu9K3cXLWeOlbMTlrIelbMDlrLenrjEQOtIF+fuI9xRp9ZBFp6+b6WT8RrxEpdK64BuvHgDk+vUy+b5hYk6zfyfs051gRoNO1usU12WWRWL73/MMEy9pMi9qIrR4ZpV16Rrvduxazmy1FSvuFXRkqTnE7m2kdb5U8xGjLw/spRr1uTov4uOgQE+0N/DvFrG/Jt7i/FzwxbA9kDanhf2w+t4V97G8lrT7wc08aA2QNUkuTfW/KimT01wdlfK4yEw030VfT0RtZbzjeMprNq8m8tnSTASrTLti64oBNdpmMQm0eEwvfPwRbUBywG5TzjPCsdwk3IeAXjQblLCoXnDVeoAz6SfJNk5TTzytCNZk/POtTSV40NwOFWzw86wNJRpubpXsn60NJFlHeqlYRbslqZm2jnEZ3qcSKgm0kTli3zZVS7y/iivZTweYXJ26Y+RTbV1zh3hYkgyFGSTKPfRVbRqWWVReaxYeSLarYv1Qqsmh1s95S7G+eEWK0f3jYKTbV6bOwepjfhtafsvUsqrQvrGC8YhmnO9cSCk3yuY984F1vesdHYhWJ5FvASlacshUsajFt2mUM9pqzvKGcyNJW0arTKN1GGGzQlH0tXwLDgQTurS8eIQAAAABJRU5ErkJggg==';

export default class ImageReactNative extends Component {
  render() {
    return (
      <Image
          style={{width: 50, height: 50}}
          source={{uri: base64Icon, scale: 3}}
        />
    );
  }
}

"Image size" section of RNTester should be implemented for linux

Check <Image> component support in react-native-qt

Props

• onError
• onLayout
• onLoad
• onLoadEnd
• onLoadStart
• resizeMode
• source
• style
• testID
• blurRadius

Methods

• getSize()
• prefetch()

implement <Image> onLayout prop

Cover supported React Native modules with unit tests

List of currently supported internal modules:

ReactTiming,
ReactAppState,
ReactAsyncLocalStorage,
ReactNetworking,
ReactNetInfo,
ReactViewManager,
ReactRawTextManager,
ReactTextManager,
ReactImageManager,
ReactExceptionsManager,

JSTimersExecution is not registered

After first click on TicTacToe cell, getting

Module JSTimersExecution is not a registered callable module (calling callTimers)

Extend Integration Test with test case for expected js exception

Unit tests should be able to receive notification if js exception happened on js side.
Test case to test handling of js exceptions should be added.

Update React Native to the latest stable release

Currently, this should be https://github.com/facebook/react-native/tree/v0.47.0

<Image> "multiple source example" from RNTester should be supported for linux

Developers menu and JS debugger support

We need to have JS debugger support ( https://github.com/facebook/react-native/blob/master/docs/Debugging.md ). Enabling of it possibly can be implemented via some kind of developer menu.

We might want to have developer menu enabled and showed only in Debug version of native app build. (as it's done for iOS)

'Unrecognized platform: ubuntu' error

Currently react-native-linux should be manually patched after npm install, other wise 'unrecognized platform: ubuntu' error appears.

From @Maxris comment to pull-request:

Because react-native packager module was moved into separate node package along with separate git repo, to run application it's required manually edit {clone_root}/node_modules/metro-bundler/src/defaults.js by adding ubuntu platform into the list. Patch file is attached. add-ubuntu-platform.zip

This has to be somehow fixed. For example by proposing change to that module. Or by forking it and using fork via sinopia.

Is there a guide how to run react-native run-ubuntu/run-linux

Hi there,
I am struggling to find a proper documentation to actually build and run the tictactoe application on my ubuntu machine. Is there any guide?

"Image loading events" RNTester section doesn't work for linux

This test should be fixed for react-native-linux

Take out qml components description from C++ code

Description

Currently qml components hardcoded in C++ code string. It might be helpful to move them to *.qml files and cover with tests.

Example

Development guide + contribution guide

Currently CMake tool is used to build C++/Qt sources.
Because CMake doesn't provide any official IDE to simplify development, it should be good idea to create developers guide with recommended ways of comfortable source code development. (As option, Qt Creator IDE supports projects based CMake out of the box).

Contribution guide might be based on https://facebook.github.io/react-native/docs/contributing.html

Revise repository files and directories structures/placement

Files and directories should be revised and maybe restructured.
We possibly don't want to keep in repository source code files related to iOS and Android native modules (Objective-C and Java sources), builds configuration files of others organizations, not relevant docs and so on.

<Button> should have default width and height

In React Native you don't have to specify width and height on , it has default values.
In current implementation for linux, this is not supported yet.

Incorrect path to ubuntu-server.js in examples

Steps to reproduce

1. Build react-native
2. run TicTacToe example

You will receive a error from run-example.sh that ubuntu-server.js can't be found. Build process should be fixed to provide correct path to ubuntu-server.js

Details on how to run examples - https://github.com/vkjr/react-native-linux/blob/react-native-qt/README-ubuntu.md#developing-react-native-ubuntu

Prepare a list of components/APIs supported in react-native-linux

To get an overview of where we are standing in comparison to React Native in terms of support, it would be convenient to have a comparison table that lists which Componets and APIs ready.

Add tests for <Text> component

implement basic <Button>

Embedding JS bundle into binary resources

Release builds of react-native apps created with linux port should embed (or should have possibility to embed) pre-created JS bundle into binary resources.

Creation of bundle for iOS:
https://github.com/facebook/react-native/blob/master/scripts/react-native-xcode.sh#L108

Fix <Button> layout in RNTester ButtonExample

RNTester ButtonExample shows that button layout not implemented correctly in react native linux yet.

Crash on TicTacToe new game

Steps to reproduce

1. Run TicTacToe
2. Finish current game
3. press 'new game'

Crash appears on the original 'react-native-linux' branch before merging with latest 'react-native'. Need to be checked after merge.

Update README.md with relevant project information

Resolve linting errors

Running of npm run lint on directory with react-native is reporting numerous errors.
Linting should run without errors and added to be run with CircleCI.

Resolve flow tests errors

Running of npm run flow on directory with react-native is reporting numerous errors.
flow tests should run without errors and added to be run with CircleCI.

Messages from C++ to JS are received by react-native on next msg push from C++

More messages ReactExecutor sends from C++, longer gap between sending and receiving by MessageQueue in JS occurs.
It leads to inappropriate rendering of items states on screen ( if to take, for example, TicTacToe sample application).

Do clang-format sources check during CircleCI build

Error out CircleCI build if sources have formatting issues

"Unable to locate Ubuntu Components qmldir" error during startup

Description

Unable to locate Ubuntu Components qmldir error appears during startup of every react-native-linux app.

Example

ToDo:

react-native-linux contains dependencies from Ubuntu qml components. They should be removed.

<Image> "legacy local image" from RNTester should be supported for linux

Automate validation of qml code formatting

There is no official command line tool to support auto formatting of QML source code files.
But Qt Creator provides some built-in functionality for auto formatting of QML code.
Qt Creator's built-in functionality was reused to create command line tool qmlfmt ( https://github.com/jesperhh/qmlfmt ). It should be possible to use qmlfmt tool to do auto formatting of QML source code files and also to automate validation of qml code on PRs.

Redbox "reload" button crashes app

In TicTacToe game if you get a Redbox screen, pressing "reload" crashes the app

Linux Qt port of critical react-native modules required

Critical modules to be ported:

1. react-native-status
2. react-native-webview-bridge
3. realm
4. react-native-i18n

For update info please check link:
https://github.com/status-im/status-react/wiki/react-native-modules

<Image> resize mode "repeat" doesn't work

RNTester shows that "repeat" resize mode works well for ios and doesn't work for linux.

"plain network image" distorted in RNTester

Network image in RNTester for react-native-linux looks distorted in comparison with RNTester for ios.
The same issue with "static" image