react-native-reanimated-bounce
Demo
Prereq
react-native-reanimated is needed:
yarn add react-native-reanimated react-native-reanimated-bounce
change babel.config.js
to:
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: ['react-native-reanimated/plugin'] // add this line to existing file
};
};
Usage
import * as React from 'react'
import { StyleSheet, Text, View, Button } from 'react-native';
import Animated, {
withTiming
} from 'react-native-reanimated'
import BounceView from 'react-native-reanimated-bounce'
export default function App() {
const animate = React.useRef(null)
return (
<Animated.View style={styles.container}>
<BounceView animate={animate} component={
<Animated.View style={{backgroundColor:'black', borderRadius:20, height:100, width:100}}/>
}/>
<Button onPress={()=> animate.current()} title='move'></Button>
</Animated.View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
}
});