Skip to content

Commit 7f51f9c

Browse files
committed
[Navigator] Support the ref prop on scene roots
Summary: Navigator overrides the `ref` prop of scene components so that it can call `onItemRef` and do internal bookkeeping. With callback refs, we can additionally call the original value of the `ref` prop as long as it's a function (that is, string refs are not supported). Note that the `ref` prop is moved to `reactElement.ref` out of `reactElement.props.ref`, which is why this diff accesses `child.ref`. This diff adds support for callback refs and warns helpfully if a string ref was provided. It should be completely backwards compatible since scenes couldn't have been relying on the `ref` prop before. cc @ericvicenti Closes #1361 Github Author: James Ide <[email protected]> @public Test Plan: Write a renderScene implementation that puts a callback ref on the root component: ```js renderScene() { return <View ref={component => console.log('yes! this is called')} />; } ```
1 parent c667065 commit 7f51f9c

File tree

1 file changed

+14
-1
lines changed

1 file changed

+14
-1
lines changed

Libraries/CustomComponents/Navigator/Navigator.js

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1298,6 +1298,14 @@ var Navigator = React.createClass({
12981298
if (i !== this.state.presentedIndex) {
12991299
disabledSceneStyle = styles.disabledScene;
13001300
}
1301+
var originalRef = child.ref;
1302+
if (originalRef != null && typeof originalRef !== 'function') {
1303+
console.warn(
1304+
'String refs are not supported for navigator scenes. Use a callback ' +
1305+
'ref instead. Ignoring ref: ' + originalRef
1306+
);
1307+
originalRef = null;
1308+
}
13011309
return (
13021310
<View
13031311
key={this.state.idStack[i]}
@@ -1307,7 +1315,12 @@ var Navigator = React.createClass({
13071315
}}
13081316
style={[styles.baseScene, this.props.sceneStyle, disabledSceneStyle]}>
13091317
{React.cloneElement(child, {
1310-
ref: this._handleItemRef.bind(null, this.state.idStack[i], route),
1318+
ref: component => {
1319+
this._handleItemRef(this.state.idStack[i], route, component);
1320+
if (originalRef) {
1321+
originalRef(component);
1322+
}
1323+
}
13111324
})}
13121325
</View>
13131326
);

0 commit comments

Comments
 (0)