1

I am building a react-native app for android. I am trying to include image in my app. Whatever I do I cannot get the images to be displayed in my app. I have read this other answer and tried with https images and added height and width to my image. This is the render method of the component with the image Im trying to display. Right now the source points dynamically to my s3 bucket.

render() {
    const { textWrapperStyle, svgStyle, containerStyle, textStyle } = styles
    console.log("FILE URL", this.props.file.url)
    return (
      <View style={{flexDirection: 'row', alignItems: 'center'}}>
      <Modal
          animationType={'slide'}
          transparent={false}
          visible={this.state.modalVisible}
          onRequestClose={() => {
            alert('Modal has been closed.');
          }}>
          <View style={{flex: 1, justifyContent: 'center'}}>
            <View>
                <Image
                  style={{width: 200, height: 200}}
                  source={{uri: "https://obeya-dgeismar-site-assets"+this.props.file.url }}
                />

              <TouchableOpacity
                onPress={() => {
                  this.setModalVisible(!this.state.modalVisible);
                }}>
                <Text>Hide Modal</Text>
              </TouchableOpacity>
              </View>
          </View>
        </Modal>
        <TouchableOpacity style={[containerStyle, this.props.customStyle]} onPress={() => {this.setModalVisible(true);}}>
          <View style={textWrapperStyle}>
            <Text>
              {this.props.file.title}
            </Text>
          </View>
        </TouchableOpacity>
        <TouchableOpacity onPress={()=>this.confirmDelete(this.props.file.id, this.props.eventId)}>
          <Close style={styles.svgStyle} fill='red'/>
        </TouchableOpacity>
      </View>
    )
  }

Here's a link to the whole project. I currently run it in android studio on a NExus 5x API 29 x86

David Geismar
  • 3,152
  • 6
  • 41
  • 80

0 Answers0