rn-structure

rn-structure

Documentation

1. Installation
2. Usage
3. Structure
4. Components
5. Stores
6. Utils
7. Libraries

Installation

Get started with rn-structure by installing the node module with yarn or npm:

Installing (React Native >= 0.60.0)

npm install -g rn-structure@latest

or

yarn global add rn-structure@latest

Installing (React Native == 0.59.x)

npm install -g rn-structure@0.3.1

or

yarn add global rn-structure@0.3.1

Usage

rn-init <project-name>

With custom Bundle Identifier (IOS only. For Android is coming soon or you can use react-native-rename)

rn-bundle <newBundleIdentifier> <project-path>

Note: If you don't enter a specific project-path, the project-path will take the path to the current directory

npm start

npm run android                         # <=> react-native run-android
npm run ios                             # <=> react-native run-ios
npm run SE                              # <=> react-native run-ios --simulator='iPhone SE'

npm run reload                          # <=> adb shell input text 'rr' working reload android build debugging
npm run toggle                          # <=> adb shell input keyevent 82 show toggle

npm run restart                         # <=> react-native start --reset-cache

npm run build:android                   # compile source code
npm run build:ios                       # compile source code

npm run build:release:android           # build file APK release
npm run sync:android                    # clean project android

npm test
npm run coverage

Note: If you have prepared configuration for the release application, you can use the following command to create file apk, ipa.

sh build.sh

Structure

  .
  ├──package.json
  ├──index.js
  ├──debugging:
  │   └──ReactotronConfig.js
  └──src:
      ├──assets:
      │   ├──package.json
      │   ├──index.js
      │   ├──data:
      │   │   ├── ...
      │   │   └──index.js
      │   ├──fonts:
      │   │   └── ...
      │   ├──icons:
      │   │   ├── ...
      │   │   └──index.js
      │   └──images:
      │       ├── ...
      │       └──index.js
      ├──common:
      │   ├── ...
      │   ├──elements:
      │   │   ├── ...
      │   │   └──index.js
      │   └──components:
      │       ├──package.json
      │       ├──index.js
      │       ├──Button
      │       │   └──index.js
      │       ├──Header:
      │       │   └──index.js
      │       ├──Label:
      │       │   └──index.js
      │       ├──Spinner:
      │       │   └──index.js
      │       ├──Switch:
      │       │   └──index.js
      │       └──List:
      │           └──index.js
      ├──configs:
      │   ├──Animations.js
      │   └──index.js
      ├──containers:
      │   ├──package.json
      │   ├──index.js
      │   └──HomePage:
      │       ├──styles.js
      │       └──index.js
      ├──routers:
      │   └───index.js
      ├──stores:
      │   ├──package.json
      │   ├──index.js
      │   ├──actions:
      │   │   ├── ...
      │   │   └──index.js
      │   └──reducers:
      │       ├── ...
      │       ├──init.js
      │       └──index.js
      ├──utils:
      │   ├──package.json
      │   ├──index.js
      │   ├──styles.js
      │   ├──hooks.js
      │   ├──colors.js
      │   ├──strings.js
      │   ├──constants.js
      │   ├──functions.js
      │   ├──fetches.js
      │   ├──asyncStorage.js
      │   └──types.js
      └──App.js

Components

1. Button
2. Header
3. Label
4. List
5. Spinner
6. Switch

Label

example

  <Label.H5 numberOfLines={1} style={styles.titleHeaderContainerStyle} color={'#FFFFFF'}>{`Home`}</Label.H5>

Header

example

  <Header style={styles.header}>
    <Button onPress={this.goBack} source={ICONS.ic_back_white} style={styles.buttonBack} buttonImageStyle={styles.iconButtonBack} />
    <Label.H5 numberOfLines={1} style={styles.titleHeaderContainerStyle} color={'#FFFFFF'}>{`Home`}</Label.H5>
    <Button onPress={this.onPressSetting} source={ICONS.ic_setting_white} style={styles.buttonSetting} buttonImageStyle={styles.iconButtonSetting} />
  </Header>

List

Spinner

example

  <Spinner visible={isSpinning} />

Stores

sagas

    .
    ├──stores:
        ├──package.json
        ├──index.js
        ├──actions:
        │   ├── ...
        │   └──index.js
        ├──reducers:
        │   ├── ...
        │   ├──init.js
        │   └──index.js
        └──sagas:
            ├── ...
            ├──init.js
            └──index.js

Utils

Sound

    .
    ├──utils:
    │   ├──...
    │   ├──audioPlayer.js
    │   └──...
    └──...

#Demo

react-native-vector-icons

    .
    ├──utils:
    │   ├──...
    │   ├──getIconType.js
    │   └──types.js
    └──...

example

type ButtonProps = {
  style: any,
  textStyle: any,
  source: any,
  onPress: Function,
  iconType: string,
  iconName: string,
  iconColor: string,
  iconSize: number,
  children: string,
}

const Button = (props: ButtonIconProps) => {
  const {
    style,
    textStyle,
    source,
    onPress,
    iconType,
    iconName,
    iconColor,
    iconSize,
    children,
  } = props;
  let Icon = getIconType(iconType || 'material');
  return (
    <TouchableOpacity activeOpacity={0.7} onPress={() => onPress()} style={[styles.container, style]}>
      {
        (source) && <Image {...source} style={[styles.icon, { width: iconSize, height: iconSize }]} />
      }
      {
        (iconName) && <Icon name={iconName} size={iconSize} color={iconColor} />
      }
      {
        (children) && <Text style={[styles.text, textStyle]}>{children}</Text>
      }
    </TouchableOpacity>
  );
};

import { IconTypes } from '../types';

<Button iconType={IconTypes.ionicon} iconName={'md-search'} iconColor={'#2D4EF5'} onPress={() => console.log('test')} />

Libraries

UI:

react-native-linear-gradient
react-native-gesture-handler

Stores:

redux
react-redux

Middleware

redux-persist
redux-actions

redux-saga
@redux-saga/is

or

redux-thunk

Navigation

react-navigation@latest

Fetch:

abortcontroller-polyfill

Logging: installing reactotron

reactotron-react-native
reactotron-redux
reactotron-redux-saga

Utils:

moment
lodash.memoize
lodash.isempty
lodash.merge