forwardRef hook

useShareForwardedRef.tsx

import React, { useRef, forwardRef, Ref, useEffect } from 'react';
import { TextInputProps, TextInput } from 'react-native';
import styled from 'styled-components/native';

interface Props extends TextInputProps {
  showEditLabel?: boolean;
}

const Input = styled.TextInput``;

function useShareForwardedRef<T>(forwardedRef: Ref<T>) {
  // final ref that will share value with forward ref. this is the one we will attach to components
  const innerRef = useRef<T>(null);

  useEffect(() => {
    // after every render - try to share current ref value with forwarded ref
    if (!forwardedRef) {
      return;
    }
    if (typeof forwardedRef === 'function') {
      forwardedRef(innerRef.current);
      return;
    } else {
      // @ts-ignore
      // by default forwardedRef.current is readonly. Let's ignore it
      forwardedRef.current = innerRef.current;
    }
  });

  return innerRef;
}

// now we have some custom component, where we want to forward and use ref
export const SuperInput = forwardRef<TextInput, Props>(
  function(props: Props, ref) {
    const innerRef = useShareForwardedRef(ref);

    useEffect(() => {
      // we can use ref here! it is also forwarded
      innerRef.current.focus();
    })

    return (
      <Input
        ref={innerRef}
        {...props}
      />
    );
  },
);