Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

'KeyboardAwareScrollView' cannot be used as a JSX component.

See original GitHub issue

Hi,

This error pops up when used and I haven’t seen this error come through here. I’m using expo and typescript in my project. Has anyone encountered this issue and knowing how to resolve this? The full error is as follows:

'KeyboardAwareScrollView' cannot be used as a JSX component.
  Its instance type 'KeyboardAwareScrollView' 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("....../node_modules/@types/react-native/node_modules/@types/react/index").ReactNode'.ts(2786)

The versions of packages I am using are the following:

react@17.0.1
react-native@0.64.3
typescript@4.3.5
@types/react@17.0.44
@types/react-native@0.64.24
expo@44.0.6
react-native-keyboard-aware-scroll-view@0.9.5

Hoping I’m not alone in this. Thank you in advance!

Issue Analytics

State:
Created a year ago
Comments:7

Top GitHub Comments

5reactions

ricohummecommented, Apr 13, 2022

So adding

"resolutions": {
    "@types/react": "^17.0.41"
  },

resolves the issue. Hope it helps anyone in the same need 😃

1reaction

diyorbekdeveloper8850commented, Dec 19, 2022

what the fuck ?

Top Results From Across the Web

NPM package cannot be used as a JSX Component

I'm getting similar "TS2786: 'NumberFormat' cannot be used as a JSX component. Its instance type 'NumberFormat<unknown>' is not a valid JSX ...

Component cannot be used as a JSX component in React

The error Component cannot be used as a JSX component occurs for multiple reasons, returning an array of JSX elements instead of a...

'view' cannot be used as a jsx component. its ... - You.com

Its instance type 'TouchableOpacity' is not a valid JSX element. The types returned by 'render()' are incompatible between these types. Type 'import("/Users/ ...

Using KeyboardAwareScrollView and KeyboardAvoidingView ...

The main purpose of using the KeyboardAvoidingView component is to make sure that your input fields don't hide behind the keyboard. This is...

react-native-keyboard-aware-scroll-view - npm

react-native-keyboard-aware-scroll-view. A ScrollView component that handles keyboard appearance and automatically scrolls to focused ...