search

microsoft / react-native-macos

A framework for building native macOS apps with React.
https://microsoft.github.io/react-native-windows/
MIT License
3.38k stars 130 forks source link

'Question: Window management and desktop specific APIs' #617

Open dac09 opened 3 years ago

dac09 commented 3 years ago

Hi team, thank you so much for building this. I as speaking to alloy over on discord, suggested I create an issue with my questions bunched together.

1. Are there any docs on window management? Obviously this is the biggest deviation from React Native on mobile at the moment, since mobile doesn't have a concept of multiple windows. Some docs or examples around this would be immensely helpful a) I'd like to understand where/how in the native code the the "window" is created. Is there a way I can open multiple windows and run different parts of my RN app? b) When I create a menubar app following the tutorial here, I cannot get the bundle to load inside the tray, I believe this has something to do with the way the rootView is assigned in the latest release c) I think, a common situation in desktop apps is to have multiple windows that show or hide based on state. Think a settings window which is separate from the main app. How would I go about doing things like show/hide new window, speaking between instances of windows or sending messages from windows to the "main" run time?

2. Where/how are application state events exposed? e.g. App foregrounded, App backgrounded, App out of focus So for example running the code in this repo, I'm not sure what event to use to hide the tray view when clicking outside the window

3. Any tips for keyboard support and mouse hovers? Another thing not considered in RN Mobile (outside accessibility) - if I wanted to enable keyboard navigation e.g. a FlatList with keyboard navigation and highlighting on focus and mouse hover events, how would I go about doing this?

4. It would be immensely helpful to have a set of examples I can refer to, given the lack of documentation currently around macOS

5. Creating a discord/discourse community would be awesome! I'm not new to RN, or adopting early tech, and would love to be part of the community pushing this tech forward

chrisglein commented 3 years ago

@tom-un for 1 and 2 this is another request for some wiki/article about windowing

  1. Any tips for keyboard support and mouse hovers?

There are APIs for keyboard/mouse but they are underdocumented. There is upcoming investment to align keyboard/mouse for macOS and Windows and it's expected documentation will improve with that (as you'll be able to program to them the same way).

  1. It would be immensely helpful to have a set of examples I can refer to, given the lack of documentation currently around macOS

Agreed, there are many parts of the documentation that are thin. The documentation we do have is here: http://aka.ms/reactnative Are there specific articles you'd like to see? We do process issues requests on that repo for new articles.

  1. Creating a discord/discourse community would be awesome!

There is some level of RN activity on discord already. Try this link?

dac09 commented 3 years ago

Thanks for the reply @chrisglein

There is some level of RN activity on discord already. Try this link?

I'm afraid the link doesn't take me anywhere! Probably need an invite to the server?

vascofg commented 3 years ago

@tom-un @chrisglein Even if documentation around windowing doesn't exist, could you point me to the correct code in the repo? Also, what would be required to show a new window? Would we need a new native method? Or can this be done from Javascript?

github-actions[bot] commented 2 years ago

This issue is stale because it has been open 365 days with no activity. Remove stale label or comment or this will be closed in 7 days.

github-actions[bot] commented 2 years ago

This issue was closed because it has been stalled for 7 days with no activity.

oscadev commented 3 months ago

This was never answered. Is there a way to close and open the app window? Example, we have a menu bar button, and we want to show the app window again if it had been closed, and someone clicks the menu bar button.

Saadnajmi commented 3 months ago

The short answer is that you'd have to write your own native logic for any window management, as React Native macOS for the most part only handles things RootView and lower. We don't have any templates / packages / modules for window management at the moment since the goal of React Native macOS is mostly to mirror what React Native supports, and not introduce too many extra packages / modules.