NSTabView doesn't send mouseUp event because it doesn't inherit from NSControl about react-native-macos HOT 7 CLOSED

Thanks, I'm not ready to make the repo public yet. I'm not sure yet how I will release it. I'm thinking to make a basic version of it free, and maybe a paid version for advanced components.

from react-native-macos.

For the extra case for NSTabView, I think that's a fine PR to make. For the clicks being in the wrong spot, I actually ran into this and meant to write some docs about it: #1904

I think the hit testing can be fixed React Native macOS side so that all custom native components don't have to override hit testing.. but it's been a while.

from react-native-macos.

@Saadnajmi Thank you, your hitTest plus isFlipped is working better than what I had.

I will make a PR for the NSTabView mouseUp soon.

I wonder if there are any other elements inheriting from NSView that need to handle mouseDown/Up, but for now all I see is NSTabView. Everything else seems to inherit from NSControl.

from react-native-macos.

If you are open to it, you can also make one targeting the branch 0.73-stable so that we can release a patch release with the change

from react-native-macos.

Related, I'm curious how well your NSTabView native module works. Any chance you can send a screenshot of it in an app? :)

from react-native-macos.

I'm having another issue with it, if I add any margin or padding styles on the tabview the click positions will be off by that many pixels. Even when the style is placed on a <View> surrounding the tabview. I found this post that says you have to override insertReactSubview:atIndex:, removeReactSubview, and reactSubviews on the view in order to get the subviews to be managed by the Yoga layout system. But I haven't gotten it to work.

NSTabView is very tricky to get working because it wants to manage its own subviews based on which tab is active. But React Native also manages the subviews, so you end up with too many subviews. What I did is give each tab the exact same React Native view and let React conditionally render a single view based on the item returned from the didSelectTabViewItem event.

I'm actually making a set of AppKit components for React Native Macos. I was forced to make a TabView because the preferences window requires an NSTabViewController in order to render the toolbar buttons in the preferences style. So I went ahead and made a standalone TabView as well.

Here's a TabView inside a Preferences TabView.

from react-native-macos.

Thanks for the info. Yes, I think something like NSTabView is hard to add directly in React Native because of the conditional rendering of children. Maybe it'll get better with Fabric, but I don't know? I'm glad there are iOS guides/blogs you can work off of. You might need a custom shadow view (which I have found very little docs describing how to do so). And if your Appkit repo is open source, I'd give it a follow :)

from react-native-macos.