​
What is Normalization?

Normalization is a process of making the components look consistent and beautiful.

​
How to use Normalization?

1

Go to @/constants/appConstants.tsx file.

2

You’ll see normalize function. For example:

3

    export const ScreenHeight: number = SCREEN_HEIGHT;
    export const ScreenWidth: number = SCREEN_WIDTH;

    export const PADDING: Record<PaddingSize, number> = {
        xxxs: scale(1),
        xxs: scale(2),
        xs: scale(4),
        sm: scale(8),
        md: scale(16),
        lg: scale(24),
        xl: scale(32),
        xxl: scale(40),
        xxxl: scale(48),
    };
4

You can use this constants to make your components look consistent. For Example:

5

    <View style={{ padding: PADDING.md }}>
        <Text style={{ fontSize: FONT_SIZE.lg }}>Hello</Text>
    </View>

Was this page helpful?

Styling