/** * 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'; import type { ElementRef, MutableRefObject, RefCallback } from 'react'; type Args = { getForwardedRef: () => RefCallback<any> | MutableRefObject<any> | null | undefined; setLocalRef: (ref: ElementRef<any>) => unknown; }; /** * 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} />; * } * } * * export const MyViewWithRef = React.forwardRef((props, ref) => ( * <MyView {...props} forwardedRef={ref} /> * )); */ export function setAndForwardRef({ getForwardedRef, setLocalRef }: Args): (ref: ElementRef<any>) => void { return function forwardRef(ref: 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; } }; }