Theming NativeBase Apps

Customizing NativeBase will be a cakewalk for you. That is due to the fact, NativeBase has categorized its screens into different sections. It provides a separate file inclusive of color schemes for different sections.

Note: NativeBase is built on top of React Native.
Hence with any component you can pass the style property which will be merged to the default style of that component.

Steps to be followed to customize NativeBase theme:

Now your project is ready for theme customization.

General Syntax
import {Container, Content, Text} from 'native-base';
import React, {Component} from 'react-native';
import myTheme from './Themes/myTheme';
​
export default class ThemeExample extends Component {
    render() {
        return (
            <Container>
                <Content theme={myTheme}>
                    <Text>
                        I have changed the text color.
                    </Text>
                </Content>
            </Container>
        );
    }
}



Theme Color

To change the basic theme context of NativeBase, make necessary changes with the following variables:

Theme Font

Having different font types in your React Native apps is not tough any more.
NativeBase provides you with a set of nine font families.

Font families included with NativeBase:

NativeBase allows you to add more font styles on your own.

iOS

Android



Customize Badge

Steps to customize theme for Badge attributes:

Property Description
badgeColor Badge text color
badgeBg Badge background color
Syntax
import React, { Component } from 'react-native';
import { Container, Content, Badge } from 'native-base';
import myTheme from './Themes/myTheme';
​
export default class ThemeBadgeExample extends Component {
    render() {
        return (
            <Container>
                <Content theme={myTheme}>
                    <Badge>2</Badge>
                    <Badge primary>2</Badge>
                    <Badge success>2</Badge>
                    <Badge info>2</Badge>
                    <Badge warning>2</Badge>
                    <Badge danger>2</Badge>
                </Content>
            </Container>
        );
    }
}


Customize Button

Steps to customize theme for Button attributes:

Property Description
btnTextSizeSmall Text font size for button of type small
btnTextSize Text font size for button of type default
btnTextSizeLarge Text font size for button of type large
btnDisabledBg Background color of disabled button
btnFontFamily Font style for button text
Syntax
import React, { Component } from 'react-native';
import { Container, Content, Button, Icon } from 'native-base';
import myTheme from './Themes/myTheme';
​
export default class ThemeButtonExample extends Component {
    render() {
        return (
            <Container>
                <Content theme={myTheme}>
                    <Button primary> Primary </Button>
                    <Button success> Success </Button>
                    <Button info> Info </Button>
                    <Button warning> Warning </Button>
                    <Button danger> Danger </Button>

                    <Button small>Small</Button>
                    <Button>Default</Button>
                    <Button large>Large</Button>
                </Content>
            </Container>
        );
    }
}
Note: To customise button theme, refer Theme Color

Customize Card

Steps to customize theme for Card attributes:

Property Description
cardDefaultBg Background color for card item
listBorderColor Card and CardItem border color
listItemPadding Padding between card items
Syntax
import React, { Component } from 'react-native';
import { Container, Content, Card, CardItem, Text } from 'native-base';
import myTheme from './Themes/myTheme';
​
export default class ThemeCardExample extends Component {
    render() {
        return (
            <Container>
                <Content theme={myTheme}>
                    <Card>
                        <CardItem>
                            <Text>
                                NativeBase is a free and open source framework that enables 
                                developers to build high-quality mobile apps using React Native 
                                iOS and Android apps with a fusion of ES6.
                            </Text>
                        </CardItem>
                    </Card>
                </Content>
            </Container>
        );
    }
}


Customize Check Box

Steps to customize theme for Check Box attributes:

Property Description
checkboxBgColor Checkbox background color
checkboxTickColor Checkbox tick color
checkboxSize Checkbox size
Syntax
import React, { Component } from 'react-native';
import { Container, Content, List, ListItem, CheckBox, Text } from 'native-base';
import myTheme from './Themes/myTheme';
​
export default class ThemeCheckBoxExample extends Component {
    render() {
        return (
            <Container>
                <Content theme={myTheme}>
                    <List>
                        <ListItem>
                            <CheckBox checked={true} />
                            <Text>Daily Stand Up</Text>
                        </ListItem>
                        <ListItem>
                            <CheckBox checked={false} />
                            <Text>Discussion with Client</Text>
                        </ListItem>
                    </List>
                </Content>
            </Container>
        );
    }
}


Customize Footer Tabs

Steps to customize theme for Footer Tabs attributes:

Property Description
tabBarTextColor Text color when inactive
tabBarActiveTextColor Text color when active
tabActiveBgColor Tab background color when active
Syntax
import React, { Component } from 'react-native';
import { Container, Content, Footer, FooterTab, Button, Icon } from 'native-base';
import myTheme from './Themes/myTheme';
​
export default class ThemeFooterTabsExample extends Component {
    render() {
        return (
            <Container>
                <Conent theme={myTheme} />
                <Footer >
                    <FooterTab>
                        <Button>
                            Apps
                            <Icon name='ios-apps-outline' />
                        </Button>
                        <Button>
                            Camera
                            <Icon name='ios-camera-outline' />
                        </Button>
                        <Button active>
                            Navigate
                            <Icon name='ios-compass' />
                        </Button>
                        <Button>
                            Contact
                            <Icon name='ios-contact-outline' />
                        </Button>
                    </FooterTab>
                </Footer>
            </Container>
        );
    }
}


Customize Header

Steps to customize theme for Header attributes:

Property Description
toolbarHeight Header height
toolbarDefaultBg Header background color
toolbarTextColor Title color in Header
iosToolbarBtnColor Button color in Header
toolbarIconSize Icon size in Header
Syntax
import React, { Component } from 'react-native';
import { Container, Header, Button, Title, Icon } from 'native-base';
import myTheme from './Themes/myTheme';
​
export default class ThemeHeaderExample extends Component {
    render() {
        return (
            <Container theme={myTheme}>
                <Header>
                    <Button transparent>
                        <Icon name='ios-arrow-back' />
                    </Button>

                    <Title>Header</Title>

                    <Button transparent>
                        <Icon name='ios-menu' />
                    </Button>
                </Header>
            </Container>
        );
    }
}


Customize Icons

Steps to customize theme for Icon attributes:

Property Description
iconFamily Name of Icon family
iconFontSize Icon size
textColor Icon text color
Syntax
import React, { Component } from 'react-native';
import { Container, Content, Icon } from 'native-base';
import myTheme from './Themes/myTheme';
​
export default class ThemeIconExample extends Component {
    render() {
        return (
            <Container>
                <Content theme={myTheme}>
                    <Icon name='ios-star' />
                </Content>
            </Container>
        );
    }
}


Customize InputGroup

Steps to customize theme for InputGroup attributes:

Property Description
inputFontSize Input font size for textbox
textColor Input text color for textbox
inputBorderColor Border color for textbox
inputSuccessBorderColor Border color for textbox with valid input
inputErrorBorderColor Border color for textbox with invalid input
inputColorPlaceholder Placeholder color for textbox
inputHeightBase Padding between textbox
inputPaddingLeftIcon Padding between icon and text for textbox
Syntax
import React, { Component } from 'react-native';
import { Container, Content, InputGroup, Input } from 'native-base';
import myTheme from './Themes/myTheme';
​
export default class ThemeInputGroupExample extends Component {
    render() {
        return (
            <Container>
                <Content theme={myTheme}>
                    <InputGroup borderType='underline' >
                        <Input placeholder='Underlined Textbox' />
                    </InputGroup>
                </Content>
            </Container>
        );
    }
}


Customize List

Steps to customize theme for List attributes:

Property Description
listBorderColor List border color
listDividerBg List divider background color
listItemPadding Padding between list items
listNoteColor List note color
listNoteSize Font size for Note in list items
listItemHeight Height of list item
Syntax
import React, { Component } from 'react-native';
import { Container, Content, List, ListItem, Text, Icon } from 'native-base';
import myTheme from './Themes/myTheme';
​
export default class ThemeListExample extends Component {
    render() {
        return (
            <Container>
                <Content theme={myTheme}>
                    <List>
                        <ListItem itemDivider>
                            <Text>Goalkeeper</Text>
                        </ListItem>
                        <ListItem >
                            <Text>Simon Mignolet</Text>
                        </ListItem>

                        <ListItem itemDivider>
                            <Text>Defenders</Text>
                        </ListItem>
                        <ListItem>
                            <Text>Nathaniel Clyne</Text>
                        </ListItem>
                        <ListItem iconLeft>
                            <Icon name='ios-notifications' />
                            <Text>Dejan Lovren</Text>
                            <Text note>Note here</Text>
                        </ListItem>
                        <ListItem iconLeft iconRight>
                            <Icon name='ios-mic' />
                            <Text>Mama Sakho</Text>
                            <Icon name='ios-mic-outline' />
                        </ListItem>
                    </List>
                </Content>
            </Container>
        );
    }
}


Customize Picker

Customize Header for Picker

Syntax
import React, { Component } from 'react-native';
import { Container, Content, Picker } from 'native-base';

const Item = Picker.Item;
​
export default class ThemePickerExample extends Component {
    
    constructor(props) {
        super(props);
        this.state = {
            selectedItem: undefined,
            selected1: 'key1',
            results: {
                items: []
            }
        }
    }
    
    onValueChange (value: string) {
        this.setState({
            selected1 : value
        });
    }

    render() {
        return (
            <Container>
                <Content>
                    <Picker
                        headerComponent={
                            <Header>
                                <Button transparent>
                                    Custom Back
                                </Button>
                                <Title>Custom Header</Title>
                            </Header>
                        }
                        mode='dropdown'
                        selectedValue={this.state.selected1}
                        onValueChange={this.onValueChange.bind(this)}>
                        <Item label='Cats' value='key0' />
                        <Item label='Dogs' value='key1' />
                        <Item label='Birds' value='key2' />
                        <Item label='Elephants' value='key3' />
                   </Picker>
                </Content>
            </Container>
        );
    }
}


Customize Radio Button

Steps to customize theme for Radio Button attributes:

Property Description
radioBtnSize Radio Button size
radioColor Unselected radio button background color
radioSelectedColor Selected radio button background color
Syntax
import React, { Component } from 'react-native';
import { Container, Content, List, ListItem, Radio, Text } from 'native-base';
import myTheme from './Themes/myTheme';
​
export default class ThemeRadioButtonExample extends Component {
    render() {
        return (
            <Container>
                <Content theme={myTheme}>
                    <List>
                        <ListItem>
                            <Radio selected={false} />
                            <Text>Daily Stand Up</Text>
                        </ListItem>
                        <ListItem>
                            <Radio selected={true} />
                            <Text>Discussion with Client</Text>
                        </ListItem>
                    </List>
                </Content>
            </Container>
        );
    }
}


Customize Search Bar

Steps to customize theme for Search Bar attributes:

Property Description
toolbarInputColor Background color for textbox in Header
toolbarIconSize Icon size in Search bar
Syntax
import React, { Component } from 'react-native';
import { Container, Header, Button, Icon, InputGroup, Input } from 'native-base';
import myTheme from './Themes/myTheme';
​
export default class ThemeSearchBarExample extends Component {
    render() {
        return (
            <Container theme={myTheme}>
                <Header searchBar rounded>
                    <InputGroup>
                        <Icon name='ios-search' />
                        <Input placeholder='Search' />
                        <Icon name='ios-people' />
                    </InputGroup>
                    <Button transparent>
                        Search
                    </Button>
                </Header>
            </Container>
        );
    }
}


Customize Tabs

Steps to customize theme for Tab attributes:

Property Description
tabBgColor Background color for Tabs
tabTextColor Text color for Tabs
tabFontSize Font size of text on Tabs
Syntax
import React, { Component } from 'react';
import { Container, Content, Tabs } from 'native-base';
import myTheme from './Themes/myTheme';

import TabOne from './tabOne';
import TabTwo from './tabTwo';
​
export default class ThemeTabsExample extends Component {
    render() {
        return (
            <Container>
                <Content theme={myTheme}>
                    <Tabs>
                        <TabOne tabLabel='One' />
                        <TabTwo tabLabel='Two' />
                    </Tabs>
                </Content>
            </Container>
        );
    }
}


Customize Header Tags

Steps to customize theme for Header Tag attributes:

Property Description
fontSizeH1 Font size for H1
lineHeightH1 Line height for H1
fontSizeH2 Font size for H2
lineHeightH2 Line height for H2
fontSizeH3 Font size for H3
lineHeightH3 Line height for H3
Syntax
import React, { Component } from 'react';
import { Container, Content, H1, H2, H3 } from 'native-base';
import myTheme from './Themes/myTheme';
​
export default class ThemeTypographyExample extends Component {
    render() {
        return (
            <Container>
                <Content theme={myTheme}>
                    <H1>Header One</H1>
                    <H2>Header Two</H2>
                    <H3>Header Three</H3>
                </Content>
            </Container>
        );
    }
}



More to come . . .