React Native Typescript Boilerplate

Maintainer Le Anh Duc[email protected]

---

Features

1. React-Native-Dom (RND) & React-Native-Web (RNW)
2. i18next for multi languages + localization
3. Typescript
4. React-Navigation
5. Apollo + GraphQL
6. Formik

Getting Started

---

Quick Start

git clone http://github.com/anhdle14/rn-boilerplate.git
cd rn-boilerplate
npm install -g react-native-cli react-devtools
npm install

Edit app.json + package.json

App.json

{
  "name": "${nameOfYourAppHere}",
  "displayName": "${displayNameOfYourAppHere}"
}

package.json

{
  "name": "${nameOfYourAppHere}",
}

Creating iOS + Android

react-native eject react-native upgrade react-native link

Fix requirements

$EDITOR android/app/build.gradle

defaultConfig {
  minSdkVersion 18
  ...
  }

Start

npm run native:start # For Packager & Metro Bundler
npm run native:ios # For MacOS, iPhone Simulator
npm run native:android # For Android Simulator

Usage

---

Writing forms

Use Formik for forms

• Formik Docs

Quick Start

// Formik x React Native example + Typescript
import * as React from "react";
import { Button, TextInput, View } from "react-native";
import { Formik } from "formik";

interface IProps {
  handleChange: (value: string) => void;
  handleBlur: (value: string) => void;
  handleSubmit: () => void;
}

export const MyReactNativeForm = (props: IProps) => (
  <Formik
    initialValues={{ email: "" }}
    onSubmit={values => console.log(values)}
  >
    {props => (
      <View>
        <TextInput
          onChangeText={props.handleChange("email")}
          onBlur={props.handleBlur("email")}
          value={props.values.email}
        />
        <Button onPress={props.handleSubmit} title="Submit" />
      </View>
    )}
  </Formik>
);

UI/UX

Recommend using React Native Paper

• React Native Paper Docs

Icons

Recommend using react-native-vector-icons

• Docs
• GitHub

For Getting Data from server

Using Apollo Client + GraphQL (Update...)

Apollo Docs GraphQL

Typescript

1. Learn TypeScript in One Video

Folder Structure

Atomic Design

Popularly known within the design world, Atomic Design helps to build consistent, solid and reusable design systems. Plus, in the world of React, Vue and frameworks that stimulate the componentization, Atomic Design is used unconsciously; but when used in the right way, it becomes a powerful ally for developers.

General Guideline about React

Follow Airbnb guidelines Here

Naming Conventions

The convention

[Domain]|[Page/Context]|ComponentName|[Type][] is optionals

To use with Atomic Design => [Level5][level4]ComponentName[Level3]

Folder Location

---

# tree ./src
./src
├── libs
│   ├── components
│   │   ├── atoms # Level 1
│   │   ├── molecules # Level 2
│   │   └── organisms # Level 3
│   │   └── templates # Level 4
│   ├── screens # Level 5
│   └── services # All other libs
│       ├── apollo
│       ├── i18n
│       └── routes
└── resources # Resource Assets
    └── images

---

References

1. Awesome TypeScript
2. Awesome React, React-native

Docs

• Project Structure
• How React-Native on the Web possible?

Credits

• vincentriemer [email protected] - react-native-dom