Question 33283 in React native Question posted in
The official React Native documentation can be found here.

React-native issue getting imageUri out of an array with a for Loop – React native

I’m trying to get for each imageUri in the products array the value.
After which is encoded in Base64 and stocked in the const "bloc".
default place of stocking images + bloc gives a string uri of the image.

I stock the concatenated data into the variable img and pass it to the product list.

The product list is made of divs to be able to pdf the data.
my console in the logs EditDocument.jsx look like this:

console.log("ED IMG2:", img);
for (let i = 0; i < img.length; i++) {
 console.log("ED IMGS:", img.imageUri);
}

`ED IMG2: Array [
undefined,
undefined,
undefined,
] ED IMGS: Array [
undefined,
undefined,
undefined,
]

my console logs in ProductList.jsx:
console.log("PROD LIST IMG:", img),

PROD LIST IMG: Array [
undefined,
undefined,
undefined,
]

EditDocument.jsx :

let img = [];
  for (let i = 0; i < data?.products?.length; i++) {
  try {
    if (data?.products) {
      const bloc = await FileSystem.readAsStringAsync(data.products.imageUri, {
        encoding: FileSystem.EncodingType.Base64,
      })
      img = "data:image/png;base64," + bloc;

      console.log("ED IMG:", img);
    }
  } catch (error) {
    console.log(error);
  }
  }
  img.push(img[i]);
  }


  console.log("ED IMG2:", img);
  for (let i = 0; i < img.length; i++) {
    console.log("ED IMGS:", img.imageUri);
  }

ED IMG2: Array [
undefined,
undefined,
undefined,
]

ProductList.jsx :

const ProductList = ({ products, language, img }) => {

    return (
     console.log("PROD LIST IMG:", img),
    <>
      <div style={{ width: "100%", marginBottom: 30 }}>
      <div className="tr">
        <div className="th col1">#</div>
        <div className="th col2">{t("PRODUCT", { lng: language })}</div>
        <div className="th col3">{t("DESCRIPTION", { lng: language })}</div>
        <div className="th col4">{t("N°", { lng: language })}</div>
        <div className="th col5">{t("PRICE", { lng: language })}</div>
        <div className="th col6">{t("VAT", { lng: language })}</div>
        <div className="th col7">{t("TOTAL", { lng: language })}</div>
      </div>
      
      {products?.map((product, index) => (
        console.log("PROD LIST IMG:", img),
        <div key={index} className="tr no-break">
          {/* <div className="td col1">{index + 1}</div> */}
          {img ? (
            console.log("PROD2 LIST IMG:", img.length),
            img.map(function (imageUri, index) {
              return (
                <div key={index} className="td col1">
                  <img src={imageUri} style={styles.image} />
                </div>
              );
            })
          ) : (
            <div className="td col1">{index + 1}</div>
          )}
          
          <div className="td col2">{product.name}</div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I solved my issue like this:

      let imgs = [];
  try {
    for (let i = 0; i < data?.products?.length; i++) {
    if (data?.products[i]?.imageUri) {
      const bloc = await FileSystem.readAsStringAsync(data.products[i]?.imageUri, {
        encoding: FileSystem.EncodingType.Base64,
      })
      imgs.push(`data:image/png;base64,${bloc}`)
    }
  }
  } catch (error) {
    console.log(error);
  }

    Thanks for all answers,


  2. 0

    When doing async operations on an array type of useState Promise.all is your friend.

    export const getData = async (limit=10,skip=5) => {
  const data = await fetch(`https://dummyjson.com/products?limit=${limit}&skip=${skip}`);
  const json = await data.json();
  const colors = colorGenerator(limit)
  const products = await Promise.all(
    json.products.map(async (product,i) => {
      // strip unnecessary data
      const { thumbnail, images, stock, ...item } = product;
      return {
        ...item,
        imageUri,
        color:colors[i]
      };
    })
  );
  return products
};

    For a more fleshed out example see here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search