How to fetch random image from camera-roll using react native?

Question

I have requirement where i need to get a random image every time when i click an button. I don't want picker to come up for the camera-roll with images, instead random image should selected from the camera folder and display in the image view. I have followed the official FB tutorial of camera roll. Please find the code as below

_handleButtonPress = () => {
   CameraRoll.getPhotos({
       first: 20,
       assetType: 'Photos',
     })
     .then(r => {
       this.setState({ photos: r.edges });
     })
     .catch((err) => {

     });
   };

But this code will select the recently clicked images and display in the picker. Instead of to randomly select the uri of the image and display in the imageview. Any help is appreciated.

Regards, Sharath

@ReyHaynes Yes, i got. But implementation wise it should be still possible. Because i had implemented in native android. — coders
– coders, Commented May 22, 2018 at 16:44
@ReyHaynes you mean say in react-native its not possible without showing picker right? — coders
– coders, Commented May 22, 2018 at 16:51
Deleting my responses. Will provide you with a working answer. — ReyHaynes
– ReyHaynes, Commented May 22, 2018 at 18:41

ReyHaynes · Accepted Answer · 2018-05-22 18:43:45Z

2

You essentially have the photos and all the necessary metadata once you set the state: this.setState({ photos: r.edges })

All you have to do is pick a random image from there. Here's how I did it:

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Image,
  CameraRoll,
  Button
} from 'react-native';

export default class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      img: null
    }
  }

  getRandomImage = () => {
    const fetchParams = {
      first: 25,
    }

    CameraRoll.getPhotos(fetchParams)
      .then(data => {
        const assets = data.edges
        const images = assets.map((asset) => asset.node.image)
        const random = Math.floor(Math.random() * images.length)
        this.setState({
          img: images[random]
        })
      })
      .catch(err => console.log)
  }

  render() {
    return (
      <View style={styles.container}>
        { this.state.img ?
          <Image
            style={styles.image}
            source={{ uri: this.state.img.uri }}
          />
          : null
        }
        <Button title="Get Random Image from CameraRoll" onPress={this.getRandomImage}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  image: {
    width: '100%',
    height: '75%',
    margin: 10,
  }
});

answered May 22, 2018 at 18:43

ReyHaynes

3,1721 gold badge17 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

coders Over a year ago

Thanks for the response, i will check and let you know.

Collectives™ on Stack Overflow

How to fetch random image from camera-roll using react native?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related