React-native-web: CRA Typescript not find react-native module

[juliofalbo]

Good afternoon.

I started a React with Typescript using Microsoft starter (create-react-app my-app --scripts-version=react-scripts-ts) and tried to use react-native-web (yarn add react-native-web) in it, however for some reason the TS settings do not recognize the 'react-native' module.

My Component:

import * as React from 'react';
import './App.css';
import { Image, StyleSheet, Text, View, Button } from 'react-native';

const logo = require('./logo.svg');

const styles = StyleSheet.create({
  logo: {
    height: 80
  },
  header: {
    backgroundColor: '#222',
    padding: 20
  },
  title: {
    color: 'white',
    fontWeight: 'bold',
    fontSize: '1.5rem',
    marginVertical: '1em',
    textAlign: 'center'
  },
  intro: {
    fontSize: '1.125rem',
    marginVertical: '1em',
    textAlign: 'center'
  },
  code: {
    fontFamily: 'monospace, monospace'
  }
});

class App extends React.Component {
  render() {
    return (
      <View style={styles.app}>
        <View style={styles.header}>
          <Image accessibilityLabel="React logo" source={logo} resizeMode="contain" style={styles.logo} />
          <Text style={styles.title}>Welcome to React</Text>
        </View>
        <Text style={styles.intro}>
          To get started, edit <Text style={styles.code}>src/App/index.js</Text> and save to reload.
        </Text>

        <Button title="Teste"></Button>
      </View>
    );
  }
}

export default App;

My tsconfig.json:

{
  "compilerOptions": {
    "outDir": "build/dist",
    "module": "esnext",
    "target": "es5",
    "lib": [
      "es6",
      "dom"
    ],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "plugins": [
      {
        "name": "typescript-styled-plugin"
      }
    ]
  },
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts",
    "src"
  ]
}

Note: If I go in the tsconfig.json file and insert "exclude": [... "src"] works perfectly.

Any idea what might be happening?

[necolas]

Sorry, I don't know anything about using typescript with react native

[necolas]

Maybe @jaredpalmer can help if you include a stack trace?

[foltz]

@juliofalbo - I'm using react-native-web with typescript. For starters, the package name is react-native-web, so if you replace import 'react-native' with 'react-native-web' you should see it working.

@necolas provided a babel-plugin that allows you to use "import 'react-native'" and have it re-route all references to 'react-native-web' - but guessing that since you're using typescript that you don't use babel.

The solution I came up with is to alias the package in your webpack.config:

resolve: {
    alias: { 'react-native': 'react-native-web'}
}

If you don't want your IDE complaining about not being able to find 'react-native' in your code, just yarn add 'react-native' as well.

Hope this helps!

[jaredpalmer]

AFAIK the babel plugin actually rewrites the paths for "pre-shaking" to minimize bundle size.

So

import { TextInput, Button } from 'react-native'

becomes

import TextInput from 'react-native/dist/whatever/TextInput'
import Button from 'react-native/dist/whatever/Button'

Unfortunately this won't work with typescript right now. However, it could eventually work with Babel 7 TS one-day

[foltz]

@jaredpalmer - I haven't looked into the output to confirm whether tree-shaking is applied, but from my understanding of webpack v4 and ts-loader, it should be. I'll report back once we've done some analysis on the issue

[nickdima]

@juliofalbo try installing the React Native type definitions from https://www.npmjs.com/package/@types/react-native