Typography

Headings

React Native Store UI template provides you with the Heading Tags, namely H1, H2, H3 and H4 components. These Heading tags helps you prioritize the content of your screen. These components built on top of React Native Text component and accept style props to override any of default template styles.

Component	Font Size
H1	config.defaultFontSize * 2
H2	config.defaultFontSize * 1.75
H3	config.defaultFontSize * 1.5
H4	config.defaultFontSize * 1.25

config.defaultFontSize is defined under config.js file.

Samples

import React from 'react';
import { Wrapper, Container, H1, H2, H3, H4 } from '../utils';

function App() {
    return (
        <Wrapper>
            <Container>
                <H1>Heading Size 1</H1>
                <H2>Heading Size 2</H2>
                <H3>Heading Size 3</H3>
                <H4>Heading Size 4</H4>
            </Container>
        </Wrapper>
    )
}

Output

Paragraph and Text

React Native Store UI Template provides you with the normal text formats that includes paragraph P, small text Sm and super small text SupSm. These components built on top of React Native Text component and accept style props to override any of default template styles.

Component	Font Size
P	config.defaultFontSize
Sm	config.defaultFontSize * 0.85
SupSm	config.defaultFontSize * 0.7

config.defaultFontSize is defined under config.js file.

P accepts an additional props boldwhich can be either true or false. Default value is false..

Samples

import React from 'react';
import { Wrapper, Container, P, Sm, SupSm } from '../utils';

function App() {
    return (
        <Wrapper>
            <Container>
                <P>Paragraph</P>
                <Sm>Small Text</Sm>
                <SupSm>Super Small</SupSm>
            </Container>
        </Wrapper>
    )
}

Output