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)
- npx [email protected] init cammnd installs the lattest version of react-native HOT 5
- android onScrollEndDrag throttled by scrollEventThrottle HOT 1
- [iOS] VoiceOver reads the placeholder in TextInput HOT 3
- List<ReactPackage> packages = new PackageList(this).getPackages(); [ANDROID] HOT 3
- Experimental debugger does not work on 0.74 with bridgeless on iOS
- [0.74.0] stress reloading leads to broken state on android bridgeless
- onPress work one time only HOT 4
- TypeError: Cannot create property 'lastUpdateCheck' on string 'lastUpdateCheck 1713956001921 nodeLinker node-modules ces nodeLinker node-modules' HOT 4
- Crash - malloc: Heap corruption detected, free list is damaged HOT 2
- [0.74.0] AppState module has an error on android HOT 11
- Emiting Events from Android in New Arch + Bridgeless + interop layer HOT 5
- react native reanimated erro in 0.74 HOT 4
- [0.74] AppRegistry.registerComponent cannot show in a new ReactRooView HOT 2
- use turboModule in app not as a libray in node_modules folder work fail, js file can not find the turboModule HOT 2
- libgojni.so MTE crash (memory unsafe code) HOT 5
- couldn't find DSO to load: libhermes.so SoSource 0: com.facebook.soloader.ApkSoSource HOT 3
- App State 0.74 in DEVELOPMENT HOT 5
- I compare 0.72.5 and 0.74.0 react native android app size,0.74.0 is 50MB,And 0.72.5 is 21.7 MB.How to reduce 0.74.0 android app size? HOT 14
- WebSocket on android works slower than on ios HOT 1
- @react-native/typescript-config causes type check error for dependencies HOT 1
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.