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.


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:

Customize Theme

Customize Badge

Badge basically has two attributes: badge text color, badge background color.
Steps to customize theme for Badge attributes:

Syntax
import {Container, Content, Badge} from 'native-base';
import React, {Component} from 'react-native';
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 InputGroup

InputGroup attributes: border, placeholder, text/icon.
Steps to customize theme for InputGroup attributes:

Syntax
import {Container, Content, InputGroup, Inout, Icon} from 'native-base';
import React, {Component} from 'react-native';
import light from './Themes/light';
​
export default class ThemeInputGroupExample extends Component {
    render() {
        return (
            <Container>
                <Content theme={light}>
                    <InputGroup borderType="rounded" >
                        <Icon name={'ios-home'}/>
                        <Input placeholder="placeholder" />
                    </InputGroup>
                </Content>
            </Container>
        );
    }
}

Customize List

List attributes: list border color, list divider background color, list note color.
Steps to customize theme for List attributes:

Syntax
import {Container, Content, List, ListItem, Text, icon} from 'native-base';
import React, {Component} from 'react-native';
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 iconLeft>
                            <Icon name="ios-chatboxes" />
                            <Text>Simon Mignolet</Text>
                        </ListItem>

                        <ListItem itemDivider>
                            <Text>Defenders</Text>
                        </ListItem>
                        <ListItem>
                            <Text>Nathaniel Clyne</Text>
                        </ListItem>
                        <ListItem iconLeft>
                            <Icon name="ios-bell" />
                            <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>
        );
    }
}