onSizeUpdated will be called after all resources is loaded

[349989153]

onSizeUpdated will be called after all resources is loaded, including <video /> resource, and that will cause a considerable delay.

User will not see anything until the whole <video /> was downloaded.

STEP TO PRODUCE: Just use react-native-autoheight-webview to load a html that contains a big <video /> file.

[349989153]

I found that the delay was caused by the timing when injectedJavaScript was triggered by react-native-webview.react-native-webview trigger injectedJavaScript when onLoad event was fired, at that time all resources was loaded.

So use injectedJavaScript={script} maybe not the best choice.

My advice is use onLoadProgress event. Like:

const AutoHeightWebView = React.memo(
  forwardRef((props, ref) => {
    ...
    const innerRef = React.useRef(ref);
    ...
    return (
      <WebView
        {...props}
        ref={innerRef}
        onMessage={handleMessage}
        style={[
          styles.webView,
          {
            width,
            height
          },
          style
        ]}
        // injectedJavaScript={script}
        source={currentSource}
        onLoadProgress={({ nativeEvent }) => {
          console.log(nativeEvent.progress);
          console.log(innerRef);
          if (nativeEvent.progress > 0.5 && innerRef.current) {
            // trigger script
            innerRef.current.injectJavaScript(script);
          }
          if (props.onLoadProgress) {
            props.onLoadProgress({ nativeEvent })
          }
        }}
        scrollEnabled={currentScrollEnabled}
      />
    );
  }),
  (prevProps, nextProps) => !shouldUpdate({ prevProps, nextProps })
);

This way will trigger onSizeUpdated much faster

[iou90]

Please try using onLoadProgress & injectJavaScript on AutoHeightWebView directly.