Skip to content

Instantly share code, notes, and snippets.

@shubhnik
Last active October 1, 2017 19:42
Show Gist options
  • Save shubhnik/aaf759ecdd28b9d1ed289adacf7be94e to your computer and use it in GitHub Desktop.
Save shubhnik/aaf759ecdd28b9d1ed289adacf7be94e to your computer and use it in GitHub Desktop.
responsive Instagram/medium like images. I have added animation to remove the snappy behaviour if any that occurs when the thumbnail is removed and original image is shown.
import React, { Component } from 'react';
import {
View,
Image,
Animated
} from 'react-native';
export default class responsiveImage extends Component {
state={
imageLoaded:false,
thumbnailOpacity: new Animated.Value(1)
}
imageLoaded(){
Animated.timing(
this.state.thumbnailOpacity,
{
toValue:0,
duration:500
}
).start(() => this.setState({imageLoaded:true}))
}
render() {
return (
<View
style={{flex:1, justifyContent:'center', alignItems:'center', backgroundColor:'black'}}
>
{
this.state.imageLoaded
? null
:
<Animated.Image
style={{height:'75%', width:'75%', position:'absolute', opacity:this.state.thumbnailOpacity}}
source={{uri:'https://s3-us-west-2.amazonaws.com/ticketmgmt/profileThumb_1506777767750.jpg'}}
blurRadius={15}
/>
}
<Image
onLoad={() => this.imageLoaded()}
style={{height:'75%', width:'75%'}}
source={{uri:'https://s3-us-west-2.amazonaws.com/ticketmgmt/profilePic_1506777767750.jpg'}}
/>
</View>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment