• Features
• Preparation
• Installation
• File Structure
• Build APK and IPA
• About the Code
• Change Log
• Source & Credits
• Need Help ?

Membership

• Personal info, can edit member personality like Profile Picture, Name, And Phone.
• Show member level and points
• Reset Password

News

• Show List and detail news of your business

Promotion Offers/Voucher

• Beauty voucher discount layout, that support percentage and nominal.

Branch Salon/Outlet

• Your loyal customer can see all of your salon branch, and can choose which location is closest to them.
• Integrate with Google Maps
• Customer Review and Rating

Skin Journal

• This is a Special Feature. With this feature, your business will support online consultation to your member.
• Member can see calendar of progress, and each day can upload selfie for consultation.
• Member can chat with they skin consultan.

Weekly Gallery

• This is how to yo show portofolio of your beauty. You can show the result after treatment in image or short video.

Notification

• Show notification about Reminder Reservation, Transaction Status, and Company Information.

Treatment and Product

• This template is support service and product.
• Product will have quantity for order.

Shopping Cart

• Template support e-commerce for buying a product or treatment.
• For treatment, your customer can select the date when they will come to your Salon.
• Customer can select branch of your salon and add voucher for discount.
• Multiple payment support like online payment and pay at store.

Transaction

• The transaction is devided into 2 parts, first is Book and second is Done. It can integrate with notification like reminder.
• Book status is for unfinished transactions. Customer can cancel the appointment at this moment.
• Done status is for finished transaction, canceled transaction or expired transaction.

Others

• Sign In Form with email and password.
• Forgot Password Form with PIN protection.
• Sign Up Form.
• Language option
• About Us
• F.A.Q.

Figma File for FREE!

• Yes, you read this. We provide figma files for free.
• We've created a clean figma file using components based that make you easy to modify to your wonderful project.

• android: In this folder all android app related folders and files are included. For generating an APK, you need to open this folder in android studio.
• ios: In this folder all ios app related folders and files are included. For generating an IPA file, you need to open this folder in Xcode.
• node_modules: All npm packages are located here. Once you run npm install or yarn install command, then all packages will be downloaded and include here.
• package.json: This file contains all packages details and its dependencies.
• src/components: This folder contains all components files which are used in pages.
• src/app: This folder contains all pages, models, navigation, actions, reducers, services, common, and main. Below is the structure of the folder.
• src/app/main: This folder contains all screens, navigation, Theme.tsx and App.tsx file.
• src/app/main/navigation: This folder contains RootNavigator.tsx, MainNavigator.tsx, TabNavigator.tsx, ModalNavigator.tsx, and RootNavigation.tsx, import RootNavigator.tsx file in App.tsx file.
• src/app/main/screens: This folder contains all screens files which are used in pages.
• src/app/main/App.tsx: This is the main file, it renders the root navigator (RootNavigator.tsx file).
• src/app/main/Theme.tsx: This file contains all constants code for attribute style like colors, spacing, borderRadius, textVariant, and breakpoints.
• src/app/pages: This folder contains all pages files.
• src/app/models: This folder contains all models files.
• src/app/services: This folder contains all services which are used for request API.
• src/app/actions: This folder contains all actions which are used for dispatch Redux.
• src/app/reducers: This folder contains all reducers which ared user for state management Redux.
• src/app/common: This folder contains Icons.ts, Fonts.ts, Utils.ts, Dummy.ts which used in the app.

Build APK

1. Generating Keystore

   You can generate a private signing key using keytool

   • Windows

     On Windows keytool must be run from C:\Program Files\ Java\jdkx.x.x_x\bin

     keytool -genkeypair -v -storetype PKCS12 -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
     
     
   • macOS
     sudo keytool -genkey -v -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
     
     
2. Setting up Gradle Variables
   • Place the my-upload-key.keystore file under the android/app directory in your project folder.

   • Edit the file android/gradle.properties, and add the following (replace ***** with the correct keystore password, alias and key password).

     MYAPP_UPLOAD_STORE_FILE=my-upload-key.keystore
MYAPP_UPLOAD_KEY_ALIAS=my-key-alias
MYAPP_UPLOAD_STORE_PASSWORD=*****
MYAPP_UPLOAD_KEY_PASSWORD=*****

     
     
3. Adding signing config to your app's Gradle config

   The last configuration step that needs to be done is to setup release builds to be signed using upload key. Edit the file android/app/build.gradle in your project folder, and add the signing config.

   ...
android {
...
defaultConfig { ... }
signingConfigs {
release {
if (project.hasProperty('MYAPP_UPLOAD_STORE_FILE')) {
storeFile file(MYAPP_UPLOAD_STORE_FILE)
storePassword MYAPP_UPLOAD_STORE_PASSWORD
keyAlias MYAPP_UPLOAD_KEY_ALIAS
keyPassword MYAPP_UPLOAD_KEY_PASSWORD
}
}
}
buildTypes {
release {
...
signingConfig signingConfigs.release
}
}
}
4. Generating the release APK or AAB

   Run the following in a terminal:

   cd android
./gradlew assembleRelease # apk
# ./gradlew bundleRelease # aab
   
   

   The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk

Build IPA

1. Building an .app Bundle

   • Run the following in a terminal:

     cd ios
xed . # open application project with xcode
     
     
   • Select your product's device target:
     On a real device: Generic iOS Device or Any iOS Device (arm64).
     On a simulator: Select any available simulator.
   • In the Product menu, select Clean Build Folder.
   • In the Product menu, select Build.
   • Navigate to your Xcode project's Products directory and find the generated .app file.
2. Building an .ipa from an .app Bundle
   • Create an empty directory with the name BeautySalon.
   • Move the .app file inside the BeautySalon directory.
   • Compress the BeautySalon directory into an archive (.zip file) and give it a new name with .ipa appended to the end of the file name.
3. Building an .ipa File

   You can use any of the existing methods of distribution for your iOS app, except for the App Store type. This means that you can choose any of the three other export methods: Ad Hoc, Enterprise, or Development.

   • Open your app project in Xcode.
   • Select Generic iOS Device or Any iOS Device (arm64) as your project's device target.
   • In the Product menu, select Clean Build Folder.
   • In the Product menu, select Archive. When the archiving process completes, you'll see your app listed under Archives.
   • Select your app and click Distribute App.
   • When prompted for an Distribution method, select Ad Hoc, Enterprise, or Development.
   
   
   
   
   
   • Set these Distribution options:
   
   
   
   
   
   • Select your Distribution Certificate and Provisioning Profile (Automatic or Manual). This will generate the .ipa file.
   
   
   
   
   
   • When the file generation process completes, click Export and choose where to save the .ipa file.

Only available when you buy this item.

Version 1.0 | Aug 19, 2021

[Release]: Initial release;

Plugin and Code

• Reanimated v2
• React Navigation v6
• React Native Gesture Handler
• React Native Redash
• React Native Blur
• Shopify Restyle
• React Native Svg
• React Native Camera
• React Native Video
• React Native Maps
• React Native Linear Gradient
• React Native Modal
• React Native Bottom Sheet
• React Native Drop Shadow
• React Native Get Location
• Redux
• React Redux
• Redux Thunk
• Redux Persist
• Async Storage
• Moment JS
• Date Fns
• Lodash
• Axios

Free Template Web

• Gentelella