boldchips.js

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,
  },
});