Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
React Native Easing animations
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
Easing,
Animated,
TouchableHighlight,
ScrollView
} = React;
class SampleApp extends React.Component {
constructor () {
super()
this.animatedValue = new Animated.Value(0)
}
animate (easing) {
this.animatedValue.setValue(0)
Animated.timing(
this.animatedValue,
{
toValue: 1,
duration: 1000,
easing
}
).start()
}
render () {
const marginLeft = this.animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [0, 260]
})
return (
<View style={styles.container}>
<Animated.View style={[styles.block, {marginLeft} ]} />
<ScrollView>
<Text style={{textAlign: 'center'}}>Scroll up for more animations</Text>
<Button easing='Bounce' onPress={this.animate.bind(this, Easing.bounce)} />
<Button easing='Cubic' onPress={this.animate.bind(this, Easing.cubic)} />
<Button easing='Back' onPress={this.animate.bind(this, Easing.back(2))} />
<Button easing='Elastic' onPress={this.animate.bind(this, Easing.elastic(2))} />
<Button easing='Ease' onPress={this.animate.bind(this, Easing.ease)} />
<Button easing='InOut' onPress={this.animate.bind(this, Easing.inOut(Easing.quad))} />
<Button easing='In' onPress={this.animate.bind(this, Easing.in(Easing.quad))} />
<Button easing='Out' onPress={this.animate.bind(this, Easing.out(Easing.quad))} />
<Button easing='Sin' onPress={this.animate.bind(this, Easing.sin)} />
<Button easing='Linear' onPress={this.animate.bind(this, Easing.linear)} />
<Button easing='Quad' onPress={this.animate.bind(this, Easing.quad)} />
</ScrollView>
</View>
);
}
}
const Button = ({onPress, easing}) => (
<TouchableHighlight style={styles.button} onPress={onPress}>
<Text>{easing}</Text>
</TouchableHighlight>
)
var styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 60
},
button: {
height: 60,
marginLeft: 10,
marginRight: 10,
backgroundColor: '#ededed',
justifyContent: 'center',
alignItems: 'center',
marginTop: 10
},
block: {
width: 50,
height: 50,
backgroundColor: 'red'
}
});
AppRegistry.registerComponent('SampleApp', () => SampleApp);
@anton-matosov

This comment has been minimized.

Copy link

commented Nov 16, 2017

Adopted to snack expo https://gist.github.com/anton-matosov/82ed8d596b1e3d18fbeb2f99f6dcb471 + changed button to look native
Snack link https://snack.expo.io/HynFGjcyf

@jamessawyer

This comment has been minimized.

Copy link

commented Oct 8, 2018

'Easing.out', 'Easing.back' and 'Easing.inOut' seems have no effect, what else works fine, I have no idea why this happens
'

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.