GithubHelp home page GithubHelp logo

react-native's Introduction

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

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

https://facebook.github.io/react-native/docs/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

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

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

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

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

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

react-native's People

Contributors

sw-yx avatar augini avatar KovacZan avatar

Stargazers

maya avatar  avatar  avatar Kasra Alizadeh avatar vordla avatar  avatar Benjamin Scherer avatar Prashant Bhat avatar  avatar Lode Vanhove avatar Lem Dulfo avatar Lajuan Station avatar Ali Uçar avatar Zheng UET avatar Rodrigo Torres avatar Gyowon Lee avatar Hans-Derly Rameau avatar Burak Sonmez avatar Alan Layt avatar Umesh Kumar avatar Nilesh Patel avatar Sam Huynh (he/him) avatar Joe avatar  avatar Gourav Singhal avatar  avatar  avatar Juan Dominici avatar SaRaVaNaN avatar Tai Le Tuan avatar King Yiu Suen avatar Rodolfo avatar  avatar Mohan Vaddi avatar Paulo Filho avatar Barış Ateş avatar NatuPaiano avatar  avatar Mahamed Mahad avatar  avatar Weipeng Qi avatar Simon G. Tsegay avatar Infant Ajay avatar Abhishek Sah avatar Jeremiah Fortner avatar Beka Zandukeli avatar Borja Yanes avatar Will avatar Andreas Jacob avatar Raihan Muhammad avatar Muhamad Zainal Arifin avatar Andy D. Prasetyo avatar Nusendra Hanggarawan avatar Ridwan avatar Nguyễn Văn Khương avatar Getsemani avatar Jake Schaffer avatar John Owen Nixon avatar Huzaifa Khan avatar Jeff Andrews avatar Owen Boreham avatar Chien. avatar  avatar Vlatkovic Bojan avatar Ben Pearce avatar Yuriy Dolganov avatar Gonçalo avatar Dovydas avatar Keaton Roux avatar Le Thanh Viet avatar Wonjang Son avatar  avatar Aghniya Abdurrahman Mannan avatar Yönet avatar Jiyoon Jang avatar Dan McNeil avatar Firmansyah Yanuar avatar Aniket More avatar Robot Zero avatar Willian Duarte de Andrade avatar  avatar Thierry Skoda avatar Christopher Urquidi avatar Dudu Popkhadze avatar Emmanuel avatar Nguyen Danh Nam avatar Kev Mancer avatar  avatar Jasjit Singh Dhanoa avatar Muhammad Abu 'l-Gharaniq avatar AlpoxDev avatar  avatar  avatar  avatar  avatar Blake Howe avatar Anton Begehr avatar Panji Ahmad Nurhusni avatar Ghoul avatar Michael Demarais avatar

Watchers

James Cloos avatar Michael Demarais avatar Simon Stern avatar TurboDogg avatar  avatar J avatar Reza Babaei avatar swyx avatar Jesse Katsumata avatar Anton Kulyk avatar Alexei Accio avatar Thomas Zhou avatar  avatar Fatma Nur Afyoncu avatar

react-native's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.