Customize your app

Last updated 3 months ago

Content the high customization and related service

Change the HomePage horizontal layout

Open src/common/Config.js then you can change the horizontal layout with quite flexible data config.

  • name: the label display for horizontal layout.

  • tag: the tag id for the layout category: the category id for the layout (we can filter the content for both tag and category)

  • layout: Support varies layout UI:

    • Banner: Constants.Layout.miniBanner

    • Three column view: Constants.Layout.threeColumn

    • Two column view: Constants.Layout.twoColumn

    • Two column with higher UI: Constants.Layout.twoColumnHigh

    • Card view: Constants.Layout.car

  • image: the banner image to show on top when view all the post Let me explain more about this config

Example: showing the content as Banner View

{tag: 273, paging: true, layout: Constants.Layout.miniBanner}

This mean show all recent post which have tag id:273, show as the per page with sticky support via paging:true, this is show as the miniBanner (use for banner only so we will not display the name here)

Show the content as banner

Example: showing the content as 3 column view

{name: "Feature Products", category: 21 , image: Images.Banner.Feature, layout: Constants.Layout.threeColumn},

Show the category id:21 with label 'feature products'

Show the banner when click show all: Images.Banner.Feature

The horizon layout is show as three column by support Constants.Layout.threeColumn

Show the content as three columns view

Change the logo and Icons, flash screen:

Open src/common/config.js to map your news image Logo and icon file.

LogoImage: require('@images/new_logo.png'),
LogoWithText: require('@images/logo_with_text.png'),
LogoLoading: require('@images/logo.png'),

If you need to change other image files please locate to src/common/Images.js

Change the app Color

Open /src/Common/Color.js file in project.

You could change most of components color in Color section.

For example, you could change the color of Tabbar to any color you like, then reload the app to see the effect.

const Constants = {
...
//Product tabs
TabActive: '#00BCD4',
TabDeActive: 'white',
TabActiveText: '#333',
TabText: '#333',
BuyNowButton: '#00BCD4',
...
};