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 | 6x 5x 5x 5x 2x 2x 2x 2x 5x 6x 6x 6x | import React, { useState } from 'react'; import PropTypes from 'prop-types'; import { Animated, Image as ImageNative, StyleSheet, View, Platform, } from 'react-native'; import { nodeType } from '../helpers'; import { ViewPropTypes, withTheme } from '../config'; const Image = ({ placeholderStyle, PlaceholderContent, containerStyle, style, ImageComponent, children, ...attributes }) => { const [placeholderOpacity] = useState(new Animated.Value(1)); const hasImage = Boolean(attributes.source); const onLoad = () => { const minimumWait = 100; const staggerNonce = 200 * Math.random(); setTimeout( () => { Animated.timing(placeholderOpacity, { toValue: 0, duration: 350, useNativeDriver: Platform.OS === 'android' ? false : true, }).start(); }, Platform.OS === 'android' ? 0 : Math.floor(minimumWait + staggerNonce) ); }; return ( <View accessibilityIgnoresInvertColors={true} style={StyleSheet.flatten([styles.container, containerStyle])} > <ImageComponent {...attributes} onLoad={onLoad} style={[ StyleSheet.absoluteFill, { width: style.width, height: style.height, }, ]} testID="RNE__Image" /> <Animated.View pointerEvents={hasImage ? 'none' : 'auto'} accessibilityElementsHidden={hasImage} importantForAccessibility={hasImage ? 'no-hide-descendants' : 'yes'} style={[ styles.placeholderContainer, { opacity: hasImage ? placeholderOpacity : 1, }, ]} > <View testID="RNE__Image__placeholder" style={StyleSheet.flatten([ style, styles.placeholder, placeholderStyle, ])} > {PlaceholderContent} </View> </Animated.View> <View style={style}>{children}</View> </View> ); }; const styles = { container: { backgroundColor: 'transparent', position: 'relative', }, placeholderContainer: { ...StyleSheet.absoluteFillObject, }, placeholder: { backgroundColor: '#bdbdbd', alignItems: 'center', justifyContent: 'center', }, }; Image.propTypes = { ...ImageNative.propTypes, ImageComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), PlaceholderContent: nodeType, containerStyle: ViewPropTypes.style, placeholderStyle: ImageNative.propTypes.style, }; Image.defaultProps = { ImageComponent: ImageNative, style: {}, }; export { Image }; export default withTheme(Image, 'Image'); |