The Mazi React Native UI KIT supports both React Native Cli and Expo Cli (Managed Workflow)

System Requirements

NodeJS

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  

Expo Cli

If you prefer Expo Cli more than React Native Cli, this project is also supported. Please run the command below Terminal

npm install -g expo-cli

Please read more official web page for how to use Expo in detail https://docs.expo.io

React Native Cli

Node comes with npm, which lets you install the React Native command line interface. Run the following command in a Terminal:

npm install -g react-native-cli  

Getting Start With Expo CLI

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

cd ./source-expo
npm install 
expo start

After you run the command successfully then you can find the result like the image below.

Please install the Expo demo app via Apple Store or Play Store. Then use your phone scan the QR code above for demo the Mazi app (please make sure your phone and your computer are using same the network connection)

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

IOS

Install node modules

cd ./source  
npm install  

Install cocoapods

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

Link fonts and resource icons

npx react-native link  

Run with Ios Simulator by the command

open -a Simulator  
npx react-native run-ios  

Android

Before getting started, please read thoroughly this React Native official docs for how prepare with Android development https://facebook.github.io/react-native/docs/getting-started
After you finished setup for Android, we will move to next step

Install node modules

cd ./source  
npm install  

Link 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

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

Video Installation Guide

We also made video for how to set up for Ios and Android

Config Files

File locate: ./app/config/..

• color.js: config theme color for the app
• images.js: all images use for the app
• setting.js: common setting value
• theme.js: common basic StyleSheet
• typography.js: define common FontFamily, FontWeight, Typography system

Components

File locate: ./app/components/..

Common components that could be used many times in your app: Button, Icon, Text, Filter Sort, Text, Start Rating …

Navigation

File locate: ./app/navigation/..

• index.js: Define first loading screen
• main.js: Define default screen & router for link to other screens (Home, Category, Place, Wishlist, Account, Settings, Change Password …)

Templates

File locate: ./app/screens/..

Then navigation has defined in ./app/navigation/main.js will link with screens locate in folder ./app/screens/..

All template design of the app are locate in here (./app/screens/..). You could change or re-structure by matching with your own project structure design.

Assets

File locate: ./app/assets/..

You can store images or other file resource in this folder

Data

File locate: ./app/assets/data/..

This project doesn’t connect APIs or backends instead of json data. All display data of this project are using a JSON file (*.json). You can checkout and modify or add more data directory listing if you want

Redux

File locate:

• ./app/store/index.js
• ./app/actions/..
• ./app/reducers/..

Contain main action and reducers

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

Utils

File locate: ./app/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 !

Font Family

The default font family name “Raleway” are being used for this template. If you need change or a custom font to be the prettiest? You’ll need the .ttf files for all supported styles (thin, ultraLight, light, regular, medium, semibold, bold, heavy, black …). Here are the few steps you need to add it.

Add more font family in folder ./app/assets/fonts/..

Example: Download and add more font Roboto [download here]

After added new font, open your terminal and run

react-native link  

Change default font name (You can keep default font and add more prop with new font). Open file ./app/config/typography.js

export const FontFamily = {  
    default: "Roboto"  
};  

Color

The template are using color palette following format by image below

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

export const BaseColor = {  
    primaryColor: "#FF2D55", // primary color for your app, usually your brand color.  
    darkPrimaryColor: "#F90030", // color is darker base on BaseColor.primaryColor  
    lightPrimaryColor: "#FF5E80", // // color is lighter base on BaseColor.primaryColor  
    accentColor: "#4A90A4", // secondary color for your app which complements the primary color.  
    textPrimaryColor: "#212121", // text color for content.  
    textSecondaryColor: "#E0E0E1", // text color for content.  
    grayColor: "#9B9B9B", // gray color, just common using for app  
    darkBlueColor: "#24253D", // dark blue color, just common using for app  
    dividerColor: "#BDBDBD", // color for separator   
    whiteColor: "#FFFFFF", // white color  
    fieldColor: "#F5F5F5", // common field color like input, text area  
    yellowColor: "#FDC60A", // just another color use for the app  
    navyBlue: "#3C5A99" // just another color use for the app  
};  

The main color palettes following properties:

• BaseColor (object)
  • primaryColor
  • darkPrimaryColor
  • lightPrimaryColor
  • accentColor
  • textPrimaryColor
  • textSecondaryColor

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

• https://materialpalette.com
• https://colorhunt.co

Typography

To maintain clean and consistent typography your application, we support define main StyleSheet following ./app/config/typography.js

export const Typography = StyleSheet.create({  
    header: {  
        fontSize: 34,  
        fontWeight: FontWeight.regular,  
        fontFamily: FontFamily.default  
    },  
    title1: {  
        fontSize: 28,  
        fontWeight: FontWeight.regular,  
        fontFamily: FontFamily.default  
    },  
    title2: {  
        fontSize: 22,  
        fontWeight: FontWeight.regular,  
        fontFamily: FontFamily.default  
    },  
    title3: {  
        fontSize: 20,  
        fontWeight: FontWeight.regular,  
        fontFamily: FontFamily.default  
    },  
    headline: {  
        fontSize: 17,  
        fontWeight: FontWeight.regular,  
        fontFamily: FontFamily.default  
    },  
    body1: {  
        fontSize: 17,  
        fontWeight: FontWeight.regular,  
        fontFamily: FontFamily.default  
    },  
    body2: {  
        fontSize: 14,  
        fontWeight: FontWeight.regular,  
        fontFamily: FontFamily.default  
    },  
    callout: {  
        fontSize: 17,  
        fontWeight: FontWeight.regular,  
        fontFamily: FontFamily.default  
    },  
    subhead: {  
        fontSize: 15,  
        fontWeight: FontWeight.regular,  
        fontFamily: FontFamily.default  
    },  
    footnote: {  
        fontSize: 13,  
        fontWeight: FontWeight.regular,  
        fontFamily: FontFamily.default  
    },  
    caption1: {  
        fontSize: 12,  
        fontWeight: FontWeight.regular,  
            fontFamily: FontFamily.default  
        },  
        caption2: {  
            fontSize: 11,  
            fontWeight: FontWeight.regular,  
            fontFamily: FontFamily.default  
        },  
        overline: {  
            fontSize: 10,  
            fontWeight: FontWeight.regular,  
            fontFamily: FontFamily.default  
        }  
    });  

How to use common StyleSheet for other StyleSheet ?

import { BaseColor, Typography, FontWeight } from "@config";  
export default StyleSheet.create({     
    textDefault: {  
        ...Typography.headline, // Typography > headline   
        color: BaseColor.whiteColor,  
        fontWeight: FontWeight.semibold  
    }  
);  

FontWeight

To maintain clean and consistent font weight your application, we support define common font weight following ./app/config/typography.js

export const FontWeight = {  
    thin: "100",  
    ultraLight: "200",  
    light: "300",  
    regular: "400",  
    medium: "500",  
    semibold: "600",  
    bold: "700",  
    heavy: "800",  
    black: "900"  
};  

How to use common FontWeight for other StyleSheet ?

import { BaseColor, Typography, FontWeight } from "@config";  
export default StyleSheet.create({     
    textDefault: {  
        ...Typography.headline,   
        color: BaseColor.whiteColor,  
        fontWeight: FontWeight.semibold // FontWeight > semibold   
    }  
);  

First, please check file ./app/config/setting.js and define your list language support

After then check folder is storing language files ./app/lang/.. . All files are formatted with json data

Change the app name

IOS

Using your Xcode and open file ./source/ios/mazi.xcworkspace and modify information follow image below

Android

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

Change the app Bundle ID

IOS

Using your Xcode and open file ./source/ios/mazi.xcworkspace and change information follow image below

Android

Open source code by your editor and Searching “com.mazi” in folder ./android/… then modify with your new bundle ID

Change the app Icon

IOS

Using your Xcode and open file ./source/ios/mazi.xcworkspace

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 https://facebook.github.io/react-native/docs/getting-started.html

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.

V1.0.4 – 27 July 2021

• Add Wallet and Crypto application
• Add tab overview for apps, screens and components in home screen
• Add function Assistive Touch for choose quickly menu
• Add Kurdish language
• Fix bug and improve UI for E-commerce and News application

V1.0.3 – 16 Mar 2021

• Support Expo Cli (Managed Workflow)
• Update React Native 0.64

v1.0.2 – 11 Otc 2020

• Add module Shopping Card: Product, Shipping, Payment
• Update React Native 0.61.2
• Fix minior bugs for module news

v1.0.1- 14 Jun 2020

• Darkmode
• Multiple language
• Multiple color
• Multiple font style
• RTL Layout (Arabic language)
• React hook style coding
• Update new React Native 0.61.2

v1.0.0- 25 Feb 2020

First release

Support Issue Channel on Github

github.com/passionui/support/issues

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

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

Resources

• Images: unsplash.com
• Icons: iconfinder.com

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

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

Rate for us

Don’t forget rate for use via https://codecanyon.net/downloads

Thanks