README.md

⭐ React Native Boilerplate

My favorite React Native template for a quick start with TypeScript.

Dependencies

• React Native Config
• React Navigation v5
• Reactotron
• Redux toolkit
• Firebase Crashlytics
• Axios
• React Native Fast Image
• Module Resolver
• Localize the ReactNative interface
• Formik Build forms in React, without the tears
• React Native multi screen size support
• Icomoon

🎆 Features

Show features

🇻🇳	🔰 Status
Navigation	✅
Login - Sign up	✅
Authenticaion flows	✅
Theme	✅
Localization	✅
Custom fonts	✅
Localization	✅

🍔 Getting Started

🔥 Firebase setup

Show instructions

• iOS

  Add GoogleService-Info.plist for each environment

  ios/<project>/Firebase

• Android

  Add google-service.json for each environment

  android/app/firebase

📮 Firestore setup for Chat function

Show instructions

1. Structure

• User

• Conversations

2. Firestore rules

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /users/{user_id} {
      allow read: if request.auth != null;

      allow write: if request.auth.uid == user_id;

      match /conversations/{document=**} {
        allow read, write: if request.auth != null;
      }
    }

    match /conversations/{conversation_id} {
      allow read: if request.auth != null && request.auth.uid in get(/databases/$(database)/documents/conversations/$(conversation_id)).data.userIds;
      allow write: if request.auth != null && request.auth.uid in get(/databases/$(database)/documents/conversations/$(conversation_id)).data.userIds;

      match /messages/{document=**} {
      	allow read, write: if request.auth != null && request.auth.uid in get(/databases/$(database)/documents/conversations/$(conversation_id)).data.userIds;
    	}
    }
  }
}

🦄 Icomoon

Show instructions

1. Get iconmoon font at https://icomoon.io/app/#/select
2. Select icons you need for your project

3. Download & extract font file

4. Copy into src/components/Icon

   

5. Update icon types

yarn icons

6. Update font on Android + iOS

npx react-native link

🥓 Fonts

Show instructions

1. Add custom fonts you wish to use to

src/theme/fonts

2. Update font on Android + iOS

npx react-native link

3. Update your font family at

src/theme/fonts/index.tsx

📖 Storybook

Unmuted and enjoy 🤣🤣🤣 🇻🇳🇻🇳🇻🇳

storybook-demo.mp4

Show instructions

1. Storybook document - https://storybook.js.org/tutorials/intro-to-storybook/react-native/en/get-started/

2. iOS

yarn istorybook

3. Android

yarn astorybook

4. Use Storybook server (Optional)

yarn storybook

Then reload your simulator or device

📖 React Hook Form

https://dev.to/sankhadeeproy007/using-react-hook-form-with-react-native-part-i-set-up-validation-31ca

Show instructions

📫 Contact

Thuong Nguyen - @mthuong - [email protected]