gikApp – React Native Full App Docs

1.Introduction

All the features you will love

  • WordPress Integration via REST API
  • OneSignal Notification
  • RTL
  • Multi Languages
  • Offline Mode Reading
  • Sidebar with multi-level Menu
  • Your page template
  • Infinite Lazy load
  • Social Shareing feature
  • Contact page
  • Clean code, no bullshit!
  • Best UI/UX Practices

Website & Video:

Click here to know more: https://codecanyon.net/item/gikapp-react-native-full-application/19465924?s_rank=1

Supporting websitehttps://support.reactaz.com/gikapp-react-native-full-app-docs/

Installing video: https://www.youtube.com/embed/-eK1mQN766E

gikApp 3x – React Native app for WordPress


2.Set Up

2.1.How to install a new source

2.2.Video Tutorial

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

3.Project structure

The gikApp project files/folders inside this main-folder …\src\*:

  • app.js: Everything is started from here.
  • settings\global.js: Include all settings for gikApp, used at config domain wordpress site, menu etc…
  • themes: All components in this app depend on the application theme.
  • containers: These screens are essentially “smart” container component that handle all of the data fetching, interaction management, etc. 
  • components: In this directory we’ll be writing mostly functional components that can be used in multiple places throughout our app.
  • services\wordpress.service.js: A service for fetching data from WordPress.
  • services\helper.service.js: A helping-service, it includes any helpful-functions such as: isEmail (validate email), displayDateWordpress (show date by predefined-date-format from a complicated-date-string), LaunchURL (open an url refer to app),…

4.Wordpress integration via Rest API

Video Tutorial

4.1.Install Wordpress plugins

Please install this plugin first: https://wordpress.org/plugins/ultimate-wp-rest/
(It also included in your gikApp Package)

4.2.Config Wordpress "domain"

Step 1: Go to: …src\settings\global.js
Step 2: Find out key “domain” Global>INTEGRATE>wordpress>domain, change yours, Ex: dev.gikapp.com (follow gikApp)

5.Config gikApp Theme

Step 1: You need to go to …/scr/app.js where you will see a list of all currently themes on your app. Copy the theme name and paste it into:

Step 2: Change the Theme Style which was defined in …/scr/themes/[your_theme]/common/[the_theme_name].styles.js file.

5.1.Config "Menu"

Step 1: Go to your theme: …\src\themes\[your_theme]\common\Config.js
Step 2: Change param to yours, Ex: 17 (follow gikApp)

5.2.Theme Layout

You have 3 layout types:

Singe Page Layout

Apply to ConstructionTheme, follow /src/theme/construction/common/Config.js

Multi TabPage Layout

Apply to BlogTheme, follow /src/theme/blog/common/Config.js

Apply to SpaTheme, follow /src/theme/spa/common/Config.js

5.3.Config Home Widget

To Config HomePage, go to:  /src/theme/[your_theme]/common/Config.js

Home screen layout:

5.3.1.Config HOMEPAGE_BANNER_TOP

Insert below code intro /src/theme/[your_theme]/common/Config.js
Note: To hide this component, delete code block HOMEPAGES_BANNER_TOP: {}

With app_action field, you have 3 action types:

  • blog: redirect to Blog Screen with blogID is defined by value field
  • article: redirect to Article Detail Screen with aritcleID is defined by value field
  • page: redirect to Page Detail Screen with pageID is defined by value field

5.3.2.Config HOMEPAGE_CONFIG

Go to your theme: /src/themes/[your_theme]/common/config.js

Find out key HOMEPAGES_CONFIG>widgets, need to update widgets data by changing:

We have 20+ Excellent Code Snippet :

  • swipper_carousel
  • banner_carousel with 5 item styles
  • list_item_widget with 4 item styles
  • wordpress_article_list with 10 item styles
  • testimonials_widget
  • list_image_widget

5.3.2.3.Config list_item_widget

Insert bellow code intro widgets: []

With app_action field, you have 3 action types:

  • blog: redirect to Blog Screen with blogID is defined by value field
    • layout_children: Apply one of 10+ post layout styles (“TwoColumn” || “ThreeColumn” || “Card” || “CardType2” || “Portfolio” || “PortfolioType2” || “PortfolioType3” || “List” || “ListType2” || “Backdrop”)
  • article: redirect to Article Detail Screen with aritcleID is defined by value field
  • page: redirect to Page Detail Screen with pageID is defined by value field

With layout field, you have 4 options:

5.3.2.4.Config wordpress_article_list widget

Insert bellow code intro widgets: []

With layout field, you have 10+ options:

Apply one of 10+ post layout styles (“TwoColumn” || “ThreeColumn” || “Card” || “CardType2” || “Portfolio” || “PortfolioType2” || “PortfolioType3” || “List” || “ListType2” || “Backdrop”)

5.3.2.5.Config Latest Post widget

Insert below code intro widgets: []

5.3.2.6.Config testimonials_widget

Insert bellow code intro widgets: []

5.3.2.7.Config list_image_widget

Insert bellow code intro widgets: []

With app_action field, you have 3 action types:

  • blog: redirect to Blog Screen with blogID is defined by value field
    • layout_children: Apply one of 10+ post layout styles (“TwoColumn” || “ThreeColumn” || “Card” || “CardType2” || “Portfolio” || “PortfolioType2” || “PortfolioType3” || “List” || “ListType2” || “Backdrop”)
  • article: redirect to Article Detail Screen with aritcleID is defined by value field
  • page: redirect to Page Detail Screen with pageID is defined by value field

5.3.3.Change Splash Sceen

Go to your theme: /src/themes/[your_theme]/images/

Replace splash.jpg

6.How to use

6.1.Config Google Admob

Step 1: To enable / disable Google Admob, go to: ../src/settings/global.js

Step 2: Go to ../src/themes/[your_theme]/screens/HomeScreen.js then change your Admob ID

6.2.Booking Page

Requirement: Install plugin contact form 7:

Contact Form 7

Set up:

  • Step 1: Create page template name ‘ega-page’
    Upload file ‘ega-page.php’ into active theme.
    https://drive.google.com/open?id=1eIcHKCvzU5nKwoglRBnSzIzsAtGiV8x3
  • Step 2: Create a contact form name ‘Booking’ with content in file ‘booking-form.txt’
    https://drive.google.com/open?id=1jjE9oTbjiBxsN29aPzns4Bm45Opg5EzA
  • Step 3: Create a page ‘Booking an appoinment’
    Create page ‘Booking an appoinment’ use template ‘ega-page.php’ in step 1 and content is the ‘Booking’ form in step 2
    https://drive.google.com/open?id=1uimaxjjLFFzzoWFA9ZZ1MtiDguXhBWaF

Customization: How to create and edit field in booking form:

Docs

6.3.Configurate Push Notification

  1. You need to setup OneSignal account to support pushnotification (https://onesignal.com)
  2. Install WordPress plugin to support push notification after publish a post: https://wordpress.org/plugins/onesignal-free-web-push-notifications/

  3. The download package has already configure all the setting for you, but you need to replace the APP_ID to integrate with your OneSignal account. You can also refer detail document here for setting up – https://github.com/geektimecoil/react-native-onesignal

6.4.Multi Languages & RTL

You can add your own language to the app from src/i18n/locate/[your location].js

In src/i18n/i18n.js, export configuration (for translations):

For more info about I18n.js methods (localize, pluralize, etc) and settings see its documentation.

The language to Right to Left support:
Go to */src/settings/global.js, change the config RTL=true like the screenshot.

6.6.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

6.7.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/

Suggest Edit