> yarn add rn-bounceableMake sure you have react-native-reanimated and react-native-gesture-handler installed in your project.
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>
)
}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.jsin 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.
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>;
};Examples could be found in expo-example folder or in expo-starter, rn-starter and rnn-starter.
See it with Expo Web or Expo Go.
This library was bootstrapped from kanzitelli/if-component.
RPReplay_Final1637513293.MP4
This project is MIT licensed