Skip to main content

Theme ๐ŸŽจ

The Theme folder, at the root of project, includes a nice kit for building and maintaining the UI of application. It helps with variables and reusable classes to create harmony between application screens.

How to use โ“โ€‹

The boilerplate provides a custom hook called useTheme and you can use it like the example bellow:

import { useTheme } from '@/Hooks'

const Brand = ({ height = 200, width = 200, mode = 'contain' }) => {
const {
Common,
Fonts,
Gutters,
Images,
Layout,
Colors,
NavigationColors,
FontSize,
MetricsSizes,
} = useTheme() // <- custom hook

return (
<View style={{ height, width }}>
<Image style={Layout.fullSize} source={Images.logo} resizeMode={mode} />
</View>
)
}

Variablesโ€‹

The first file is the variables one. It contains 3 groups of variables :

  • ๐ŸŽจ Colors : defines global colors of the graphical charter,

        export const Colors = {
    transparent: 'rgba(0,0,0,0)',
    inputBackground: '#FFFFFF',
    white: '#ffffff',
    text: '#212529',
    primary: '#E14032',
    success: '#28a745',
    error: '#dc3545',
    }
  • ๐ŸŽจ NavigationColors : defines global colors of the react navigation theme,

       export const NavigationColors = {
    primary: Colors.primary, // The primary color of the app used to tint various elements. Usually you'll want to use your brand color for this.
    // background: '', The color of various backgrounds, such as background color for the screens
    // card: '', The background color of card-like elements, such as headers, tab bars etc.
    // text: '', The text color of various elements
    // border: '', The color of borders, e.g. header border, tab bar border etc
    // notification: '', The color of Tab Navigator badge
    }
  • ๐Ÿ”  FontSize : defines sizes for your text guidelines. These variables are used in the file Font described down below.

        export const FontSize = {
    small: 12,
    regular: 14,
    large: 18,
    }
  • โœ‚๏ธ MetricsSizes : defines metrics sizes of your guidelines. These variables are used by Gutters to create generic spaces for all your application,

        const tiny = 5 // 10
    const small = tiny * 2 // 10
    const regular = tiny * 3 // 15
    const large = regular * 2 // 30
    export const MetricsSizes = {
    tiny,
    small,
    regular,
    large,
    }

Commonโ€‹

The Common defines global style. It helps keeping the style at one place and avoid stylesheets everywhere in the code. For example you can defines style for buttons, inputs, background like this :

    export default function ({ Colors }) {
return StyleSheet.create({
button: {
backgroundColor: Colors.primary,
},
backgroundPrimary: {
backgroundColor: Colors.primary,
},
backgroundReset: {
backgroundColor: Colors.transparent,
},
textInput: {
borderWidth: 1,
borderColor: Colors.text,
backgroundColor: Colors.inputBackground,
color: Colors.text,
minHeight: 50,
textAlign: 'center',
marginTop: 10,
marginBottom: 10,
},
})
}


Font ๐Ÿ”คโ€‹

The Font presets some text classes using the FontSize variables. It provides these classes:

textSmallโ€‹

It applies a fontSize: FontSize.small on the element and apply the text color

textRegularโ€‹

It applies a fontSize: FontSize.regular on the element and apply the text color

textLargeโ€‹

It applies a fontSize: FontSize.large on the element and apply the text color

titleSmallโ€‹

It applies a fontSize: FontSize.small * 2, fontWeight: 'bold' on the element and apply the text color

titleRegularโ€‹

It applies a fontSize: FontSize.regular * 2, fontWeight: 'bold' on the element and apply the text color

titleLargeโ€‹

It applies a fontSize: FontSize.large * 2, fontWeight: 'bold' on the element and apply the text color

textCenterโ€‹

Centers a text horizontally.

textJustifyโ€‹

Justifies a paragraph.

textLeftโ€‹

Aligns text on the left side of his parent.

textRightโ€‹

Align text on the right side of his parent.


Gutters โœ‚๏ธโ€‹

Gutters is a classes generator. It builds from MetricsSizes variables all associated gutters. It generates, for each MetricsSize variables, classes like this :

    [size][direction][op]: {
[op][direction]: [value]
}

Where :

  • [size]: is the key of the variable included in MetricsSizes ('small' for example)
  • [direction]: can be ['Bottom','Top','Right','Left','Horizontal','Vertical']
  • [op]: can be ['Margin', 'Padding']
  • [value]: is the value of the [size]

For example, for the metricsSize small, the Gutters file provides these classes :

smallBottomMargin, smallTopMargin, smallRightMargin, smallLeftMargin, smallVerticalMargin, smallHorizontalMargin

and

smallBottomPadding, smallTopPadding, smallRightPadding, smallLeftPadding, smallVerticalPadding, smallHorizontalPadding

Images ๐Ÿ–ผโ€‹

This files includes all images used in the application. To use it, you only have to import the image like below

export default function () {
return {
logo: require('@/Assets/Images/TOM.png'),
}
}

Then you can use your image like this :

const myComponent = () => {
const { Images } = useTheme()
return <Image source={Images.logo} />
}

Layoutโ€‹

The Layout file gives basic stylesheets classes to create layout and align elements.

Column layout โฌ‡๏ธโ€‹

All stylesheet classes below help building a Column layout

columnโ€‹

Apply a top to bottom direction's column to an element. So all direct children will be stacked as following:

columnReverseโ€‹

Apply a bottom to top direction's column to an element. So all direct children will be stacked as following:

colCenterโ€‹

Apply a top to bottom direction's column and center all direct children as following:

colVCenterโ€‹

Apply a top to bottom direction's column and center vertically all direct children as following:

colHCenterโ€‹

Apply a top to bottom direction's column and center horizontally all direct children as following:

Row layout โžก๏ธโ€‹

All stylesheet classes below help building a Row layout

rowโ€‹

Apply the row direction to an element left to right. So all direct children will be stacked as following:

rowReverseโ€‹

Apply the column direction to an element right to left. So all direct children will be stacked as following:

rowCenterโ€‹

Apply the column direction to an element left to right. So all direct children will be stacked as following:

rowVCenterโ€‹

Apply the column direction to an element left to right. So all direct children will be stacked as following:

rowHCenterโ€‹

Apply the column direction to an element left to right. So all direct children will be stacked as following:

Default layout ๐Ÿƒโ€‹

centerโ€‹

center horizontally and vertically an element

alignItemsCenterโ€‹

Align children of a container in the center of the container's cross axis.

alignItemsStartโ€‹

Align children of a container to the start of the container's cross axis.

alignItemsStretchโ€‹

Stretch children of a container to match the height of the container's cross axis.

justifyContentCenterโ€‹

Align children of a container in the center of the container's main axis.

justifyContentAroundโ€‹

Evenly space off children across the container's main axis, distributing the remaining space around the children. Compared to space-between, using space-around will result in space being distributed to the beginning of the first child and end of the last child.

justifyContentBetweenโ€‹

Evenly space off children across the container's main axis, distributing the remaining space between the children.

scrollSpaceAroundโ€‹

make a space around on scroll view

scrollSpaceBetweenโ€‹

make a space between on scroll view

selfStretchโ€‹

same has alignItemsStretch but it affect the children directly

Size layout ๐Ÿ“โ€‹

fillโ€‹

Apply a flex: 1

fullSizeโ€‹

Make an element fit his height and width's parent

fullWidthโ€‹

make the element fit his width's parent

fullHeightโ€‹

make the element fit his height's parent

Operation layout ๐Ÿงฎโ€‹

mirrorโ€‹

make an element flip around the X axis

rotate90โ€‹

rotate an element by 90ยฐ clockwise

rotate90Inverseโ€‹

rotate an element by 90ยฐ counterclockwise

info

In all these groups you can add, remove or edit variables/classes with the values you want

Important

Each style file is an export default function with all the Theme Variables in parameters