Gallery holds all the rendering logic for the list of images. It relies on native-base and, more specifically, on two of its components, <List /> and <ListItem />:
/*** src/components/Gallery ***/
import React from 'react';
import { List, ListItem, Text, Icon, Button, Container, Content }
from 'native-base';
import { Image, Dimensions, View, Share, ActivityIndicator, StyleSheet } from 'react-native';
var {height, width} = Dimensions.get('window');
export default class Gallery extends React.Component {
_share(image) {
Share.share({message: image.src, title: 'Image from: ' +
image.user.name})
}
render() {
return (
<View>
<List style={{margin: -15}}>
{
this.props.imageList && this.props.imageList.map((image) =>
{
return (
<ListItem
key={image.id}
style={{borderBottomWidth: 0,
flexDirection: 'column', marginBottom: -20}}>
<View style={styles.user}>
<Image source={{uri: image.user.pic}}
style={styles.userPic}/>
<Text style={{fontWeight: 'bold'}}>
{image.user.name}</Text>
</View>
<Image source={{uri: image.src}}
style={styles.image}/>
<Button style={{position: 'absolute', right: 15,
top: 25}} transparent
onPress={this._share.bind(this, image)}>
<Icon name='ios-more' style={{fontSize: 20,
color: 'black'}}/>
</Button>
</ListItem>
);
})
}
</List>
{
this.props.loading &&
<View style={styles.spinnerContainer}>
<ActivityIndicator/>
</View>
}
</View>
);
}
}
const styles = StyleSheet.create({
user: {
flexDirection: 'row',
alignSelf: 'flex-start',
padding: 10
},
userPic: {
width: 50,
height: 50,
resizeMode: 'cover',
marginRight: 10,
borderRadius: 25
},
image: {
width: width,
height: 300,
resizeMode: 'cover'
},
spinnerContainer: {
justifyContent: 'center',
height: (height - 50)
}
});This component takes two props from its parent: loading and imageList.
loading is used to display a standard <ActivityIndicator /> showing the user network activity. This time we are using the standard one instead of a custom indicator as it should be clear enough what the network activity is indicating.
imageList is the array storing the list of images, which will be rendered in our <Gallery /> one <ListenItem /> at a time. Each <ListItem /> holds a <Button /> with onPress={this._share.bind(this, image) to share the image with other apps. Let's take a look at the _share function:
_share(image) {
Share.share({message: image.src, title: 'Image from: '
+ image.user.name})
}
Share is a React Native API for sharing text content. In our case, we will share the URL (img.src) of the image together with a simple title. Sharing text is the easiest way of sharing content between apps, as many apps would accept text as a shared format.
It's also worth noting the style we apply to the image to take over the whole width and a fixed height (300), so we have a stable layout for all images even when the display images have different sizes. For this setup, we use resizeMode: 'cover' so the images are not stretched in any dimension. This means we may end up cutting the image, but it compensates on uniformity. Another option would be to use resizeMode: contain if we don't want to cut anything, but rather want to fit the image inside these bounds while possibly shrinking them.