Skip to content

Commit 381e2ac

Browse files
corbtfacebook-github-bot-3
authored andcommitted
Document NativeMethodsMixin
Summary: This is related to the discussion in react#3155. I've documented the methods in this mixin, and pointed to other appropriate documentation where necessary as well. I didn't end up adding any examples. I wanted to add a `focus()`/`blur()` example to the UIExplorer app, but the app seems to be broken on master at the moment (`Requiring unknown module "event-target-shim"`) and I didn't bother trying to fix it. I think the last thing necessary for making the usage of these methods clear is an example of calling one or more of them on a `ref` or view captured in some other way. However, `setNativeProps` is well documented in the "Direct Manipulation" guide, which I link to from this page, so by extension it should be possible to figure out the functionality of the other methods. cc @mkonicek @​astreet Closes react#3238 Reviewed By: @​svcscm Differential Revision: D2517187 Pulled By: @mkonicek fb-gh-sync-id: 4e68b2bc44ace83f06ae2e364ca0c23a7c461b20
1 parent f4857a6 commit 381e2ac

1 file changed

Lines changed: 48 additions & 4 deletions

File tree

Libraries/ReactIOS/NativeMethodsMixin.js

Lines changed: 48 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,6 @@ type MeasureLayoutOnSuccessCallback = (
3535
height: number
3636
) => void
3737

38-
3938
function warnForStyleProps(props, validAttributes) {
4039
for (var key in validAttributes.style) {
4140
if (!(validAttributes[key] || props[key] === undefined)) {
@@ -48,14 +47,51 @@ function warnForStyleProps(props, validAttributes) {
4847
}
4948
}
5049

50+
/**
51+
* `NativeMethodsMixin` provides methods to access the underlying native
52+
* component directly. This can be useful in cases when you want to focus
53+
* a view or measure its on-screen dimensions, for example.
54+
*
55+
* The methods described here are available on most of the default components
56+
* provided by React Native. Note, however, that they are *not* available on
57+
* composite components that aren't directly backed by a native view. This will
58+
* generally include most components that you define in your own app. For more
59+
* information, see [Direct
60+
* Manipulation](/react-native/docs/direct-manipulation.html).
61+
*/
5162
var NativeMethodsMixin = {
63+
/**
64+
* Determines the location on screen, width, and height of the given view and
65+
* returns the values via an async callback. If successful, the callback will
66+
* be called with the following arguments:
67+
*
68+
* - x
69+
* - y
70+
* - width
71+
* - height
72+
* - pageX
73+
* - pageY
74+
*
75+
* Note that these measurements are not available until after the rendering
76+
* has been completed in native. If you need the measurements as soon as
77+
* possible, consider using the [`onLayout`
78+
* prop](/react-native/docs/view.html#onlayout) instead.
79+
*/
5280
measure: function(callback: MeasureOnSuccessCallback) {
5381
RCTUIManager.measure(
5482
findNodeHandle(this),
5583
mountSafeCallback(this, callback)
5684
);
5785
},
5886

87+
/**
88+
* Like [`measure()`](#measure), but measures the view relative an ancestor,
89+
* specified as `relativeToNativeNode`. This means that the returned x, y
90+
* are relative to the origin x, y of the ancestor view.
91+
*
92+
* As always, to obtain a native node handle for a component, you can use
93+
* `React.findNodeHandle(component)`.
94+
*/
5995
measureLayout: function(
6096
relativeToNativeNode: number,
6197
onSuccess: MeasureLayoutOnSuccessCallback,
@@ -70,9 +106,10 @@ var NativeMethodsMixin = {
70106
},
71107

72108
/**
73-
* This function sends props straight to native. They will not participate
74-
* in future diff process, this means that if you do not include them in the
75-
* next render, they will remain active.
109+
* This function sends props straight to native. They will not participate in
110+
* future diff process - this means that if you do not include them in the
111+
* next render, they will remain active (see [Direct
112+
* Manipulation](/react-native/docs/direct-manipulation.html)).
76113
*/
77114
setNativeProps: function(nativeProps: Object) {
78115
if (__DEV__) {
@@ -91,10 +128,17 @@ var NativeMethodsMixin = {
91128
);
92129
},
93130

131+
/**
132+
* Requests focus for the given input or view. The exact behavior triggered
133+
* will depend on the platform and type of view.
134+
*/
94135
focus: function() {
95136
TextInputState.focusTextInput(findNodeHandle(this));
96137
},
97138

139+
/**
140+
* Removes focus from an input or view. This is the opposite of `focus()`.
141+
*/
98142
blur: function() {
99143
TextInputState.blurTextInput(findNodeHandle(this));
100144
}

0 commit comments

Comments
 (0)