3

Slowly trying to integrate typescript into my React-Native project. Syntax and all works with ts + tslint + tsconfig, but my application won't compile.

My Button.tsx:

import * as React from 'react'
import { Text, TouchableOpacity, StyleSheet} from 'react-native'

interface ButtonProps {
    txtColor: string
    bgColor: string
    onPress: (e: any) => void
    children: any
}

class Button extends React.Component<ButtonProps, {}> {

    render () {
        const styles =  StyleSheet.create({
            textStyle: {
                alignSelf: 'center',
                color: this.props.txtColor,
                fontSize: 16,
                fontWeight: '900',
                paddingTop: 10,
                paddingBottom: 10
            },
            buttonStyle: {
                flex: 1,
                borderRadius: 75,
                height: 45,
                backgroundColor: this.props.bgColor
            }
        })

        return (
            <TouchableOpacity onPress={this.props.onPress} style={styles.buttonStyle}>
                <Text style={styles.textStyle}>
                    {this.props.children}
                </Text>
            </TouchableOpacity>
        )
    }
}

export { Button }

It transpiles to this, which is imported in an Index.js:

Button.js:

"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
exports.__esModule = true;
var react_1 = require("react");
var react_native_1 = require("react-native");
var Button = /** @class */ (function (_super) {
    __extends(Button, _super);
    function Button() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    Button.prototype.render = function () {
        var styles = react_native_1.StyleSheet.create({
            textStyle: {
                alignSelf: 'center',
                color: this.props.txtColor,
                fontSize: 16,
                fontWeight: '900',
                paddingTop: 10,
                paddingBottom: 10
            },
            buttonStyle: {
                flex: 1,
                borderRadius: 75,
                height: 45,
                backgroundColor: this.props.bgColor
            }
        });
        return (<react_native_1.TouchableOpacity onPress={this.props.onPress} style={styles.buttonStyle}>
                <react_native_1.Text style={styles.textStyle}>
                    {this.props.children}
                </react_native_1.Text>
            </react_native_1.TouchableOpacity>);
    };
    return Button;
}(react_1.Component));
exports.Button = Button;

Imported as such in Index.js:

export * from './Button';

However, upon compiling, I am met with the error in Button.js:37:16:

Can't find variable: React

What could be wrong? Is it the mixture of .js and .tsx files? But, it's importing the pure Javascript file, so I can't really see what the issue is.

Package.json dependencies:

  },
  "devDependencies": {
    "@types/react": "16.0.29",
    "jest-expo": "21.0.2",
    "react-native-debugger-open": "0.3.15",
    "react-native-scripts": "1.5.0",
    "react-test-renderer": "16.0.0-alpha.12",
    "remote-redux-devtools": "0.5.12",
    "remotedev-rn-debugger": "0.8.3",
    "redux-logger": "3.0.6"
    "typescript": "2.6.2"
  },
  "dependencies": {
    "axios": "0.17.1",
    "expo": "21.0.0",
    "firebase": "4.7.0",
    "mobx": "3.4.1",
    "mobx-react": "^4.3.5",
    "react": "16.0.0-alpha.12",
    "react-native": "0.48.4",
    "react-native-loading-spinner-overlay": "0.5.2",
    "react-native-modal": "4.1.1",
    "react-redux": "5.0.6",
    "redux": "3.7.2",
    "redux-promise": "0.5.3",
    "redux-thunk": "2.2.0"
  }
}
4
  • It looks like react-native cannot found its dependency of react. maybe reinstall react-native and try again? Commented Dec 14, 2017 at 7:15
  • But it works for normal .js files. It's just this .tsx that transpiles to .js that messes up. Commented Dec 14, 2017 at 7:30
  • import React from 'react' Commented Dec 14, 2017 at 7:37
  • Tried that, doesn't work either :) Commented Dec 14, 2017 at 7:48

1 Answer 1

3

I checked your code and everything looks good to me.

I think you are using React without support for @types/react

yarn add @types/react
//or
npm install --save @types/react

This might help you setup React with typescript in your code.

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

7 Comments

I already have types installed for React, thanks though. It compiles with tsc just fine, so syntax shouldn't be the issue
Can I have a look at your dependencies and dev-dependencies? It might help to have a better understanding of the issue.
Updated with it, @Prashoor
Check this package.json from Microsoft github.com/Microsoft/TypeScript-React-Native-Starter/blob/… This might help you have some insight.
Hi yes, sorry. The issue was that I needed to have the App.js in the root of the project, importing the "entrypoint" of my ts files from the /dist, rather than the /src - which makes sense.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.