Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 | 2x 2x 2x 2x 3x 3x 2x 2x 2x | import React from 'react'; import PropTypes from 'prop-types'; import { Animated, Image as RNImage, Platform, StyleSheet, View, } from 'react-native'; import { nodeType } from '../helpers'; import { ViewPropTypes, withTheme } from '../config'; class Image extends React.PureComponent { placeholderContainerOpacity = new Animated.Value(1); onLoadEnd = () => { /* Images finish loading in the same frame for some reason, the images will fade in separately with staggerNonce */ const minimumWait = 100; const staggerNonce = 200 * Math.random(); setTimeout( () => Animated.timing(this.placeholderContainerOpacity, { toValue: 0, duration: 350, useNativeDriver: true, }).start(), minimumWait + staggerNonce ); }; render() { const { placeholderStyle, PlaceholderContent, containerStyle, style, ImageComponent, ...attributes } = this.props; return ( <View style={StyleSheet.flatten([styles.container, containerStyle])}> {Platform.OS === 'ios' ? ( <React.Fragment> <ImageComponent {...attributes} onLoadEnd={this.onLoadEnd} style={style} /> <Animated.View style={StyleSheet.flatten([ styles.placeholderContainer, { opacity: this.placeholderContainerOpacity }, ])} > <View testID="RNE__Image__placeholder" style={StyleSheet.flatten([ style, styles.placeholder, placeholderStyle, ])} > {PlaceholderContent} </View> </Animated.View> </React.Fragment> ) : ( <React.Fragment> <View style={styles.placeholderContainer}> <View testID="RNE__Image__placeholder" style={StyleSheet.flatten([ style, styles.placeholder, placeholderStyle, ])} > {PlaceholderContent} </View> </View> <ImageComponent {...attributes} style={style} /> </React.Fragment> )} </View> ); } } const styles = { container: { backgroundColor: 'transparent', position: 'relative', }, placeholderContainer: { ...StyleSheet.absoluteFillObject, }, placeholder: { backgroundColor: '#bdbdbd', alignItems: 'center', justifyContent: 'center', }, }; Image.propTypes = { ...RNImage.propTypes, ImageComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), PlaceholderContent: nodeType, containerStyle: ViewPropTypes.style, placeholderStyle: RNImage.propTypes.style, }; Image.defaultProps = { ImageComponent: RNImage, }; export { Image }; export default withTheme(Image, 'Image'); |