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.

This is a new project and we are actively seeking maintainers.

Getting Started

The best way to start is with Expo:

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:

"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 into TypeScript:

---

Props

https://facebook.github.io/react-native/docs/props

importReact,{Component}from"react";import{Text,View}from"react-native";classGreetingextendsComponent<{name: string}>{render(){return(<Viewstyle={{alignItems: "center"}}><Text>Hello{this.props.name}!</Text></View>);}}// // Function Component version// function Greeting(props: {name: string}) {// return (// <View style={{ alignItems: 'center' }}>// <Text>Hello {props.name}!</Text>// </View>// );// }exportdefaultclassLotsOfGreetingsextendsComponent{render(){return(<Viewstyle={{alignItems: "center",top: 50}}><Greetingname="Rexxar"/><Greetingname="Jaina"/><Greetingname="Valeera"/></View>);}}

---

State

https://facebook.github.io/react-native/docs/state

importReact,{Component}from"react";import{Text,View}from"react-native";typeBlinkProps={text: string;};typeBlinkState={isShowingText: boolean;};classBlinkextendsComponent<BlinkProps,BlinkState>{componentDidMount(){// Toggle the state every secondsetInterval(()=>this.setState(previousState=>({isShowingText: !previousState.isShowingText})),1000);}//state objectstate={isShowingText: true};render(){if(!this.state.isShowingText){returnnull;}return<Text>{this.props.text}</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<BlinkState>({ 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 (// <Text>{props.text}</Text>// );// }exportdefaultclassBlinkAppextendsComponent{render(){return(<View><Blinktext="I love to blink"/><Blinktext="Yes blinking is so great"/><Blinktext="Why did they ever take this out of HTML"/><Blinktext="Look at me look at me look at me"/></View>);}}

---

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

importReact,{Component}from"react";import{Text,TextInput,View}from"react-native";exportdefaultclassPizzaTranslatorextendsComponent<{},{text: string}>{constructor(props){super(props);this.state={text: ""};}render(){return(<Viewstyle={{padding: 10}}><TextInputstyle={{height: 40}}placeholder="Type here to translate!"onChangeText={text=>this.setState({ text })}value={this.state.text}/><Textstyle={{padding: 10,fontSize: 42}}>{this.state.text.split(" ").map(word=>word&&"🍕").join(" ")}</Text></View>);}}

---

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

importReactfrom"react";import{FlatList,ActivityIndicator,Text,View}from"react-native";typeDataItem={title: string;releaseYear: string;id: string};typeState={isLoading: boolean;dataSource?: DataItem[];};exportdefaultclassFetchExampleextendsReact.Component<{},State>{constructor(props){super(props);this.state={isLoading: true};}componentDidMount(){returnfetch("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(<Viewstyle={{flex: 1,padding: 20}}><ActivityIndicator/></View>);}return(<Viewstyle={{flex: 1,paddingTop: 20}}><FlatListdata={this.state.dataSource}renderItem={({ item })=>(<Text>{item.title},{item.releaseYear}</Text>)}keyExtractor={({ id },index)=>id}/></View>);}}

Networking in Functional Components

importReact,{useState,useEffect}from"react";import{FlatList,ActivityIndicator,Text,View}from"react-native";typeDataItem={title: string;releaseYear: string;id: string};typeState={isLoading: boolean;dataSource?: DataItem[];};constFetchExample=({}: 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(<Viewstyle={{flex: 1,padding: 20}}><ActivityIndicator/></View>);return(<Viewstyle={{backgroundColor: 'red'}}><FlatListdata={dataSource}renderItem={({item})=>(<Text>{item.title},{item.releaseYear}</Text>)}keyExtractor={({ id },index)=>id}/></View>);}exportdefaultFetchExample

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