expo-av Video component TypeScript error

[jamiegyoung]

Summary

When the Video component from expo-av is imported and used in a TypeScript expo project it results in the following TypeScript error when running npx tsc. I managed to replicate this on windows and WSL

App.tsx:8:8 - error TS2786: 'Video' cannot be used as a JSX component.
  Its instance type 'Video' is not a valid JSX element.
    Types of property 'refs' are incompatible.
      Type '{ [key: string]: import("/home/jam/projects/test/node_modules/@types/react/index").ReactInstance; }' is not assignable to type '{ [key: string]: React.ReactInstance; }'.
        Index signatures are incompatible.
          Type 'import("/home/jam/projects/test/node_modules/@types/react/index").ReactInstance' is not assignable to type 'React.ReactInstance'.
            Type 'Component<any, {}, any>' is not assignable to type 'ReactInstance'.
              Type 'import("/home/jam/projects/test/node_modules/@types/react/index").Component<any, {}, any>' is not assignable to type 'React.Component<any, {}, any>'.
                The types returned by 'render()' are incompatible between these types.
                  Type 'import("/home/jam/projects/test/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.
                    Type '{}' is not assignable to type 'ReactNode'.
                      Type '{}' is missing the following properties from type 'ReactPortal': key, children, type, props

8       <Video />
         ~~~~~


Found 1 error.

Managed or bare workflow? If you have ios/ or android/ directories in your project, the answer is bare!

managed

What platform(s) does this occur on?

Android

SDK Version (managed workflow only)

44

Environment

expo-env-info 1.0.3 environment info:
System:
OS: Linux 5.10 Ubuntu 20.04.3 LTS (Focal Fossa)
Shell: 5.0.17 - /bin/bash
Binaries:
Node: 14.18.2 - /usr/bin/node
Yarn: 1.22.18 - /usr/bin/yarn
npm: 6.14.15 - /usr/bin/npm
npmPackages:
expo: ~44.0.0 => 44.0.6
react: 17.0.1 => 17.0.1
react-dom: 17.0.1 => 17.0.1
react-native: 0.64.3 => 0.64.3
react-native-web: 0.17.1 => 0.17.1
npmGlobalPackages:
expo-cli: 5.4.3
Expo Workflow: managed

Reproducible demo

On a new project using expo init project, I selected the blank (TypeScript) option and it downloaded the template. I then installed expo-av using the command expo install expo-av within the project and imported it in the main App.tsx file with

import { Video } from 'expo-av';

Then I added a Video component to the App's return like so:

export default function App() {
  return (
    <View style={styles.container}>
      <Video />
      <Text>Open up App.tsx to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

Running npx tsc now results in the error

[jamiegyoung]

After investigating this issue more, this only occurs when expo init uses yarn to install the packages

[Simek]

Duplicate of #17101.

This is a problem with react types package (upstream project), you can temporary fix this by locking the @types/react to the extract version in dependencies or use the resolution. If you need more details please check the referenced issue.