-
-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.js
75 lines (71 loc) · 2.01 KB
/
index.js
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
import React from "react";
import { View, Image, StyleSheet, Platform } from "react-native";
const ImageBlurShadow = (props) => {
return (
<View style={props.style}>
<Image
source={props.source}
fadeDuration={props.imageFadeDuration}
{...props}
style={[{
width: props.imageWidth,
height: props.imageHeight,
marginBottom: props.shadowOffset,
resizeMode: props.imageResizeMode,
borderRadius: props.imageBorderRadius,
borderTopLeftRadius: props.imageBorderTopLeftRadius,
borderTopRightRadius: props.imageBorderTopRightRadius,
borderBottomLeftRadius: props.imageBorderBottomLeftRadius,
borderBottomRightRadius: props.imageBorderBottomRightRadius,
},
styles.image
]}
/>
<View style={[{width: props.imageWidth}, styles.shadow_container]}>
<Image
source={props.source}
defaultSource={props.defaultProps}
fadeDuration={props.shadowFadeDuration}
style={{
resizeMode: 'cover',
width: props.imageWidth,
height: props.imageHeight
}}
blurRadius={props.shadowBlurRadius}
/>
<Image
resizeMethod='auto'
source={require('./assets/blur.png')}
tintColor={props.shadowBackgroundColor}
style={{
width: '100%',
aspectRatio: 1.8,
resizeMode: 'cover',
position: 'absolute',
height: Platform.OS === 'web'? '55%': undefined,
bottom: 0,
left: 0,
}}
/>
</View>
</View>
)
}
const styles = StyleSheet.create({
image:{
zIndex: 1
},
shadow_container:{
position: 'absolute',
bottom: 0,
zIndex: 0
}
})
ImageBlurShadow.defaultProps = {
imageWidth: 200,
imageHeight: 200,
shadowOffset: 44,
shadowBlurRadius: 18,
shadowBackgroundColor: '#ffffff'
}
export default ImageBlurShadow;