r



!Platform - Android and iOS

src="assets/react-native-bounceable.gif" />

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


`

Basic Examples

$3

`jsx
onPress={() => console.log('Pressed!')}
bounceEffectIn={0.92}
bounceEffectOut={1}
bounceVelocityIn={0.2}
bounceVelocityOut={0.45}
bouncinessIn={6}
bouncinessOut={0}
style={{
backgroundColor: '#111827', paddingVertical: 12, paddingHorizontal: 16, borderRadius: 12,
}}
>
Tap me

`

$3

`jsx
bounceEffectIn={0.97}
bounceEffectOut={1}
bounceVelocityIn={0.15}
bounceVelocityOut={0.4}
bouncinessIn={0}
bouncinessOut={0}
style={(state) => [{
paddingVertical: 12, paddingHorizontal: 16, borderRadius: 12,
backgroundColor: state.pressed ? '#0ea5e9' : '#3b82f6',
}]}
onPress={() => {}}
>
Pressed color

`

$3

`jsx
bounceEffectIn={0.88}
bounceEffectOut={1}
bounceVelocityIn={0.35}
bounceVelocityOut={0.7}
bouncinessIn={16}
bouncinessOut={6}
style={{ backgroundColor: '#22c55e', padding: 12, borderRadius: 12 }}
>
Custom spring

`

$3

`jsx
backgroundColor: '#9ca3af', padding: 12, borderRadius: 12, opacity: 0.6,
}}>
Disabled

`

$3

`jsx
bounceEffectIn={0.95}
bounceEffectOut={1}
bounceVelocityIn={0.25}
bounceVelocityOut={0.5}
bouncinessIn={10}
bouncinessOut={0}
onPressIn={() => console.log('press in')}
onPressOut={() => console.log('press out')}
style={{ backgroundColor: '#111827', padding: 12, borderRadius: 12 }}
>
Press events

`

$3

`jsx
bounceEffectIn={0.85}
bounceEffectOut={1}
bounceVelocityIn={0.4}
bounceVelocityOut={0.65}
bouncinessIn={14}
bouncinessOut={4}
onLongPress={() => console.log('long press')}
delayLongPress={300}
style={{ backgroundColor: '#111827', padding: 12, borderRadius: 12 }}
>
Hold me

`

$3

`jsx
bounceEffectIn={0.9}
bounceEffectOut={1}
bounceVelocityIn={0.5}
bounceVelocityOut={0.6}
bouncinessIn={18}
bouncinessOut={6}
onPress={() => {}}
style={{ height: 44, width: 44, borderRadius: 22, alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff' }}
>
❤️

`

Configuration - Props

| Property | Type | Default | Description |
| ------------------ | :----------------: | :-----: | ---------------------------------------------------------- |
| onPress | function | - | Callback for press |
| style | Pressable style | - | Style object/array or function (state) => style |
| bounceEffectIn | number | 0.93 | Scale value applied on press in |
| bounceEffectOut | number | 1 | Scale value applied on press out |
| bounceVelocityIn | number | 0.1 | Spring velocity for press in |
| bounceVelocityOut | number | 0.4 | Spring velocity for press out |
| bouncinessIn | number | 0 | Spring bounciness for press in |
| bouncinessOut | number | 0 | Spring bounciness for press out |
| useNativeDriver | boolean | true | Use native driver for animation |

All React Native Pressable props are supported and forwarded (including onPressIn, onPressOut, disabled, and ref). The bounce effect is skipped when disabled` is true.

Future Plans

- [x] ~~LICENSE~~
- [x] ~~More customizable animation props~~
- [ ] Write an article about the lib on Medium

Author

FreakyCoder, kurayogun@gmail.com

License

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