Printing not working in chrome app on iphone

[ksuhr1]

I have an iPhone 11 Pro max and I was trying to test printing on Chrome as if someone was using it on an Android. I downloaded the chrome app and when I click my button to print, I see onBeforeGetContentResolve.current getting called but then the print window does not pop up and nothing happens. Anyone have any tips?

[MatthewHerbst]

Really hard to diagnose without seeing the code, though I don't have an iPhone myself so best I could do is try to simulate in Xcode. It should be noted that under the hood Chrome on iOS is actually using the WebKit (Safari) engine, since Apple doesn't allow companies to use their own JS engines (since they know if they did mobile browser games would be possible which would destroy App Store revenue). So note that downloading Chrome on iOS is NOT equivalent to testing Chrome on an Android device.

Are you testing with the official examples by chance?

[ksuhr1]

I'm not making an iOS app, I'm building a website and testing on the phone. That's an interesting point about Chrome on IOS not being equivalent to Chrome on an Android. I can't get my hands on an Android at the moment that's why I downloaded the Chrome app, though I don't understand why this doesn't work on the app anyways. It works on Chrome on my computer (Mac), and Safari on my phone.

      import React, {useState, useContext, useRef, useEffect} from 'react';
      import Aux from '../../../hoc/Aux';
      import ReactToPrint from 'react-to-print';
      import OrderSummaryToPrint from './OrderSummaryToPrint';
      import GuitarModel from '../GuitarModel';
      import { user } from 'fontawesome';
      const classes = require('./OrderSummary.module.css');
      
      const OrderSummary = (props) => {
            const onBeforeGetContentResolve = React.useRef(null);
            const [loading, setLoading] = useState(false);
            const componentRef = useRef(null);
              
            const reactToPrintTrigger = React.useCallback(() => {
                const printButton = (
                    <div>
                        <i className="icons fa-solid fa-print"></i>
                        <p>PRINT</p>
                    </div>
                )
                return printButton;
            }, []);
          
          const reactToPrintContent = React.useCallback(() => {
              return componentRef.current;
          }, [componentRef]);
      
          const handleOnBeforeGetContent = React.useCallback(() => {
              setLoading(true);
          
              return new Promise((resolve) => {
                onBeforeGetContentResolve.current = resolve;
                setTimeout(() => {
                  setLoading(false);
                  resolve();
                }, 2000);
              });
            }, [setLoading]);
      
          return (
              <Aux>
                  <div>
                      <ReactToPrint
                          trigger={reactToPrintTrigger}
                          content={reactToPrintContent} 
                          onBeforeGetContent={handleOnBeforeGetContent}       
                      >
                      </ReactToPrint>
                  </div> 
                  {loading && 
                      <div>
                          <p> —— Preparing to print your custom build ——</p>
                      </div>
                  }
                  <div  id="divToPrint" className={classes.PrintSource}>
                      <OrderSummaryToPrint ref={componentRef}/>
                  </div>
              </Aux>
          )
      };
      export default OrderSummary;

[MatthewHerbst]

I'm building a website and testing on the phone

Yep! Just the only way for me to test on iOS is to run through the Xcode emulator since I don't have an iOS device

though I don't understand why this doesn't work on the app anyways. It works on Chrome on my computer (Mac), and Safari on my phone

Each browser implements printing a bit differently (there is no standard printing spec), and mobile browsers are the most difficult to work with by far since they don't think about it much since printing from the phone is a rare use-case.

That it works on Safari on your phone is a good piece of information! So clearly this must be an iOS Chrome specific issue.

The code you posted looks fine. I'll try and dig into this more tonight when I can spin up an emulator

[MatthewHerbst]

I was able to replicate the issue on an iPhone in both iOS Chrome and iOS Safari.

In terms of making your code work, I'm not sure there is a good short-term solution. I will work on filing bugs with Chrome. Really window.print on iOS should be redirected by the browser to the share API, but that's an upstream issue that we can't fix here 😢