Theme usage

Theme explanation
In entire app, colors, typography and values for margin/padding/height/width were defined in each component, which makes it hard to change. This PR introduce a theme module where all colors, typography and sizes are defined, so that only few changes in value can change the overall look of the app.

Major components are

• colors.js - where all colors used in entire app are defined
• typography.js - all typography related style are defined
• spacing.js - common padding/margin value defined
• dimens.js - component custom width/height are defined here
• theme.js - combine colors.js, typography.js, spacing.js & dimens.js into single module

Guide: How to use theme module in the APP

Access theme using react Context from Theme Module

Whenever you need to reference variables defined in theme.js in component do this

For Functional Component

import React, { useContext } from 'react';
import { ThemeContext } from '../../theme';
//...
const CustomComponent = props => {
    const theme = useContext(ThemeContext);
    //...
    return <View style={{ backgroundColor: theme.colors.background }} />
}

For Class Component

import React from 'react';
import { ThemeContext } from '../../theme';
//...
class CustomComponent  extends React.Component {
    static contextType = ThemeContext;
    //...
    render() {
        const theme = this.context;
        return <View style={{ backgroundColor: theme.colors.background }} />
   }
}

To use typography from Theme Module

A custom Text component has been defined in common folder, which uses typography styles from typography.js. Use this Text component from common folder whenever you need to define text in any component

✔️ Use this in code

import { Text } from '../common'; // import Text component from common folder
//...
    return (
       <View>
            <Text>Text which is theme aware</Text>
       </View>
    );

❌ Don't do this

import { Text } from 'react-native';

Also the Text component from common folder has various inbuilt font size available, don't define custom fontSize or fontWeight until and unless extremely needed

<Text type="heading">This is a Heading</Text>
<Text type="subheading">This is a SubHeading</Text>
<Text type="body">This is a Body</Text>
<Text>Default is a Body</Text>
<Text type="label">This is a label</Text>
<Text type="caption">This is a caption</Text>
---
<Text type="heading" bold>This is a Bold Heading</Text>
<Text type="subheading" bold>This is a Bold SubHeading</Text>
<Text type="body" bold>This is a Bold Body</Text>
<Text type="label" bold>This is a Bold label</Text>
<Text type="caption" bold>This is a Bold caption</Text>

Colors used in Theme Module

Major colors are defined in colors.js, their use is also mention in this file, try to re-use colors from this file, don't define custom color until and unless absolutely needed.

Color Name	Color Use
primaryDark	color for the status bar and for dark tint
primary	to be used as a background color for appbar(toolbar)
appBarTint	to be used for appbar title text, appbar icons color and for back button
secondaryLight	to be used for hover state
secondary	to be used as default button, checkbox, spinner, radio button and other component color
secondaryDark	to be used for active state
background	Any major Screen will have this as his default background color
surface	To be used as a default background for all components, like Card, CardSection, List etc
border	Use it for card border
success	Success messages and icons.
error	Error messages and icons.

Use

<View style={{ color: theme.colors.success }}

Margin/Padding standard value used in Theme Module

To define value for margin or padding used values defined in spacing.js, try not to define custom padding value or margin in component

Name	Size
tiny	4
small	8
medium	12
large	16
extraLarge	24

✔️ Correct way of using

<View style={{ padding: theme.spacing.large }}>
    <Text style={{ margin: theme.spacing.tiny }}>

❌ Wrong way

<View style={{ padding: 16 }}>
    <Text style={{ margin: 4 }}>

Component width/height and other values

Try to define component width, height, custom border radius in dimens.js file, and access this value from theme

Use

• Define property in dimens.js

{
    customComponentHeight: 234,
    customComponentWidth: 345,
    //...
}

• In you CustomComponent access the property like

const CustomComponent = props => {
    const theme = useContext(ThemeContext);
    //...
    return <Image style={{
        width: theme.dimens.customComponentWidth,
        height: theme.dimens.customComponentHeight,
    }}>

And also I have mentioned in detail comments what each property do in their respective files, for example in colors.js I have mentioned where each color is supposed to be used, so if you need bigger pitcher, just read the comments in colors.js, typography.js etc