https://github.com/tiaanduplessis/react-native-modest-checkbox
A modest checkbox component for React Native ✅
https://github.com/tiaanduplessis/react-native-modest-checkbox
checkbox component react-native
Last synced: 11 months ago
JSON representation
A modest checkbox component for React Native ✅
- Host: GitHub
- URL: https://github.com/tiaanduplessis/react-native-modest-checkbox
- Owner: tiaanduplessis
- License: mit
- Created: 2017-02-05T21:26:04.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2019-10-01T11:00:49.000Z (over 6 years ago)
- Last Synced: 2025-07-26T06:32:33.006Z (11 months ago)
- Topics: checkbox, component, react-native
- Language: JavaScript
- Size: 792 KB
- Stars: 54
- Watchers: 1
- Forks: 20
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
A modest checkbox component for React Native
Table of Contents
Table of Contents
## About
A customizable checkbox component for React Native that supports setting a custom image or component as the checkbox. Inspired by [react-native-checkbox](https://github.com/sconxu/react-native-checkbox).
## Install
```sh
$ npm install --save react-native-modest-checkbox
```
```sh
$ yarn add react-native-modest-checkbox
```
## Usage
```js
// ... Imagine imports here
import Checkbox from 'react-native-modest-checkbox'
export default class App extends Component {
render() {
return (
console.log('Checked!')}
/>
);
}
}
const styles = StyleSheet.create({
// Imagine some amazing styles right here..
})
AppRegistry.registerComponent('App', () => App);
```
You can use your own images for the checkbox states:
```js
```
It can also be used with your own components for the checkbox states:
```js
// Using react-native-vector-icons
}
uncheckedComponent={}
label='Custom Component'
onChange={(checked) => console.log('Checked!')}
/>
```
## Props
Property
Description
Default Value
checkedComponent
Custom component representing the checked state
<Text>Checked</Text>
uncheckedComponent
Custom component representing the unchecked state
<Text>Unchecked</Text>
checked
Checked value of checkbox
false
checkboxStyle
Styles applied to the checkbox
{ width: 30, height: 30 }
label
Text that will be displayed next to the checkbox
'Label'
customLabel
Customize label using React Component
null
labelBefore
Flag if label should be before the checkbox
false
labelStyle
Styles applied to the label
{fontSize: 16, color: '#222'}
numberOfLabelLines
The number of lines over which the label will be displayed
1
containerStyle
Styles applied to the container of label & checkbox
{ flexDirection: 'row', alignItems: 'center'}
checkedImage
Image representing checked state (e.g. require('./path/to/image.png'))
checked.png
uncheckedImage
Image representing unchecked state (e.g. require('./path/to/image.png'))
unchecked.png
onChange
Callback that will be invoked when the checked state has changed. receives a object with name & checked properties as arguments
none
noFeedback
Use TouchableWithoutFeedback as container of checkbox
false
## Contribute
Contributions are welcome. Please open up an issue or create PR if you would like to help out.
Note: If editing the README, please conform to the [standard-readme](https://github.com/RichardLitt/standard-readme) specification.
## License
Licensed under the MIT License.
Icon made by Freepik from www.flaticon.com is licensed by CC 3.0 BY.