Miss any of our Open RFC calls?Watch the recordings here! »

react-native-thumbnail-grid-expo

2.2.0 • Public • Published

React Native Photo Grid

FOSSA Status

Code:

const images = [
  'https://cdn.pixabay.com/photo/2017/06/09/09/39/adler-2386314_960_720.jpg',
  'https://cdn.pixabay.com/photo/2017/06/02/18/24/fruit-2367029_960_720.jpg',
  'https://cdn.pixabay.com/photo/2016/08/12/22/34/apple-1589869_960_720.jpg'
]
...
<MediaGrid source={images} onPressImage={uri => this.showImage(uri)} />
 

Custom Image source object

The source prop also accepts an Array of source objects like so:

const images = [
  {
    uri: 'https://cdn.pixabay.com/photo/2017/06/09/09/39/adler-2386314_960_720.jpg',
    headers: {
      Authorization: 'Bearer xyz'
    }
  },
  {
    uri: 'https://cdn.pixabay.com/photo/2017/06/02/18/24/fruit-2367029_960_720.jpg',
    headers: {
      Authorization: 'Bearer xyz'
    }
  },
  {
    uri: 'https://cdn.pixabay.com/photo/2016/08/12/22/34/apple-1589869_960_720.jpg'
    headers: {
      Authorization: 'Bearer xyz'
    }
  }
]
...
<MediaGrid source={images} onPressImage={source => this.showImage(source.uri)} />

Props

Property Type Description
source PropTypes.array Array containing Image uri string or source object
width PropTypes.number Container width
height PropTypes.number Container height
ratio PropTypes.float Split screen ratio
style PropTypes.object Container styles
imageStyle PropTypes.object Image styles
imageProps PropTypes.object Image props
onPressImage PropTypes.func Callback when press image
emptyImage default empty image load

Image props

Property Description
placeholderSource Show placeholderSource if the source can't be loaded or error.
loadingStyle Style ActivityIndicator {size: 'small'; color: 'gray'}
isShowActivity Show ActivityIndicator loading
placeholderStyle Style placeholder image

License

FOSSA Status

Keywords

Install

npm i react-native-thumbnail-grid-expo

DownloadsWeekly Downloads

5

Version

2.2.0

License

MIT

Unpacked Size

4.1 MB

Total Files

94

Last publish

Collaborators

  • avatar