r

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:

npm i @freakycoder/react-native-bounceable

Usage

Import

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

<RNBounceable onPress={() => {}}>
  <View style={styles.bounceButtonStyle}>
    <Text style={styles.bounceButtonTextStyle}>Bounce</Text>
  </View>
</RNBounceable>

Basic Examples

1) Simple button

<RNBounceable
  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,
  }}
>
  <Text style={{ color: '#fff', fontWeight: '600' }}>Tap me</Text>
</RNBounceable>

2) Pressed feedback (function style)

<RNBounceable
  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={() => {}}
>
  <Text style={{ color: '#fff', fontWeight: '600' }}>Pressed color</Text>
</RNBounceable>

3) Custom bounce tuning

<RNBounceable
  bounceEffectIn={0.88}
  bounceEffectOut={1}
  bounceVelocityIn={0.35}
  bounceVelocityOut={0.7}
  bouncinessIn={16}
  bouncinessOut={6}
  style={{ backgroundColor: '#22c55e', padding: 12, borderRadius: 12 }}
>
  <Text style={{ color: '#fff', fontWeight: '700' }}>Custom spring</Text>
</RNBounceable>

4) Disabled (no bounce)

<RNBounceable disabled style={{
  backgroundColor: '#9ca3af', padding: 12, borderRadius: 12, opacity: 0.6,
}}>
  <Text style={{ color: '#fff' }}>Disabled</Text>
</RNBounceable>

5) onPressIn / onPressOut

<RNBounceable
  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 }}
>
  <Text style={{ color: '#fff' }}>Press events</Text>
</RNBounceable>

6) Long press

<RNBounceable
  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 }}
>
  <Text style={{ color: '#fff' }}>Hold me</Text>
</RNBounceable>

7) Icon / Image as child

<RNBounceable
  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' }}
>
  <Text style={{ fontSize: 20 }}>❤️</Text>
</RNBounceable>

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

• LICENSE
• 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.