Wrong component typing in View and Avatar components

[ivopr]

Description

Hey, I've got an strange error happening to some components such as View and Avatar, they both are marked as not valid components and give me this:

'View' cannot be used as a JSX component.
  Its instance type 'Component<ViewProps & { useCustomTheme?: boolean; }, any, any>' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("/home/ivopr/finyances/node_modules/@types/react-native/node_modules/@types/react/index").ReactNode'.

Also note that everything keeps working the way it should be, just that annoying red line is coming up.

Related to

• Components
• Demo
• Docs
• Typings

Steps to reproduce

1. Just add some View component in the screen

Expected behavior

To not give these red lines

Actual behavior

It's giving the red lines

More Info

Code snippet

        {signedin ? (
          <>
            <View style={{ marginTop: Spacings["s4"] }}>
              <Avatar
                containerStyle={{
                  alignSelf: "center",
                  backgroundColor:
                    colorMode === "light" ? Colors["blackAlpha50"] : Colors["whiteAlpha50"],
                  height: 64,
                  width: 64,
                }}
                imageStyle={{
                  height: 64,
                  width: 64,
                }}
                label={name}
                onPress={() => setIsVisible(true)}
                source={{
                  uri: picture,
                }}
              />
              <Typography
                style={{
                  fontSize: 18,
                  fontWeight: "bold",
                  marginTop: Spacings["s2"],
                  textAlign: "center",
                  textTransform: "uppercase",
                }}
                tx="modal-user.welcome-username"
                txOptions={{ username: name }}
              />
              <Typography
                style={{
                  color: Colors["gray400"],
                  fontSize: 12,
                  marginBottom: Spacings["s4"],
                  marginTop: -Spacings["s1"],
                  textAlign: "center",
                }}
                text={email}
              />
              <Button icon="logout" onPress={() => auth.signOut()} tx="modal-user.logout" />
            </View>
          </>
        ) : (
          <Button
            disabled={!request}
            icon="google"
            onPress={() => {
              promptAsync({
                showTitle: true,
              });
            }}
            style={{
              marginTop: Spacings["s4"],
            }}
            tx="modal-user.login-with-google"
          />
        )}

There, the View and Avatar components are signaling the things mentioned above

Screenshots/Video

Environment

• React Native: ^0.64.3
• React Native UI Lib: ^6.13.0

Affected platforms

• Android
• iOS
• Web

[ivopr]

I've messed things a bit, and changing React.ComponentClass to JSX.Element in typings at components/{component}/index.d.ts on declare const _default solved this. Not sure if it is the right way to do things.

There is actually 3 components (to the time of this) that I've have this error popup: View, Avatar and Dialog

[ivopr]

The file mentioned above can be found at this folder

[ivopr]

Tried changing VSCode TS version, but the error persisted.
Why did I try this? I saw another issue here that mentioned the reversion of some code that relied on TS 4.4, so I tried it with the TS installed by Expo, which is 4.3.5

[ivopr]

Just noticed that what I did really isn't the way, I've lost autocomplete on these components

[ivopr]

After some more searching, I've found out that this is an error with react native pulling in @types/react at version 18, but expo projects still doesn't support it. The easiest way to fix it for now is to add a resolution to your package.json that says to use @types/react at version 17.
Linked the issue where it was solved

• 'Drawer.Navigator' cannot be used as a JSX component with TypeScript react-navigation/react-navigation#10507