[Bug] Unable to render form for Android

Question

[Bug] Unable to render form for Android

WickedBiscuit opened this issue 7 months ago · comments

Hi, currently experiencing an issue rendering the form on Android using a web view where is seems to be stuck on loading while the device on iOS side seems to be successfully rendering the form. I've tested to check if the JS function has been loaded prior to calling the script, and it seems to be there. There isn't any warnings or errors returned either when using catch statement.

The form tested on is taken from the simple embedding example given in https://formio.github.io/formio.js/app/examples/
Currently, using the following to specs:
react-native: 0.71.4
react-native-web-view: 12.0.2

Related code used is as follows:

const customHTML = `
  <html>
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css">
      <script src="https://cdn.form.io/js/formio.embed.js"></script>
    </head>
    <body>
      <div id="formio"></div>
      <script>
        Formio.createForm(document.getElementById('formio'), {
          components: [
            {
              type: 'textfield',
              key: 'firstName',
              label: 'First Name',
              placeholder: 'Enter your first name.',
              input: true,
              tooltip: 'Enter your <strong>First Name</strong>',
              description: 'Enter your <strong>First Name</strong>'
            },
            {
              type: 'textfield',
              key: 'lastName',
              label: 'Last Name',
              placeholder: 'Enter your last name',
              input: true,
              tooltip: 'Enter your <strong>Last Name</strong>',
              description: 'Enter your <strong>Last Name</strong>'
            },
            {
              type: "select",
              label: "Favorite Things",
              key: "favoriteThings",
              placeholder: "These are a few of your favorite things...",
              data: {
                values: [
                  {
                    value: "raindropsOnRoses",
                    label: "Raindrops on roses"
                  },
                  {
                    value: "whiskersOnKittens",
                    label: "Whiskers on Kittens"
                  },
                  {
                    value: "brightCopperKettles",
                    label: "Bright Copper Kettles"
                  },
                  {
                    value: "warmWoolenMittens",
                    label: "Warm Woolen Mittens"
                  }
                ]
              },
              dataSrc: "values",
              template: "<span>{{ item.label }}</span>",
              multiple: true,
              input: true
            },
            {
              type: 'button',
              action: 'submit',
              label: 'Submit',
              theme: 'primary'
            }
          ]
        }).then(function(form) {
          form.on('submit', function(submission) {
            console.log(submission);
          });
        });
      </script>
    </body>
  </html>
  `;

  return (
    <View style={{flex: 1}}>
      <View style={{flex: 2}}>
        <WebView
          source={{
            html: customHTML,
          }}
          style={{
            marginTop: 20,
          }}
        />
      </View>
    </View>
  );
}