From 1e39c2d8a05413034267ae16d54348f5601c82b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A1bio=20Henriques?= <contact@fabiohenriques.dev>
Date: Mon, 19 Aug 2024 11:40:53 +0100
Subject: [PATCH] Add TypeScript support page

---
 .../src/pages/docs/getting-started/help.md    |  2 +-
 .../getting-started/typescript-support.md     | 62 +++++++++++++++++++
 2 files changed, 63 insertions(+), 1 deletion(-)
 create mode 100644 packages/react-native-web-docs/src/pages/docs/getting-started/typescript-support.md

diff --git a/packages/react-native-web-docs/src/pages/docs/getting-started/help.md b/packages/react-native-web-docs/src/pages/docs/getting-started/help.md
index 14073fda76..5297c9c913 100644
--- a/packages/react-native-web-docs/src/pages/docs/getting-started/help.md
+++ b/packages/react-native-web-docs/src/pages/docs/getting-started/help.md
@@ -6,7 +6,7 @@ description:
 eleventyNavigation:
   key: Help
   parent: Start
-  order: 6
+  order: 7
 ---
 
 :::lead
diff --git a/packages/react-native-web-docs/src/pages/docs/getting-started/typescript-support.md b/packages/react-native-web-docs/src/pages/docs/getting-started/typescript-support.md
new file mode 100644
index 0000000000..d35649758b
--- /dev/null
+++ b/packages/react-native-web-docs/src/pages/docs/getting-started/typescript-support.md
@@ -0,0 +1,62 @@
+---
+title: TypeScript support
+date: Last Modified
+permalink: /docs/typescript-support/index.html
+eleventyNavigation:
+  key: TypeScript support
+  parent: Start
+  order: 6
+---
+
+:::lead
+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).
+
+---
+
+## Installation
+
+Simply install the following dependency in your project.
+
+```shell
+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.
+
+```ts
+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.
+
+```json
+{
+  ...
+  "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 :tada:
+
+```jsx
+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}
+/>
+```