TypeScript support

How to add TypeScript support to your project.

The type definitions for react-native-web are available on DefinitelyTyped.


Installation

Simply install the following dependency in your project.

npm install --save-dev @types/react-native-web

The package comes with the react-native-web declaration types, so you can use it normally in your project.

import { AppRegistry } from 'react-native-web';

Using it in React Native projects

To extend the react-native types, you have to supply react-native-web as a member of the types compiler option in the tsconfig.json file.

{
  ...
  "compilerOptions": {
    "types": ["react-native-web"]
  }
}

Now you can use react-native components in your project with TS support to react-native-web props and styles 🎉

import { View, ViewStyle } from 'react-native';

const style: ViewStyle = {
  position: 'fixed', // RN style properties are augmented with Web-only options e.g. 'fixed'
  marginBlock: 'auto' // All Web CSS style properties are also available to use
};

<View
  href="https://necolas.github.io/react-native-web/" // RNW prop
  style={style}
/>;
Updated
Edit
React Native for Web – Copyright © Nicolas Gallagher and Meta Platforms, Inc.