Rn-bounceable NPM

Quick start

> yarn add rn-bounceable

Make sure you have react-native-reanimated and react-native-gesture-handler installed in your project.

Usage

import {Image} from 'react-native';
import {Bounceable} from 'rn-bounceable';

class Screen = () => {
  return (
    <Bounceable>
      <Image source={{uri: 'https://static.expo.dev/static/brand/square-512x512.png'}} />
    </Bounceable>
  )
}

Expo Web

Since rn-bounceable uses Reanimated 2, we need its babel plugin to be applied. Expo Web doesn't transpile modules by default, so we'll need to tell it to transpile the library.

Install @expo/webpack-config:

yarn add -D @expo/webpack-config

Create webpack.config.js in the root of your project:

const createExpoWebpackConfigAsync = require('@expo/webpack-config')

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(
    {
      ...env,
      babel: { dangerouslyAddModulePathsToTranspile: ['rn-bounceable'] },
    },
    argv
  )

  return config
}

Don't forget to add webpack.config.js into tsconfig.json under exclude section, if needed.

Available props

type BounceableProps = {
  onPress?: () => void;
  onLongPress?: () => void;
  disabled?: boolean; // default: false
  noBounce?: boolean; // default: false
  immediatePress?: boolean; // default: true
  delayLongPress?: number; // default: 800
  activeScale?: number; // default: 0.95
  delayActiveScale?: number; // default: 0
  springConfig?: Animated.WithSpringConfig; // default: { damping: 10, mass: 1, stiffness: 300 }
  contentContainerStyle?: StyleProp<ViewStyle>;
};