Skip to content

Commit 6a23b13

Browse files
sammy-SCfacebook-github-bot
authored andcommitted
Add file ReactNativeTypes.d.ts to fix CircleCI (facebook#35173)
Summary: Pull Request resolved: facebook#35173 changelog: [internal] D40897093 (facebook@f49b251) deleted TypeScript definitions. Reviewed By: cipolleschi Differential Revision: D40935747 fbshipit-source-id: 020cba21b8b40c8b0c92bb5ab2dc4f6ba5da610a
1 parent c540ff7 commit 6a23b13

File tree

2 files changed

+290
-0
lines changed

2 files changed

+290
-0
lines changed
Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
/**
2+
* Copyright (c) Meta Platforms, Inc. and affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*
7+
* @format
8+
*/
9+
10+
import {GestureResponderEvent} from '../../Types/CoreEventTypes';
11+
12+
/**
13+
* Gesture recognition on mobile devices is much more complicated than web.
14+
* A touch can go through several phases as the app determines what the user's intention is.
15+
* For example, the app needs to determine if the touch is scrolling, sliding on a widget, or tapping.
16+
* This can even change during the duration of a touch. There can also be multiple simultaneous touches.
17+
*
18+
* The touch responder system is needed to allow components to negotiate these touch interactions
19+
* without any additional knowledge about their parent or child components.
20+
* This system is implemented in ResponderEventPlugin.js, which contains further details and documentation.
21+
*
22+
* Best Practices
23+
* Users can feel huge differences in the usability of web apps vs. native, and this is one of the big causes.
24+
* Every action should have the following attributes:
25+
* Feedback/highlighting- show the user what is handling their touch, and what will happen when they release the gesture
26+
* Cancel-ability- when making an action, the user should be able to abort it mid-touch by dragging their finger away
27+
*
28+
* These features make users more comfortable while using an app,
29+
* because it allows people to experiment and interact without fear of making mistakes.
30+
*
31+
* TouchableHighlight and Touchable*
32+
* The responder system can be complicated to use.
33+
* So we have provided an abstract Touchable implementation for things that should be "tappable".
34+
* This uses the responder system and allows you to easily configure tap interactions declaratively.
35+
* Use TouchableHighlight anywhere where you would use a button or link on web.
36+
*/
37+
export interface GestureResponderHandlers {
38+
/**
39+
* A view can become the touch responder by implementing the correct negotiation methods.
40+
* There are two methods to ask the view if it wants to become responder:
41+
*/
42+
43+
/**
44+
* Does this view want to become responder on the start of a touch?
45+
*/
46+
onStartShouldSetResponder?:
47+
| ((event: GestureResponderEvent) => boolean)
48+
| undefined;
49+
50+
/**
51+
* Called for every touch move on the View when it is not the responder: does this view want to "claim" touch responsiveness?
52+
*/
53+
onMoveShouldSetResponder?:
54+
| ((event: GestureResponderEvent) => boolean)
55+
| undefined;
56+
57+
/**
58+
* If the View returns true and attempts to become the responder, one of the following will happen:
59+
*/
60+
61+
onResponderEnd?: ((event: GestureResponderEvent) => void) | undefined;
62+
63+
/**
64+
* The View is now responding for touch events.
65+
* This is the time to highlight and show the user what is happening
66+
*/
67+
onResponderGrant?: ((event: GestureResponderEvent) => void) | undefined;
68+
69+
/**
70+
* Something else is the responder right now and will not release it
71+
*/
72+
onResponderReject?: ((event: GestureResponderEvent) => void) | undefined;
73+
74+
/**
75+
* If the view is responding, the following handlers can be called:
76+
*/
77+
78+
/**
79+
* The user is moving their finger
80+
*/
81+
onResponderMove?: ((event: GestureResponderEvent) => void) | undefined;
82+
83+
/**
84+
* Fired at the end of the touch, ie "touchUp"
85+
*/
86+
onResponderRelease?: ((event: GestureResponderEvent) => void) | undefined;
87+
88+
onResponderStart?: ((event: GestureResponderEvent) => void) | undefined;
89+
90+
/**
91+
* Something else wants to become responder.
92+
* Should this view release the responder? Returning true allows release
93+
*/
94+
onResponderTerminationRequest?:
95+
| ((event: GestureResponderEvent) => boolean)
96+
| undefined;
97+
98+
/**
99+
* The responder has been taken from the View.
100+
* Might be taken by other views after a call to onResponderTerminationRequest,
101+
* or might be taken by the OS without asking (happens with control center/ notification center on iOS)
102+
*/
103+
onResponderTerminate?: ((event: GestureResponderEvent) => void) | undefined;
104+
105+
/**
106+
* onStartShouldSetResponder and onMoveShouldSetResponder are called with a bubbling pattern,
107+
* where the deepest node is called first.
108+
* That means that the deepest component will become responder when multiple Views return true for *ShouldSetResponder handlers.
109+
* This is desirable in most cases, because it makes sure all controls and buttons are usable.
110+
*
111+
* However, sometimes a parent will want to make sure that it becomes responder.
112+
* This can be handled by using the capture phase.
113+
* Before the responder system bubbles up from the deepest component,
114+
* it will do a capture phase, firing on*ShouldSetResponderCapture.
115+
* So if a parent View wants to prevent the child from becoming responder on a touch start,
116+
* it should have a onStartShouldSetResponderCapture handler which returns true.
117+
*/
118+
onStartShouldSetResponderCapture?:
119+
| ((event: GestureResponderEvent) => boolean)
120+
| undefined;
121+
122+
/**
123+
* onStartShouldSetResponder and onMoveShouldSetResponder are called with a bubbling pattern,
124+
* where the deepest node is called first.
125+
* That means that the deepest component will become responder when multiple Views return true for *ShouldSetResponder handlers.
126+
* This is desirable in most cases, because it makes sure all controls and buttons are usable.
127+
*
128+
* However, sometimes a parent will want to make sure that it becomes responder.
129+
* This can be handled by using the capture phase.
130+
* Before the responder system bubbles up from the deepest component,
131+
* it will do a capture phase, firing on*ShouldSetResponderCapture.
132+
* So if a parent View wants to prevent the child from becoming responder on a touch start,
133+
* it should have a onStartShouldSetResponderCapture handler which returns true.
134+
*/
135+
onMoveShouldSetResponderCapture?:
136+
| ((event: GestureResponderEvent) => boolean)
137+
| undefined;
138+
}
139+
140+
/**
141+
* React Native also implements unstable_batchedUpdates
142+
*/
143+
export function unstable_batchedUpdates<A, B>(
144+
callback: (a: A, b: B) => any,
145+
a: A,
146+
b: B,
147+
): void;
148+
export function unstable_batchedUpdates<A>(callback: (a: A) => any, a: A): void;
149+
export function unstable_batchedUpdates(callback: () => any): void;
Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
/**
2+
* Copyright (c) Meta Platforms, Inc. and affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*
7+
* @format
8+
*/
9+
10+
import type * as React from 'react';
11+
12+
export type MeasureOnSuccessCallback = (
13+
x: number,
14+
y: number,
15+
width: number,
16+
height: number,
17+
pageX: number,
18+
pageY: number,
19+
) => void;
20+
21+
export type MeasureInWindowOnSuccessCallback = (
22+
x: number,
23+
y: number,
24+
width: number,
25+
height: number,
26+
) => void;
27+
28+
export type MeasureLayoutOnSuccessCallback = (
29+
left: number,
30+
top: number,
31+
width: number,
32+
height: number,
33+
) => void;
34+
35+
/**
36+
* NativeMethods provides methods to access the underlying native component directly.
37+
* This can be useful in cases when you want to focus a view or measure its on-screen dimensions,
38+
* for example.
39+
* The methods described here are available on most of the default components provided by React Native.
40+
* Note, however, that they are not available on composite components that aren't directly backed by a
41+
* native view. This will generally include most components that you define in your own app.
42+
* For more information, see [Direct Manipulation](https://reactnative.dev/docs/direct-manipulation).
43+
* @see https://github.com/facebook/react-native/blob/master/Libraries/Renderer/shims/ReactNativeTypes.js#L87
44+
*/
45+
export interface NativeMethods {
46+
/**
47+
* Determines the location on screen, width, and height of the given view and
48+
* returns the values via an async callback. If successful, the callback will
49+
* be called with the following arguments:
50+
*
51+
* - x
52+
* - y
53+
* - width
54+
* - height
55+
* - pageX
56+
* - pageY
57+
*
58+
* Note that these measurements are not available until after the rendering
59+
* has been completed in native. If you need the measurements as soon as
60+
* possible, consider using the [`onLayout`
61+
* prop](docs/view.html#onlayout) instead.
62+
*/
63+
measure(callback: MeasureOnSuccessCallback): void;
64+
65+
/**
66+
* Determines the location of the given view in the window and returns the
67+
* values via an async callback. If the React root view is embedded in
68+
* another native view, this will give you the absolute coordinates. If
69+
* successful, the callback will be called with the following
70+
* arguments:
71+
*
72+
* - x
73+
* - y
74+
* - width
75+
* - height
76+
*
77+
* Note that these measurements are not available until after the rendering
78+
* has been completed in native.
79+
*/
80+
measureInWindow(callback: MeasureInWindowOnSuccessCallback): void;
81+
82+
/**
83+
* Like [`measure()`](#measure), but measures the view relative an ancestor,
84+
* specified as `relativeToNativeComponentRef`. This means that the returned x, y
85+
* are relative to the origin x, y of the ancestor view.
86+
* _Can also be called with a relativeNativeNodeHandle but is deprecated._
87+
*/
88+
measureLayout(
89+
relativeToNativeComponentRef: HostComponent<unknown> | number,
90+
onSuccess: MeasureLayoutOnSuccessCallback,
91+
onFail: () => void /* currently unused */,
92+
): void;
93+
94+
/**
95+
* This function sends props straight to native. They will not participate in
96+
* future diff process - this means that if you do not include them in the
97+
* next render, they will remain active (see [Direct
98+
* Manipulation](https://reactnative.dev/docs/direct-manipulation)).
99+
*/
100+
setNativeProps(nativeProps: object): void;
101+
102+
/**
103+
* Requests focus for the given input or view. The exact behavior triggered
104+
* will depend on the platform and type of view.
105+
*/
106+
focus(): void;
107+
108+
/**
109+
* Removes focus from an input or view. This is the opposite of `focus()`.
110+
*/
111+
blur(): void;
112+
113+
refs: {
114+
[key: string]: React.Component<any, any>;
115+
};
116+
}
117+
118+
/**
119+
* @deprecated Use NativeMethods instead.
120+
*/
121+
export type NativeMethodsMixin = NativeMethods;
122+
/**
123+
* @deprecated Use NativeMethods instead.
124+
*/
125+
export type NativeMethodsMixinType = NativeMethods;
126+
127+
/**
128+
* Represents a native component, such as those returned from `requireNativeComponent`.
129+
*
130+
* @see https://github.com/facebook/react-native/blob/v0.62.0-rc.5/Libraries/Renderer/shims/ReactNativeTypes.js
131+
*
132+
* @todo This should eventually be defined as an AbstractComponent, but that
133+
* should first be introduced in the React typings.
134+
*/
135+
export interface HostComponent<P>
136+
extends Pick<
137+
React.ComponentClass<P>,
138+
Exclude<keyof React.ComponentClass<P>, 'new'>
139+
> {
140+
new (props: P, context?: any): React.Component<P> & Readonly<NativeMethods>;
141+
}

0 commit comments

Comments
 (0)