react-native-webview and array list - React native

EdinhoRodrigues
September 16, 2022
253 views
0 votes
2 Answers

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>`;
});

Answers

Chosen as BEST ANSWER

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>
`;

(Edit)

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;

Please signup or login to give your own answer.

Click here to cancel reply.

react-native-webview and array list – React native

Answers