Source Structure

Listar Pro – Source Structure


File locate: ./app/assets/..

You can store images or other file resource in this folder


File locate: ./app/components/..

Common components that could be used many times in your app: Button, Icon, Text, Filter Sort, Text, Star Rating & Review…

Config Files

File locate: ./app/config/..

  • images.js: all images use for the app
  • setting.js: common setting value
  • theme.js: color pattern, color default, darkmode/lightmode setting, fonts
  • typography.js: define common FontFamily, FontWeight, Typography system


Listar Pro – Language

First, please check file ./app/config/setting.js and define your list language support

After then check folder is storing language files ./app/lang/.. . All files are formatted with json data


File locate: ./app/navigation/..

  • index.js: Define first loading screen
  • main.js: Define default screen & router for link to other screens (Home, Category, Place, Wishlist, Account, Settings, Change Password …)


File locate: ./app/models/..

This folder store all object model related with data on screen like: category, product, comment, rating, user …

Listar Pro – Models


File locate: ./app/screens/..

Then navigation is defined in ./app/navigation/main.js will link with screens located in folder ./app/screens/..

All template designs of the app are located in here (./app/screens/..). You could change or re-structure by matching with your own project structure design.


File locate:

  • ./app/store/index.js
  • ./app/actions/..
  • ./app/api/..
  • ./app/sagas/..
  • ./app/reducers/..

Contain main actions and reducers. You can found how the application work with Redux Saga, storing information


File locate: ./app/services/..

The network connection will be managed and controlled here. All method requests like POST, GET, PUT, DELETE will be progressed there.


File locate: ./app/utils/..

Commons function for use in the app will be put here, So if you develop or add more common functions, just add it here !