https://github.com/typescript-cheatsheets/react-native
react-native-typescript-cheatsheet
https://github.com/typescript-cheatsheets/react-native
Last synced: 4 months ago
JSON representation
react-native-typescript-cheatsheet
- Host: GitHub
- URL: https://github.com/typescript-cheatsheets/react-native
- Owner: typescript-cheatsheets
- License: mit
- Created: 2020-02-02T13:20:01.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-04-30T23:05:20.000Z (about 3 years ago)
- Last Synced: 2025-02-17T21:13:40.046Z (4 months ago)
- Size: 37.1 KB
- Stars: 278
- Watchers: 15
- Forks: 36
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-typescript-cheatsheet
This project aims to accumulate TypeScript advice for React Native users, in the same nature as https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/. It serves as a community maintained supplement to [the official RN + TS docs](https://facebook.github.io/react-native/docs/typescript).
This is a new project and [**we are actively seeking maintainers**](https://github.com/typescript-cheatsheets/react-native-typescript-cheatsheet/issues/1).
## Getting Started
The best way to start is with Expo:
```bash
npm install -g expo-cli
# or
yarn global add expo-cli
expo init AwesomeProject
# you can pick from the typescript templates in the Managed or Bare workflows.
# If in doubt, use Managed
```
This should install the correct TypeScript dev dependencies to get you started:
```js
"devDependencies": {
"@types/react": "~16.9.0",
"@types/react-native": "~0.60.23",
"@babel/core": "^7.0.0",
"babel-preset-expo": "~8.0.0",
"typescript": "~3.6.3"
},
```
## TypeScriptified Tutorial
This translates [the RN docs](https://facebook.github.io/react-native/docs/getting-started) into TypeScript:
---
### Props
https://facebook.github.io/react-native/docs/props
```ts
import React, { Component } from "react";
import { Text, View } from "react-native";
class Greeting extends Component<{ name: string }> {
render() {
return (
Hello {this.props.name}!
);
}
}
// // Function Component version
// function Greeting(props: {name: string}) {
// return (
//
// Hello {props.name}!
//
// );
// }
export default class LotsOfGreetings extends Component {
render() {
return (
);
}
}
```
---
### State
https://facebook.github.io/react-native/docs/state
```ts
import React, { Component } from "react";
import { Text, View } from "react-native";
type BlinkProps = {
text: string;
};
type BlinkState = {
isShowingText: boolean;
};
class Blink extends Component {
componentDidMount() {
// Toggle the state every second
setInterval(
() =>
this.setState(previousState => ({
isShowingText: !previousState.isShowingText
})),
1000
);
}
//state object
state = { isShowingText: true };
render() {
if (!this.state.isShowingText) {
return null;
}
return {this.props.text};
}
}
// // hooks equivalent
// function Blink(props: BlinkProps) {
// const [isShowingText, setIsShowingText] = React.useState(true) // state's type is inferred to be boolean
// // with other types it is helpful to explicitly specify the state's type
// // const [isShowingText, setIsShowingText] = React.useState({ isShowingText: true})
// React.useEffect(() => {
// let interval = setInterval(() => (
// setIsShowingText(previousState => !previousState)
// ), 1000);
// return () => clearInterval(interval) // class component forgot to cleanup the interval
// })
// if (isShowingText) return null
// return (
// {props.text}
// );
// }
export default class BlinkApp extends Component {
render() {
return (
);
}
}
```
---
### Style, Height and Width, Flexbox
https://facebook.github.io/react-native/docs/style
https://facebook.github.io/react-native/docs/height-and-width
https://facebook.github.io/react-native/docs/flexbox
Nothing TS Specific.
---
### Handling Text Input
https://facebook.github.io/react-native/docs/handling-text-input
```ts
import React, { Component } from "react";
import { Text, TextInput, View } from "react-native";
export default class PizzaTranslator extends Component<{}, { text: string }> {
constructor(props) {
super(props);
this.state = { text: "" };
}
render() {
return (
this.setState({ text })}
value={this.state.text}
/>
{this.state.text
.split(" ")
.map(word => word && "🍕")
.join(" ")}
);
}
}
```
---
### Handling Touches
https://facebook.github.io/react-native/docs/handling-touches
---
### Using a ScrollView
https://facebook.github.io/react-native/docs/using-a-scrollview
---
### Using List views
https://facebook.github.io/react-native/docs/using-a-listview
---
### Networking
https://facebook.github.io/react-native/docs/network
```ts
import React from "react";
import { FlatList, ActivityIndicator, Text, View } from "react-native";
type DataItem = { title: string; releaseYear: string; id: string };
type State = {
isLoading: boolean;
dataSource?: DataItem[];
};
export default class FetchExample extends React.Component<{}, State> {
constructor(props) {
super(props);
this.state = { isLoading: true };
}
componentDidMount() {
return fetch("https://facebook.github.io/react-native/movies.json")
.then(response => response.json())
.then((responseJson: { movies: any }) => {
this.setState(
{
isLoading: false,
dataSource: responseJson.movies
},
function() {}
);
})
.catch(error => {
console.error(error);
});
}
render() {
if (this.state.isLoading) {
return (
);
}
return (
(
{item.title}, {item.releaseYear}
)}
keyExtractor={({ id }, index) => id}
/>
);
}
}
```
#### Networking in Functional Components
```ts
import React, { useState, useEffect } from "react";
import { FlatList, ActivityIndicator, Text, View } from "react-native";
type DataItem = { title: string; releaseYear: string; id: string };
type State = {
isLoading: boolean;
dataSource?: DataItem[];
};
const FetchExample = ({ }: State) => {
const [isLoading, setIsLoading] = useState(true)
const [dataSource, setDataSource] = useState()
useEffect(() => {
fetch("https://facebook.github.io/react-native/movies.json")
.then(response => response.json())
.then((responseJson: { movies: any }) => {
setIsLoading(false)
setDataSource(responseJson.movies)
})
.catch(error => {
console.error(error);
});
}, [])
if (isLoading)
return (
);
return (
(
{item.title}, {item.releaseYear}
)}
keyExtractor={({ id }, index) => id}
/>
);
}
export default FetchExample
```
## Contributing
The goal is to **open source knowledge**:
- Write what you wish you had known
- What you will want to refer to in future
- Identify what you don't know and actively ask for community to fill in the gaps
- Be corrected on your misconceptions
An example list of sections:
- Setting up a RN + TS project from scratch
- Recommended Build tools + Prettifying/Linting setup
- Most commonly used RN APIs with their TS types
- Tips and tricks with RN Core's typings
- Tips and tricks with RN Community typings