We have used javascript files to define all the styles necessary for each component or a screen.

Colors

You can find all colors used in the application in src/assets/styles/mainColors.js

• Any changes to colors defined here will result to changes all over the application where this colors were used.
• We decided to create mainColors.js file just in case you decide to go with different color pallets and decide to make some changes to the design. This way, you will not have to change occurrences of those colors on each page.
  • Note: There might be several places, where custom colors are used, but those would be such a small amount that you could search for those in the project from your editor and replace them with the ones you'd like.

Global Styles

You can find all global styles defined in src/assets/styles/globalStyles.js

We placed all globally used styles here so that they are accessible in all components and screens. This way you wouldn't have to have duplicated code in other javascript style files.

Changes to styles here might cause some unexpected behaviors if you are not careful and are not aware of exactly where this style might have been used.

Specific Styles

When you are going to be going through the code, you might find style.js file present in the same folder. These style files are only affecting the files where they are imported and style.js file located in the folder will only be imported on the pages present in the. same folder.

The benefit of defining styles like this is that you can define styles with the same names in different style.js files without them being in conflict with each other.

More Information

React Native Apps look different on different devices depending on their screen width and screen height. To be sure that this app is as responsive as possible, we created helper scaling functions that are used when styling. Technically, our app could be supported on tablet devices as well, however, we are not taking any responsibility for how our apps are looking on tablet devices. We might take on this mission in the near future.

To find more on how scaling works, please visit src/utility/Scale.js file.

Changes made to this file will affect the whole application, so be mindful.

Got Questions?