haiquy572001 / BoilerplateReactNative

Boilerplate react native with redux, saga, reanimated, immer,...

Welcome to the Boilerplate React Native

🎆 Clean and minimalist React Native template for a quick start with TypeScript and so much more components.

Current version: 0.68.2

⭐ Features

• Elegant usage directly within the RN-Boiler Cli
• Fastlane (App center included)
• Boot Splash
• Blur Hash
• Consistent with the default React Native template
• Minimal additional dependencies
• Lots of built-in components
• Native modules
• Multiple schema ios(Dev/Prod as default)
• Multiple productFlavors android (dev/prod as default)

Base config (Now u can config on env)

• Change App name APP_DISPLAY_NAME on env/(.dev/.prod)
• Change App id BUNDLE_IDENTIFIER on env/(.dev/.prod)
• Change App version VERSION_NAME on env/(.dev/.prod)
• Change App build number VERSION_CODE on env/(.dev/.prod)
• Change App URL API_URL on env/(.dev/.prod)

Change app icon by env

• Android Source sets
• IOS follow below step:
  • Create new App Icon assets
  • Go to Target => Build Settings => Assets Catalog Compiler - Options
  • Change Primary App Icon Set Name (App Icon assets name)
  • This will change icon for current schema

▶️ Usage

npx rn-boiler MyApp

Args command:

• skip install deps:

--skipInstall

• skip init git:

--skipGit

Preview

## Native module

import {<function_name>} from "@common" 

• getVersion : Get app version

  const version = getVersion(); 

• getAppName : Get app name

  const appName = getAppName(); 

• getDeviceId : Get device id

  const deviceId = getDeviceId(); 

• getBuildNumber : Get build number

  const buildNumber = getBuildNumber(); 

• setAppBadges : Set app badges (IOS)

  const countBadges = 10; // 0 to clear
  setAppBadges(countBadges); 

• clearNotification : Clear notification on notification center

  clearNotification(); 

• clearCache : Clear cache folder

  clearCache(); 

• checkChannelExist : Check channel Exist (Android)

  const exist: boolean = await checkChannelExist(channelId); 

• deleteChannel : Delete channel (Android)

  deleteChannel(); 

• createChannel : Create channel (Android)

  type Channel = {
  channelId: string;
  channelName: string;
  channelDescription?: string;
  playSound?: boolean;
  soundName?: string; // "default"
  importance?: "DEFAULT" | "HIGH" | "MAX" | "LOW" | "MIN" | "NONE" | "UNSPECIFIED" | undefined; // default HIGH
  vibrate?: boolean;
  };
  createChannel(channel: Channel); 

• fixRotation : Fix image rotate when upload

  type Image = {
  uri: string;
  width?: number;// default 600
  height?: number;// default 800
  };
  type ImageResponse = {
  uri: string;
  name: string;
  };
  const fixedImage = await fixRotation(image: Image); 

• registerPhotosChanges : Register photos changes (IOS) (1)

  registerPhotosChanges(); 

• usePhotosPermissionChange : Hook to check photos permission changes (IOS). ex: Photo selected changes when ask permission (1)

  usePhotosPermissionChange(() => {
  console.log("Changed");
  });

(1): Open AppModule.swift, uncomment code to use 2 function

Library

• react-navigation-v6

• axios

• react-hook-form

• react-native-mmkv

• yup

• react-native-bootsplash

• react-native-reanimated-v2

• redux

• redux-listener-middleware

• react-native-fast-image

• react-fast-compare

  ... and more

🔖 License

This project is MIT licensed.