Instantly share code, notes, and snippets.

Embed
What would you like to do?
Recreating the Airbnb scaling effect on components with React native
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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment