Skip to content

Commit 1e39c2d

Browse files
fabioh8010necolas
authored andcommitted
Add TypeScript support page
1 parent 54c14d6 commit 1e39c2d

File tree

2 files changed

+63
-1
lines changed

2 files changed

+63
-1
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ description:
66
eleventyNavigation:
77
key: Help
88
parent: Start
9-
order: 6
9+
order: 7
1010
---
1111

1212
:::lead
Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
---
2+
title: TypeScript support
3+
date: Last Modified
4+
permalink: /docs/typescript-support/index.html
5+
eleventyNavigation:
6+
key: TypeScript support
7+
parent: Start
8+
order: 6
9+
---
10+
11+
:::lead
12+
How to add TypeScript support to your project.
13+
:::
14+
15+
The type definitions for `react-native-web` are available on [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-native-web).
16+
17+
---
18+
19+
## Installation
20+
21+
Simply install the following dependency in your project.
22+
23+
```shell
24+
npm install --save-dev @types/react-native-web
25+
```
26+
27+
The package comes with the `react-native-web` declaration types, so you can use it normally in your project.
28+
29+
```ts
30+
import { AppRegistry } from 'react-native-web';
31+
```
32+
33+
---
34+
35+
## Using it in React Native projects
36+
37+
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.
38+
39+
```json
40+
{
41+
...
42+
"compilerOptions": {
43+
"types": ["react-native-web"]
44+
}
45+
}
46+
```
47+
48+
Now you can use `react-native` components in your project with TS support to `react-native-web` props and styles :tada:
49+
50+
```jsx
51+
import { View, ViewStyle } from 'react-native';
52+
53+
const style: ViewStyle = {
54+
position: "fixed", // RN style properties are augmented with Web-only options e.g. 'fixed'
55+
marginBlock: "auto", // All Web CSS style properties are also available to use
56+
};
57+
58+
<View
59+
href="https://necolas.github.io/react-native-web/" // RNW prop
60+
style={style}
61+
/>
62+
```

0 commit comments

Comments
 (0)