0

i am creating mobile app where i retrieve from my own api (http://lkcfesnotification.000webhostapp.com/api/notifications) and generate in flatlist and display the details. below are my flatlist and detail. https://i.stack.imgur.com/DzeBM.jpg ,https://i.stack.imgur.com/wLE9H.jpg But how do i implement to show the uri image and downloadable file from the api. Below are my code for showing the details:

  render() {
    let member = this.state.member;

    return (
      <View style={styles.container}>
        <ScrollView>
          <InputWithLabel style={styles.output}
            label={'Title'}
            value={member ? member.title : ''}
            orientation={'vertical'}
            editable={false}
          />
          <InputWithLabel style={styles.output}
            label={'Department'}
            value={member ? member.department : ''}
            orientation={'vertical'}
            editable={false}
          />
          <InputWithLabel style={styles.output}
            label={'Publish'}
            value={member ? member.updated_at : ''}
            orientation={'vertical'}
            editable={false}
          />
          <InputWithLabel style={[styles.output, {height: 140, textAlignVertical: 'top'}]}
            label={'Description'}
            value={member ? member.description : ''}
            orientation={'vertical'}
            editable={false}
            multiline={true}
          />
        </ScrollView>
      </View>
    );
  }
}

Note certain image and file have multiple such as below api

{
  "id": 33,
  "title": "UTAR (Sungai Long Campus) Career Day",
  "description": "<p style=\"margin: 0px 0px 6px; font-family: Helvetica, Arial, sans-serif; color: #1c1e21;\">DARP s organizing UTAR (Sungai Long Campus) Career Day and the details are as follows:-<\/p>\r\n<p>&nbsp;<\/p>\r\n<p style=\"margin: 6px 0px 0px; display: inline; font-family: Helvetica, Arial, sans-serif; color: #1c1e21;\">Date: 1 August 2019 (Thursday)<br \/>Time: 10.00am - 4.00pm<br \/>Venue: Multipurpose Hall (KB Block), Sungai Long Campus<\/p>",
  "image": "[\"notifications\\\/August2019\\\/c1nsEktOjtSloxEtnL4d.jpg\",\"notifications\\\/August2019\\\/WKka4FvUxFyNQpGQHSo8.jpg\",\"notifications\\\/August2019\\\/KWKZ4XnlkjlK7vHEdHln.jpg\",\"notifications\\\/August2019\\\/eNDFFu4hFHFMBEsR94DV.jpg\",\"notifications\\\/August2019\\\/IWH0eg3IpG59qapIoHj3.jpg\"]",
  "attachment": "[{\"download_link\":\"notifications\\\/August2019\\\/SXMtnNb31ndgDnCWNC57.txt\",\"original_name\":\"dsadasdsa.txt\"},{\"download_link\":\"notifications\\\/August2019\\\/CDEZG6tJhrbVuxlfMiBb.txt\",\"original_name\":\"fyprefereance.txt\"}]",
  "department": "D3E",
  "link": null,
  "created_at": "2019-08-03 03:52:11",
  "updated_at": "2019-08-03 03:52:11",
  "deleted_at": null
}
Atiffaniq
  • 27
  • 6
  • I personally recommend hosting the images online, (not a link to a local image like you are doing), then you can use the [``](https://facebook.github.io/react-native/docs/image.html) component to display the image. And to download a file try this: https://stackoverflow.com/a/44546891/7602110 – Abraham Aug 03 '19 at 07:06
  • it is hosting online – Atiffaniq Aug 03 '19 at 12:07

0 Answers0