Skip to content

Instantly share code, notes, and snippets.

@JoeM-RP
Last active Apr 16, 2019
Embed
What would you like to do?
import * as React from 'react';
import { Animated, Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import { Constants } from 'expo';
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
export default class App extends React.Component {
scaleInAnimated = new Animated.Value(0);
scaleOutAnimated = new Animated.Value(0);
render() {
return (
<View style={styles.container}>
<TouchableOpacity
onPress={() => { console.warn("I did it!")}}
onPressIn={() => {SCALE.pressInAnimation(this.scaleInAnimated);}}
onPressOut={() => {SCALE.pressOutAnimation(this.scaleInAnimated);}}
style={SCALE.getScaleTransformationStyle(this.scaleInAnimated)}
>
<Animated.View>
<Card>
<AssetExample />
</Card>
</Animated.View>
</TouchableOpacity>
<View style={{margin: 10, height: 10}}/>
<TouchableOpacity
onPress={() => { console.warn("I did it!")}}
onPressIn={() => {SCALE.pressInAnimation(this.scaleOutAnimated);}}
onPressOut={() => {SCALE.pressOutAnimation(this.scaleOutAnimated);}}
style={SCALE.getScaleTransformationStyle(this.scaleOutAnimated, 1, 1.05)}
>
<Animated.View>
<Card>
<AssetExample />
</Card>
</Animated.View>
</TouchableOpacity>
</View>
);
}
}
// For large projects, this might better serve us exported from it's own file, so we could use it across man classes. i.e ./animations/scale.js
const SCALE = {
// ... see full contents below, or at https://gist.github.com/JoeM-RP/608c155f317a80634c2d1dfa4b962c2b
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#fff',
padding: 18,
},
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment