/rn-boilerplate

React Native + TypeScript + React Native Dom + i18n + GraphQL/ Apollo

Primary LanguageTypeScript

React Native Typescript Boilerplate

Maintainer Le Anh Ducanhdle14@hotmail.com

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

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

Icons

Recommend using react-native-vector-icons

For Getting Data from server

Using Apollo Client + GraphQL (Update...)

Apollo Docs GraphQL

Typescript

  1. Learn TypeScript in One Video

Folder Structure

Atomic Design

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

Credits