Skip to content

Commit 10254a9

Browse files
kaciebfacebook-github-bot
authored andcommitted
Add innerViewRef prop to ScrollView
Summary: Right now, people are calling `getInnerViewNode` and `getInnerViewRef` to get the ref of the `View` within `ScrollView`. Instead, this change adds a prop to `ScrollView` to give people direct access to that `View` if they need it. Previous usage: ``` const myRef = React.createRef<React.ElementRef<typeof ScrollView>>(); <ScrollView ref={myRef} /> const innerViewRef = myRef.current.getInnerViewRef(); innerViewRef.measure(); ``` New usage: ``` const myRef = React.createRef<React.ElementRef<typeof View>>(); <ScrollView innerViewRef={myRef} /> // now, myRef.current can be used directly as the ref myRef.current.measure(); ``` Changelog: [Changed][General] ScrollView: Deprecate getInnerViewNode and getInnerViewRef methods. Use innerViewRef={myRef} prop instead. Reviewed By: TheSavior Differential Revision: D19713191 fbshipit-source-id: 3304cb94a253dafb458ef49d6331e0e432693431
1 parent 29d3dfb commit 10254a9

File tree

1 file changed

+22
-5
lines changed

1 file changed

+22
-5
lines changed

Libraries/Components/ScrollView/ScrollView.js

+22-5
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ const invariant = require('invariant');
2626
const processDecelerationRate = require('./processDecelerationRate');
2727
const resolveAssetSource = require('../../Image/resolveAssetSource');
2828
const splitLayoutProps = require('../../StyleSheet/splitLayoutProps');
29+
const setAndForwardRef = require('../../Utilities/setAndForwardRef');
2930

3031
import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
3132
import type {PointProp} from '../../StyleSheet/PointPropType';
@@ -575,6 +576,11 @@ export type Props = $ReadOnly<{|
575576
// $FlowFixMe - how to handle generic type without existential operator?
576577
refreshControl?: ?React.Element<any>,
577578
children?: React.Node,
579+
/**
580+
* A ref to the inner View element of the ScrollView. This should be used
581+
* instead of calling `getInnerViewRef`.
582+
*/
583+
innerViewRef?: React.Ref<typeof View>,
578584
|}>;
579585

580586
type State = {|
@@ -766,10 +772,18 @@ class ScrollView extends React.Component<Props, State> {
766772
}
767773

768774
getInnerViewNode(): ?number {
775+
console.warn(
776+
'`getInnerViewNode()` is deprecated. This will be removed in a future release. ' +
777+
'Use <ScrollView innerViewRef={myRef} /> instead.',
778+
);
769779
return ReactNative.findNodeHandle(this._innerViewRef);
770780
}
771781

772-
getInnerViewRef(): ?React.ElementRef<HostComponent<mixed>> {
782+
getInnerViewRef(): ?React.ElementRef<typeof View> {
783+
console.warn(
784+
'`getInnerViewRef()` is deprecated. This will be removed in a future release. ' +
785+
'Use <ScrollView innerViewRef={myRef} /> instead.',
786+
);
773787
return this._innerViewRef;
774788
}
775789

@@ -951,10 +965,13 @@ class ScrollView extends React.Component<Props, State> {
951965
this._scrollViewRef = ref;
952966
};
953967

954-
_innerViewRef: ?React.ElementRef<HostComponent<mixed>> = null;
955-
_setInnerViewRef = (ref: ?React.ElementRef<HostComponent<mixed>>) => {
956-
this._innerViewRef = ref;
957-
};
968+
_innerViewRef: ?React.ElementRef<typeof View> = null;
969+
_setInnerViewRef = setAndForwardRef({
970+
getForwardedRef: () => this.props.innerViewRef,
971+
setLocalRef: ref => {
972+
this._innerViewRef = ref;
973+
},
974+
});
958975

959976
render(): React.Node | React.Element<string> {
960977
let ScrollViewClass;

0 commit comments

Comments
 (0)