Implement business sign up form as a WebView

[shadforth]

High-level overview

We currently navigate users from the About screen to the business sign up form on carrythroughcovid.com via Linking. This method is a little bit janky because it means users will be redirected on their phones to their default web browser in order to view this page.

A more seamless way to view the business sign up form is via WebView. ✨

With WebView, users can view the webpage "natively" within the application without the need to navigate away from the app. The page is effectively embedded within the app.

Technical implementation

The current implementation of linking to the business form is below.

// Users' default web browser is opened when pressing 'Sign up now'
<TouchableOpacity
   onPress={() =>
      Linking.openURL("https://carrythroughcovid.com/signup")
   }
>
   <Text>Sign up now</Text>
</TouchableOpacity>

With WebView, instead we can register the screen as its own component.

// Register the WebView as its own component
const BusinessSignUpScreen = () => {
  return (
    <WebView
      source={{ uri: "https://carrythroughcovid.com/signup" }}
    />
  );
};

With this implementation, the TouchableOpacity changes to the snippet below.

<TouchableOpacity
   onPress={() => navigation.navigate("BusinessSignUp")}
>
   <Text>Sign up now</Text>
</TouchableOpacity>

Callouts

• WebView will require some additional thought into the navigation header styles
• The styles at the top of the webpage (i.e. logo, background image) are noticeably different to the native mobile styles
• Time to load the page takes a second. Can this be improved or the page loaded beforehand?

POC branch

A proof of concept can be found on the spike-business-webview branch.

Screenshot

[peroh]

This is awesome. The the other thing to think about is whether we disable some functionality from the webview so that they can only sign up, and not visit other links. I think you can inject some javascript before the page loads so we could look into that.

And maybe we could update some styles as well?

Regardless I think this is a good option. Are you happy to card it up?

[shadforth]

Good call, I'll card it up and look at it this week!