React Native Bouncy Checkbox

React Native Bouncy Checkbox is a customizable, animated checkbox component for React Native. It offers a bouncy animation when checked or unchecked, and includes customizable colors.

Installation

npm install react-native-bouncy-checkbox

Usage

Import the Checkbox component from react-native-bouncy-checkbox and use it in your code:

import React from 'react';
import { View, Text } from 'react-native';
import Checkbox from 'react-native-bouncy-checkbox';

const App = () => {
  const [isChecked, setIsChecked] = React.useState(false);

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Checkbox
        isChecked={isChecked}
        onPress={() => setIsChecked(!isChecked)}
        text="Agree to Terms and Conditions"
      />
    </View>
  );
};

export default App;

Props

• isChecked (boolean) - whether the checkbox is checked or not
• onPress (function) - function to be called when the checkbox is pressed
• size (number) - size of the checkbox (default is 24)
• color (string) - color of the checkbox (default is '#5B5B5B')
• borderColor (string) - color of the checkbox border (default is '#5B5B5B')
• backgroundColor (string) - color of the checkbox background when checked (default is '#5B5B5B')
• text (string) - text to be displayed next to the checkbox
• textStyle (object) - style object for the text
• textPosition (string) - position of the text relative to the checkbox (default is 'right', can also be 'left')
• duration (number) - duration of the bouncy animation (default is 200)

Example

You can customize the checkbox colors and text using the props:

<Checkbox
  isChecked={isChecked}
  onPress={() => setIsChecked(!isChecked)}
  text="Agree to Terms and Conditions"
  size={30}
  color="#FF0000"
  borderColor="#FF0000"
  backgroundColor="#FFFFFF"
  textStyle={{ color: '#000000', fontWeight: 'bold' }}
  textPosition="left"
  duration={300}
/>

This will display a larger, red checkbox with white background and black bold text on the left of the checkbox. The bouncy animation will also last 300 milliseconds.

Conclusion

React Native Bouncy Checkbox is a simple and customizable component that can add some flair to your forms and interfaces. It is easy to use and offers a range of customization options.