Since version 1.3, ListPro is supporting to custom with 10 pre-config homepage template Open common/config/ folder, open current active theme (Classic.js or Resturant.js), this active theme could be changed from the AppConfig.json, replace the horizontalLayout section by following configs

1. The first (default)

The them is included following components:

  1. Animate Header BannerHeader
  2. Horizontal category link categoryLinks
  3. Horizontal Listing listing with bannerImage layout
  4. Verticaly Recent Listing VerticalLayout with twoColumn layout

theme1

BannerHeader: {
  image: require('@images/banner/banner3.jpg'),
  enable: true,
  large: false,
  showLeftMenu: false
},

horizontalLayout: [
  { 
    component: 'categoryLinks', 
    name: 'What can we help you find?',
  },
  {
    component: listing,
    name: 'Introducing ListPro Plus',
    description: 'A selection of homes verified for quality and design',

    imageBanner: require('@images/banner-hotel.png'),
    layout: Constants.Layout.bannerImage,
    height: 177,
    full: true,
    category: '27',
  },
  {
    component: listing,
    name: 'Features',
    description: 'Book activities led by local host on your next trip',
    layout: Constants.Layout.twoColumn,
    features: '17',
  },
  
  {
    component: 'admob',
  },
],

VerticalLayout: {
  name: 'Recent experiences',
  layout: Constants.Layout.twoColumn,
},

To config the categoryLinks, open Common/Config/index.js and change the HomeCategories section:

  HomeCategories: [
    {
      category: 28 , 
      image: Images.imageCategories.drink, // image for categoryLinks component
      icon: Images.imageCategoriesIcons.drink, // icon for categoryIcons componets
      iconTrans: Images.imageCatesTransparent.drink, // icon for categoryShadow componets
      colors: ['#4facfe', '#00f2fe'],
    },
  ...
  • category: The Id of the Listing, you can get the ID when edit the Category from website admin
  • image: image will be load when the CategoryLinks has type image, this is default one.
  • icon: icon will be load when the CategoryLinks has type icon
  • colors: the background color of the icon

2. The Second

The them is included following components:

  1. Horizontal layout with bannerSlider layout
  2. Horizontal category link categoryLinks
  3. Horizontal listing with twoColumn layout
  4. Horizontal listing with flexColumn layout
  5. Banner Admob

theme2

horizontalLayout: [
  {
    component: listing,
    categoryListingId: '28',
    paging: true,
    layout: Constants.Layout.bannerSlider,
  },
  { component: 'categoryLinks' },
  {
    component: listing,
    name: 'Italian',
    tags: '55',
    layout: Constants.Layout.twoColumn,
  },
  {
    component: listing,
    name: 'Fast Food',
    categoryListingId: '46',
    layout: Constants.Layout.flexColumn,
    width: 120,
    height: 250,
  },
  {
    component: 'admob',
  },
],

3. The Third

The them is included following components:

  1. Horizontal listing with banner layout
  2. Horizontal listing link twoColumn layout
  3. Horizontal listing with list layout
  4. Horizontal listing with column layout
  5. Horizontal listing with flexColumn layout
  6. Horizontal listing with card layout
  7. Horizontal listing with listRight layout

theme3

horizontalLayout: [
  {
    component: listing,
    categoryListingId: '27',
    layout: Constants.Layout.banner,
  },
  {
    component: listing,
    name: 'Explore restaurant',
    features: '64',
    layout: Constants.Layout.twoColumn,
  },
  {
    component: listing,
    name: 'Locations',
    location: '57',
    paging: true,
    row: 3,
    layout: Constants.Layout.list,
  },
  {
    component: listing,
    name: 'Italian',
    tags: '55',
    layout: Constants.Layout.column,
  },
  {
    component: listing,
    name: 'Fast Food',
    categoryListingId: '46',
    layout: Constants.Layout.flexColumn,
    width: 120,
    height: 250,
  },
  {
    component: news,
    name: 'Videos',
    categoryNewsId: '4',
    paging: true,
    layout: Constants.Layout.card,
  },

  {
    component: news,
    name: 'Tips & Articles',
    paging: true,
    row: 3,
    layout: Constants.Layout.listRight,
  },
],

4. The Four

The them is included following components:

  1. Animate Header BannerHeader
  2. Horizontal categoryIcons
  3. Horizontal listing link flexColumn layout
  4. Verticaly Recent Listing VerticalLayout with cardTrend layout

theme4

horizontalLayout: [
  
  { component: 'categoryIcons' },
  {
    component: listing,
    name: 'Features',
    features: '64',
    layout: Constants.Layout.flexColumn,
  },
],
VerticalLayout: {
  name: 'Recents',
  layout: Constants.Layout.cardTrend,
},

5. The Five

The them is included following components:

  1. Animate Header BannerHeader
  2. Horizontal listing with twoColumn layout
  3. Horizontal listing link bannerImage layout
  4. Horizontal listing link threeColumn layout, support gradient backgroundColor
  5. Horizontal listing link bannerImage layout
  6. Banner Admob

theme5

BannerHeader: {
  image: require('@images/banner/banner3.jpg'),
  enable: true,
  large: false,
  showLeftMenu: false
},
horizontalLayout: [    
  {
    component: listing,
    name: 'Italian',
    tags: '55',
    layout: Constants.Layout.twoColumn,
  },
  {
    component: listing,
    name: 'Premium Trip',
    imageBanner: require('@images/icons/banner-3.png'),
    layout: Constants.Layout.bannerImage,
    height: 200,
    category: '27',
  },
  {
    component: listing,
    name: 'Fast Food',
    categoryListingId: '46',
    layout: Constants.Layout.threeColumn,
    backgroundColor: [
      'rgba(6, 188, 198, 1)',
      'rgba(77, 206, 154, 1)',
      'rgba(127, 219, 122, 1)',
    ],
    textColor: '#FFF',
  },
  {
    component: listing,
    imageBanner: require('@images/icons/banner-2.png'),
    layout: Constants.Layout.bannerImage,
    height: 200,
    full: true,
    category: '27',
  },
  {
    component: 'admob'
  },
],

6. The Six

The them is included following components:

  1. Animate Header BannerHeader
  2. Horizontal categoryLinks
  3. Horizontal listing link cardTrend layout
  4. Horizontal listing link twoColumn layout, support gradient backgroundColor

theme6

BannerHeader: {
  image: require('@images/banner/banner3.jpg'),
  enable: true,
  large: false,
  showLeftMenu: false
},
horizontalLayout: [
  {
    component: 'categoryLinks',
    name: 'What can we help you find?',
  },

  {
    component: listing,
    name: 'Hot & Fresh Local Business',
    layout: Constants.Layout.cardTrend,
    categoryListingId: '27',
  },

  {
    component: listing,
    name: 'Exclusive',
    categoryListingId: '46',
    layout: Constants.Layout.twoColumn,
    backgroundColor: [
      'rgba(202, 111, 0, 1)',
      'rgba(208, 125, 33, 1)',
      'rgba(223, 159, 111, 1)',
    ],
    textColor: '#FFF',
  },
],

7. The Seven

The them is included following components:

  1. Animate Header BannerHeader
  2. Horizontal categoryLinks
  3. Horizontal listing link bannerImage layout
  4. Horizontal listing link twoColumn layout
  5. Horizontal listing link threeColumn layout, support gradient backgroundColor
  6. Banner Admob

theme7

BannerHeader: {
  image: require('@images/banner/banner3.jpg'),
  enable: true,
  large: false,
  showLeftMenu: false
},
horizontalLayout: [
  { 
    component: 'categoryLinks', 
    name: 'What can we help you find?',
  },
  {
    component: listing,
    name: 'Introducing ListPro Plus',
    description: 'A selection of homes verified for quality and design',

    imageBanner: require('@images/banner-hotel.png'),
    layout: Constants.Layout.bannerImage,
    height: 177,
    full: true,
    category: '27',
  },
  {
    component: listing,
    name: 'Recent experiences',
    description: 'Book activities led by local host on your next trip',
    tags: '', // show all  
    layout: Constants.Layout.twoColumn,
  },

  {
    component: listing,
    name: 'Fast Food',
    categoryListingId: '46',
    layout: Constants.Layout.threeColumn,
    backgroundColor: [
      'rgba(6, 188, 198, 1)',
      'rgba(77, 206, 154, 1)',
      'rgba(127, 219, 122, 1)',
    ],
    textColor: '#FFF',
  },
  
  {
    component: 'admob',
  },
],

8. The Eight

The them is included following components:

  1. Animate Header BannerHeader
  2. Horizontal categoryIcons
  3. Horizontal listing link twoColumn layout
  4. Banner Admob

theme8

BannerHeader: {
  image: require('@images/banner/banner4.jpg'),
  enable: true,
  large: false,
  showLeftMenu: false
},
horizontalLayout: [
  {
    component: categoryIcons,
    column: 4,
  },
  {
    component: listing,
    name: 'Recent experiences',
    description: 'Book activities led by local host on your next trip',
    tags: '', // show all
    layout: Constants.Layout.twoColumn,
  },

  {
    component: 'admob',
  },
],

9. The Nine

The them is included following components:

  1. Animate Header BannerHeader
  2. Horizontal categoryShadow

theme9

BannerHeader: {
  image: require('@images/banner/banner2.jpg'),
  enable: true,
  large: true,
  showLeftMenu: false
},
horizontalLayout: [
  {
    component: categoryShadow,
    column: 3,
  }
],

10. The Ten

The them is included following components:

  1. Animate Header BannerHeader
  2. Horizontal listing with 4 bannerImage layout
  3. Horizontal listing with cardTrend layout

theme10

BannerHeader: {
  image: require('@images/banner/banner3.jpg'),
  enable: true,
  large: false,
  showLeftMenu: false
},
horizontalLayout: [
  {
    component: listing,
    imageBanner: require('@images/banner-image/banner1.png'),
    layout: Constants.Layout.bannerImage,
    height: 130,
    column: 2,
    categoryListingId: '27',
  },
  {
    component: listing,
    imageBanner: require('@images/banner-image/banner2.png'),
    layout: Constants.Layout.bannerImage,
    height: 130,
    column: 2,
    categoryListingId: '27',
  },
  {
    component: listing,
    imageBanner: require('@images/banner-image/banner3.png'),
    layout: Constants.Layout.bannerImage,
    height: 130,
    column: 2,
    categoryListingId: '27',
  },
  {
    component: listing,
    imageBanner: require('@images/banner-image/banner4.png'),
    layout: Constants.Layout.bannerImage,
    height: 130,
    column: 2,
    categoryListingId: '27',
  },
  {
    component: listing,
    name: 'Hot & Fresh Local Business',
    layout: Constants.Layout.cardTrend,
    categoryListingId: '27',
  },
],

11. The Eleven

The them is included following components:

  1. The top search
  2. Horizontal listing with cardVertical layout

theme11

horizontalLayout: [
  {
    component: 'search',
  },
  {
    component: listing,
    name: 'DISCOVER NEW PLACES',
    layout: Constants.Layout.cardVertical,
    paging: true,
    category: '27',
  },
],