https://github.com/rafalmeida73/heart-switch-react-native
A heart-shaped toggle switch component for React Native
https://github.com/rafalmeida73/heart-switch-react-native
component expo javascript react-component react-native switch toggle toggle-switch typescript
Last synced: 3 months ago
JSON representation
A heart-shaped toggle switch component for React Native
- Host: GitHub
- URL: https://github.com/rafalmeida73/heart-switch-react-native
- Owner: rafalmeida73
- License: mit
- Created: 2025-10-10T14:59:43.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-10-15T20:06:26.000Z (4 months ago)
- Last Synced: 2025-10-18T07:12:37.840Z (4 months ago)
- Topics: component, expo, javascript, react-component, react-native, switch, toggle, toggle-switch, typescript
- Language: TypeScript
- Homepage: https://snack.expo.dev/@rafalmeida73/heart-switch-react-native
- Size: 3.69 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
heart-switch-react-native
A heart-shaped toggle switch component for React Native. Inspired by heart-switch
## 🚀 Getting Started
### ⚡️ Quick Start
```shell
npm install heart-switch-react-native react-native-reanimated react-native-svg react-native-worklets
```
```jsx
import { useState } from 'react';
import { HeartSwitch } from 'heart-switch-react-native';
function Example() {
const [checked, setChecked] = useState(false);
return (
{
setChecked(event);
}}
/>
);
}
```
### 💻 Live Demo
https://snack.expo.dev/@rafalmeida73/heart-switch-react-native
## ⚙️ Configuration
`HeartSwitch` supports the following props:
| Prop | Type | Default value | Description |
| ------------------- | --------------------- | ------------- | ----------------------------------------------------------------------------------------------------- |
| size | string | `md` | The size of the toggle switch. Available sizes: `sm`, `md`, `lg` |
| checked | boolean | `false` | Controls whether the switch is in the "on" (true) or "off" (false) state |
| onChange | function | - | Callback function called when the switch state changes. Receives the new boolean state as a parameter |
| duration | number | `300` | Duration of the animation in milliseconds when the switch toggles |
| disabled | boolean | `false` | When true, prevents user interaction and applies disabled styling |
| circleColor | string | `#f0f0f0` | Color of the circular toggle element that moves within the switch |
| fillColor | string | `#ff708f` | Background fill color of the heart when active (checked=true) |
| strokeColor | string | `#ff4e74` | Border/stroke color of the heart when active (checked=true) |
| inactiveFillColor | string | `#dcdada` | Background fill color of the heart when inactive (checked=false) |
| inactiveStrokeColor | string | `#b0adad` | Border/stroke color of the heart when inactive (checked=false) |
| disabledCircleColor | string | `#f4f4f4` | Color of the circle when the switch is disabled |
| disabledFillColor | string | `#e1e1e1` | Background fill color when disabled |
| disabledStrokeColor | string | `#c8c8c8` | Border/stroke color when disabled |
| initialAnimation | boolean | `false` | When true, enables animation on initial render or when checked prop changes programmatically |
| containerProps | ViewProps | - | Additional props to pass to the container View component |
| buttonProps | TouchableOpacityProps | - | Additional props to pass to the TouchableOpacity button component |
| circleProps | ViewProps | - | Additional props to pass to the circle View component |