React-native typescript: Can't find variable: React

Question

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"
  }
}

Answer 1

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.