formio / formio.js

JavaScript powered Forms with JSON Form Builder
https://formio.github.io/formio.js
MIT License
1.89k stars 1.06k forks source link

[Bug] Unable to render form for Android #5407

Open WickedBiscuit opened 11 months ago

WickedBiscuit commented 11 months ago

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>
  );
}
gcoro commented 5 months ago

I have the same problem, did you manage to make it work?