FashionStore – React Native Shopify Full Integration App Docs

1.Introduction

All the features you will love

  • RN v0.55.4
  • Package lastest version
  • Account pages
  • Bookmark article
  • Image lazy load.
  • Setting layout from Shopify Store
  • Restructure folder
  • OneSignal Push Notification (removed in v1.2)
  • Shopify Full Integration
  • The FashionStore UI
  • Sidebar with multi-level Menu
  • Scroll horizontal multi-leve menu
  • Slider
  • Banner
  • Collection Screen
  • Product detail with multi option variants
  • Cart Screen
  • Checkout Screen
  • Infinite Lazy load
  • Clean code, no bullshit!
  • Best UI/UX Practices

Website & Video:

Supporting websitehttps://support.reactaz.com/fashionstore-react-native-shopify-full-integration-app-docs/

Video demo: https://www.youtube.com/watch?v=HR05YJP0zDA

FashionStore – React Native Shopify Full Integration Demo

2.Installation

2.1.How to install a new source

In order to setup for React Native (RN) template you should connect to the internet and install dependencies library. If you have not chanced to set it up with React Native, please take a look to the document here: https://facebook.github.io/react-native/docs/getting-started.html

Step 1:

  • Unzip package.
  • Open terminal, cd to Mobile_source

cd Mobile_source

Step 2:  Installing

  • Unzip the downloaded code from Code Canyon.
  • Using the terminal, issue the following command.

npm install
This will install all the required modules for your app.

Step 3: Starting the server.

  • To simulate for iOS
    • Method One:
      • Open the project in XCode from ios/[yourProject].xcodeproj
      • Hit button to simulate.
    • Method Two: 
      • In your terminal, type:
        react-native run-ios
  • To simulate for Android
    • Make sure you have an Android emulator installed and running.
    • In your terminal, type:
      react-native run-android

 

2.2.Video Tutorial

Let’s see quick installing guide in the following video:

2.3.Setting up Shopify store

Copy and paste the code in folder “./Liquid_source/theme” provided in your package purchase into your alternate template that you created.

Let’s see quick configuration guide in the following video:

2.4.Adding app settings to your store

Copy and paste the code in folder “./Liquid_source/theme” provided in your package purchase into your alternate template that you created.

Let’s see quick configuration guide in the following video:

3.Shopify Full Integration

3.1.Config Shopify "Domain"

Step 1: Go to: ./src/settings/constants.js
Step 2: Find out key “domain” , change yours, Ex: https://ega-fashion-store.myshopify.com/

3.2.Config your language

Choosing your language:

Step 1: Go to: ./src/settings/constants.js
Step 2: Find out key RTL , if you use RTL, set true, else set false (default is false)

Step 3: Chose your langue

  • Go to ./src/i18n/index.js
  • Find out key I18n.locale, set your language, there are 3 languages available (en, ar, vi).

Creating your own language:

Step 1: Go to: ./src/i18n/locales, create your new language file (ex: fr.js).

Step 2: Open file ./src/i18n/locales/en.js, copy entire content, paste into your new language file.
Step 3: Open your language file, change content with yours.

Step 4: Open file ./src/i18n/index.js, import new language, then set your language

4.How to use

4.1.How to change splash screen

Replace the old splash screen with your file in “./img/splash.png”.

4.2.Guide for setting app

  1. Changing app color:

  2. Changing menu:

4.3.Config Homepage

  1. Changing slider:
  2. Changing collection:

4.4.Adding a new module to home page

Step 1: at edit code, open file “collection.settings.gikApp.liquid”

Step 2: Find out key HOMEPAGES_SHOPIFY>widgets, need to update widgets data by changing:

  • width: Set the Width of the image
  • height: Set the Height of the image
  • imgUrl: Paste your image URL (use for the collection_image type)
  • title: Add a display title
  • id: Add a  collection handle (If you do not know how to get handle, follow this guide: https://help.shopify.com/themes/liquid/basics/handle)
  • type: Choose which style you want to use. (ex: ‘collection_image‘;  ‘collection_scroll_horizontal‘)

4.5.Creating and Using a Custom Icon Font for Android

This method has the advantage of fonts being copied from this module at build time so that the fonts and JS are always in sync, making upgrades painless.

Edit android/app/build.gradle ( NOT android/build.gradle ) and add the following:

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
To customize the files being copied, add the following instead:

project.ext.vectoricons = [
iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ] // Name of the font files you want to copy
]

apply from: “../../node_modules/react-native-vector-icons/fonts.gradle”

Option: Manually

Copy the contents in the Fonts folder to android/app/src/main/assets/fonts (note lowercase font folder).
Integrating library for getImageSource and ToolbarAndroid support

These steps are optional and only needed if you want to use the Icon.getImageSource function or using custom icons in the Icon.ToolbarAndroid component.

Edit android/settings.gradle to look like this (without the +):

rootProject.name = 'MyApp'
include ':app'
+ include ':react-native-vector-icons'
+ project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

Edit android/app/build.gradle (note: app folder) to look like this (without the +):

apply plugin: 'com.android.application'
android {
...
}
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile "com.android.support:appcompat-v7:23.0.1"
compile "com.facebook.react:react-native:+" // From node_modules
+ compile project(':react-native-vector-icons')
}

Edit your MainApplication.java (deep in android/app/src/main/java/...) to look like this (note two places to edit )(without the +):

package com.myapp;
+ import com.oblador.vectoricons.VectorIconsPackage;
....
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage()
+ , new VectorIconsPackage()
);
}
}

Note: If you’re using React Native (Android) <= 0.17, follow this instructions

Option: With rnpm

$ react-native link

Note: Some users are having trouble using this method, try one of the others if you are too.

To config for IOS, see more: https://support.reactaz.com/knowledge-base/creating-and-using-a-custom-icon-font/

Source: https://github.com/oblador/react-native-vector-icons

4.6.Creating and Using a Custom Icon Font for IOS

Option: Manually

If you want to use any of the bundled icons, you need to add the icon fonts to your Xcode project. Just follow these steps:

Browse to node_modules/react-native-vector-icons and drag the folder Fonts (or just the ones you want) to your project in Xcode. Make sure your app is checked under “Add to targets” and that “Create groups” is checked if you add the whole folder.

Edit Info.plist and add a property called Fonts provided by application (or UIAppFonts if Xcode won’t autocomplete/not using Xcode) and type in the files you just added. It will look something like this:
XCode screenshot

Note: you need to recompile your project after adding new fonts, also ensure that they also appear under Copy Bundle Resources in Build Phases.

If you want to use the TabBar/NavigatorIOS integration or use getImageSource, then you need to add RNVectorIcons.xcodeproj to Libraries and add libRNVectorIcons.a to Link Binary With Libraries under Build Phases. More info and screenshots about how to do this is available in the React Native documentation.

Option: With CocoaPods

Add the following to your Podfile and run pod update:

pod 'RNVectorIcons', :path => 'node_modules/react-native-vector-icons'

Edit Info.plist as described above.

Option: With rnpm

$ react-native link

Note: Some users are having trouble using this method, try one of the others if you are too.

To configure for Android, see more: https://support.reactaz.com/knowledge-base/creating-and-using-a-custom-icon-font-for-android/

5.Setting up notification (Onesignal)

5.1.Create new Onesignal Application

  • Go to https://onesignal.com, register an account (if you don’t have) and create your new Onesingal app.

  • In next step, choose Apple iOS or Google Android option and click ADD APP

5.2.iOS setup

Please follow this instruction: https://documentation.onesignal.com/docs/generate-an-ios-push-certificate to get your Production Certificate .p12 file –  and upload to your app.

5.3.Android setup

  • Click on your app in Home page -> settings -> Google Android:

5.4.Setting up your mobile app to recieve notification

5.4.1.Requirements

  • iOS: 
    • Xcode.
    • A real device.
  • Android:
    • A simulator or real device have google play service.
    • If your android simulator doesn’t have google play service yet, please open your Android studio and follow below instruction to download it:

5.4.2.Configuration

  • Click on your app -> settings -> Keys & IDs

  • Copy your ONESIGNAL APP ID and REST API KEY to Mobile_source/src/settings/constants.js in your mobile project like this:

5.4.3.Starting app

Please follow this guide to run your app on real device

https://facebook.github.io/react-native/docs/running-on-device

5.5.How to send notification

Suggest Edit

Leave A Comment?