https://github.com/wrathchaos/react-native-bounceable

🚀 Animate and bounce any component with RNBounceable for React Native
https://github.com/wrathchaos/react-native-bounceable

android animation apple bounce bounceable development freakycoder front-end google ios javascript react-native react-native-animation reactjs typescript

Last synced: 14 days ago
JSON representation

🚀 Animate and bounce any component with RNBounceable for React Native

• Host: GitHub
• URL: https://github.com/wrathchaos/react-native-bounceable
• Owner: WrathChaos
• Created: 2020-09-01T12:32:18.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2022-08-14T16:55:55.000Z (over 2 years ago)
• Last Synced: 2024-10-25T16:58:50.201Z (20 days ago)
• Topics: android, animation, apple, bounce, bounceable, development, freakycoder, front-end, google, ios, javascript, react-native, react-native-animation, reactjs, typescript
• Language: Java
• Homepage: https://freakycoder.com
• Size: 125 MB
• Stars: 71
• Watchers: 5
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


[![Battle Tested ✅](https://img.shields.io/badge/-Battle--Tested%20%E2%9C%85-03666e?style=for-the-badge)](https://github.com/WrathChaos/react-native-bounceable)

[![Animate and bounce any component with RNBounceable for React Native](https://img.shields.io/badge/-Animate%20and%20bounce%20any%20component%20with%20RNBounceable%20for%20React%20Native-orange?style=for-the-badge)](https://github.com/WrathChaos/react-native-bounceable)

[![npm version](https://img.shields.io/npm/v/@freakycoder/react-native-bounceable.svg?style=for-the-badge)](https://www.npmjs.com/package/@freakycoder/react-native-bounceable)

[![npm](https://img.shields.io/npm/dt/@freakycoder/react-native-bounceable.svg?style=for-the-badge)](https://www.npmjs.com/package/@freakycoder/react-native-bounceable)

![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg?style=for-the-badge)

[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)

[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier)



  



# Version 1 🚀

Finally we're published the `version 1` for the bounceable library

- Much better animation with `pressIn` and `pressOut` bounces 😍

- More than 90k downloads and battle tested 💪

# Installation

Add the dependency:

```bash

npm i @freakycoder/react-native-bounceable

```

# Usage

## Import

```jsx

import RNBounceable from "@freakycoder/react-native-bounceable";

```

## Fundamental Usage

You can put **ANY children component** inside the **RNBounceable** component, it will make it bounce when it is pressed

```jsx

 {}}>

  

    Bounce

  

```

# Configuration - Props

| Property        |   Type   |  Default  | Description                                      |

| --------------- | :------: | :-------: | ------------------------------------------------ |

| onPress         | function | undefined | set your own logic for the onPress functionality |

| style           |  style   | undefined | set the style like any other View container      |

| bounceEffect    |  number  |    0.9    | change the bounce effect's value                 |

| bounceFriction  |  number  |     3     | change the bounce effect's friction value        |

| useNativeDriver | boolean  |   true    | change the useNativeDriver's usage               |

| animate         | function |  default  | activate the bounce effect animation             |

## Future Plans

- [x] ~~LICENSE~~

- [x] ~~More customizable animation props~~

- [ ] Write an article about the lib on Medium

## Author

FreakyCoder, [email protected]

## License

React Native Bounceable is available under the MIT license. See the LICENSE file for more info.