Comments (12)
We have a responder system to handle this, but we didn't have much time to explain how it works at the conference. There are a number of handles that we use to negotiate touch handling. These are working well on View, but not everything has full support for this yet. (I'm not sure what 3D view you're using here)
A view can become the touch responder by implementing the correct negotiation methods. There are two methods to ask the view if it wants to become responder:
View.props.onStartShouldSetResponder: (evt) => true,
- Does this view want to become responder on the first touch-down?
View.props.onMoveShouldSetResponder: (evt) => true,
- Called for every touch move on the View when not responder: does this view want to "claim" touch responsiveness?
If the View returns true and attempts to become the responder, one of the following will happen:
View.props.onResponderGrant: (evt) => {}
- The View is now responding for touch events. This would be a great time to highlight and show the user what is happening
View.props.onResponderReject: (evt) => {}
- Something else is the responder right now and will not release it
If the view is responding, the following handlers are used:
View.props.onResponderMove: (moveEvt) => {}
- The user is moving their finger
View.props.onResponderRelease: (releaseEvt) => {}
- Fired at the end of the touch, ie "touchUp"
View.props.onResponderTerminationRequest: (evt) => true
- Something else wants to become responder. Should this view release the responder? Returning true allows release
View.props.onResponderTerminate: (evt) => {}
- The responder has been taken from the View. Might be taken by other views after a call to onResponderTerminationRequest
, or might be taken by the OS without asking (happens with control center/ notification center on iOS)
There are a few more features and facets to this system, which can be found in the highly documented ResponderEventPlugin.js
from react-native.
Can you describe your use case? Hard to give a good answer without knowing what you are trying to do
from react-native.
I'm doing something a little unconventional, which you saw me tweet about: throwing a UI on top of a game. It's primitive right now but looks like this:
Those are up/down buttons at the bottom. Problem is, you can touch the screen to move around the camera, but if you press and drag your finger on top of those buttons, it still moves the camera around.
My views are set up like this: one controller that has a normal UIView, the GL view as the first subview and the RCTRootView as the second subview.
from react-native.
Thanks for the explanation, @ericvicenti! After I posted this I did see the diagram in ResponderEventPlugin.js.
I believe, however, that is doesn't fix my use case. All of this is only happening within the views controlled by ReactKit, correct? I'm rendering everything from ReactKit into it's own subview, and rendering everything from OpenGLES into a different subview. So basically I can't control how I interact with anything outside of the ReactKit subview, right? By default, all touches are being handled by both of these views.
The right way to do it, it seems, is to implement my own custom GL view on the native side and expose that as a custom component. Then I can render the GL view within my component hierarchy, and I can control the interactions.
Where should I start to look at implementing my own native UIView subclass?
from react-native.
cc @jordwalke
from react-native.
Correct- responder negotiation happens in JS. The 3D view should be expressed in your React component hierarchy to use the responder system. (There currently isn't good responder negotiation between the top-level ReactKit component and external iOS components.)
I'll defer to @jordwalke, @sahrens, @frantic, and @nicklockwood to help explain the state-of-the-art when it comes to bridging new components.
from react-native.
I think I see how. I need to create a component with a viewConfig
property, which has a uiViewClassName
property, which is the Obj-C class that it will instantiate when creating the backing iOS instance. And I need to implement my custom UIView class on the iOS side with this same class name. Theoretically it will instantiate my custom view class.
I'll take it from here and file an issues I run into.
from react-native.
@jlongster Yes, that should work, but I don't know why your other view is receiving touches that started on the buttons. Are your touch handlers for the camera on the outermost view that contains everything? If so, you could put your touch handlers (or gesture recognizers) on just the part of the screen that has the teapot.
from react-native.
@jordwalke The 3d scene is actually rendered the full width/height of the phone, and the buttons are sitting on top of it. I do it this way because the UI will frequently change on top of the 3d scene; it's basically just a 2d overlay.
I could shrink the 3d scene, but there will be many other cases where I want an input on top of the scene.
from react-native.
I see. Then your approach of creating a custom 3d-scene component sounds good. (BTW, we're going to streamline making new bridged components, and we're also going to work on integrating the JS cross-platform responder system with each platform's gestures).
Also, where are your touch handlers? I think there's a way to make this work simply by making the buttons not under the place where your touch handlers are setup in iOS (regardless of geometry/how much space they take up).
from react-native.
Cool, I assumed the bridge was early work and that it'll be easier to make custom components in the future.
The touch handlers are on the view controller controlling the GL view. But I just realized that is the root view of the window. I add the RCTRootView as a subview on top of my GL view, but you're right, my touch handlers are still on the controller of the whole thing. I probably could try just having multiple controllers and make sure the UI is sitting on top of everything.
from react-native.
@jlongster that sounds like the right approach (make sure the UI is really sitting on top of everything).
from react-native.
Related Issues (20)
- GIF images not working after upgrade from React-Native 0.74.3 -> 0.75.1 HOT 5
- React Native: value attribute exists in 0.72 but not in 0.73 HOT 4
- [iOS] `accessibilityElementsHidden` does not work if the parent view is `accessible`
- Some of us hate kotlin, give us java back. HOT 5
- iOS: RCTImageLoader is documented to be thread safe but the setUp code has a race HOT 2
- ccache not found HOT 3
- Error resolving plugin [id: 'com.facebook.react.settings'] HOT 10
- RNGP - Autolinking: Could not find project.android.packageName in react-native config output! HOT 11
- -X is not a valid cp flag, as a result condition always throws exit 1 HOT 4
- buttons not clickable in ios from react native but clickable from react native react-native-gesture-handler HOT 5
- [BUG] - Can't Build project on iOS 15, throws "RCT_ENABLE_INSPECTOR needs to be set to fulfill RCT_REMOTE_PROFILE" HOT 4
- React Native CLI - Error "configureCMakeDebug[arm64-v8a]" [CXX1410]
- The commander dependency is missing in the react-native package HOT 2
- ImageSource is now open for inheritance but the getUri method is still final and cannot override it HOT 3
- App not covering fulll device height HOT 5
- When using TextInput with secureTextEntry={true} on iOS, pressing the back button erases the entire text instead of just the last character. HOT 3
- 'getUri()' cannot override 'getUri()' in 'com.facebook.react.views.imagehelper.ImageSource'; overridden method is final HOT 3
- React Native 0.74.0 - Getting issue on production build -Crashed: Thread: SIGSEGV 0x0000006df6aebf90 HOT 5
- FlatList Items Not Occupying Full Screen Height with Paging Enabled HOT 3
- [Android] ScrollView does not properly handle `testID` property
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native.