CheckBox.md

Customize Check Box

Steps to customize theme for Check Box attributes:

Property	Description
checkboxBgColor	Checkbox background color
checkboxTickColor	Checkbox tick color
checkboxSize	Checkbox size

With CheckBox theme

With this theme of CheckBox component you can modify any style rules applied to the default CheckBox component.

Syntax

import React, { Component } from 'react-native';
import { Container, Content, List, ListItem, CheckBox, Text, StyleProvider } from 'native-base';
import checkboxTheme from './Themes/checkboxTheme';
​// checkboxTheme is the customized theme of Badge Component
​
export default class ThemeCheckBoxExample extends Component {
    render() {
        return (
            <Container>
                <Content>
                    <StyleProvider style={checkboxTheme()}>
                        <ListItem>
                            <CheckBox checked={true} />
                            <Text>Daily Stand Up</Text>
                        </ListItem>
                        <ListItem>
                            <CheckBox checked={false} />
                            <Text>Discussion with Client</Text>
                        </ListItem>
                    </StyleProvider>
                </Content>
            </Container>
        );
    }
}

With Variables

With the variable.js file you can modify the variable values passed to the theme of the CheckBox component.
Say value of checkboxBgColor to change the background color of CheckBox.

Syntax

import React, { Component } from 'react-native';
import { Container, Content, List, ListItem, CheckBox, Text, StyleProvider, getTheme } from 'native-base';
import customVariables from './Themes/variable';
​// getTheme is default theme of NativeBase Components
// customVariables is customized variables used in the components theme
​
export default class ThemeCheckBoxExample extends Component {
    render() {
        return (
            <Container>
                <Content>
                    <StyleProvider style={getTheme(customVariables)}>
                        <ListItem>
                            <CheckBox checked={true} />
                            <Text>Daily Stand Up</Text>
                        </ListItem>
                        <ListItem>
                            <CheckBox checked={false} />
                            <Text>Discussion with Client</Text>
                        </ListItem>
                    </StyleProvider>
                </Content>
            </Container>
        );
    }
}