Recreating the Airbnb scaling effect on components with React native

Card.js

import React, { PureComponent } from 'react';
import { Dimensions, Animated, TouchableWithoutFeedback } from 'react-native';
import styled from 'styled-components';

// I use these values because I have two columns of cards with some space and because
// I want to keep a vertical ratio.
// You can change them for some fixed values or anything else, it depends of your needs
const cardWidth = (Dimensions.get('window').width / 2) - 30;
const cardHeight = cardWidth * 1.4

class Card extends PureComponent {
  constructor(props) {
    super(props);

    this.handlePressIn = this.handlePressIn.bind(this);
    this.handlePressOut = this.handlePressOut.bind(this);
  }

  componentWillMount() {
    this.scaleValue = new Animated.Value(1);
  }

  handlePressIn() {
    Animated.spring(this.scaleValue, {
      toValue: 0.97 // You can change this value if you want
    }).start();
  }

  handlePressOut() {
    Animated.spring(this.scaleValue, {
      toValue: 1
    }).start();
  }

  render() {
    const transformStyle = {
      transform: [{ scale: this.scaleValue }],
      width: cardWidth,
      height: cardHeight,
      marginLeft: 10,
      marginRight: 10,
      marginBottom: 20
    };

    return (
      <TouchableWithoutFeedback
        style={styles.touchableContainer}
        onPressIn={this.handlePressIn}
        onPressOut={this.handlePressOut}
      >
        <Animated.View
          style={transformStyle}
        >
          <StyledCard />
        </Animated.View>
      </TouchableWithoutFeedback>
    );
  }
}

const StyledCard = styled.View`
  width: 100%;
  height: 100%;
  border-radius: 10px;
  border-width: 1px;
  border-color: #828282;
  position: relative;
  overflow: hidden;
  background-color: '#f8f9fb';
`;

const styles = {
  touchableContainer: {
    alignSelf: 'stretch'
  }
};

export default Card;