how to get image URL from different js file in react native

Question

here is my data.js file from which I am getting data

const data2 =
[
    {
        key:1,
        about: "AC services",
        description: "description about service",

    },

   {
        key:2,
        about: "Baby sitter",
        description: "description about service"

    },

    {
        key:3,
        about: "Electronics",
        description: "description about service"

    },
.
.
.  
    ]

export default data2;

here is my code where I am using map function to fetch data

import React from 'react';
import { Container, Header, Content, List, ListItem, Text, Left, Body, Right, Button, Thumbnail, Title } from 'native-base';
import data from '../Constant/data'
const ServiceList = (props) => {
  return (
    <Container>
      <Header>
        <Body>
          <Title> Services List </Title>
        </Body>
      </Header>
      <Content>

        <List>
        {data.map(obj =>
          <ListItem thumbnail>
            <Left>
        <Text>{obj.key}</Text>
              <Thumbnail square source={require('../Assets/serviceIcons/ac.png')} /> **want to get all image also**
            </Left>
            <Body>
              <Text>{obj.about}</Text>
            </Body>
            <Right>
              <Button transparent onPress={() => props.navigation.navigate('BookPage',{obj:obj})}>
                <Text>View</Text>
              </Button>
            </Right>
          </ListItem>
          )}
        </List>

      </Content>
    </Container>
  );
}

export default ServiceList;

result enter image description here

my problem is, I want to fetch the image URL from the data file so that every icon can be rendered also, but I don't know how to code URL in the data file and fetch that into component

hieunguyen · Accepted Answer · 2020-05-20 08:17:12Z

1

Add one more property "imageUrl" for each object

cont data = [
  ...
  {
    key:3,
    about: "Electronics",
    description: "description about service",
    imageUrl: require("../Assets/serviceIcons/ac.png")
  }
]

and use it like below

{data.map(obj => (
  ...
  <Image source={obj.imageUrl}/>
))}

edited May 20, 2020 at 8:17

answered May 14, 2020 at 8:32

hieunguyen

364 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

shubh sharma Over a year ago

I have tried it but coded it incorrectly, thanks, it worked now

Striped · Accepted Answer · 2020-05-14 07:51:34Z

0

Put your data in your data file

{
  key:3,
  about: "Electronics",
  description: "description about service"
  image: <your-path-here>
},

answered May 14, 2020 at 7:51

Striped

2,5443 gold badges27 silver badges33 bronze badges

1 Comment

shubh sharma Over a year ago

I have tried it but coded it incorrectly, thanks, it worked now

Collectives™ on Stack Overflow

how to get image URL from different js file in react native

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related