title: Unhandled Promise Rejection: Malformed calls from JS: field sizes are different
body: <p>I am trying to print a simple pdf document form my app using printAsync. I found a code that works and I tried using the same method in my app but this error came out. I am not sure of what is triggering the error.</p>
  
  <p>Here's my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import * as Font from 'expo-font';
  import { StyleSheet, Text, View, TouchableWithoutFeedback } from 'react-native';
  import * as Print from 'expo-print';
  import {TouchableOpacity, TextInput} from 'react-native';
  
  export default class App extends React.Component {
  
    state ={
      assetsLoaded: false,
      idNumber: 12345,
    };
  
   printPdf () {
    Print.printAsync({
      html:
    &lt;html&gt;
      &lt;body style = {styles.container}&gt;
        &lt;div style= "height: 100%; width: 100%, margin: 20px" /&gt;
        &lt;h1 style={{fontFamily: 'code39', fontSize: 100 }}&gt;{this.state.idNumber}&lt;/h1&gt;
        &lt;h2&gt;{this.state.idNumber}&lt;/h2&gt;
      &lt;/body&gt;
    &lt;/html&gt;
    })
    }
  
    async componentDidMount() {
      await Font.loadAsync({
        'code39': require('./assets/Font/Code39r.ttf'),
      });
  
      this.setState({assetsLoaded: true})
    }  
  
    render() {
      const {assetsLoaded} = this.state;
  
      if (assetsLoaded) {
        return (
          &lt;View style={styles.container}&gt;
            &lt;Text style={{fontFamily: 'code39', fontSize: 100 }}&gt;{this.state.idNumber}&lt;/Text&gt;
            &lt;Text&gt; &lt;/Text&gt;
            &lt;Text&gt;{this.state.idNumber}&lt;/Text&gt;
            &lt;TouchableOpacity 
              style = {styles.button}  
              onPress ={ ()=&gt; this.printPdf()}&gt;
              &lt;Text style ={styles.buttonText}&gt;PRINT PDF&lt;/Text&gt;    
            &lt;/TouchableOpacity&gt;
          &lt;/View&gt;
        );
        }
      else {
        return (
          &lt;View style={styles.container}&gt;
            &lt;Text&gt;Font load Fail&lt;/Text&gt;
          &lt;/View&gt;
        );
      }
      }
  
    }
  
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
      paddingTop: 10,
  
    },
    button: {
      backgroundColor: '#7a42f4',
      padding: 10,
      margin: 15,
      height: 40,
    },
    buttonText: {
      color: 'white',
    },
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>The error is this:
  <a href="https://i.stack.imgur.com/Aa4Zb.png" rel="nofollow noreferrer">Unhandled promise rejection: Error: Exception in HostFunction: Malformed calls from JS: field sizes are different.</a></p>