React Native: Make an autoheight WebView inside ScrollView

index.js

import  WebViewAutoHeight  from './WebViewAutoHeight'
import { View, Text } from 'react-native'
import { ScrollView } from 'react-native-gesture-handler'

export default (() => {
  return (
    <ScrollView>
      <View style={{flex: 1}}>
        <WebViewAutoHeight html={'<h1>Hi</h1>'}/>
      </View>
      <View style={{flex: 1}}>
        <Text>Hello!</Text>
      </View>
    </ScrollView>
  )
})

WebViewAutoHeight.js

import React, { useState } from 'react'
import { Dimensions} from 'react-native'
import { WebView } from 'react-native-webview'


export default (props) => {

  const [webViewHeight, setWebViewHeight] = useState(10)

  const onWebViewMessage = (event) => {
    setWebViewHeight(Number(event.nativeEvent.data))
  }

  return (
    <WebView onMessage={onWebViewMessage} injectedJavaScript='window.ReactNativeWebView.postMessage(document.body.scrollHeight)' source={{html: props.html}} style={{width: Dimensions.get('window').width, height: webViewHeight}} />
  )
}