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:

Copy the file light.js (/node_modules/native-base/Components/Themes/light.js)
Create a folder Themes under your rootProject and paste the file here.
Say myTheme.js
Import the file Themes/myTheme.js into your code.
Make the necessary theme changes into myTheme.js.
Include prop theme with the component whose theme you wish to change.

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>
        );
    }
}

The theme prop can be applied to any component of NativeBase.
The theme holds good with all its descendants.
The above code for theme change works this way:
Go to Themes/myTheme.js and modify color code for textColor.
Similarly you can customize theme for the rest of NativeBase components by modifying color code of their respective attributes, some of which are explained below.

Theme Color

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

Primary color: brandPrimary
Info color: brandInfo
Success color: brandSuccess
Danger color: brandDanger
Warning color: brandWarning

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.

To include these fonts into your app, go to Themes/myTheme.js
Replace value for fontFamily with your choice of font name.

Font families included with NativeBase:

Andale Mono
Arial
Arial Black
Chalkboard
Cochin
Comic Sans MS
Courier New
Devanagiri
Georgia
Microsoft Sans Serif
Skia
Times New Roman

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

iOS

With rnpm
Run this command on your terminal
```
rnpm link
```
Manually

Browse through node_modules and drag the font file the ones you want to your project in Xcode. Make sure your app is checked under "Add to targets" and that "Create groups" is checked if you add the whole folder.
Edit Info.plist and include in property called Fonts provided by application and type in the files you just added.

Android

With rnpm
Run this command on your terminal
```
rnpm link
```
Manually

Copy the font files to android/app/src/main/assets/fonts.

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 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

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

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

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 Radio Button

Steps to customize theme for Radio Button attributes:

Property	Description
radioColor	Radio Button background color
radioBtnSize	Radio Button size

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 TabOne from './tabOne';
import TabTwo from './tabTwo';

export default class ThemeTabsExample extends Component {
    render() {
        return (
            <Container>
                <Content>
                    <Tabs>
                        <TabOne tabLabel='One' />
                        <TabTwo tabLabel='Two' />
                    </Tabs>
                </Content>
            </Container>
        );
    }
}

More to come . . .