A simple scroll view and a list of images. This component is as simple as that, but it's configured in a way that allows the images to flow like a grid in an easy way:

/*** src/components/ImageGrid ***/

import React from 'react';
import { 
  Image,
  TouchableOpacity, 
  ScrollView, 
  Dimensions, 
  View,
  StyleSheet
} from 'react-native';

var {height, width} = Dimensions.get('window');

export default class ImagesGrid extends React.Component {
  render() {
    return (
      <ScrollView>
        <View style={styles.imageContainer}>
          {
            this.props.images && 
            this.props.images.map(img => {
              return (<Image style={styles.image} 
              key={img.id} source={{uri: img.src}}/>);
            })
          }
        </View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  imageContainer: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    flexWrap: 'wrap'
  },
  image: {
    width: (width/3 - 2),
    margin: 1,
    height: (width/3 - 2),
    resizeMode: 'cover'
  }
});

When styling the container, we use flexWrap: 'wrap' to ensure the images flow not only in the row direction but also spread to new lines when the device width is covered for a line of images. By setting width and height for each image to width/3 - 2, we ensure the container can fit three images per row, including two pixels for a small margin between them.

There are also several grid modules available through npm, but we have decided to build our own component for this matter, as we don't need extra functionality in the grid and we gain the flexibility to do it this way.

Those were all the screens and visual components we need in our image share app. Let's take a look now at the glue that makes them work together, the actions and the reducers.