imagepicker.js

//https://docs.expo.io/versions/latest/sdk/imagepicker.html

import React from 'react';
import { TouchableOpacity, Image, View, StyleSheet, Text, Modal, Slider } from 'react-native';
import { ImagePicker } from 'expo';

export default class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      star3:[],
      star2:[],
      star1:[],
      image: null,
      modalVisible: false,
      value: 3
    };
    this.putImageIntoList = this.putImageIntoList.bind(this);
  }

  putImageIntoList(){
    let k = 'star'+this.state.value;
    this.setState({
      [k]:[...this.state[k], this.state.image],
      modalVisible: false,
      value: 3
    })
  }

  render() {
    let { image,star3,star2,star1 } = this.state;

    return (
      <View style={{flex:1}}>

    <Modal
      animationType={"slide"}
      transparent={true}
      visible={this.state.modalVisible}
      onRequestClose={() => {alert("Modal has been closed.")}}
      >
     <View style={styles.modal}>
      <View>
       <TouchableOpacity style={styles.closeButton}
         onPress={() => this.setState({modalVisible: false})}>
         <Text>X</Text>
       </TouchableOpacity>
        <Text>Please select coolness of this picture.</Text>
        <Text style={styles.headerText}>{this.state.value}</Text>
        <Slider maximumValue={3} minimumValue={1} step={1} value={3}
         onValueChange={(value) => this.setState({value: value})}></Slider>
        <TouchableOpacity style={styles.submitButton} onPress={() => {
          this.putImageIntoList();
        }}>
          <Text style={styles.titleText}>OK</Text>
        </TouchableOpacity>
      </View>
     </View>
     </Modal>


        <View style={styles.upper}>
          <View style={styles.title}>
            <Text style={styles.titleText}>3 Stars</Text>
          </View>
          <View style={styles.row}>
            {star3.map((source, i)=> <Image key={"star3-"+i}
           style={styles.image} source={{uri: source}}></Image>)}
          </View>
          <View style={styles.title}>
            <Text style={styles.titleText}>2 Stars</Text>
          </View>
          <View style={styles.row}>
            {star2.map((source, i)=> <Image key={"star2-"+i}
           style={styles.image} source={{uri: source}}></Image>)}
          </View>
          <View style={styles.title}>
            <Text style={styles.titleText}>1 Star</Text>
          </View>
          <View style={styles.row}>
            {star1.map((source, i)=> <Image key={"star1-"+i}
           style={styles.image} source={{uri: source}}></Image>)}
          </View>
        </View>
        <View style={styles.lower}>
          <TouchableOpacity
            style={styles.button}
            onPress={this._pickImage}
          ><Text>Gallery</Text></TouchableOpacity>
          <TouchableOpacity
            title="Camera"
            style={styles.button}
            onPress={this._takePhoto}
          ><Text>Camera</Text></TouchableOpacity>
        </View>
      </View>
    );
  }

  _takePhoto = async () => {
    let result = await ImagePicker.launchCameraAsync({
      allowsEditing: false,
      aspect: [4, 3],
    });

    console.log(result);

    if (!result.cancelled) {
      this.setState({image: result.uri, modalVisible: true});
    }
  }

  _pickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      allowsEditing: false,
      aspect: [4, 3],
    });

    console.log(result);

    if (!result.cancelled) {
        this.setState({image: result.uri, modalVisible: true});
    }
  };
}

const styles = StyleSheet.create({
  title:{
    backgroundColor: 'gray',
    padding: 5
  },
  titleText:{
    color: 'white'
  },
  row:{
    flexDirection: 'row',
    flexWrap: 'wrap'
  },
  upper:{
    flex:5,
    paddingTop:22
  },
  lower:{
    flex:1,
    flexDirection:'row',
    alignItems:'flex-end',
    justifyContent:'center'
  },
  button:{
    padding: 10,
    backgroundColor: 'gray',
    margin: 20
  },
  image:{
    width: 100,
    height: 100
  },
  modal:{
     height: 200,
     width: 300,
     marginTop: 200,
     padding: 10,
     alignSelf: 'center',
     backgroundColor:'lightblue',
     margin:10,
     borderRadius:10,
     justifyContent: 'center',
     alignItems: 'center'
   },
   closeButton:{
     alignSelf: 'flex-end'
   },
   submitButton:{
     alignSelf: 'center',
     backgroundColor: 'darkblue',
     width: 100,
     height: 44,
     borderRadius: 10,
     alignItems: 'center',
     justifyContent: 'center',
     margin: 10
   },
   headerText:{
     fontSize: 20,
     alignSelf: 'center'
   }
});