Customize the app branding

Last updated 5 months ago

This section will guide how to change the app logo, icons, splash screens

Change the logo and Icons, splash 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 update src/common/Images.js

Change the default Home layout

It's possible to customize the app homepage screen to show the default layout as your wish, open src/container/Home/index.js

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)

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

Customize the Components 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.

...
//Product tabs
TabActive: '#00BCD4',
TabDeActive: 'white',
TabActiveText: '#333',
TabText: '#333',
BuyNowButton: '#00BCD4',
...

Change the logo and Icons

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 splash screen

To change splash screen on Expo version try to edit the app.json‚Äč

To change splash screen on Pro version, you can refer to this guide