How to fix styling of server-rendered html inside react-native-webview?

Question

This has been quite a headache. Ive got a server which uses express handlebar templating to render html/css/js to my react-native-webview. it needs to happen this way, I cannot render a static site/files.

The issue is the page always loads zoomed out.

On android, theres a point in time where it loads nicely, but then it changes after a second, and goes off-screen. it seems like its happening after the JS has executes, but its hard to tell.

this change seems to correlate to this server log:

2020-11-20T23:46:09.276261+00:00 heroku[router]: at=info method=GET path="/favicon.ico" host=app.herokuapp.com request_id=7a59f27b-7f1d-4ca2-a649-96fedd5072c1 fwd="184.56.205.17" dyno=web.1 connect=1ms service=3ms status=404 bytes=481 protocol=https

On iOS, it just loads super zoomed out all the time.

testing in the browser it looks fine all the time. once its viewed from a mobile device its all messed up. How can I mitigate this issue, so its loads like it loads on the browser?

heres the react-native side:

<Modal
  visible={this.state.paymentMethodModal}
  transparent={true}
  animationType={'slide'}
  onRequestClose={() => this.setState({ paymentMethodModal: !this.state.paymentMethodModal })}
  style={{ backgroundColor: Colors.PRIMARY_DARK }} >
  <View style={{ borderTopLeftRadius: 15, borderTopRightRadius: 15, backgroundColor: Colors.PRIMARY_DARK, paddingTop: Platform.OS == 'ios' ? 50 : 15, width: width, height: height }}>
    <TouchableOpacity style={{ borderRadius: 20, backgroundColor: Colors.PRIMARY_WHITE, alignSelf: 'flex-start', marginLeft: 10, marginBottom: 5, paddingVertical: 8, paddingHorizontal: 15 }} onPress={() => { this.setState({ paymentMethodModal: !this.state.paymentMethodModal }) }}><Text>Close</Text></TouchableOpacity>
      <WebView
        style={{ height: height, width: width, backgroundColor: Colors.PRIMARY_DARK }}
        ref={(ref) => (this.webview = ref)}
        source={{ uri: this.API_ENDPOINT }}
        renderError={(error) => <View style={{ flex: 1 }}><Text>{error}</Text></View>}
        onError={syntheticEvent => {
          const { nativeEvent } = syntheticEvent;
          console.warn('WebView error: ', nativeEvent);
        }}
        startInLoadingState={true}
        renderLoading={() => <ActivityIndicator animating={true} size={"large"} style={{ alignSelf: 'center', position: 'absolute', top: '45%', left: '47%' }} color={Colors.PRIMARY_GREEN} />}
        scalesPageToFit={false}
        injectedJavaScript={`const meta = document.createElement('meta'); meta.setAttribute('content', 'width=device-width, initial-scale=0.5, maximum-scale=0.5, user-scalable=0'); meta.setAttribute('name', 'viewport'); document.getElementsByTagName('head')[0].appendChild(meta); `}
        />
    </View>
</Modal>

when the end point is hit the servers rendering the stripe card-wallet:

res.render('card-wallet', {
  client_secret: setupIntent.client_secret,
  type: 'edit',
  customer: req.query.customer,
  style: 'card-wallet.css',
  javascript: 'card-wallet.js'
});

the handlebar template:

<div class="wrapper">
  <div class="content">
    <p class="bold text-lg primary-white">Payment Setup</p>
      <form action="/charge" method="post" id="payment-form" data-secret="{{ client_secret }}"
      data-payment_method_id="{{ payment_method_id }}" data-type="{{ type }}" data-customer="{{ customer }}">
        <div class="form-row">
          <input id="cardholder-name" type="text" name="cardholder-name" placeholder="Cardholder Name"></input>
          <div id="card-element">
            <!-- A Stripe Element will be inserted here. -->
          </div>
          <div id="status-wrapper" class="mt-10">
            <p id="status-msg" class="primary-alert text-md"></p>
          </div>
        </div>
        <button id="save-button">Save Card</button>
      </form>
      <div id="spinner" class="spinner-grow text-light"></div>
        <div id="success-wrapper">
          <p id="success-msg" class="text-md primary-white italic"></p>
      </div>
      <div class="auth-wrapper">
        <p id="agreement" class="text-sm primary-white italic">Clicking 'Save Card' means you authorize this app to send payment instructions to your card issuer in accordance with our application policies. </p>
      </div>
   </div>
</div>

put the card-wallet.css and card-wallet.js into a pastebin to keep this post short.

card-wallet.css: https://pastebin.com/q4ZuYnTN

card-wallet.js: https://pastebin.com/LqykSwvK

heres on browser:

heres on iPhone:

heres on android when it looks the way I want (before the shift):

heres android after the shift:

All I want is for all these experiences to be exactly the same. How can I handle this (like on browser)?

UPDATE: ive managed to get it to render without the zoom-out, only on iPhone. I simply had to add <meta name="viewport" content="width=device-width, initial-scale=1" /> to the main handlebar template. but the shifting issue persists on android

Answer 1

ultimately the solve related to the meta tag.

 <meta name="viewport" content="width=device-width, initial-scale=1" />

I had to:

1. move that tag into the server-rendered html (solved iOS)

2. remove the injectedJavascript attribute on the webview, which was setting the meta tag (this solved android shift)