Closed eablokker closed 5 months ago
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: https://github.com/microsoft/react-native-macos/pull/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.
@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.
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
Related, I'm curious how well your NSTabView native module works. Any chance you can send a screenshot of it in an app? :)
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.
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 :)
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.
Environment
Steps to reproduce the bug
import React from 'react'; import {requireNativeComponent} from 'react-native';
const TabView = () => { return <MyTabView style={{ height: 300 }} />; };
const MyTabView = requireNativeComponent('MyTabView');
module.exports = TabView;
NSTabView does not inherit from NSControl. According to the view hierarchy inspector this is the class inheritance hierarchy:
This code change seems to work
However this by itself seems to still have click locations in the wrong place. If I combine this with a hitTest on the custom NSTabView then it works: