1.0.1 • Published 4 years ago

react-native-flexible-checkbox v1.0.1

Weekly downloads
10
License
MIT
Repository
github
Last release
4 years ago

react-native-flexible-checkbox

npm npm npm

Checkbox component made from Javascipt only, highly customizable for iOS and Android. Supports indeterminate values.


Example

ios-example android-example


Installation

npm instal --save react-native-flexible-checkbox

// OR

yarn add react-native-flexible-checkbox

Note

this library requires you to have react-native-vector-icons installed, steps to install and link it can be found on their github page here


Running the example

The application under ./checkboxExample will produce the example above.In order To run it, follow the steps below:

  • git clone https://github.com/zavin27/react-native-flexible-checkbox.git
  • cd react-native-flexible-checkbox && cd checkboxExample
  • yarn install
  • yarn run ios | yarn run android

Usage

Using react hooks

import React, {useState} from 'react';

import Checkbox from 'react-native-flexible-checkbox';

const App = () => {
    const [value, setValue] = useState('unchecked');

    return (
        <Checkbox
            checked={value}
            onChange={setValue}
        />
    )
}

You can find more examples on how to use it in checkboxExample/App.js


API

PropNotesTypeOptionalValuesDefault
checkedDetermines checkbox statestringfalse"checked", "unchecked", if indeterminate prop is true "indeterminate"
onChangeFunction that returns the new value when the checkbox is pressedfuncfalse(value: String) =>
indeterminateAllow indeterminate valuesbooltruetrue / falsefalse
touchableTypeDetermines the touchable component typestringtrue"opacity", "highlight", "withoutFeedback"opacity
touchablePropsTouchable component Props, depending on the typeobjecttrueTouchableWithoutFeedback, TouchableHighlight, TouchableOpacity
containerStylesStyles applied to the main container (touchable component)object,arraytrue
iconColorChanges icon colorstringtrueAny color value (hexadecimals, rgb, text)"white"
bashapeDetermines the predifined shapesstringtrue"square", "circle""square"
sizeDetermines the size of thee checkboxnumbertrue24

License

MIT