title: How to view multiple capture image horizontally in react native?
body: <p>I just want to capture image using camera API
  Then Store it in array 
  then view one by one image horizontally in React native</p>
  
  <pre><code>    import React, { Component } from 'react';
      import {
        Platform,
        StyleSheet,
        Text,
        View,
        TouchableOpacity,
        Image,
        PixelRatio
  
      } from 'react-native';
  
      import ImagePicker from 'react-native-image-picker';
      let ret;
  
      export default class Location extends Component {
          constructor(props){
           super(props);
          this.state = {
            latitude: null,
            longitude: null,
            address: 'address',
            MyAddress: null,
            error: null,
          }; 
  
        }
  
        state = {
          avatarSource: null,
          videoSource: null
        };
  
  
      selectPhotoTapped() {
      const options = {
        quality: 1.0,
        maxWidth: 500,
        maxHeight: 500,
        storageOptions: {
          skipBackup: true
        }
      };
  </code></pre>
  
  <p>To get Image, I used this.</p>
  
  <pre><code>    ImagePicker.showImagePicker(options, (response) =&gt; {
        console.log('Response = ', response);
  
        if (response.didCancel) {
          console.log('User cancelled photo picker');
        }
        else if (response.error) {
          console.log('ImagePicker Error: ', response.error);
        }
        else if (response.customButton) {
          console.log('User tapped custom button: ', response.customButton);
        }
        else {
          let source = { uri: response.uri };
          // You can also display the image using data:
          //let source = { uri: 'data:image/jpeg;base64,' + response.data };
          this.setState({
            avatarSource: source
          });
        }
      });
    }
  </code></pre>
  
  <p>Then how to process to view list of image like adpater. </p>
  
  <pre><code>        return (
              &lt;View style={{ flexGrow: 1, alignItems: 'center', justifyContent: 'center' }}&gt;
  </code></pre>
  
  <p>To show the image in one view ,i have done this. i want to view multiple image like view pager.Like [] [] [] []</p>
  
  <pre><code>              &lt;TouchableOpacity onPress={this.selectPhotoTapped.bind(this)}&gt;
                &lt;View style={[styles.avatar, styles.avatarContainer, {marginBottom: 20}]}&gt;
                { this.state.avatarSource === null ? &lt;Text&gt;Select a Photo&lt;/Text&gt; :
                  &lt;Image style={styles.avatar} source={this.state.avatarSource} /&gt;
                }
                &lt;/View&gt;
              &lt;/TouchableOpacity&gt;
              &lt;/View&gt;
          )
        }
      }   
  </code></pre>
  
  <p>After few hours i have done this
  First save image uri in array then show in list..</p>
  
  <pre><code>let dataStorage = [{uri: response.uri}, ...this.state.dataStorage]
          this.setState({dataStorage})
  
  
  
  &lt;FlatList
            horizontal
            data={this.state.dataStorage}
            renderItem={({ item: rowData }) =&gt; {
              return (
                &lt;View style={[styles.avatar, styles.avatarContainer, {marginBottom: 20}]}&gt;
                    {  &lt;Image style={styles.avatar} source={{uri:rowData.uri}} /&gt; }
                &lt;/View&gt;
  
               );
                }
            }
          keyExtractor={(item, index) =&gt; index}
          /&gt;
  </code></pre>