React-native: How to use (and translate) typescript .tsx files with jsx in React-native?

Question

I am new to React-native coming from reactjs+typescript. I am trying to set up a fairly simple project test and see how this technology works. I am using VS Code.

Following the basic tutorial, I have set up my project and I can run it in an Visual Studio Android Emulator.

Now I want to see how to create a custom .tsx file (say profile.tsx), write a render function and display it on the index page (index.android.js).

So I create a .tsx file:(I have omitted the various import statements at the beginning of the file)

export class Profile extend React.Component {

       render(){
           return <View> this is the profile view </View>
       }
}

Using VS Code I can compile this file and produce its corresponding profile.js and profile.js.map files.

The content of the profile.js is:

"use strict";
const react_1 = require('react');
const react_native_1 = require('react-native');

...

class Profile extent react_1.Component {

     render(){
          return react_1.default.createElement(react_native_1.View, null, "this is the profile view");
     }
}

At run time the line react_1.default.createElement blows up with this message:

undefine is not an object (evaluating react_1.default.createElement)

There is this "default" property, I don't what it is.

So how can I create a .tsx file containing some jsx code and properly transpile it in order to be properly consumed in a react-native application?

• P.S: This is my tsconfig.json file, I have enabled jsx with jsx="react"

Any help, suggestion, direction would be greatly appreciated. Thank you.

Answer 1

Right now TSC is transpiling ES6 modules syntax and later JavaScript engine is expecting the default export (similar to module.exports), which is not present. You should configure your TSC with ES6 target and modules.

Try updating the compiler options in your tsconfig.json file as follow:

{
  "compilerOptions": {
    "target": "es6",
    "allowJs": true,
    "jsx": "react",
    "sourceMap": true,
    "noImplicitAny": false
  }
}

With ES6 target (modules defaults to ES6 with it), your Profile class should be transpiled to:

class Profile extends Component {

     render(){
          return React.createElement(View, null, "this is the profile view");
     }
}

Also remember to install react and react-native type definitions, either using yarn (prefered with latest react-native) or npm: yarn add @types/react-native @types/react -D or npm i @types/react-native @types/react -D