WrathChaos / react-native-bouncy-checkbox

Fully customizable animated bouncy checkbox for React Native
https://freakycoder.com
MIT License
750 stars 57 forks source link

check icon not rendering on react native web #103

Open louisholley opened 2 years ago

louisholley commented 2 years ago

hey, thanks for this package it looks great! I've added it to a react native web project and the checkbox seems to toggle state correctly but no check icon is shown, so it's just a colour changing box currently...I've tried passing in an iconComponent but when i do that the iconComponent is always rendered, even when the box isn't checked

WrathChaos commented 2 years ago

Hello @louisholley I don't have any experience with react-native-web unfortunately :(

I would like to help if you can fix it I would love to take a look at the PR

kyle-belle commented 7 months ago

This happen for me even on android

kyle-belle commented 7 months ago

what i would recommend is just downloading a check icon png, even the one from this project, which is what i did and use it as the source. I created a thin wrapper which uses the downloaded check icon by default

src/Components/Common/BouncyCheckbox.tsx

import _BouncyCheckbox, {
  type IBouncyCheckboxProps,
} from 'react-native-bouncy-checkbox';
import CheckIcon from '@assets/Images/check.png'; // you can also use require here if you prefer or if importing images doesn't work for you

const BouncyCheckbox = ({
  checkIconImageSource = CheckIcon,
  ...props
}: IBouncyCheckboxProps) => {
  return (
    <_BouncyCheckbox checkIconImageSource={checkIconImageSource} {...props} />
  );
};

export {BouncyCheckbox};