mirror of
https://github.com/status-im/react-native.git
synced 2025-02-23 22:58:19 +00:00
d6c8f189e7
Summary:
This PR introduces a new helper function called `setAndForwardRef`. It is intended to help with moving components that depend on `NativeMethodsMixin` off of `createReactClass`.
It allows for classes that depend on having a ref to a native component to be able to also forward the native component ref to user code.
Usage is like this:
```js
class MyView extends React.Component {
_nativeRef = null;
_setNativeRef = setAndForwardRef({
getForwardedRef: () => this.props.forwardedRef,
setLocalRef: ref => {
this._nativeRef = ref;
},
});
render() {
return <View ref={this._setNativeRef} />;
}
}
const MyViewWithRef = React.forwardRef((props, ref) => (
<MyView {...props} forwardedRef={ref} />
));
module.exports = MyViewWithRef;
```
Pull Request resolved: https://github.com/facebook/react-native/pull/21823
Differential Revision: D10436673
Pulled By: TheSavior
fbshipit-source-id: 32e167bb3ea3234f08d5715168b0e61e4e035a7c
71 lines
1.8 KiB
JavaScript
71 lines
1.8 KiB
JavaScript
/**
|
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @format
|
|
* @flow
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
const invariant = require('fbjs/lib/invariant');
|
|
|
|
import type React from 'React';
|
|
|
|
type Args = $ReadOnly<{|
|
|
getForwardedRef: () => ?React.Ref<any>,
|
|
setLocalRef: (ref: React.ElementRef<any>) => mixed,
|
|
|}>;
|
|
|
|
/**
|
|
* This is a helper function for when a component needs to be able to forward a ref
|
|
* to a child component, but still needs to have access to that component as part of
|
|
* its implementation.
|
|
*
|
|
* Its main use case is in wrappers for native components.
|
|
*
|
|
* Usage:
|
|
*
|
|
* class MyView extends React.Component {
|
|
* _nativeRef = null;
|
|
*
|
|
* _setNativeRef = setAndForwardRef({
|
|
* getForwardedRef: () => this.props.forwardedRef,
|
|
* setLocalRef: ref => {
|
|
* this._nativeRef = ref;
|
|
* },
|
|
* });
|
|
*
|
|
* render() {
|
|
* return <View ref={this._setNativeRef} />;
|
|
* }
|
|
* }
|
|
*
|
|
* const MyViewWithRef = React.forwardRef((props, ref) => (
|
|
* <MyView {...props} forwardedRef={ref} />
|
|
* ));
|
|
*
|
|
* module.exports = MyViewWithRef;
|
|
*/
|
|
|
|
function setAndForwardRef({getForwardedRef, setLocalRef}: Args) {
|
|
return function forwardRef(ref: React.ElementRef<any>) {
|
|
const forwardedRef = getForwardedRef();
|
|
|
|
setLocalRef(ref);
|
|
|
|
// Forward to user ref prop (if one has been specified)
|
|
if (typeof forwardedRef === 'function') {
|
|
// Handle function-based refs. String-based refs are handled as functions.
|
|
forwardedRef(ref);
|
|
} else if (typeof forwardedRef === 'object' && forwardedRef != null) {
|
|
// Handle createRef-based refs
|
|
forwardedRef.current = ref;
|
|
}
|
|
};
|
|
}
|
|
|
|
module.exports = setAndForwardRef;
|