Typography.md

Typography

NativeBase provides you with the Heading Tags, namely H1, H2 and H3 components. These Heading tags helps you prioritize the content of your screen.
Replacing Component for H1, H2, H3, Text: React Native <Text>

iOS	Android

Syntax

import React, { Component } from 'react';
import { Container, Content, H1, H2, H3, Text } from 'native-base/ui';
​
export default class TypographyExample extends Component {
    render() {
        return (
            <Container>
                <Content>
                    <H1>Header One</H1>
                    <H2>Header Two</H2>
                    <H3>Header Three</H3>
                    <Text>Default</Text>
                </Content>
            </Container>
        );
    }
}

Custom Headers

iOS	Android

Syntax

import React, { Component } from 'react';
import { Container, Content, H1, H2, H3, Text } from 'native-base/ui';
​
export default class TypographyExample extends Component {
    render() {
        return (
            <Container>
                <Content>
                    <H1 style={{color:'red'}}>Header One</H1>
                    <H2 style={{color:'red'}}>Header Two</H2>
                    <H3 style={{color:'red'}}>Header Three</H3>
                    <Text style={{color:'red'}}>Default</Text>
                </Content>
            </Container>
        );
    }
}

Configuration

Property	Default	Option	Description
H1	font-size: 27	user-defined	Heading tag <H1>
H2	font-size: 24	user-defined	Heading tag <H2>
H3	font-size: 21	user-defined	Heading tag <H3>