React Native CheckBox component

Installation

npm i @malik.aliyev.94/react-native-checkbox

Usage example

import CheckBox from '@malik.aliyev.94/react-native-checkbox';

<CheckBox />

API

Property	Optional	Default	Description
style	yes	empty	style for a container
disabled	yes	false	whether checkbox disabled or not
name	yes	empty	input name
value	yes	empty	input value
checked	yes	false	whether the input checked or not initially
onChange	yes	empty	function to call on change event
content	yes	'append'	'append' or 'prepend' children
componentChecked	yes	default	input checked view
componentNotChecked	yes	default	input not checked view

Examples

Checked property

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import CheckBox from '@malik.aliyev.94/react-native-checkbox';

const Heading = ({title}) => (
  <Text style={{fontSize: 20, fontWeight: 'bold', color: '#AAA', marginTop: 30}}>{title}</Text>
);

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Heading title="This is a checkbox :unchecked" />
        <CheckBox />
        <Heading title="This is a checkbox :checked" />
        <CheckBox checked={true} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Content property

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import CheckBox from '@malik.aliyev.94/react-native-checkbox';

const Heading = ({title}) => (
  <Text style={{fontSize: 20, fontWeight: 'bold', color: '#AAA', marginTop: 30}}>{title}</Text>
);

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Heading title="Children :appended" />
        <CheckBox content='append'>
          <Text style={{padding: 5}}>Sample Text</Text>
        </CheckBox>
        <Heading title="Children :prepended" />
        <CheckBox checked={true} content='prepend'>
          <Text style={{padding: 5}}>Sample Text</Text>
        </CheckBox>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Container style

This is a previous example with styled container

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import CheckBox from '@malik.aliyev.94/react-native-checkbox';

const Heading = ({title}) => (
  <Text style={{fontSize: 20, fontWeight: 'bold', color: '#AAA', marginTop: 30}}>{title}</Text>
);

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Heading title="Children :appended" />
        <CheckBox content='append' style={{flexDirection: 'row'}}>
          <Text style={{padding: 5}}>Sample Text</Text>
        </CheckBox>
        <Heading title="Children :prepended" />
        <CheckBox checked={true} content='prepend' style={{flexDirection: 'row'}}>
          <Text style={{padding: 5}}>Sample Text</Text>
        </CheckBox>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Disabled checkbox

  ...
  render() {
    return (
      <View style={styles.container}>
        <Heading title="Checkbox :disabled" />
        <CheckBox disabled style={{flexDirection: 'row'}}>
          <Text style={{padding: 5}}>Sample Text</Text>
        </CheckBox>
        <CheckBox disabled={true} style={{flexDirection: 'row'}} checked={true}>
          <Text style={{padding: 5}}>Sample Text</Text>
        </CheckBox>
      </View>
    );
  }
  ...

name, value & onChange properties

import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import CheckBox from '@malik.aliyev.94/react-native-checkbox';

const Heading = ({title}) => (
  <Text style={{fontSize: 20, fontWeight: 'bold', color: '#AAA', marginTop: 30}}>{title}</Text>
);

export default class App extends React.Component {

  constructor() {
    super();
    this.state = {
      checked: true,
    };
  }

  onChange(input) {
    console.log(input);
  }

  onPress() {
    this.setState({
      checked: !this.state.checked
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <Heading title="Full example" />
        <CheckBox content='append' style={{flexDirection: 'row'}} checked={this.state.checked} name='thisIsMyInputName' value='thisIsMyInputValue' onChange={this.onChange.bind(this)}>
          <Text style={{padding: 5}}>Sample Text</Text>
        </CheckBox>
        <Button onPress={this.onPress.bind(this)} title='Toggle checkbox' />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Console output on change is:

Object {
  "checked": false,
  "name": "thisIsMyInputName",
  "value": "thisIsMyInputValue",
}

Custom CheckBox

You can create your custom view using componentChecked and componentNotChecked properties. See the example below:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import CheckBox from '@malik.aliyev.94/react-native-checkbox';

const ComponentChecked = (props) => (
  <View style={{padding: 10, borderRadius: 6, backgroundColor: 'blue'}}>
    <Text style={{color: '#FFF'}}>{props.label}</Text>
  </View>
);
const ComponentNotChecked = (props) => (
  <View style={{padding: 10, borderRadius: 6, backgroundColor: '#f2f2f2'}}>
    <Text style={{color: '#333'}}>{props.label}</Text>
  </View>
);

const Heading = ({title}) => (
  <Text style={{fontSize: 20, fontWeight: 'bold', color: '#AAA', marginTop: 30}}>{title}</Text>
);

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      loremChecked: true,
    };
  }

  onChange_1(...props) {
    console.log(props);
  }

  onChange_2(param, input) {
    console.log(param);
    console.log(input);
  }

  render() {
    return (
      <View style={styles.container}>

        <Heading title="Example 1" />
        <CheckBox style={{flexDirection: 'row'}} checked={false} onChange={this.onChange_1.bind(this, 'Param 1')} componentChecked={<Text>C H E C K E D</Text>} componentNotChecked={<Text>N O T   C H E C K E D</Text>}>
          <Text style={{paddingLeft: 20}}>Lorem ipsum</Text>
        </CheckBox>

        <Heading title="Example 2" />
        <CheckBox checked onChange={this.onChange_2.bind(this, 'Param 1')} componentChecked={<ComponentChecked label="Checked" />} componentNotChecked={<ComponentNotChecked label="Not Checked" />} />

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});