Getting Started

npm install -g expo-cli# oryarn global add expo-cliexpo 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

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

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

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

Using a ScrollView

Using List views

Networking

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