Welcome To Catalee – A mobile React Native master architect listing app template.

Firstly, a big thanks for purchasing this template, your support is truly appreciated!

This document covers the installation and use of this template and often reveals answers to common problems and issues – read this document thoroughly if you are experiencing any difficulties. If you have any questions that are beyond the scope of this document, feel free to pose them in the dedicated support section.

Getting Start

System Requirements


Make sure you have a recent version (15.11 or later) of Node installed globally. We recommend installing Node and Watchman using Homebrew. Run the following commands in a Terminal after installing Homebrew:

brew install node 
brew install watchman 

React Native Cli

Node comes with npm, which lets you install the React Native command line interface. This develop tool is using for React Native Cli

Run the following command in a Terminal:

npm install -g react-native-cli 

Getting Start With React Native CLI

After unzip the download pack, you’ll found a source folder with all the files. Open a Terminal in source folder and run command

Terminal after installing
Catalee - Source

To delete package-json.lock, node_modules, ios Pods and podfile.lock and run npm install and pod install

npm run all 

To delete ios Pods and podfile.lock and re-install pod then rebuil on iOS

npm run pod 

Build .AAB file and view in Finder

npm run build-aab 

Build .APK file and view in Finder

npm run build-apk 

Clear cache server and watchman

npm run restart 


Install node modules

cd ./source 
npm install 

Install cocoapods

sudo gem install cocoapods 
cd ./ios 
pod update 
pod install 

Link libraries, fonts and resource icons

npx react-native link

Run with Ios Simulator by the command

open -a Simulator 
npx react-native run-ios 

Using your Xcode and open file ./source/ios/Catalee.xcworkspace and do follow steps below

  • Select your simulator device
  • Build project with simulator and your enjoy your development
Catalee – IOS Simulator


Before getting started, please read thoroughly this React Native official docs for how prepare with Android development
After you finished setup for Android, we will move to next step

Install node modules

cd ./source 
npm install 

Link libraries, fonts and resource icons

npx react-native link 

Start a development server by the command

npx react-native start 

Using your Android Studio (3.5.3 or last version) and build project with folder ./source/android

Catalee – Android Studio Build

After then please do following steps below

  • Step 1: ADM Manager – Install your virtual devices for use
  • Step 2: Sync project with Gradle files
  • Step 3: Select virtual device and Run your application
Catalee – Android Studio Build with Virtual Device

Additional development tools

Visual studio:

Post man:





File Structure

This is the architect of the app

Note: Import your js file to index.js in each folder in order to use it

Catalee – Export components


File locate: ./src/api/..

  • Network.js: all images use for the app


File locate: ./src/components/..

Common components that could be re-used in your app: Button, Icon, AppText, AppImage, Input, PopUp, …


File locate: ./src/imageAssets/..

Store all your images, animation json here.Declare it in index.js to use it across the app


File locate: ./src/languageJson/..

Store all your translation here
./src/languageJson/fr.js ...

  • LanguageNameList.js: Language name will be shown in settings. See example below:
export default {    
    en: 'English',
    vi: 'Tiếng Việt',
    fr: 'Française',
Catalee – Choose language


File locate: ./src/navigation/..

  • AppContainer.js: The app Navigation architecture. Including AppContainer (the NavigationContainer), TabStack (bottom tabs stack), StackScreen (all the screens stack)
  • Navigator.js: Common navigation function (navigate, showLoading, hideLoading, goHome ...)


File locate: ./src/redux/..

  • ./src/redux/actions: Store redux action
  • ./src/redux/constants: Action name constants
  • ./src/redux/reducers: Redux reducers
  • configureStore.js: Configuration for redux and combineReducers

With React Native template, we’re not focus much about redux, we just make sample authentication as temp for control simple login screen


File locate: ./src/screens/..

All your screens will go here


File locate: ./src/utils/..

Commons function for use in the app will be put here, So if you develop or add more common functions, just add it here !

  • Colors.js: Declare all colors here
  • CommonUtils.js: Common calculations functions
  • Spacing.js: Common spacing
  • Themes.js: Declare themes color for dark and light
  • ...

Themes and Styling

Currently, the app support 2 themes - Light and Dark


Catalee – Light Theme

Catalee – Dark Theme

You can change the theme prop dynamically and all the components will automatically update to reflect the new theme. Open file ./app/utils/Themes.js

The main color palettes following properties:

  • default
  • background
  • text
  • border
  • placeholderTextColor
Catalee – Theme Color

How to use Themes colors

import { useTheme } from "@react-navigation/native"
export default Component = () => {    

    const { colors } = useTheme(); 

    let backgroundColor = colors.background; 

In this example, the backgroundColor will be '#f7f5f5' in Light theme and '#2b2d2e' in Dark theme

Have a look and compare at the Catalee – Theme Color picture above


File locate: ./src/utils/Colors

The template are using these static colors, you can add more here

If you want to customize colors or for matching with your business colors. Just refer more with websites below for pickup right color palettes


To maintain clean and consistent typography your application, we support define main StyleSheet following ./src/utils/Constants.js

export const Typography = StyleSheet.create({ 
    header: { 
        fontSize: FONT_SIZE.XXXL,  
        fontWeight: "400"
    title1: { 
        fontSize: FONT_SIZE.XXL, 
        fontWeight: "400"
    title2: { 
        fontSize: FONT_SIZE.XL, 
        fontWeight: "600"
    title3: { 
        fontSize: FONT_SIZE.L, 
        fontWeight: "600"
    headline: { 
        fontSize: FONT_SIZE.XM, 
        fontWeight: "600"
    body1: { 
        fontSize: FONT_SIZE.XM, 
        fontWeight: "400"
    body2: { 
        fontSize: FONT_SIZE.M, 
        fontWeight: "500"
    subhead: {
        fontSize: FONT_SIZE.M, 
        fontWeight: "400"
    caption1: { 
        fontSize: FONT_SIZE.S, 
        fontWeight: "500"
    caption2: { 
        fontSize: FONT_SIZE.XS, 
        fontWeight: "500"

How to use common StyleSheet for other StyleSheet ?

import { Colors, Constants } from "@utils"
export default StyleSheet.create({    
    textDefault: { 
        ...Constants.Typography.header, // Typography > header  
        color: Colors.black_05, 
        fontSize: Constants.FONT_SIZE.M 


To maintain clean and consistent font size your application, we support define common font size following ./src/utils/Constants.js

const FONT_SIZE = { 
    XS: 10
    S: 12
    M: 15
    XM: 18
    M: 20
    XL: 22
    XXL: 24
    XXXL: 28

How to use common FontSize for other StyleSheet ?

import { Colors, Constants } from "@utils"
export default StyleSheet.create({    
    textDefault: { 
        color: Colors.pink_08, 
        fontSize: Constants.FONT_SIZE.XL // FontWeight > semibold  


To maintain clean and consistent spacing your application, we support define common spacing following and you can add more here ./src/utils/Spacing.js

Catalee – Spacing utils

How to use common Spacing?

import { Spacing } from "@utils"
export default Component = () => {    

    const marginTop = Spacing.L; 

    const paddingBottom = Spacing.M * 2; 

    const height = Spacing.windowHeight * 0.5; 

    const containerWidth = Spacing.windowWidth; 


Common radius is in ./src/utils/Radius.js

export default {    
    XXS: 2
    XS: 4
    S: 8
    M: 12
    L: 16
    XL: 24

How to use common Radius?

import { Radius } from "@utils"
export default Component = () => {    

    const topLeftRadius = Radius.M; 

    const bottomRightRadius = Radius.S; 

Additional Components Demo Usage

This is a demo screen

Here, you'll find all main components are listed with very details instruction on how to use them, download the template now to explore and do experiments

Also, you'll find comment instruction all over the source code

From Home navigate to Profile -> Settings -> Demo, here is a short demo video:

The main components:

  • Header
  • AppText
  • AppImage
  • Button
  • Skeleton
  • Input
  • ColumnDealItem
  • LargeDealItem
  • Popup
  • Loading
  • Icon
  • RowItemList

Google Firebase

Set up Google Firebase


Go to press Add App and select platform iOS to create new iOS Firebase app

Catalee – Create Firebase app (IOS)

Download the GoogleService-Info.plist

Catalee – Create and download GoogleService-Info.plist (IOS)

Move the GoogleService-Info.plist to ./ios/ and rebuild

Catalee – GoogleService-Info.plist (IOS)


Go to press Add App and select platform Android to create new Android Firebase app

Catalee – Create Firebase app (Android)

Download the google-services.json

Catalee – Create and download google-services.json (Android)

Move the google-services.json to ./android/app/ and rebuild

Catalee – google-services.json (Android)

Remote Configs

Firebase Remote Config is a cloud service that lets you change the behavior and appearance of your app without requiring users to download an app update at no cost. You'll see an update in realtime

Note: Contact me with your email. I'll send you invitation to the Google Firebase project

This template currently implemented these configs below, you can free to add more to customize the user experiences

  • tabs_bar: Configs how many tab bar are shown
  • refer_friends_benefits: Show list of benefits in Friends screen
  • login_input_regex: Regex for input in log-in screen
  • categories: Categories in Home screen
  • animated_suggestions: Animating suggestions bar at home

Let's watch these demo video:

In this video, we just added 2 new Cafe and Fitness to the categories list. After reloading app, the list show 2 newly added category to the front of the list according to the order in the array

In this 2nd demo, we added the 5th tab Event to the Tab Bar list. After reloading app, it show the Event tab

Remote configs is located in ./src/utils/Configurations.js init in ./src/navigation/AppContainer.js

If the result true new configs were retrieved from the backend and activated.
Else if the result false no new configs were fetched from the backend, and the local configs were already activated

Catalee – Init remote configs

How to add parameters to Remote Configs

Go to and select your Firebase app. Then select Remote Configs then Add Parameter

Catalee – Add parameter to remote configs

Fill the all the info and then Save
Note: Default value can be Object or Array

Catalee – Create parameter

Press Publish changes and reload the app. You'll get new configs

Catalee – Publish changes

How to use Remote Configs

Import Configurations from '@utils'

The function getConfig is a Promise function take 1 string params as the config's name and return the configs

Catalee – Get config

The function getAllConfigs is a Promise and return all the configs

Catalee – Get all configs

Catalee – Remote configs example response of the .getConfig('categories')


Deep links are a type of link that send users directly to an app instead of a website or a store. They are used to send users straight to specific in-app locations, saving users the time and energy locating a particular page themselves – significantly improving the user experience.


Try open this in Safari simulator already installed Catalee dealcatcher://MyVoucherTab?tab=1, dealcatcher://Settings or dealcatcher://ProfileTab


Run adb shell am start -W -a android.intent.action.VIEW -d "[ put your URI prefix in here ]" [package name]

Example: adb shell am start -W -a android.intent.action.VIEW -d "dealcatcher://ProfileTab?tab=1" com.dealcatcher

How to use Deeplink:

Deeplink format: dealcatcher://{screenName}

Example: dealcatcher://HomeTab

How to open Deeplink with params:

Deeplink format: dealcatcher://{screenName}?{paramkey1}={paramValue1}&{paramkey2}={paramValue2}

The ? to separate screen name from params. The & to separate param from param

Example: dealcatcher://MyVoucherTab?id=0856539332&name=a_Byte

export default MyVoucher = (props) => {    

    const deeplinkParams = props.route?.params; 

    // deeplinkParams = {"id":"0856539332","name":"a_Byte"}  

Change the deeplink name


Using your Xcode and open file ./ios/Catalee.xcworkspace

Catalee – Change Deeplink name (IOS)


Open file ./android/app/src/main/AndroidManifest.xml and replace Catalee with your app name

<data android=:scheme="dealcatcher"
Catalee – Change Deeplink name (Android)

App Name, App Icon, Splash screen & GoogleMap Key

Change the app name


Using your Xcode and open file ./ios/Catalee.xcworkspace

Catalee – Change App Name (IOS)


Open file ./android/app/src/main/res/values/strings.xml and replace Catalee with your app name

<string name="app_name">Catalee</string
Catalee – Change App Name (Android)

Change the app Bundle ID


Using your Xcode and open file ./ios/Catalee.xcworkspace

Catalee – Change Bundle ID (IOS)


Open source code by your editor and searching “com.dealcatcher” in folder ./android/… then modify it

Catalee – Change Bundle ID (Android)

Change the app Icon

Note: Keep the same file name

You can use or to make your App Icon for both iOS and Android


Using your Xcode and open file ./ios/Catalee.xcworkspace

Catalee – Change Icon (IOS)


Navigate to ./android/app/src/main/res/.. and put your icon to the correct resolution

Catalee – Change Icon (Android)

Change the SplashScreen

You can use to make your Splash screen for both iOS and Android

Note: Keep the same file name


Using your Xcode and open file ./ios/Catalee.xcworkspace

Catalee – Change SplashScreen (IOS)


Navigate to ./android/app/src/main/res/.. and put your splashscreen to the correct resolution

Catalee – Change SplashScreen (Android)

Change GoogleMap Key

First please check how to register GoogleMap key from
Search in project exist GoogleMap key AIzaSyAMQ1rmXB8Sh2O44sXuf84tEokgRSwoBJU
File locate
– Ios: ./ios/Dealcathcer/AppDelegate.m
– Android: ./android/app/src/main/AndroidManifest.xml


Catalee – Change GoogleMap Key (IOS)


Catalee – Change GoogleMap Key (Android)


Dose it connect any API ?

No, It dose not. It just included template only. We do not connect any API. You have to develop by yourself for matching with your biz.

Dose it collection user information ?

No, It dose not. The mobile template application just simple application with UI/UX.

Dose it use 3rd party for develop UI/UX like React NativeBase, React Native Elements ?

No, It dose not. It is using pure React Native for develop. If you would like to include React NativeBase or React Native Elements … You can do that.

Can I release the app to both iOS and Android?

Yes, as this is made by React Native framework which support to release for both iOS and Android, please discover more the framework from

Will I get the free upgrade on next coming version ?

Yes, you will get the free upgrade with more awesome features coming. You will get the notify email for new version update on stores.


Support Issue

Any trouble or concern, feel free to contact me. I'll reply ASAP

Source and Credit

We based on pure React Native for develop travel template app.

We have used the following plugins, fonts & images. All fonts, images, icons used in this template are free for commercial use.


Once again, thank you so much for purchasing this theme.

As I mentioned at the beginning, We’d be glad to help you if you have any questions relating to this theme. We

I’ll do our best to assist.

Rate for us

Don’t forget rate for use via


Change Logs

v1.0.1 – 23 Oct 2021

- Update UI
- Improve performances

v1.0.0 – 11 Oct 2021

First release