[0.22] Add TypeScript types

packages/react-native-web-docs/src/pages/docs/getting-started/typescript-support.md

@@ -12,47 +12,40 @@ eleventyNavigation:
 How to add TypeScript support to your project.
 :::
 
-The type definitions for `react-native-web` are available on [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-native-web).
+`react-native-web` includes types that augment the `react-native` types (0.88 or later) with web-only props and styles.
 
 ---
 
-## Installation
+## Setup
 
-Simply install the following dependency in your project.
+Add `react-native-web/types` to the `types` compiler option in the `tsconfig.json` file.
 
-```shell
-npm install --save-dev @types/react-native-web
+```json
+{
+  "compilerOptions": {
+    "types": ["react-native-web/types"]
+  }
+}
 ```
 
-The package comes with the `react-native-web` declaration types, so you can use it normally in your project.
+You can also add a reference to `react-native-web/types` in a `.d.ts` file of your project (e.g., `env.d.ts`).
 
 ```ts
-import { AppRegistry } from 'react-native-web';
+/// <reference types="react-native-web/types" />
 ```
 
 ---
 
-## 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.
-
-```json
-{
-  ...
-  "compilerOptions": {
-    "types": ["react-native-web"]
-  }
-}
-```
+## Usage
 
 Now you can use `react-native` components in your project with TS support to `react-native-web` props and styles :tada:
 
 ```jsx
-import { View, ViewStyle } from 'react-native';
+import { View, type 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
+  position: 'fixed', // RN style properties are augmented with web-only options e.g. 'fixed'
+  transitionDuration: '200ms' // Web-only style properties are also available
 };
 
 <View

packages/react-native-web/package.json

@@ -7,15 +7,23 @@
   "description": "React Native for Web",
   "type": "module",
   "main": "dist/index.js",
+  "types": "types/react-native-web.d.ts",
   "exports": {
-    ".": "./dist/index.js",
+    ".": {
+      "types": "./types/react-native-web.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./types": {
+      "types": "./types/index.d.ts"
+    },
     "./asset-registry": "./dist/exports/AssetRegistry/index.js",
     "./dist/*": "./dist/*",
     "./package.json": "./package.json"
   },
   "sideEffects": false,
   "files": [
     "dist",
+    "types",
     "!**/__tests__"
   ],
   "scripts": {
@@ -35,8 +43,22 @@
     "del-cli": "^8.0.1"
   },
   "peerDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-native": "*"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    },
+    "@types/react-dom": {
+      "optional": true
+    },
+    "react-native": {
+      "optional": true
+    }
   },
   "author": "Nicolas Gallagher",
   "license": "MIT",