Skip to content

Instantly share code, notes, and snippets.

@steniowagner
Last active January 14, 2019 21:15
Show Gist options
  • Save steniowagner/04fe522f61c0d6058a6ea144dcfdb6bc to your computer and use it in GitHub Desktop.
Save steniowagner/04fe522f61c0d6058a6ea144dcfdb6bc to your computer and use it in GitHub Desktop.
// @flow
import React, { Component } from 'react';
import { View, StyleSheet, Animated } from 'react-native';
import styled from 'styled-components';
const Wrapper = styled(View)`
background-color: #e1e4e8;
`;
const styles = StyleSheet.create({
container: {
height: '100%',
width: '100%',
},
imageOverlay: {
bottom: 0,
left: 0,
position: 'absolute',
right: 0,
top: 0,
},
});
type Props = {
thumbnailSource: string,
source: string,
};
class ProgressiveImageLoadable extends Component<Props, {}> {
thumbnailOpacity = new Animated.Value(0);
imageOpacity = new Animated.Value(0);
onThumbnailLoaded = () => {
Animated.timing(this.thumbnailOpacity, {
toValue: 1,
}).start();
};
onImageLoaded = () => {
Animated.timing(this.imageOpacity, {
toValue: 1,
}).start();
};
render() {
const { thumbnailSource, source } = this.props;
return (
<Wrapper>
<Animated.Image
style={[styles.container, { opacity: this.thumbnailOpacity }]}
onLoad={this.onThumbnailLoaded}
source={thumbnailSource}
resizeMode="cover"
blurRadius={1}
/>
<Animated.Image
style={[
styles.imageOverlay,
{ opacity: this.imageOpacity },
styles.container,
]}
onLoad={this.onImageLoaded}
resizeMode="cover"
source={source}
/>
</Wrapper>
);
}
}
export default ProgressiveImageLoadable;
const styles = StyleSheet.create({
container: {
height: 280,
width: 280,
},
});
class App extends Component {
render() {
return (
<View
style={styles.container}
>
<ProgressiveImageLoadable
source={{
uri: `https://images.pexels.com/photos/671557/pexels-photo-671557.jpeg?w=${w.width
* 2}&buster=${Math.random()}`,
}}
thumbnailSource={{
uri: `https://images.pexels.com/photos/671557/pexels-photo-671557.jpeg?w=50&buster=${Math.random()}`,
}}
/>
</View>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment