react-native-typescript-cheatsheet

Getting Started

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

 "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

Props

import React, { Component } from "react";
import { Text, View } from "react-native";
class Greeting extends Component<{ name: string }> {
 render() {
 return (
 <View style={{ 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>
// );
// }
export default class LotsOfGreetings extends Component {
 render() {
 return (
 <View style={{ alignItems: "center", top: 50 }}>
 <Greeting name="Rexxar" />
 <Greeting name="Jaina" />
 <Greeting name="Valeera" />
 </View>
 );
 }
}

State

import React, { Component } from "react";
import { Text, View } from "react-native";
type BlinkProps = {
 text: string;
};
type BlinkState = {
 isShowingText: boolean;
};
class Blink extends Component<BlinkProps, BlinkState> {
 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 <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>
// );
// }
export default class BlinkApp extends Component {
 render() {
 return (
 <View>
 <Blink text="I love to blink" />
 <Blink text="Yes blinking is so great" />
 <Blink text="Why did they ever take this out of HTML" />
 <Blink text="Look at me look at me look at me" />
 </View>
 );
 }
}

Style, Height and Width, Flexbox

Handling Text Input

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 (
 <View style={{ padding: 10 }}>
 <TextInput
 style={{ height: 40 }}
 placeholder="Type here to translate!"
 onChangeText={text => this.setState({ text })}
 value={this.state.text}
 />
 <Text style={{ padding: 10, fontSize: 42 }}>
 {this.state.text
 .split(" ")
 .map(word => word && "🍕")
 .join(" ")}
 </Text>
 </View>
 );
 }
}

Handling Touches

Using a ScrollView

Using List views

Networking

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 (
 <View style={{ flex: 1, padding: 20 }}>
 <ActivityIndicator />
 </View>
 );
 }
 return (
 <View style={{ flex: 1, paddingTop: 20 }}>
 <FlatList
 data={this.state.dataSource}
 renderItem={({ item }) => (
 <Text>
 {item.title}, {item.releaseYear}
 </Text>
 )}
 keyExtractor={({ id }, index) => id}
 />
 </View>
 );
 }
}

Networking in Functional Components

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 (
 <View style={{ flex: 1, padding: 20 }}>
 <ActivityIndicator />
 </View>
 );
 return (
 <View style={{ backgroundColor: 'red' }}>
 <FlatList
 data={dataSource}
 renderItem={({ item }) => (
 <Text>
 {item.title}, {item.releaseYear}
 </Text>
 )}
 keyExtractor={({ id }, index) => id}
 />
 </View>
 );
}
export default FetchExample

Contributing