react-native-ts-fb-template

React Native Template (RN 0.69.5)

Because of some dependency issues in pods, it's always hard and tricky to import Firebase and GoogleMaps and other services along together in one app, also configuring Navigation, vector-icons, redux and some helpful services will always take time, so basically that's why I created this template

Feedback and comments are always welcome

Of course, this isn't the perfect structure, but It's inspired by NextJS and recommended typescript structure, which will separate components in terms of features, and root pages with some Navigation (which won't be present in NextJS based on its directory routing), and separating services and have wrappers to handle better future changes in dependencies So Please don't hesitate to send me comments and feedback. we can talk about each part and make it better.

• TypeScript
• React Navigation
  • Bottom Tab Bar Navigation
  • Stack Navigation
  • Login State Handler
  • Screen Tracking
• Firebase
  • Analytics
  • Crashlytics
  • Performance
  • Messaging
• Google Maps
• Axios
• React Native Vector Icons
  • MaterialIcons.ttf
  • MaterialCommunityIcons.ttf
  • FontAwesome.ttf
• Redux
  • User Reducer (Handling Login Status and Profile Data)
• Redux Toolkit
• Redux Persist
• Patch Package
• Basic Services:
  • Analytics Service (Firebase analytics wrapper)
  • Notification Service (Firebase messaging wrapper)
  • Auth Service
  • Cache Service (which already integrated to Axios)
  • Error Handler
  • Logger (console wrapper)
  • Event Emitter
  • Storage Service (Async Storage Wrapper)
  • Toast Service (Using react-native-simple-toast)
  • UI Service (Currently Handling Modals)
  • Axios api with interceptors
• Basic Components
  • Page Container
  • Header
  • Badge
  • Button
  • Icon
  • LinedText
  • Loading
  • Modal
  • Tabs
  • TextInput
• Basic Utilities
  • Date utilities (using Moment)
  • File Size calculator
  • String and Currency Helpers

Instructions

• Init react-native project with template

react-native init [project-name] --template https://github.com/MasoudAlali/react-native-ts-fb-template

Configure Firebase

• Configure your project in Firebase Console
• Download your GoogleService-Info.plist and replace (overwrite) it in ios directory
• Download your google-services.json and replace (overwrite) it in android/app directory

Note that we are using 'analytics', 'messaging', 'performance', 'crashlytics' modules you can add or remove any module based on RN Firebase documentation

• for more information about firebase module and how to remove it refer to Firebase Doc

Configure Google Maps

• Configure your project in Google Cloud Panel

  • Be sure that you enable Android Maps SDK and iOS Maps SDK

• Replace retrieved token and replace to below files:

  • [28] "GOOGLE_MAPS_API_KEY" in android/src/main/AndroidManifest.xml
  • [37] "GOOGLE_MAPS_API_KEY" in ios/[project-name]/AppDelegate.mm

• for more information about Google Maps module and how to remove it refer to GoogleMaps Doc

Configure Vector Icons

• For adding or removing fonts just change [85] iconFontNames in android/app/build.gradle

Configure endpoints

• To use auth service requests (login, refreshToken)[^1] you can set your endpoints in config/urlConfigs.ts -> apiEndpoints and set baseApiUrl
• To handle your own logic of login and refreshToken you can modify methods in api/authRequests.ts

Build App

It's base on Fastlane which is simply ruby tool to automate some tasks, it also supports lots of plugins, so you can integrate it easily to different services

• iOS build:

[bundle exec] fastlane ios build

• Android build:

[bundle exec] fastlane android build

Provided Services

Keep in mind that all services are singleton, so default exports are instance of class

• Some services are just wrapper for another library or tool, so the idea is that if you wanted to do some logging or changing base libraries, you don't need to change your whole application in different parts to remove or change something, just change this wrapper service and that's it

For read more about services and details please refer to Services

[^1]: It's simple username, password, captcha values and refreshToken is simply sending token and refreshToken to renew token