React createRef not assignable to type MutableRefObject in React Native Actions Sheet ref prop

Question

I am using react-native-actions-sheet v0.5.1 which recently added Typescript support:

export default function MyFunc(){
   const actionSheetRef = createRef<ActionSheet>()
   useEffect(() => {
        actionSheetRef.current?.setModalVisible(props.open)
   }, [props.open])
   return (
        <>
            <ActionSheet
                ref={actionSheetRef}
                onClose={props.onClose}
            >
            // more code here  ....
        <>)
}

But with the new versions, now my code gets a Typescript error on the ref inside the <ActionSheet>:

Type 'RefObject<ActionSheet>' is not assignable to type '(string & MutableRefObject<{ setModalVisible(visible?: boolean | undefined): void; show(): void; hide(): void; handleChildScrollEnd(): void; snapToOffset(offset: number): void; }>) | (RefObject<...> & MutableRefObject<...>) | (((instance: ActionSheet | null) => void) & MutableRefObject<...>) | undefined'.
  Type 'RefObject<ActionSheet>' is not assignable to type '((instance: ActionSheet | null) => void) & MutableRefObject<{ setModalVisible(visible?: boolean | undefined): void; show(): void; hide(): void; handleChildScrollEnd(): void; snapToOffset(offset: number): void; }>'.
    Type 'RefObject<ActionSheet>' is not assignable to type '(instance: ActionSheet | null) => void'.
      Type 'RefObject<ActionSheet>' provides no match for the signature '(instance: ActionSheet | null): void'.

Any idea how to solve?

Hmm, I can't reproduce this at all. Your code example works (after tidying up unrelated errors) passes type checks for me. — Wing, Aug 12 '21 at 18:08

score 2 · Accepted Answer · answered Sep 02 '21 at 13:42

The package developer has released an update which fixes the issue (see GitHub issue). You can use this code:

const actionSheetRef = useRef<ActionSheet>(null)
<ActionSheet
            ref={actionSheetRef}
            onClose={props.handleClose}
        >
   ...
</ActionSheet>

React createRef not assignable to type MutableRefObject in React Native Actions Sheet ref prop

1 Answers1