Mobile UI for desktop



Polite reminder, that there is a ready-to-use and working out-of-the box Desktop support for Flutter and if the company priority shifted at least a little bit from “promoting React-Native and FP” to delivering awesome app and user experience, you should have switched to Flutter yesterday:


Interesting, where I can see the source code for this fork? Is this based on what?
Something funny is that you created a new account and it came preloaded with 625 SNT and some dust ETH. How is this possible? Also it forgot to ask confirmation of password?


check the original post on this React-Native vs native mobile app - it’s just initial basic UI part, implemented in 5 hours with Flutter. I wrote 3 more mobile apps since then, and it’s just another league of mobile development compared to RN.


Progress update:

Mobile UI:
Mobile UI for desktop was merged into master but it is not default UI for now. To take a look at it you can set flag MOBILE_UI_FOR_DESKTOP=1in .env file and run the app.

FlatList performance:
I made a few tweaks of performance and created a PR -
Unfortunately I wasn’t able to add the most important tweak - asynchronous loading of qml components. When I tested it with internal js engine it worked well, but it crashes when I use node js engine. More work needed to manage work of different threads.

So for now FlatList is still unusable and I’m going to put it aside for a while and follow @andrey’s advice and reuse the same list as we use in current desktop UI (it is optimized on Qt side, not on js side as FlatList).


meanwhile, Flutter team released Flutter for web developers preview, and here is how it looks like out of the box (with zero changes of the code):


What would it take to hook mobile ui for desktop into an OS level interface so the wallet can be used for smart contract interactions? See for an example.


I’ve added MOBILE_UI_FOR_DESKTOP as an argument in the manual build:
If anyone wants to try that.


Shouldn’t be too difficult, as far as I can see Frame is exposing a web3 provider on multiple endpoints ws, http, ipc and has extensions for browsers to inject and proxy to it. Doesn’t seem to do any magic beyond that.


Thanks @jakubgs


and WOW @volodymyr.kozieiev this is incredible! the UI is way faster now (or maybe Its because I don’t have many chats :P) and looks so much better than before! Amazing stuff!


Progress update:

Work on two-pane UI started. It is important for Status desktop and Status mobile on tablets.
Status uses react-navigation library. Unfortunately it doesn’t have built-in navigators for two-pane UI but there is a possibility to create a custom one. So now I’m working on creating custom two-pane UI navigator in js. When it is ready I’ll integrate it in status-react code.


Are you sure it worth it? i mean we could move without react-navigation on desktop, anyway screens will be organised in a different way on a desktop (tablets) so we don’t need to use mobile stacks, i would go with current navigation but just replace desktop views by mobile


@andrey, two-pane UI isn’t for desktop only. It is also for mobile UI on tablets. So it will be implemented for mobile platforms first and than desktop will just reuse it from mobile UI.
So far there were no talks about different screens organization for desktop and tablets. I assume the navigation will be just reused with some minor tweaks if needed.


Me too, and I would love to have a desktop layout on my iPad :slight_smile:


Progress update:
Created test two-pane navigator for react-navigation in js.
Now solving issue with adding it as a child inside other navigators.


This is really cool and something I’ve been dying to have on my tablet (and desktop) for a long time!

Also I learnt today that another company has used our react-native-desktop on an embedded linux system and deployed in production :open_mouth: was so cool to hear.


Wow, that is really cool!


Progress update:

  • fixed issue with using two-pane navigator as a nested navigator
  • created js package for two-pane navigator
  • new package used in status-react UI as a proof-of-concept

Next steps:

  • enable\disable two-pane UI depending on screen size


Love seeing this progress!

I notice the Discover DApps frame doesn’t scale to well. Any thoughts on what causes that?


It behaves like that on mobile, I have the same funkiness on my iPad too. It’s the least offensive problem there :wink: The image should be centered in the frame rather than scaling to fit.

Great seeing the progress made here!:raised_hands:


@volodymyr.kozieiev does it mean you’ve been working on a fork of react navigation? How hard will it be to migrate this work to react-navigation 3? Because this brings quite some improvements and we need to switch to it at some point