title: How to store a image in AsyncStorage?
body: <p>im trying to store a picture in the AsyncStorage, but i dont know how to do it, should i store the uri, or the path?</p>
  
  <p>What i tryied is a little bit of nonsense, but i tryied this:</p>
  
  <pre><code>state = {
      avatarSource: null,
      avatarSource2: null,
  }
  
  constructor(props) {
      super(props);
      this.state = {
          modalVisible: false,
          images: [{
              url: '',
          }],
      }
      this.setModalVisible = this.setModalVisible.bind(this)
  }
  
  saveData() {
      AsyncStorage.getItem("uri");
  }
  </code></pre>
  
  <p>Then when i select my image is use this:</p>
  
  <pre><code>selectImage = async () =&gt; {
      ImagePicker.showImagePicker({ nodata: true, mediaType: 'photo' }, (response) =&gt; {
          console.log('Response = ', response);
  
          if (response.didCancel) {
              console.log('User cancelled image picker');
          } else if (response.error) {
              console.log('ImagePicker Error: ', response.error);
          } else if (response.customButton) {
              console.log('User tapped custom button: ', response.customButton);
          } else {
  
              // You can also display the image using data:
              // const source = { uri: 'data:image/jpeg;base64,' + response.data };
  
              this.setState({
                  avatarSource: response.uri,
              });
              this.saveData; //here is where i save the data...
          }
      });
  }
  </code></pre>
  
  <p>And then when i load the page...</p>
  
  <pre><code>componentWillMount() {
      AsyncStorage.getItem('uri')
  
  
  }
  </code></pre>
  
  <p>And my render is like this...</p>
  
  <pre><code>render() {
      return (
          &lt;ScrollView&gt;
              &lt;View style={styles.container}&gt;
                  &lt;View style={styles.avatarContainer}&gt;
                      &lt;TouchableOpacity onPress={() =&gt; {
                          this.setModalVisible(!this.state.modalVisible, this.state.avatarSource);
                      }}&gt;
                          {
                              this.state.avatarSource &amp;&amp; &lt;Image source={{ uri: this.state.avatarSource }} style={styles.avatar} /&gt;
                          }
                      &lt;/TouchableOpacity&gt;
                  &lt;/View&gt;
                  &lt;Button title="Seleciona a imagem" onPress={this.selectImage} /&gt;
                  &lt;View style={styles.avatarContainer}&gt;
                      &lt;TouchableOpacity onPress={() =&gt; {
                          this.setModalVisible(!this.state.modalVisible, this.state.avatarSource2);
                      }}&gt;
                          {
                              this.state.avatarSource2 &amp;&amp; &lt;Image source={{ uri: this.state.avatarSource2 }} style={styles.avatar} /&gt;
                          }
                      &lt;/TouchableOpacity&gt;
                  &lt;/View&gt;
                  &lt;Button title="Seleciona a imagem" onPress={this.selectImage2} /&gt;
              &lt;/View&gt;
              &lt;Modal style={styles.modalImage}
                  animationType='slide'
                  transparent={false}
                  visible={this.state.modalVisible}&gt;
                  &lt;TouchableHighlight style={{ backgroundColor: 'black' }} onPress={() =&gt; {
                      this.setModalVisible(!this.state.modalVisible) + this.props.navigation.navigate('Cartão de Cidadão');
                  }}&gt;
                      &lt;Icon active name="close" size={30} style={{ textAlign: 'center', marginTop: 0, color: 'white' }} /&gt;
                  &lt;/TouchableHighlight&gt;
                  &lt;ImageViewer imageUrls={this.state.images} /&gt;
              &lt;/Modal&gt;
          &lt;/ScrollView&gt;
      );
  }
  </code></pre>
  
  <p>}</p>
  
  <p>What i've do wrong?
  Thank you.</p>