Question 35437 in React native Question posted in
The official React Native documentation can be found here.

Text cannot be used as a jsx component it instance type 'Text' is not a valid JSX element – React native

Receiving following error:

Text cannot be used as a jsx component it instance type ‘Text’ is not a valid JSX element
My file is .tsx as I in a minute need it to be typescript as I will be needing RootState.

I have tried the following so far:

  • Ensured that TS is intalled globally

  • added ‘ "allowSyntheticDefaultImports" : true ‘ tsconfig.json

  • devDependencies for typescript is there.

  • dependencies: "react": "17.0.2", "react-dom": "17.0.2",


import * as React from 'react';
import { View, Text} from 'react-native';

export default function ChatScreen({navigation}){
    return(

    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        <Text
            onPress={() => navigation.navigate('Chat')}
            style={{ fontSize: 26, fontWeight: 'bold'}}>Chat Screen</Text>
    </View>
    
    );
}

Can’t seem to understand why I’m not allowed to use JSX components inside my TSX file. Hope one can help understand.

Tags:

2

Answers


  1. 0

    you can add <React.Fragment> :

    return(
   <React.Fragment>
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        <Text
            onPress={() => navigation.navigate('Chat')}
            style={{ fontSize: 26, fontWeight: 'bold'}}>Chat Screen</Text>
    </View>
    </React.Fragment>
    );

    here for more info

    Login or Signup to reply.
  2. 0

    Add the following to your package.json

    "resolutions": {
  "@types/react": "^17.0.38"
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search