Checkbox Component

A highly customizable and animated checkbox component for React Native applications with built-in label support and smooth animations.

Features

✅ Animated Interactions - Smooth bounce and scale animations
🎨 Highly Customizable - Full control over colors, sizes, and styling
📝 Label Support - Built-in text label with custom styling options
🎯 Flexible State Management - Controlled and uncontrolled modes
♿ Accessibility Ready - Screen reader support and proper semantics
🔧 TypeScript Support - Full type safety and IntelliSense

Installation

💻Bash

npm install rn-base-component
# or
yarn add rn-base-component

Basic Usage

⚛️TSX

import React from 'react'
import { Checkbox } from 'rn-base-component'

export default function App() {
  return (
     console.log('Checked:', checked)}
    />
  )
}

Controlled Component

⚛️TSX

import React, { useState } from 'react'
import { Checkbox } from 'rn-base-component'

export default function ControlledCheckbox() {
  const [isChecked, setIsChecked] = useState(false)

  return (
    
  )
}

Advanced Usage

Custom Styling

⚛️TSX

 console.log(checked)}
/>

Different Sizes

⚛️TSX

With Icons

⚛️TSX


  }
  onChange={checked => console.log(checked)}
/>

API Reference

CheckboxProps

Prop	Type	Default	Description
`value`	`boolean`	`false`	Current checked state
`onChange`	`(checked: boolean) => void`	Required	Callback when state changes
`label`	`string`	`undefined`	Text label for the checkbox
`size`	`number`	`20`	Size of the checkbox
`checkedColor`	`string`	`theme.primaryColor`	Color when checked
`uncheckedColor`	`string`	`theme.borderColor`	Color when unchecked
`borderRadius`	`number`	`4`	Border radius of the checkbox
`animationDuration`	`number`	`200`	Animation duration in milliseconds
`customIcon`	`React.ReactNode`	`undefined`	Custom icon when checked
`textStyle`	`StyleProp<TextStyle>`	`undefined`	Style for the label text
`style`	`StyleProp<ViewStyle>`	`undefined`	Style for the container
`disabled`	`boolean`	`false`	Disable the checkbox
`testID`	`string`	`undefined`	Test identifier for testing

Animation

The checkbox includes smooth scaling and color transition animations that can be customized with the animationDuration prop.

Form Integration

Registration Form

⚛️TSX

import React, { useState } from 'react'
import { View } from 'react-native'
import { Checkbox, Button } from 'rn-base-component'

export default function RegistrationForm() {
  const [acceptTerms, setAcceptTerms] = useState(false)
  const [newsletter, setNewsletter] = useState(false)

  const handleSubmit = () => {
    if (!acceptTerms) {
      alert('Please accept the terms and conditions')
      return
    }
    console.log('Form submitted', { acceptTerms, newsletter })
  }

  return (
    
      
      
      
      
      
    
  )
}

const styles = StyleSheet.create({
  form: {
    padding: 20,
  },
  checkbox: {
    marginBottom: 16,
  },
})

Best Practices

Clear Labels - Use descriptive, action-oriented labels
Consistent Styling - Maintain consistent size and colors across your app
Form Validation - Provide clear feedback for required checkboxes
Accessibility - Ensure proper accessibility labels and states
Touch Target - Maintain adequate touch target size (minimum 44px)
Visual Feedback - Use animations to provide clear state feedback

Performance

Avoid complex animations or heavy operations in the onChange callback for better performance.