Does anyone know how to resolve this error?
"Error while updating property 'src' of a view managed by: RCTImageView"
This error appear when the component is rendering. I think that the images do not give them time to download or something like this.
Dependences: "firebase": "^4.8.2","react": "16.0.0-alpha.12","react-native": "0.47","react-native-image-picker": "^0.26.7",
ERROR
![enter image description here]()
Gallery.js
import React, { Component } from 'react'; import { View, Image, ScrollView, StyleSheet, Dimensions } from 'react-native'; import { connect } from 'react-redux'; import firebase from '../../config/firebase'; import { nameChanged } from '../../actions'; import { CardSectionTransp, InputBlack } from '../common'; import { SnapshotToArray } from '../../config/helpers'; const { width, height } = Dimensions.get('window'); class EventDetail extends Component { constructor(props) { super(props); this.state = { images: [], objImages: [] }; } componentWillMount() { firebase.database().ref().child('images').orderByChild('order').once('value', snapshot => { const images = SnapshotToArray(snapshot); this.setState({ objImages: images }); const arrayImages = []; for (const image of images) { const starsRef = firebase.storage().refFromURL('gs://bealegendapp.appspot.com/images/'+ image.path); // Get the download URL starsRef.getDownloadURL().then((url) => { arrayImages.push(url); this.setState({ objImages: arrayImages }); }).catch((error) => { // A full list of error codes is available at // https://firebase.google.com/docs/storage/web/handle-errors switch (error.code) { case 'storage/object_not_found': // File doesn't exist break; case 'storage/unauthorized': // User doesn't have permission to access the object break; case 'storage/canceled': // User canceled the upload break; case 'storage/unknown': // Unknown error occurred, inspect the server response break; default: break; } }); } }); } onNameChange(text) { this.props.nameChanged(text); } render() { return (<ScrollView style={styles.container}><CardSectionTransp><InputBlack label="Nombre" onChangeText={this.onNameChange.bind(this)} value={this.props.name} /></CardSectionTransp><View style={{ flex: 1, flexDirection: 'row', flexWrap: 'wrap', marginTop: 10 }}> {this.state.objImages && this.state.objImages.length > 0 && this.state.objImages.map((image, key) => { return (<View key={key} style={{ width: width / 3 }}><Image <-------------EEEEEEERRRRRRRROOOOOOORRRRRRR!!!! source={{ uri: image }} style={styles.image} /></View> ); }) } {this.props.photos && this.props.photos.map((image, key) => { return (<View key={key} style={{ width: width / 3 }}><Image source={{ uri: image }} style={styles.image} /></View> ); }) }</View></ScrollView> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#F5FCFF', paddingBottom: 123 }, image: { height: height / 5, resizeMode: 'contain', width: width / 3, borderWidth: 1, borderColor: 'white' } }); const mapStateToProps = ({ gallery }) => { const { name, photos } = gallery; return { name, photos }; }; export default connect(mapStateToProps, { nameChanged })(EventDetail);
