https://github.com/darioajr/react-native-image-listitem
https://github.com/darioajr/react-native-image-listitem
react react-native
Last synced: 6 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/darioajr/react-native-image-listitem
- Owner: darioajr
- License: other
- Created: 2018-12-09T20:18:28.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2025-11-26T22:16:34.000Z (7 months ago)
- Last Synced: 2025-12-24T10:57:29.708Z (7 months ago)
- Topics: react, react-native
- Language: JavaScript
- Size: 1.16 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-image-listitem
[](https://www.npmjs.com/package/react-native-image-listitem) [](https://github.com/darioajr/react-native-image-listitem/actions)
*ListItem gallery for images in React Native*
## Installation
```
yarn add react-native-image-listitem
```
## Usage
```js
import Image from 'react-native-image-listitem';
```
## Properties
Any [`Image` property](http://facebook.github.io/react-native/docs/image.html) 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)
```js
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}) => (
)
keyExtractor = (item, index) => `${index}`
render() {
return (
New
)
}
}
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](http://opensource.org/licenses/mit-license.html). © Dario Alves Junior