react-native-webview and array list

Edinho Rodrigues 0
Viewed 22

I'm using react-native-webview and another page I can render a static webview like this:

return `<html>
          <head>
          <style>
            .t-center{
              text-align: center;
          </style>
          </head>
          <body>
            <div class="t-center">
              <h1>GUIA DE AGENDAMENTO - ENTREGA</h1>
              <h1>0000000</h1>
            </div>
          </body>
        </html>`

But now I need to render a list of items from an array inside a webview. I tried using the map but it didn't work:

return items.map((item) => {
  return `<html>
      <head>
      <style>
        .t-center{
          text-align: center;
      </style>
      </head>
      <body>
        <div class="t-center">
          <h1>GUIA DE AGENDAMENTO - ENTREGA</h1>
          <h1>${item.namE_CLI}</h1>
        </div>
      </body>
    </html>`;
});
webview react-native-webview react-native
2 Answers

here is the solution where you can find the props value injectedJavaScript which helps to inject JavaScript to webview. sample code given below how to add array list to webview.

ex:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { WebView } from 'react-native-webview';

const App = () => {
  let myList = `["A", "B", "C", "D"]`;

  const overrideJs = `
  let $buttons = $('<div id="buttonGallery">');
   let myList = ${myList}
  let myColors = ["red", "green", "blue", "red"];

  myList.map(function(letter, index) {
    let $button = $("<div></div>")
      .addClass("buttons")
      .attr("id", "button_" + letter)
      .html("<p>" + letter + "</p>")
      .on("mouseenter", function() {
        $(this).css("background", myColors[index]);
      })
      .on("mouseleave", function() {
        if (!$(this).hasClass('clicked')) {
          $(this).css("background", "transparent");
        }
      })
      .on("click", function() {
        $(this).css("background", myColors[index]);
        $(this).addClass('clicked');
      })
    $buttons.append($button);
  });

  $("body").append($buttons);

  $("#done").on("click", clearColor);

  function clearColor() {
    $(".buttons").css({
      backgroundColor: 'transparent'
    });
    $(".buttons").removeClass('clicked');
  }
  `
  const html = `<html lang="en" dir="ltr">

  <head>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style media="screen">
      .buttons {
        width: 150px;
        height: 50px;
        border: solid 2px black;
        text-align: center;
        color: black;
        cursor: pointer;
        background-color: white;
        margin: 2px;
      }
  
      #buttonGallery {
        margin: 10px;
        padding: 10px;
        border: solid 2px black;
        width: 155px;
      }
  
      #done {
        width: 150px;
        height: 50px;
        border: solid 2px black;
        text-align: center;
        color: black;
        cursor: pointer;
        background-color: white;
        margin: 2px;
      }
    </style>
  </head>
  
  <body>
  
    <div id="done">
      <p>done</p>
    </div>
  
   
  </body>
  
  </html>
  `
  return (
    <View style={{ flex: 1, backgroundColor: 'red' }}>
      <WebView
        ref={(r) => this.webviewRef = r}
        source={{ html }}
        // onMessage={}
        injectedJavaScript={overrideJs}
        injectedJavaScriptForMainFrameOnly={false}
        allowUniversalAccessFromFileURLs={true}
      />
    </View>
  )


};

export default App;
Virendrasinh R0

Thanks Virendrasinh R, your propose is very good! But I found a way to do this with map and toString():

const names = items.map(function (item) {
  return `<div class="row"><span class="title">${item["idcont"]} - ${item["nomE_CLI"]}</span></div>
          <div class="row"><strong>Tipo:</strong> ${item["tipO_CONHECIMENTO"]}</div>
          <div class="row"><strong>Contêiner:</strong> ${item["idcont"]}</div>
          <div class="row"><strong>N:</strong> ${item["numerO_CE_MERCANTE"]}</div>
          <div class="row"><strong>Status:</strong> ${item["status"]}</div>
          <div class="row"><strong>Data Status:</strong> ${item["datA_STATUS"]}</div>
          <div class="row"><strong>Data Prevista:</strong> ${item["dH_PREV_INSPECAO"]}</div>
          <div class="row last-row"><strong>Data Descarga:</strong> ${item["dH_DESCARGA"]}</div>
  `;
});
const html = `
      <html>
      <head>
        <style>
          body{
            padding: 0 25px;
          }

          .row{
            font-size: 38px;
            border-bottom: 1px solid  ${theme.color.gray};
            padding: 10px;
          }

          .last-row{
            margin-bottom: 50px;
          }

          .title{
            color: ${theme.color.success};
            font-size: 48px;
            font-weight: bold;
          }

          strong{
            color: ${theme.color.primary};
          }
        </style>
      </head>
      <body>${names.toString()}</body>
      </html>
`;
Edinho Rodrigues0
Related