wrathchaos/react-native-bounceable

🚀 Animate and bounce any component with RNBounceable for React Native

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>

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

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

react-native-bounceable's Issues

How do I disable the bouncy?

I want to disable the bounce in certain conditions, how can I do that?
I have tried setting all these props to 0

  bounceEffectIn?: number;
  bounceEffectOut?: number;
  bounceVelocityIn?: number;
  bounceVelocityOut?: number;
  bouncinessIn?: number;
  bouncinessOut?: number;

but it didn't work

Need an appropriate loader to handle this file type for RNBounceable.js

node_modules/@freakycoder/react-native-bounceable/build/dist/RNBounceable.js 30:16
Module parse failed: Unexpected token (30:16)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| render() {
| const { children, style } = this.props;

    return (<react_native_1.TouchableWithoutFeedback {...this.props} onPress={this.onPress.bind(this, react_native_1.Easing.bounce)}>

| <react_native_1.Animated.View style={[{ transform: [{ scale: this.state.springValue }] }, style]}>
| {children}

Do you know why this happening??