Skip to content

Commit

Permalink
[Navigator] Support the ref prop on scene roots
Browse files Browse the repository at this point in the history
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 <ide@jameside.com>

@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')} />;
}
```
  • Loading branch information
ide committed May 21, 2015
1 parent c667065 commit 7f51f9c
Showing 1 changed file with 14 additions and 1 deletion.
15 changes: 14 additions & 1 deletion Libraries/CustomComponents/Navigator/Navigator.js
Original file line number Diff line number Diff line change
Expand Up @@ -1298,6 +1298,14 @@ var Navigator = React.createClass({
if (i !== this.state.presentedIndex) {
disabledSceneStyle = styles.disabledScene;
}
var originalRef = child.ref;
if (originalRef != null && typeof originalRef !== 'function') {
console.warn(
'String refs are not supported for navigator scenes. Use a callback ' +
'ref instead. Ignoring ref: ' + originalRef
);
originalRef = null;
}
return (
<View
key={this.state.idStack[i]}
Expand All @@ -1307,7 +1315,12 @@ var Navigator = React.createClass({
}}
style={[styles.baseScene, this.props.sceneStyle, disabledSceneStyle]}>
{React.cloneElement(child, {
ref: this._handleItemRef.bind(null, this.state.idStack[i], route),
ref: component => {
this._handleItemRef(this.state.idStack[i], route, component);
if (originalRef) {
originalRef(component);
}
}
})}
</View>
);
Expand Down

0 comments on commit 7f51f9c

Please sign in to comment.