@mpxjs/webpack-plugin 2.9.69-beta.0 → 2.9.69-beta.2

package/lib/runtime/components/react/mpx-picker-view-column.tsx

@@ -1,17 +1,18 @@
-
-import { View, Animated, SafeAreaView, NativeScrollEvent, NativeSyntheticEvent, LayoutChangeEvent, ScrollView } from 'react-native'
-import React, { forwardRef, useRef, useState, useMemo, useCallback, useEffect } from 'react'
-import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout, usePrevious } from './utils'
+import React, { forwardRef, useRef, useState, useMemo, useEffect, useCallback } from 'react'
+import { LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent, SafeAreaView, ScrollView, StyleSheet, View } from 'react-native'
+import Reanimated, { AnimatedRef, useAnimatedRef, useScrollViewOffset } from 'react-native-reanimated'
+import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious, isAndroid, useDebounceCallback, useStableCallback, isIOS } from './utils'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { createFaces } from './pickerFaces'
-import PickerOverlay from './pickerOverlay'
+import PickerOverlay from './pickerViewOverlay'
+import PickerMask from './pickerViewMask'
+import MpxPickerVIewColumnItem from './mpx-picker-view-column-item'
+import { PickerViewColumnAnimationContext } from './pickerVIewContext'
 
 interface ColumnProps {
   children?: React.ReactNode
   columnData: React.ReactNode[]
+  columnStyle: Record<string, any>
   initialIndex: number
-  onColumnItemRawHChange: Function
-  getInnerLayout: Function
   onSelectChange: Function
   style: {
     [key: string]: any
@@ -22,25 +23,23 @@ interface ColumnProps {
     height: number
     itemHeight: number
   }
+  pickerMaskStyle: Record<string, any>
   pickerOverlayStyle: Record<string, any>
   columnIndex: number
 }
 
-// 默认的单个选项高度
-const DefaultPickerItemH = 36
-// 默认一屏可见选项个数
 const visibleCount = 5
 
 const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>, ColumnProps>((props: ColumnProps, ref) => {
   const {
     columnData,
     columnIndex,
+    columnStyle,
     initialIndex,
     onSelectChange,
-    onColumnItemRawHChange,
-    getInnerLayout,
     style,
     wrapperStyle,
+    pickerMaskStyle,
     pickerOverlayStyle,
     'enable-var': enableVar,
     'external-var-context': externalVarContext
@@ -54,27 +53,42 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
     setWidth,
     setHeight
   } = useTransformStyle(style, { enableVar, externalVarContext })
-  const { textStyle } = splitStyle(normalStyle)
+  const { textStyle: textStyleFromParent = {} } = splitStyle(columnStyle)
+  const { textStyle = {} } = splitStyle(normalStyle)
   const { textProps } = splitProps(props)
-  const scrollViewRef = useRef<ScrollView>(null)
+  const scrollViewRef = useAnimatedRef<Reanimated.ScrollView>()
+  const offsetYShared = useScrollViewOffset(scrollViewRef as AnimatedRef<Reanimated.ScrollView>)
 
-  useNodesRef(props, ref, scrollViewRef, {
+  useNodesRef(props, ref, scrollViewRef as AnimatedRef<ScrollView>, {
     style: normalStyle
   })
 
-  const { height: pickerH, itemHeight = DefaultPickerItemH } = wrapperStyle
-  const [itemRawH, setItemRawH] = useState(0) // 单个选项真实渲染高度
+  const { height: pickerH, itemHeight } = wrapperStyle
+  const [itemRawH, setItemRawH] = useState(itemHeight)
   const maxIndex = useMemo(() => columnData.length - 1, [columnData])
+  const prevScrollingInfo = useRef({ index: initialIndex, y: 0 })
   const touching = useRef(false)
   const scrolling = useRef(false)
   const activeIndex = useRef(initialIndex)
   const prevIndex = usePrevious(initialIndex)
   const prevMaxIndex = usePrevious(maxIndex)
 
-  const initialOffset = useMemo(() => ({
-    x: 0,
-    y: itemRawH * initialIndex
-  }), [itemRawH])
+  const {
+    layoutProps
+  } = useLayout({
+    props,
+    hasSelfPercent,
+    setWidth,
+    setHeight,
+    nodeRef: scrollViewRef
+  })
+
+  // console.log('[mpx-picker-view-column], render ---> columnIndex=', columnIndex, 'initialIndex=', initialIndex, 'columnData=', columnData.length, 'pickerH=', pickerH, 'itemRawH=', itemRawH, 'itemHeight=', itemHeight)
+
+  const paddingHeight = useMemo(
+    () => Math.round((pickerH - itemHeight) / 2),
+    [pickerH, itemHeight]
+  )
 
   const snapToOffsets = useMemo(
     () => columnData.map((_, i) => i * itemRawH),
@@ -82,12 +96,34 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
   )
 
   const contentContainerStyle = useMemo(() => {
-    return [
-      {
-        paddingVertical: Math.round(pickerH - itemRawH) / 2
-      }
-    ]
-  }, [pickerH, itemRawH])
+    return [{ paddingVertical: paddingHeight }]
+  }, [paddingHeight])
+
+  const getIndex = useCallback((y: number) => {
+    const calc = Math.round(y / itemRawH)
+    return Math.max(0, Math.min(calc, maxIndex))
+  }, [itemRawH, maxIndex])
+
+  const getYofIndex = useCallback((index: number) => {
+    return index * itemRawH
+  }, [itemRawH])
+
+  const stableResetScrollPosition = useStableCallback((y: number) => {
+    console.log('[mpx-picker-view-column], reset --->', 'columnIndex=', columnIndex, 'y=', y, touching.current, scrolling.current)
+    if (touching.current || scrolling.current) {
+      return
+    }
+    // needReset.current = true
+    if (y % itemRawH !== 0) {
+      scrolling.current = true
+      const targetIndex = getIndex(y)
+      const targetY = getYofIndex(targetIndex)
+      scrollViewRef.current?.scrollTo({ x: 0, y: targetY, animated: false })
+    } else {
+      onMomentumScrollEnd({ nativeEvent: { contentOffset: { y } } })
+    }
+  })
+  const debounceResetScrollPosition = useDebounceCallback(stableResetScrollPosition, 10)
 
   useEffect(() => {
     if (
@@ -102,188 +138,170 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
     ) {
       return
     }
-
+    setTimeout(() => {
+      scrollViewRef.current?.scrollTo({
+        x: 0,
+        y: getYofIndex(initialIndex),
+        animated: false
+      })
+    }, isAndroid ? 200 : 0)
     activeIndex.current = initialIndex
-    scrollViewRef.current.scrollTo({
-      x: 0,
-      y: itemRawH * initialIndex,
-      animated: false
-    })
   }, [itemRawH, initialIndex])
 
-  const onScrollViewLayout = () => {
-    getInnerLayout && getInnerLayout(layoutRef)
-  }
-
-  const {
-    layoutRef,
-    layoutProps
-  } = useLayout({
-    props,
-    hasSelfPercent,
-    setWidth,
-    setHeight,
-    nodeRef: scrollViewRef,
-    onLayout: onScrollViewLayout
-  })
-
-  const onContentSizeChange = (w: number, h: number) => {
-    scrollViewRef.current?.scrollTo({
-      x: 0,
-      y: itemRawH * initialIndex,
-      animated: false
-    })
+  const onContentSizeChange = (_w: number, h: number) => {
+    const y = getYofIndex(initialIndex)
+    if (y <= h) {
+      setTimeout(() => {
+        scrollViewRef.current?.scrollTo({ x: 0, y, animated: false })
+      }, 0)
+    }
   }
 
   const onItemLayout = (e: LayoutChangeEvent) => {
     const { height: rawH } = e.nativeEvent.layout
     if (rawH && itemRawH !== rawH) {
       setItemRawH(rawH)
-      onColumnItemRawHChange(rawH)
     }
   }
 
-  const onTouchStart = () => {
+  const onScrollBeginDrag = () => {
+    isIOS && debounceResetScrollPosition.clear()
     touching.current = true
+    prevScrollingInfo.current = {
+      index: activeIndex.current,
+      y: getYofIndex(activeIndex.current)
+    }
   }
 
-  const onTouchEnd = () => {
-    touching.current = false
-  }
-
-  const onTouchCancel = () => {
+  const onScrollEndDrag = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
     touching.current = false
+    const { y } = e.nativeEvent.contentOffset
+    if (isIOS) {
+      if (y > 0 && y < snapToOffsets[maxIndex]) {
+        debounceResetScrollPosition(y)
+      }
+    }
   }
 
   const onMomentumScrollBegin = () => {
+    isIOS && debounceResetScrollPosition.clear()
     scrolling.current = true
   }
 
-  const onMomentumScrollEnd = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+  const onMomentumScrollEnd = (e: NativeSyntheticEvent<NativeScrollEvent> | { nativeEvent: { contentOffset: { y: number } } }) => {
     scrolling.current = false
-    if (!itemRawH) {
-      return
-    }
     const { y: scrollY } = e.nativeEvent.contentOffset
-    let calcIndex = Math.round(scrollY / itemRawH)
+    if (isIOS && scrollY % itemRawH !== 0) {
+      return debounceResetScrollPosition(scrollY)
+    }
+    const calcIndex = getIndex(scrollY)
     activeIndex.current = calcIndex
     if (calcIndex !== initialIndex) {
-      calcIndex = Math.max(0, Math.min(calcIndex, maxIndex)) || 0
       onSelectChange(calcIndex)
     }
   }
 
-  const offsetY = useRef(new Animated.Value(0)).current
-
-  const onScroll = useMemo(
-    () =>
-      Animated.event([{ nativeEvent: { contentOffset: { y: offsetY } } }], {
-        useNativeDriver: true
-      }),
-    [offsetY]
-  )
-
-  const faces = useMemo(() => createFaces(itemRawH, visibleCount), [itemRawH])
-
-  const getTransform = useCallback(
-    (index: number) => {
-      const inputRange = faces.map((f) => itemRawH * (index + f.index))
-      return {
-        opacity: offsetY.interpolate({
-          inputRange: inputRange,
-          outputRange: faces.map((x) => x.opacity),
-          extrapolate: 'clamp'
-        }),
-        rotateX: offsetY.interpolate({
-          inputRange: inputRange,
-          outputRange: faces.map((x) => `${x.deg}deg`),
-          extrapolate: 'extend'
-        }),
-        translateY: offsetY.interpolate({
-          inputRange: inputRange,
-          outputRange: faces.map((x) => x.offsetY),
-          extrapolate: 'extend'
-        })
+  const onScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+    const { y } = e.nativeEvent.contentOffset
+    if (isAndroid) {
+      return
+    }
+    // 全局注册的震动触感 hook
+    const pickerVibrate = global.__mpx.config.rnConfig.pickerVibrate
+    if (typeof pickerVibrate !== 'function') {
+      return
+    }
+    const { index: prevIndex, y: _y } = prevScrollingInfo.current
+    if (touching.current || scrolling.current) {
+      if (Math.abs(y - _y) >= itemRawH) {
+        const currentId = getIndex(y)
+        if (currentId !== prevIndex) {
+          prevScrollingInfo.current = {
+            index: currentId,
+            y: getYofIndex(currentId)
+          }
+          // vibrateShort({ type: 'selection' })
+          pickerVibrate()
+        }
       }
-    },
-    [offsetY, faces, itemRawH]
-  )
+    }
+  }
 
   const renderInnerchild = () =>
-    columnData.map((item: React.ReactNode, index: number) => {
-      const InnerProps = index === 0 ? { onLayout: onItemLayout } : {}
-      const strKey = `picker-column-${columnIndex}-${index}`
-      const { opacity, rotateX, translateY } = getTransform(index)
+    columnData.map((item: React.ReactElement, index: number) => {
       return (
-        <Animated.View
-          key={strKey}
-          {...InnerProps}
-          style={[
-            {
-              height: itemHeight || DefaultPickerItemH,
-              width: '100%',
-              opacity,
-              transform: [
-                { translateY },
-                { rotateX },
-                { perspective: 1000 } // 适配 Android
-              ]
-            }
-          ]}
-        >
-          {wrapChildren(
-            { children: item },
-            {
-              hasVarDec,
-              varContext: varContextRef.current,
-              textStyle,
-              textProps
-            }
-          )}
-        </Animated.View>
+        <MpxPickerVIewColumnItem
+          key={index}
+          item={item}
+          index={index}
+          itemHeight={itemHeight}
+          textStyleFromParent={textStyleFromParent}
+          textStyle={textStyle}
+          hasVarDec={hasVarDec}
+          varContext={varContextRef.current}
+          textProps={textProps}
+          visibleCount={visibleCount}
+          onItemLayout={onItemLayout}
+        />
       )
     })
 
   const renderScollView = () => {
     return (
-      <Animated.ScrollView
-        ref={scrollViewRef}
-        bounces={true}
-        horizontal={false}
-        pagingEnabled={false}
-        nestedScrollEnabled={true}
-        removeClippedSubviews={true}
-        showsVerticalScrollIndicator={false}
-        showsHorizontalScrollIndicator={false}
-        {...layoutProps}
-        scrollEventThrottle={16}
-        contentContainerStyle={contentContainerStyle}
-        contentOffset={initialOffset}
-        snapToOffsets={snapToOffsets}
-        onContentSizeChange={onContentSizeChange}
-        onScroll={onScroll}
-        onTouchStart={onTouchStart}
-        onTouchEnd={onTouchEnd}
-        onTouchCancel={onTouchCancel}
-        onMomentumScrollBegin={onMomentumScrollBegin}
-        onMomentumScrollEnd={onMomentumScrollEnd}
-      >
-        {renderInnerchild()}
-      </Animated.ScrollView>
+      <PickerViewColumnAnimationContext.Provider value={offsetYShared}>
+        <Reanimated.ScrollView
+          ref={scrollViewRef}
+          bounces={true}
+          horizontal={false}
+          nestedScrollEnabled={true}
+          removeClippedSubviews={false}
+          showsVerticalScrollIndicator={false}
+          showsHorizontalScrollIndicator={false}
+          scrollEventThrottle={16}
+          {...layoutProps}
+          style={[{ width: '100%' }]}
+          decelerationRate="fast"
+          snapToOffsets={snapToOffsets}
+          onScroll={onScroll}
+          onScrollBeginDrag={onScrollBeginDrag}
+          onScrollEndDrag={onScrollEndDrag}
+          onMomentumScrollBegin={onMomentumScrollBegin}
+          onMomentumScrollEnd={onMomentumScrollEnd}
+          onContentSizeChange={onContentSizeChange}
+          contentContainerStyle={contentContainerStyle}
+        >
+          {renderInnerchild()}
+        </Reanimated.ScrollView>
+      </PickerViewColumnAnimationContext.Provider>
     )
   }
 
   const renderOverlay = () => (
-    <PickerOverlay itemHeight={itemHeight} overlayItemStyle={pickerOverlayStyle} />
+    <PickerOverlay
+      itemHeight={itemHeight}
+      overlayItemStyle={pickerOverlayStyle}
+    />
+  )
+
+  const renderMask = () => (
+    <PickerMask
+      itemHeight={itemHeight}
+      maskContainerStyle={pickerMaskStyle}
+    />
   )
 
   return (
-    <SafeAreaView style={[{ display: 'flex', flex: 1 }]}>
+    <SafeAreaView style={[styles.wrapper, normalStyle]}>
       {renderScollView()}
+      {renderMask()}
       {renderOverlay()}
     </SafeAreaView>
   )
 })
 
+const styles = StyleSheet.create({
+  wrapper: { display: 'flex', flex: 1 }
+})
+
 _PickerViewColumn.displayName = 'MpxPickerViewColumn'
 export default _PickerViewColumn

package/lib/runtime/components/react/mpx-picker-view.tsx

@@ -1,5 +1,5 @@
 import { View } from 'react-native'
-import React, { forwardRef, useState, useRef } from 'react'
+import React, { forwardRef, useRef } from 'react'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import {
@@ -9,8 +9,6 @@ import {
   wrapChildren,
   parseInlineStyle,
   useTransformStyle,
-  useDebounceCallback,
-  useStableCallback,
   extendObject
 } from './utils'
 import type { AnyFunc } from './types/common'
@@ -21,21 +19,21 @@ import type { AnyFunc } from './types/common'
  * ✘ bindpickend
  * ✘ mask-class
  * ✔ indicator-style: 优先级indicator-style.height > pick-view-column中的子元素设置的height
+ * WebView Only:
  * ✘ indicator-class
- * ✘ mask-style
+ * ✔ mask-style
  * ✘ immediate-change
  */
 
 interface PickerViewProps {
   children: React.ReactNode
-  // 初始的defaultValue数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），
-  // 数字大于 picker-view-column 可选项长度时，选择最后一项。
   value?: Array<number>
   bindchange?: AnyFunc
   style: {
     [key: string]: any
   }
   'indicator-style'?: string
+  'mask-style'?: string
   'enable-var': boolean
   'external-var-context'?: Record<string, any>,
   'enable-offset': boolean
@@ -62,6 +60,8 @@ const styles: { [key: string]: Object } = {
   }
 }
 
+const DefaultPickerItemH = 36
+
 const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProps>((props: PickerViewProps, ref) => {
   const {
     children,
@@ -71,16 +71,16 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
     'enable-var': enableVar,
     'external-var-context': externalVarContext
   } = props
-
-  // indicatorStyle 需要转换为rn的style
-  // 微信设置到pick-view上上设置的normalStyle如border等需要转换成RN的style然后进行透传
   const indicatorStyle = parseInlineStyle(props['indicator-style'])
+  const pickerMaskStyle = parseInlineStyle(props['mask-style'])
   const { height: indicatorH, ...pickerOverlayStyle } = indicatorStyle
-  const [pickMaxH, setPickMaxH] = useState(0)
   const nodeRef = useRef(null)
   const cloneRef = useRef(null)
   const activeValueRef = useRef(value)
   activeValueRef.current = value.slice()
+  const snapActiveValueRef = useRef<number[] | null>(null)
+
+  console.log('[mpx-picker-view] value=', value, Date.now())
 
   const {
     normalStyle,
@@ -96,7 +96,6 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
   })
 
   const {
-    // 存储layout布局信息
     layoutRef,
     layoutProps,
     layoutStyle
@@ -104,33 +103,34 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
   const { textProps } = splitProps(props)
   const { textStyle } = splitStyle(normalStyle)
 
-  const onColumnItemRawHChange = (height: number) => {
-    if (height > pickMaxH) {
-      setPickMaxH(height)
-    }
-  }
-
-  const bindchangeDebounce = useDebounceCallback(useStableCallback(bindchange), 300)
-
   const onSelectChange = (columnIndex: number, selectedIndex: number) => {
-    bindchangeDebounce.clear()
     const activeValue = activeValueRef.current
     activeValue[columnIndex] = selectedIndex
+    console.log('[mpx-picker-view], onSelectChange ---> columnIndex=', columnIndex, 'selectedIndex=', selectedIndex, 'activeValue=', activeValue)
     const eventData = getCustomEvent(
       'change',
       {},
       { detail: { value: activeValue, source: 'change' }, layoutRef }
     )
-    bindchangeDebounce(eventData)
+    bindchange?.(eventData)
+    snapActiveValueRef.current = activeValueRef.current
   }
 
-  const onInitialChange = (value: number[]) => {
-    const eventData = getCustomEvent(
-      'change',
-      {},
-      { detail: { value, source: 'change' }, layoutRef }
-    )
-    bindchange?.(eventData) // immediate
+  const hasDiff = (a: number[] = [], b: number[]) => {
+    return a.some((v, i) => v !== b[i])
+  }
+
+  const onInitialChange = (isInvalid: boolean, value: number[]) => {
+    if (isInvalid || !snapActiveValueRef.current || hasDiff(snapActiveValueRef.current, value)) {
+      console.log('[mpx-picker-view], onInitialChange ===> value=', value)
+      const eventData = getCustomEvent(
+        'change',
+        {},
+        { detail: { value, source: 'change' }, layoutRef }
+      )
+      bindchange?.(eventData)
+      snapActiveValueRef.current = value.slice()
+    }
   }
 
   const innerProps = useInnerProps(
@@ -153,7 +153,6 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
   )
 
   const renderColumn = (child: React.ReactElement, index: number, columnData: React.ReactNode[], initialIndex: number) => {
-    const extraProps = {}
     const childProps = child?.props || {}
     const wrappedProps = extendObject(
       {},
@@ -164,15 +163,15 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
         columnIndex: index,
         key: `pick-view-${index}`,
         wrapperStyle: {
-          height: normalStyle?.height || 0,
-          itemHeight: indicatorH || 0
+          height: normalStyle?.height || DefaultPickerItemH,
+          itemHeight: indicatorH || DefaultPickerItemH
         },
-        onColumnItemRawHChange,
+        columnStyle: normalStyle,
         onSelectChange: onSelectChange.bind(null, index),
         initialIndex,
-        pickerOverlayStyle
-      },
-      extraProps
+        pickerOverlayStyle,
+        pickerMaskStyle
+      }
     )
     const realElement = React.cloneElement(child, wrappedProps)
     return wrapChildren(
@@ -215,7 +214,7 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
       validValue.push(validIndex)
       renderColumns.push(renderColumn(item, index, columnData, validIndex))
     })
-    isInvalid && onInitialChange(validValue)
+    onInitialChange(isInvalid, validValue)
     return renderColumns
   }
 
@@ -227,5 +226,4 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
 })
 
 _PickerView.displayName = 'MpxPickerView'
-
 export default _PickerView

package/lib/runtime/components/react/mpx-rich-text/index.tsx

@@ -3,10 +3,10 @@
  * ✔ nodes
  */
 import { View, ViewProps, ViewStyle } from 'react-native'
-import { useRef, forwardRef, JSX, useState } from 'react'
+import { useRef, forwardRef, JSX, useState, createElement } from 'react'
 import useInnerProps from '../getInnerListeners'
 import useNodesRef, { HandlerRef } from '../useNodesRef' // 引入辅助函数
-import { useTransformStyle, useLayout } from '../utils'
+import { useTransformStyle, useLayout, extendObject } from '../utils'
 import { WebView, WebViewMessageEvent } from 'react-native-webview'
 import { generateHTML } from './html'
 
@@ -91,28 +91,22 @@ const _RichText = forwardRef<HandlerRef<View, _RichTextProps>, _RichTextProps>((
     layoutRef
   })
 
-  const innerProps = useInnerProps(props, {
+  const innerProps = useInnerProps(props, extendObject({
     ref: nodeRef,
-    style: { ...normalStyle, ...layoutStyle },
-    ...layoutProps
-  }, [], {
+    style: extendObject(normalStyle, layoutStyle)
+  }, layoutProps), [], {
     layoutRef
   })
 
   const html: string = typeof nodes === 'string' ? nodes : jsonToHtmlStr(nodes)
 
-  return (
-    <View
-      {...innerProps}
-    >
-      <WebView
-        source={{ html: generateHTML(html) }}
-        onMessage={(event: WebViewMessageEvent) => {
-          setWebViewHeight(+event.nativeEvent.data)
-        }}
-      >
-      </WebView>
-    </View>
+  return createElement(View, innerProps,
+    createElement(WebView, {
+      source: { html: generateHTML(html) },
+      onMessage: (event: WebViewMessageEvent) => {
+        setWebViewHeight(+event.nativeEvent.data)
+      }
+    })
   )
 })