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:

1 Like

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

2 Likes

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 - Different optimizations by vkjr · Pull Request #473 · status-im/react-native-desktop-qt · GitHub.
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).

3 Likes

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):

1 Like

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 https://frame.sh/ for an example.

I’ve added MOBILE_UI_FOR_DESKTOP as an argument in the manual build:
https://ci.status.im/job/status-react/job/manual/build
If anyone wants to try that.

2 Likes

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.

1 Like

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!

2 Likes

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.

3 Likes

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

1 Like

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

5 Likes

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

3 Likes

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

4 Likes

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.

3 Likes

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
5 Likes

Love seeing this progress!

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

1 Like

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:

2 Likes

@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

1 Like