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.

You have typos in extend and extent. Is this intentional or should it be extends? — Jakub Synowiec
– Jakub Synowiec, Commented Dec 15, 2016 at 11:45

Jakub Synowiec · Accepted Answer · 2016-12-15 12:37:13Z

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

edited Dec 15, 2016 at 12:37

answered Dec 15, 2016 at 11:36

Jakub Synowiec

6,0591 gold badge32 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

TheSoul Over a year ago

Thanks very much. It worked! I am marking this as an answer.

user3053247 · Accepted Answer · 2017-04-19 06:03:15Z

0

The issue is solved by avoiding to import the components and use * e.g. "import * as React from "react";"

This issue can be from JS compiling with tsc as well.

answered Apr 19, 2017 at 6:03

user3053247

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related