react-native-image-listitem

ListItem gallery for images in React Native

Installation

yarn add react-native-image-listitem

Usage

import Image from 'react-native-image-listitem';

<ImageListItem
  id={index}
  onPressItem={this.onPressItem}
  uri={item.image.uri}
  selected={item.selected}
/>

Properties

Any Image property and the following:

| Prop | Description | Default | |---|---|---| |styles|Styles applied to the inner image component.|None| |id|id of the component.|None| |uri|uri of the component.|None| |selected|Enumerate selected images|None|

Demo

Example

Check full example in the Example folder.

ImagePicker with ImageListItem (Gallery)

import React from 'react'
import { StyleSheet, View, Image, PixelRatio, FlatList, Text, TouchableOpacity, AsyncStorage, Dimensions } from 'react-native'
import { Button, ListItem } from 'react-native-elements'

import ImagePicker from 'react-native-image-picker'
import ImageListItem from 'react-native-image-listitem'

const options = {
  title: 'Select Avatar',
  storageOptions: {
    skipBackup: true,
    path: 'images'
  }
}

class MainScreen extends React.Component {
  
  constructor (props) {
    super(props);
    this.state={
      selectedImage: null,
      dataSource: []
    }
    
    this.selectPhotoTapped = this.selectPhotoTapped.bind(this)
    this.renderRow = this.renderRow.bind(this)
    this.onPressItem = this.onPressItem.bind(this)
  }

  componentWillMount() {
    try {
      AsyncStorage.getItem("ImageArray", (err, result) => {
        if (err === null && result !== null) {
          dataSource = JSON.parse(result)       
          this.setState({
            dataSource: dataSource
          })
        }
      })
    } catch (err) {
      console.warn(err)
    }
  }

  selectPhotoTapped() {
    ImagePicker.showImagePicker(options, (response) => {

      if (response.error) {
        console.warn('ImagePicker Error: ', response.error)
      } else {
        let source = {
          image: {uri: response.uri},
          selected: false
        }

        // You can also display the image using data:
        // let source = { uri: 'data:image/jpeg;base64,' + response.data };
        if (this.state.selectedImage === null) {
          this.state.selectedImage = source.image
        }

        this.state.dataSource.push(source)

        this.setState({
          selectedIndex:this.state.selectedIndex
        })

        try {
          AsyncStorage.setItem("ImageArray", JSON.stringify(this.state.dataSource))
        } catch(err) {
          console.warn(err)
        }
      }
    })
  }

  deleteSelectedImage() {
    newDataSource = [];
    this.state.dataSource.forEach(element => {
      if (!element.selected) {
        newDataSource.push(element)
      }
    })

    this.setState({
      dataSource: newDataSource
    })

    try {
      AsyncStorage.setItem("ImageArray", JSON.stringify(newDataSource))
    } catch(err) {
      console.warn(err)
    }
  }

  uploadImages() {
    console.warn('not implemented.')
  }

  selectPhotoTapped() {
    ImagePicker.showImagePicker(options, (response) => {

      if (response.error) {
        console.warn('ImagePicker Error: ', response.error)
      } else {
        let source = {
          image: {uri: response.uri},
          selected: false
        }

        // You can also display the image using data:
        // let source = { uri: 'data:image/jpeg;base64,' + response.data };
        if (this.state.selectedImage === null) {
          this.state.selectedImage = source.image
        }

        this.state.dataSource.push(source)

        this.setState({
          selectedIndex:this.state.selectedIndex
        })

        try {
          AsyncStorage.setItem("ImageArray", JSON.stringify(this.state.dataSource))
        } catch(err) {
          console.warn(err);
        }
      }
    })
  }

  onPressItem = (index) => {
    this.state.dataSource[index].selected = !this.state.dataSource[index].selected;
    
    this.setState({
      dataSource:this.state.dataSource,
      selectedImage:this.state.dataSource[index].image
    })
  }

  renderRow = ({item, index}) => (
    <ImageListItem
      id={index}
      onPressItem={this.onPressItem}
      uri={item.image.uri}
      selected={item.selected}
    />
  )

  keyExtractor = (item, index) => `${index}`

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.topbar}>
          <Button title='Upload' onPress={this.uploadImages.bind(this)} />
          <Button title='Delete' onPress={this.deleteSelectedImage.bind(this)} />
        </View>
        <View style={styles.content}>
          <Image style={styles.image} source={this.state.selectedImage} />
        </View>
        <View style={styles.bottombar}>
          <FlatList
            style={styles.imageArray}
            horizontal={true}
            keyExtractor={this.keyExtractor}
            data={this.state.dataSource}
            extraData={this.state}
            renderItem={this.renderRow}
          />
          
          <TouchableOpacity
            style={styles.newButton}
            onPress={this.selectPhotoTapped.bind(this)}>
            <Text>New</Text>
          </TouchableOpacity>
        </View>
      </View>
    )
  }
}

MainScreen.navigationOptions = {
  header: null
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
    flexDirection: 'column',
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  topbar: {
    flexDirection: 'row'
  },
  content: {
    flex: 1,
    width: '100%',
    alignSelf: 'stretch',
  },
  bottombar: {
    width: '100%',
    height: 80,
  },
  image: {
    width: '100%',
    height: '100%'
  },
  imageArray: {
    position: 'absolute',
    marginLeft: 80,
    height: 80,
    marginRight: 0
  },
  newButton: {
    width: 80,
    height: 80,
    alignItems: 'center',
    justifyContent: 'center',
    borderColor: 'grey',
    backgroundColor: 'white',
    borderWidth: 1
  }
})

export default MainScreen

License

MIT License. © Dario Alves Junior