The window appears but it's blank

[jihoobyeon]

Hello, I just started to use this framework and made a Hello world app. this is my App.ts:

import React, { Component } from 'react';
import { Text, View } from 'react-native';

export default class App extends Component
{
    render()
    {
        return React.createElement(View, null, React.createElement(Text, null, "Hello, world!\n"));
    }
}

other files are generated by npx react-native init test --version 0.60.6 and npx https://github.com/status-im/react-native-desktop-qt-init.git. no files are modified else App.ts.

and when I ran react-native run-desktop at terminal, a window appears, but it's blank - does not shows the text(or anything).

I've tried giving options at View, include flex: 1, but none of them worked.

my result from terminal stdout is this:

[jihoo@localhost]~/Desktop/test% react-native run-desktop
Found desktop external modules: undefined
Found desktop JS bundle path: undefined
Found desktop fonts: undefined
Found desktop images: undefined
Building the app...
stdout: build.sh external modules paths: 
build.sh JS bundle path: 

stdout: build.sh desktop fonts: 
build.sh desktop images: 

stdout: -- The C compiler identification is GNU 8.3.1

stdout: -- The CXX compiler identification is GNU 8.3.1

stdout: -- Check for working C compiler: /usr/bin/cc

stdout: -- Check for working C compiler: /usr/bin/cc -- works

stdout: -- Detecting C compiler ABI info

stdout: -- Detecting C compiler ABI info - done

stdout: -- Detecting C compile features

stdout: -- Detecting C compile features - done

stdout: -- Check for working CXX compiler: /usr/bin/c++

stdout: -- Check for working CXX compiler: /usr/bin/c++ -- works

stdout: -- Detecting CXX compiler ABI info

stdout: -- Detecting CXX compiler ABI info - done

stdout: -- Detecting CXX compile features

stdout: -- Detecting CXX compile features - done

stdout: -- EXTERNAL_MODULES_DIR: 

stdout: -- REACT_NATIVE_DESKTOP_EXTERNAL_MODULES_SRC = 

stdout: -- Configuring done

stdout: -- Generating done

stdout: -- Build files have been written to: /home/jihoo/Desktop/test/desktop

stdout: [  1%] Automatic MOC for target react-native

stdout: AutoMoc warning
---------------
  "/home/jihoo/Desktop/test/node_modules/react-native-desktop-qt/ReactQt/runtime/src/communication/serverconnection.cpp"
The file includes the moc file "serverconnection.moc", but does not contain a Q_OBJECT, Q_GADGET or Q_NAMESPACE macro.

stdout: AutoMoc warning
---------------
  "/home/jihoo/Desktop/test/node_modules/react-native-desktop-qt/ReactQt/runtime/src/componentmanagers/activityindicatormanager.cpp"
The file includes the moc file "activityindicatormanager.moc", but does not contain a Q_OBJECT, Q_GADGET or Q_NAMESPACE macro.

stdout: AutoMoc warning
---------------
  "/home/jihoo/Desktop/test/node_modules/react-native-desktop-qt/ReactQt/runtime/src/componentmanagers/buttonmanager.cpp"
The file includes the moc file "buttonmanager.moc", but does not contain a Q_OBJECT, Q_GADGET or Q_NAMESPACE macro.

stdout: AutoMoc warning
---------------
  "/home/jihoo/Desktop/test/node_modules/react-native-desktop-qt/ReactQt/runtime/src/componentmanagers/imagemanager.cpp"
The file includes the moc file "imagemanager.moc", but does not contain a Q_OBJECT, Q_GADGET or Q_NAMESPACE macro.

stdout: AutoMoc warning
---------------
  "/home/jihoo/Desktop/test/node_modules/react-native-desktop-qt/ReactQt/runtime/src/bridge.cpp"
The file includes the moc file "bridge.moc", but does not contain a Q_OBJECT, Q_GADGET or Q_NAMESPACE macro.

stdout: AutoMoc warning
---------------
  "/home/jihoo/Desktop/test/node_modules/react-native-desktop-qt/ReactQt/runtime/src/componentmanagers/modalmanager.cpp"
The file includes the moc file "modalmanager.moc", but does not contain a Q_OBJECT, Q_GADGET or Q_NAMESPACE macro.

stdout: AutoMoc warning
---------------
  "/home/jihoo/Desktop/test/node_modules/react-native-desktop-qt/ReactQt/runtime/src/componentmanagers/pickermanager.cpp"
The file includes the moc file "pickermanager.moc", but does not contain a Q_OBJECT, Q_GADGET or Q_NAMESPACE macro.

stdout: AutoMoc warning
---------------
  "/home/jihoo/Desktop/test/node_modules/react-native-desktop-qt/ReactQt/runtime/src/componentmanagers/navigatormanager.cpp"
The file includes the moc file "navigatormanager.moc", but does not contain a Q_OBJECT, Q_GADGET or Q_NAMESPACE macro.

stdout: AutoMoc warning
---------------
  "/home/jihoo/Desktop/test/node_modules/react-native-desktop-qt/ReactQt/runtime/src/componentmanagers/slidermanager.cpp"
The file includes the moc file "slidermanager.moc", but does not contain a Q_OBJECT, Q_GADGET or Q_NAMESPACE macro.

stdout: AutoMoc warning
---------------
  "/home/jihoo/Desktop/test/node_modules/react-native-desktop-qt/ReactQt/runtime/src/componentmanagers/scrollviewmanager.cpp"
The file includes the moc file "scrollviewmanager.moc", but does not contain a Q_OBJECT, Q_GADGET or Q_NAMESPACE macro.

stdout: AutoMoc warning
---------------
  "/home/jihoo/Desktop/test/node_modules/react-native-desktop-qt/ReactQt/runtime/src/componentmanagers/switchmanager.cpp"
The file includes the moc file "switchmanager.moc", but does not contain a Q_OBJECT, Q_GADGET or Q_NAMESPACE macro.

stdout: AutoMoc warning
---------------
  "/home/jihoo/Desktop/test/node_modules/react-native-desktop-qt/ReactQt/runtime/src/componentmanagers/textinputmanager.cpp"
The file includes the moc file "textinputmanager.moc", but does not contain a Q_OBJECT, Q_GADGET or Q_NAMESPACE macro.

AutoMoc warning
---------------
  "/home/jihoo/Desktop/test/node_modules/react-native-desktop-qt/ReactQt/runtime/src/componentmanagers/webviewmanager.cpp"
The file includes the moc file "webviewmanager.moc", but does not contain a Q_OBJECT, Q_GADGET or Q_NAMESPACE macro.

AutoMoc warning
---------------
  "/home/jihoo/Desktop/test/node_modules/react-native-desktop-qt/ReactQt/runtime/src/componentmanagers/viewmanager.cpp"
The file includes the moc file "viewmanager.moc", but does not contain a Q_OBJECT, Q_GADGET or Q_NAMESPACE macro.

AutoMoc warning
---------------
  "/home/jihoo/Desktop/test/node_modules/react-native-desktop-qt/ReactQt/runtime/src/reactnetworkaccessmanager.cpp"
The file includes the moc file "reactnetworkaccessmanager.moc", but does not contain a Q_OBJECT, Q_GADGET or Q_NAMESPACE macro.

AutoMoc warning
---------------
  "/home/jihoo/Desktop/test/node_modules/react-native-desktop-qt/ReactQt/runtime/src/layout/flexbox.cpp"
The file includes the moc file "flexbox.moc", but does not contain a Q_OBJECT, Q_GADGET or Q_NAMESPACE macro.

stdout: [  1%] Built target react-native_autogen

stdout: [ 91%] Built target react-native

stdout: [ 91%] Built target copy-qmldir

stdout: [ 93%] Automatic MOC for target test

stdout: [ 93%] Built target test_autogen

stdout: [100%] Built target test

child process exited with code 0
JS server already running.
Starting the app...
ViewManager: Created view:  ReactActivityIndicator_QMLTYPE_4(0x1b44b40, parent=0x0, geometry=0,0 12x12) . Source QML file:  "qrc:/qml/ReactActivityIndicator.qml" . Props keys:  ()
ViewManager: Created view:  ReactButton_QMLTYPE_6(0x1c30010, parent=0x0, geometry=0,0 16x12) . Source QML file:  "qrc:/qml/ReactButton.qml" . Props keys:  ()
ViewManager: Created view:  ReactImage_QMLTYPE_17(0x1c3b840, parent=0x0, geometry=0,0 0x0) . Source QML file:  "qrc:/qml/ReactImage.qml" . Props keys:  ()
ViewManager: Created view:  ReactModal_QMLTYPE_18(0x1c5e950, name="modalRoot", parent=0x0, geometry=0,0 0x0) . Source QML file:  "qrc:/qml/ReactModal.qml" . Props keys:  ()
ViewManager: Created view:  ReactNavigator_QMLTYPE_19(0x1c6aa20, parent=0x0, geometry=0,0 0x0) . Source QML file:  "qrc:/qml/ReactNavigator.qml" . Props keys:  ()
ViewManager: Created view:  ReactPicker_QMLTYPE_21(0x1c6fb60, parent=0x0, geometry=0,0 60x200) . Source QML file:  "qrc:/qml/ReactPicker.qml" . Props keys:  ()
ViewManager: Created view:  ReactRawText_QMLTYPE_22(0x1c7bf30, parent=0x0, geometry=0,0 0x24) . Source QML file:  "qrc:/qml/ReactRawText.qml" . Props keys:  ()
ViewManager: Created view:  ReactScrollView_QMLTYPE_23(0x1c7fe00, parent=0x0, geometry=0,0 0x0) . Source QML file:  "qrc:/qml/ReactScrollView.qml" . Props keys:  ()
ViewManager: Created view:  ReactSlider_QMLTYPE_24(0x1c936f0, parent=0x0, geometry=0,0 200x40) . Source QML file:  "qrc:/qml/ReactSlider.qml" . Props keys:  ()
ViewManager: Created view:  ReactSwitch_QMLTYPE_26(0x1ca0660, parent=0x0, geometry=0,0 74x40) . Source QML file:  "qrc:/qml/ReactSwitch.qml" . Props keys:  ()
ViewManager: Created view:  ReactText_QMLTYPE_28(0x1cbd210, parent=0x0, geometry=0,0 0x24) . Source QML file:  "qrc:/qml/ReactText.qml" . Props keys:  ()
ViewManager: Created view:  ReactTextInput_QMLTYPE_29(0x1cd1780, parent=0x0, geometry=0,0 0x0) . Source QML file:  "qrc:/qml/ReactTextInput.qml" . Props keys:  ()
ViewManager: Created view:  ReactView_QMLTYPE_31(0x1cd4480, parent=0x0, geometry=0,0 0x0) . Source QML file:  "qrc:/qml/ReactView.qml" . Props keys:  ()
ViewManager: Created view:  ReactWebView_QMLTYPE_32(0x1cf3ad0, parent=0x0, geometry=0,0 0x0) . Source QML file:  "qrc:/qml/ReactWebView.qml" . Props keys:  ()

strangely, each time when I click the blank window, this appears twice in terminal: QVariantMap utilities::makeReactTouchEvent(QQuickItem*, QMouseEvent*, QQuickItem*) target was not a reactItem

plus, my result of react-native info is this:

System:
    OS: Linux 4.18 CentOS Linux 8
    CPU: (4) x64 AMD Ryzen 3 2200U with Radeon Vega Mobile Gfx
    Memory: 1.89 GB / 7.22 GB
    Shell: 5.5.1 - /bin/zsh
Binaries:
    Node: 14.15.4 - ~/node-v14.15.4-linux-x64/bin/node
    Yarn: 1.22.10 - ~/node-v14.15.4-linux-x64/bin/yarn
    npm: 6.14.10 - ~/node-v14.15.4-linux-x64/bin/npm
    Watchman: Not Found
SDKs:
    Android SDK: Not Found
IDEs:
    Android Studio: Not Found
Languages:
    Java: Not Found
    Python: Not Found
npmPackages:
    @react-native-community/cli: Not Found
    react: 16.8.6 => 16.8.6 
    react-native: 0.60.6 => 0.60.6 
npmGlobalPackages:
    *react-native*: Not Found

I've installed Qt 5.12.2 from your site, and I'm using JetBrains WebStorm 2020.3.

Am I got something wrong, or is this a bug?

[vkjr]

Hi! Currently there is no ongoing work on react-native-desktop, so I would suggest to not use it.

[jihoobyeon]

Hi! Currently there is no ongoing work on react-native-desktop, so I would suggest to not use it.

Oh, I'm sorry to hear that. when will this project resume?

[vkjr]

@jihoobyeon, probably never since in Status company we don't use it anymore and there is no visible demand outside. Btw, how did you plan to use it?

[jihoobyeon]

@vkjr I was working with react-native-windows(https://github.com/microsoft/react-native-windows) and I wanted to run in linux too. If Status doesn't work on this anymore, may I fork it to my repo?

[vkjr]

well, anyone can fork it to own repo :) its opensource ;)

[vicary]

Was keeping an eye on this one for years already, hoping to move away from balena-io/balena-electronjs once it's ready. It's sad to know that this is officially abandoned.

[vkjr]

@vicary, yeah, we don't use it for our project and microsoft now has react-native for windows and mac, so there is no point to maintain this since demand isn't obvious :)

[aramodi]

You can use our maintained fork of Proton Native, called Valence Native. @jihoobyeon @vicary https://github.com/valence-native/valence-native

PR's welcome :)

[jihoobyeon]

@vkjr @aramodi Ok, thanks!