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.
3.136.18.141