Last active
September 16, 2017 12:21
-
-
Save shubhnik/10d2da6881b1824dd602e045e6086b98 to your computer and use it in GitHub Desktop.
Image layout
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
let data = [ | |
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ7n8qdJPjst1CyYg-mSjNSIu0Z1z9h1_fR4NLXTpl66Y8AJD2k', | |
'https://www.zoomtaqnia.com/wp-content/uploads/2016/02/Airbnb.jpeg', | |
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTLddVLVeA4CcbX7mwyv-XollIrOOSmhRg_ept8LaIVXFIBfxsf', | |
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ8sILGVGzfpfP6xlQSN6ftnq4xA6WzKbcLr9xFAEogg36LuWwa', 'https://www.freedigitalphotos.net/blog/wp-content/uploads/2014/01/facebook-image-compression.jpg' | |
] | |
state={ | |
showLargeImage:false, | |
imageSource:'', | |
selectedIndex:null | |
} | |
showLargeImage({pageX, pageY, locationX, locationY}, source, index){ | |
const topLeftX = pageX - locationX | |
const topLeftY = pageY - locationY | |
this.setState({topLeftX, topLeftY, showLargeImage:true, imageSource:source, selectedIndex:index}) | |
} | |
<View style={{flex:1, paddingTop:50}}> | |
{ | |
data.map((source, index) =>{ | |
return( | |
<TouchableOpacity | |
key={index} | |
activeOpacity={0.8} | |
onPress={(e)=>{ | |
nE = e.nativeEvent | |
this.showLargeImage(nE, source, index) | |
}} | |
style={{height:100, width:width/2, alignSelf:index ==2 ?'flex-end' : index == 3 ? 'flex-start' : 'center'}} //for those weird image positions. | |
> | |
<Image source={{uri:source}} /> | |
</TouchableOpacity> | |
) | |
}) | |
} | |
{ this.state.showLargeImage && <LargeImage simpleHide={this.state.simpleHide} hideStyle={this.state.slideDownFade} source={this.state.imageSource} hideImage={this.hideImage.bind(this)} topLeftX={this.state.topLeftX} topLeftY={this.state.topLeftY}/>} | |
</View> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment