@mpxjs/webpack-plugin 2.9.70-alpha.0 → 2.9.70

package/lib/runtime/components/react/getInnerListeners.ts

@@ -1,4 +1,4 @@
-import { useRef } from 'react'
+import { useRef, useMemo, RefObject } from 'react'
 import { hasOwn, collectDataset } from '@mpxjs/utils'
 import { omit, extendObject } from './utils'
 import eventConfigMap from './event.config'
@@ -20,24 +20,25 @@ const getTouchEvent = (
   config: UseInnerPropsConfig
 ) => {
   const nativeEvent = event.nativeEvent
-  const {
-    timestamp,
-    pageX,
-    pageY,
-    touches,
-    changedTouches
-  } = nativeEvent
+  const { timestamp, pageX, pageY, touches, changedTouches } = nativeEvent
   const { id } = props
   const { layoutRef } = config
 
-  const currentTarget = extendObject(
+  const currentTarget = extendObject({}, event.currentTarget, {
+    id: id || '',
+    dataset: collectDataset(props),
+    offsetLeft: layoutRef?.current?.offsetLeft || 0,
+    offsetTop: layoutRef?.current?.offsetTop || 0
+  })
+
+  const pendingProps = (event as any)._targetInst?.pendingProps || {}
+
+  const target = extendObject(
     {},
-    event.currentTarget,
+    event.target,
     {
-      id: id || '',
-      dataset: collectDataset(props),
-      offsetLeft: layoutRef?.current?.offsetLeft || 0,
-      offsetTop: layoutRef?.current?.offsetTop || 0
+      id: pendingProps.parentId || pendingProps.nativeID || '',
+      dataset: collectDataset(pendingProps)
     }
   )
 
@@ -45,11 +46,12 @@ const getTouchEvent = (
     type,
     timeStamp: timestamp,
     currentTarget,
+    target,
     detail: {
       x: pageX,
       y: pageY
     },
-    touches: touches.map(item => {
+    touches: touches.map((item) => {
       return {
         identifier: item.identifier,
         pageX: item.pageX,
@@ -58,7 +60,7 @@ const getTouchEvent = (
         clientY: item.locationY
       }
     }),
-    changedTouches: changedTouches.map(item => {
+    changedTouches: changedTouches.map((item) => {
       return {
         identifier: item.identifier,
         pageX: item.pageX,
@@ -76,7 +78,10 @@ const getTouchEvent = (
 export const getCustomEvent = (
   type = '',
   oe: any = {},
-  { detail = {}, layoutRef }: { detail?: Record<string, unknown>; layoutRef: LayoutRef },
+  {
+    detail = {},
+    layoutRef
+  }: { detail?: Record<string, unknown>; layoutRef?: LayoutRef },
   props: Props = {}
 ) => {
   const targetInfo = extendObject({}, oe.target, {
@@ -95,6 +100,168 @@ export const getCustomEvent = (
   })
 }
 
+function handleEmitEvent (
+  events: string[],
+  type: string,
+  oe: NativeTouchEvent,
+  propsRef: Record<string, any>,
+  config: UseInnerPropsConfig
+) {
+  events.forEach((event) => {
+    if (propsRef.current[event]) {
+      const match = /^(catch|capture-catch):?(.*?)(?:\.(.*))?$/.exec(event)
+      if (match) {
+        oe.stopPropagation()
+      }
+      propsRef.current[event](
+        getTouchEvent(type, oe, propsRef.current, config)
+      )
+    }
+  })
+}
+
+function checkIsNeedPress (e: NativeTouchEvent, type: 'bubble' | 'capture', ref: RefObject<InnerRef>) {
+  const tapDetailInfo = ref.current!.mpxPressInfo.detail || { x: 0, y: 0 }
+  const nativeEvent = e.nativeEvent
+  const currentPageX = nativeEvent.changedTouches[0].pageX
+  const currentPageY = nativeEvent.changedTouches[0].pageY
+  if (
+    Math.abs(currentPageX - tapDetailInfo.x) > 3 ||
+        Math.abs(currentPageY - tapDetailInfo.y) > 3
+  ) {
+    ref.current!.needPress[type] = false
+    ref.current!.startTimer[type] &&
+          clearTimeout(ref.current!.startTimer[type] as SetTimeoutReturnType)
+    ref.current!.startTimer[type] = null
+  }
+}
+
+function handleTouchstart (e: NativeTouchEvent, type: 'bubble' | 'capture', ref: RefObject<InnerRef>, propsRef: Record<string, any>, config: UseInnerPropsConfig) {
+  e.persist()
+  const bubbleTouchEvent = ['catchtouchstart', 'bindtouchstart']
+  const bubblePressEvent = ['catchlongpress', 'bindlongpress']
+  const captureTouchEvent = [
+    'capture-catchtouchstart',
+    'capture-bindtouchstart'
+  ]
+  const capturePressEvent = [
+    'capture-catchlongpress',
+    'capture-bindlongpress'
+  ]
+  ref.current!.startTimer[type] = null
+  ref.current!.needPress[type] = true
+  const nativeEvent = e.nativeEvent
+  ref.current!.mpxPressInfo.detail = {
+    x: nativeEvent.changedTouches[0].pageX,
+    y: nativeEvent.changedTouches[0].pageY
+  }
+  const currentTouchEvent =
+        type === 'bubble' ? bubbleTouchEvent : captureTouchEvent
+  const currentPressEvent =
+        type === 'bubble' ? bubblePressEvent : capturePressEvent
+  handleEmitEvent(currentTouchEvent, 'touchstart', e, propsRef, config)
+  const {
+    catchlongpress,
+    bindlongpress,
+    'capture-catchlongpress': captureCatchlongpress,
+    'capture-bindlongpress': captureBindlongpress
+  } = propsRef.current
+  if (
+    catchlongpress ||
+        bindlongpress ||
+        captureCatchlongpress ||
+        captureBindlongpress
+  ) {
+    ref.current!.startTimer[type] = setTimeout(() => {
+      ref.current!.needPress[type] = false
+      handleEmitEvent(currentPressEvent, 'longpress', e, propsRef, config)
+    }, 350)
+  }
+}
+
+function handleTouchmove (e: NativeTouchEvent, type: 'bubble' | 'capture', ref: RefObject<InnerRef>, propsRef: Record<string, any>, config: UseInnerPropsConfig) {
+  const bubbleTouchEvent = ['catchtouchmove', 'bindtouchmove']
+  const captureTouchEvent = [
+    'capture-catchtouchmove',
+    'capture-bindtouchmove'
+  ]
+  const currentTouchEvent =
+        type === 'bubble' ? bubbleTouchEvent : captureTouchEvent
+  handleEmitEvent(currentTouchEvent, 'touchmove', e, propsRef, config)
+  checkIsNeedPress(e, type, ref)
+}
+
+function handleTouchend (e: NativeTouchEvent, type: 'bubble' | 'capture', ref: RefObject<InnerRef>, propsRef: Record<string, any>, config: UseInnerPropsConfig) {
+  // move event may not be triggered
+  checkIsNeedPress(e, type, ref)
+  const bubbleTouchEvent = ['catchtouchend', 'bindtouchend']
+  const bubbleTapEvent = ['catchtap', 'bindtap']
+  const captureTouchEvent = [
+    'capture-catchtouchend',
+    'capture-bindtouchend'
+  ]
+  const captureTapEvent = ['capture-catchtap', 'capture-bindtap']
+  const currentTouchEvent =
+        type === 'bubble' ? bubbleTouchEvent : captureTouchEvent
+  const currentTapEvent =
+        type === 'bubble' ? bubbleTapEvent : captureTapEvent
+  ref.current!.startTimer[type] &&
+        clearTimeout(ref.current!.startTimer[type] as SetTimeoutReturnType)
+  ref.current!.startTimer[type] = null
+  handleEmitEvent(currentTouchEvent, 'touchend', e, propsRef, config)
+  if (ref.current!.needPress[type]) {
+    if (type === 'bubble' && config.disableTap) {
+      return
+    }
+    handleEmitEvent(currentTapEvent, 'tap', e, propsRef, config)
+  }
+}
+
+function handleTouchcancel (
+  e: NativeTouchEvent,
+  type: 'bubble' | 'capture',
+  ref: RefObject<InnerRef>, propsRef: Record<string, any>, config: UseInnerPropsConfig
+) {
+  const bubbleTouchEvent = ['catchtouchcancel', 'bindtouchcancel']
+  const captureTouchEvent = [
+    'capture-catchtouchcancel',
+    'capture-bindtouchcancel'
+  ]
+  const currentTouchEvent =
+        type === 'bubble' ? bubbleTouchEvent : captureTouchEvent
+  ref.current!.startTimer[type] &&
+        clearTimeout(ref.current!.startTimer[type] as SetTimeoutReturnType)
+  ref.current!.startTimer[type] = null
+  handleEmitEvent(currentTouchEvent, 'touchcancel', e, propsRef, config)
+}
+
+function createTouchEventHandler (eventName: 'onTouchStart'|'onTouchMove'|'onTouchEnd'|'onTouchCancel', type: 'bubble' | 'capture') {
+  return (e: NativeTouchEvent, ref: RefObject<InnerRef>, propsRef: Record<string, any>, config: UseInnerPropsConfig) => {
+    const handlerMap = {
+      onTouchStart: handleTouchstart,
+      onTouchMove: handleTouchmove,
+      onTouchEnd: handleTouchend,
+      onTouchCancel: handleTouchcancel
+    }
+
+    const handler = handlerMap[eventName]
+    if (handler) {
+      handler(e, type, ref, propsRef, config)
+    }
+  }
+}
+
+const touchEventList = [
+  { eventName: 'onTouchStart', handler: createTouchEventHandler('onTouchStart', 'bubble') },
+  { eventName: 'onTouchMove', handler: createTouchEventHandler('onTouchMove', 'bubble') },
+  { eventName: 'onTouchEnd', handler: createTouchEventHandler('onTouchEnd', 'bubble') },
+  { eventName: 'onTouchCancel', handler: createTouchEventHandler('onTouchCancel', 'bubble') },
+  { eventName: 'onTouchStartCapture', handler: createTouchEventHandler('onTouchStart', 'capture') },
+  { eventName: 'onTouchMoveCapture', handler: createTouchEventHandler('onTouchMove', 'capture') },
+  { eventName: 'onTouchEndCapture', handler: createTouchEventHandler('onTouchEnd', 'capture') },
+  { eventName: 'onTouchCancelCapture', handler: createTouchEventHandler('onTouchCancel', 'capture') }
+]
+
 const useInnerProps = (
   props: Props = {},
   additionalProps: AdditionalProps = {},
@@ -120,7 +287,10 @@ const useInnerProps = (
 
   const propsRef = useRef<Record<string, any>>({})
   const eventConfig: { [key: string]: string[] } = {}
-  const config = rawConfig || { layoutRef: { current: {} }, disableTouch: false, disableTap: false }
+  const config = rawConfig || {
+    layoutRef: { current: {} },
+    disableTap: false
+  }
   const removeProps = [
     'children',
     'enable-background',
@@ -135,166 +305,39 @@ const useInnerProps = (
 
   propsRef.current = extendObject({}, props, additionalProps)
 
+  let hashEventKey = ''
+  const rawEventKeys: Array<string> = []
+
   for (const key in eventConfigMap) {
     if (hasOwn(propsRef.current, key)) {
-      eventConfig[key] = eventConfigMap[key]
+      eventConfig[key] = eventConfigMap[key].events
+      hashEventKey = hashEventKey + eventConfigMap[key].bitFlag
+      rawEventKeys.push(key)
     }
   }
 
-  if (!(Object.keys(eventConfig).length) || config.disableTouch) {
-    return omit(propsRef.current, removeProps)
-  }
-
-  function handleEmitEvent (
-    events: string[],
-    type: string,
-    oe: NativeTouchEvent
-  ) {
-    events.forEach(event => {
-      if (propsRef.current[event]) {
-        const match = /^(catch|capture-catch):?(.*?)(?:\.(.*))?$/.exec(event)
-        if (match) {
-          oe.stopPropagation()
-        }
-        propsRef.current[event](getTouchEvent(type, oe, propsRef.current, config))
-      }
-    })
-  }
-
-  function checkIsNeedPress (e: NativeTouchEvent, type: 'bubble' | 'capture') {
-    const tapDetailInfo = ref.current.mpxPressInfo.detail || { x: 0, y: 0 }
-    const nativeEvent = e.nativeEvent
-    const currentPageX = nativeEvent.changedTouches[0].pageX
-    const currentPageY = nativeEvent.changedTouches[0].pageY
-    if (Math.abs(currentPageX - tapDetailInfo.x) > 1 || Math.abs(currentPageY - tapDetailInfo.y) > 1) {
-      ref.current.needPress[type] = false
-      ref.current.startTimer[type] && clearTimeout(ref.current.startTimer[type] as SetTimeoutReturnType)
-      ref.current.startTimer[type] = null
+  const events = useMemo(() => {
+    if (!rawEventKeys.length) {
+      return {}
     }
-  }
-
-  function handleTouchstart (e: NativeTouchEvent, type: 'bubble' | 'capture') {
-    e.persist()
-    const bubbleTouchEvent = ['catchtouchstart', 'bindtouchstart']
-    const bubblePressEvent = ['catchlongpress', 'bindlongpress']
-    const captureTouchEvent = ['capture-catchtouchstart', 'capture-bindtouchstart']
-    const capturePressEvent = ['capture-catchlongpress', 'capture-bindlongpress']
-    ref.current.startTimer[type] = null
-    ref.current.needPress[type] = true
-    const nativeEvent = e.nativeEvent
-    ref.current.mpxPressInfo.detail = {
-      x: nativeEvent.changedTouches[0].pageX,
-      y: nativeEvent.changedTouches[0].pageY
-    }
-    const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent
-    const currentPressEvent = type === 'bubble' ? bubblePressEvent : capturePressEvent
-    handleEmitEvent(currentTouchEvent, 'touchstart', e)
-    const { catchlongpress, bindlongpress, 'capture-catchlongpress': captureCatchlongpress, 'capture-bindlongpress': captureBindlongpress } = propsRef.current
-    if (catchlongpress || bindlongpress || captureCatchlongpress || captureBindlongpress) {
-      ref.current.startTimer[type] = setTimeout(() => {
-        ref.current.needPress[type] = false
-        handleEmitEvent(currentPressEvent, 'longpress', e)
-      }, 350)
-    }
-  }
-
-  function handleTouchmove (e: NativeTouchEvent, type: 'bubble' | 'capture') {
-    const bubbleTouchEvent = ['catchtouchmove', 'bindtouchmove']
-    const captureTouchEvent = ['capture-catchtouchmove', 'capture-bindtouchmove']
-    const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent
-    handleEmitEvent(currentTouchEvent, 'touchmove', e)
-    checkIsNeedPress(e, type)
-  }
-
-  function handleTouchend (e: NativeTouchEvent, type: 'bubble' | 'capture') {
-    // move event may not be triggered
-    checkIsNeedPress(e, type)
-    const bubbleTouchEvent = ['catchtouchend', 'bindtouchend']
-    const bubbleTapEvent = ['catchtap', 'bindtap']
-    const captureTouchEvent = ['capture-catchtouchend', 'capture-bindtouchend']
-    const captureTapEvent = ['capture-catchtap', 'capture-bindtap']
-    const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent
-    const currentTapEvent = type === 'bubble' ? bubbleTapEvent : captureTapEvent
-    ref.current.startTimer[type] && clearTimeout(ref.current.startTimer[type] as SetTimeoutReturnType)
-    ref.current.startTimer[type] = null
-    handleEmitEvent(currentTouchEvent, 'touchend', e)
-    if (ref.current.needPress[type]) {
-      if (type === 'bubble' && config.disableTap) {
-        return
+    const transformedEventKeys = rawEventKeys.reduce((acc: string[], key) => {
+      if (propsRef.current[key]) {
+        return acc.concat(eventConfig[key])
       }
-      handleEmitEvent(currentTapEvent, 'tap', e)
-    }
-  }
+      return acc
+    }, [])
+    const finalEventKeys = [...new Set(transformedEventKeys)]
+    const events: Record<string, (e: NativeTouchEvent) => void> = {}
 
-  function handleTouchcancel (e: NativeTouchEvent, type: 'bubble' | 'capture') {
-    const bubbleTouchEvent = ['catchtouchcancel', 'bindtouchcancel']
-    const captureTouchEvent = ['capture-catchtouchcancel', 'capture-bindtouchcancel']
-    const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent
-    ref.current.startTimer[type] && clearTimeout(ref.current.startTimer[type] as SetTimeoutReturnType)
-    ref.current.startTimer[type] = null
-    handleEmitEvent(currentTouchEvent, 'touchcancel', e)
-  }
-
-  const touchEventList = [{
-    eventName: 'onTouchStart',
-    handler: (e: NativeTouchEvent) => {
-      handleTouchstart(e, 'bubble')
-    }
-  }, {
-    eventName: 'onTouchMove',
-    handler: (e: NativeTouchEvent) => {
-      handleTouchmove(e, 'bubble')
-    }
-  }, {
-    eventName: 'onTouchEnd',
-    handler: (e: NativeTouchEvent) => {
-      handleTouchend(e, 'bubble')
-    }
-  }, {
-    eventName: 'onTouchCancel',
-    handler: (e: NativeTouchEvent) => {
-      handleTouchcancel(e, 'bubble')
-    }
-  }, {
-    eventName: 'onTouchStartCapture',
-    handler: (e: NativeTouchEvent) => {
-      handleTouchstart(e, 'capture')
-    }
-  }, {
-    eventName: 'onTouchMoveCapture',
-    handler: (e: NativeTouchEvent) => {
-      handleTouchmove(e, 'capture')
-    }
-  }, {
-    eventName: 'onTouchEndCapture',
-    handler: (e: NativeTouchEvent) => {
-      handleTouchend(e, 'capture')
-    }
-  }, {
-    eventName: 'onTouchCancelCapture',
-    handler: (e: NativeTouchEvent) => {
-      handleTouchcancel(e, 'capture')
-    }
-  }]
-
-  const events: Record<string, (e: NativeTouchEvent) => void> = {}
-
-  let transformedEventKeys: string[] = []
-  for (const key in eventConfig) {
-    if (propsRef.current[key]) {
-      transformedEventKeys = transformedEventKeys.concat(eventConfig[key])
-    }
-  }
-
-  const finalEventKeys = [...new Set(transformedEventKeys)]
-
-  touchEventList.forEach(item => {
-    if (finalEventKeys.includes(item.eventName)) {
-      events[item.eventName] = item.handler
-    }
-  })
+    touchEventList.forEach((item) => {
+      if (finalEventKeys.includes(item.eventName)) {
+        events[item.eventName] = (e: NativeTouchEvent) =>
+          item.handler(e, ref, propsRef, config)
+      }
+    })
 
-  const rawEventKeys = Object.keys(eventConfig)
+    return events
+  }, [hashEventKey])
 
   return extendObject(
     {},

package/lib/runtime/components/react/mpx-button.tsx

@@ -34,7 +34,7 @@
  * ✘ bindagreeprivacyauthorization
  * ✔ bindtap
  */
-import { useEffect, useRef, useState, ReactNode, forwardRef, useContext, JSX } from 'react'
+import { createElement, useEffect, useRef, useState, ReactNode, forwardRef, useContext, JSX } from 'react'
 import {
   View,
   StyleSheet,
@@ -442,21 +442,16 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     }
   )
 
-  return (
-    <View {...innerProps}>
-      {loading && <Loading alone={!children} />}
+  return createElement(View, innerProps, loading && createElement(Loading, { alone: !children }),
+    wrapChildren(
+      props,
       {
-        wrapChildren(
-          props,
-          {
-            hasVarDec,
-            varContext: varContextRef.current,
-            textStyle,
-            textProps
-          }
-        )
+        hasVarDec,
+        varContext: varContextRef.current,
+        textStyle,
+        textProps
       }
-    </View>
+    )
   )
 })
 

package/lib/runtime/components/react/mpx-canvas/html.ts

@@ -316,8 +316,7 @@ var handleError = function (err, message) {
   document.removeEventListener('message', handleIncomingMessage);
 };
 
-function handleIncomingMessage(e) {
-  var data = JSON.parse(e.data);
+function handleIncomingMessage(data) {
   if (Array.isArray(data)) {
     for (var i = 0; i < data.length; i++) {
       try {
@@ -335,8 +334,7 @@ function handleIncomingMessage(e) {
   }
 }
 
-window.addEventListener('message', handleIncomingMessage);
-document.addEventListener('message', handleIncomingMessage);
+window.mpxWebviewMessageCallback = handleIncomingMessage
 </script>
   
 

package/lib/runtime/components/react/mpx-canvas/index.tsx

@@ -9,7 +9,7 @@
  * ✔ bindlongtap
  * ✔ binderror
  */
-import React, { useRef, useState, useCallback, useEffect, forwardRef, JSX, TouchEvent, MutableRefObject } from 'react'
+import React, { createElement, useRef, useState, useCallback, useEffect, forwardRef, JSX, TouchEvent, MutableRefObject } from 'react'
 import { View, Platform, StyleSheet, NativeSyntheticEvent } from 'react-native'
 import { WebView } from 'react-native-webview'
 import useNodesRef, { HandlerRef } from '../useNodesRef'
@@ -106,7 +106,11 @@ const _Canvas = forwardRef<HandlerRef<CanvasProps & View, CanvasProps>, CanvasPr
   useEffect(() => {
     const webviewPostMessage = (message: WebviewMessage) => {
       if (canvasRef.current.webview) {
-        canvasRef.current.webview.postMessage(JSON.stringify(message))
+        const jsCode = `
+        window.mpxWebviewMessageCallback(${JSON.stringify(message)});
+        true;
+      `
+        canvasRef.current.webview.injectJavaScript(jsCode)
       }
     }
 
@@ -249,54 +253,48 @@ const _Canvas = forwardRef<HandlerRef<CanvasProps & View, CanvasProps>, CanvasPr
 
   if (Platform.OS === 'android') {
     const isAndroid9 = Platform.Version >= 28
-    return (
-      <View {...innerProps}>
-        <WebView
-         ref={(element) => {
-           if (canvasRef.current) {
-             canvasRef.current.webview = element
-           }
-         }}
-          style={[
-            isAndroid9 ? stylesheet.webviewAndroid9 : stylesheet.webview,
-            { height, width }
-          ]}
-          source={{ html }}
-          originWhitelist={originWhitelist}
-          onMessage={onMessage}
-          onLoad={onLoad}
-          overScrollMode="never"
-          mixedContentMode="always"
-          scalesPageToFit={false}
-          javaScriptEnabled
-          domStorageEnabled
-          thirdPartyCookiesEnabled
-          allowUniversalAccessFromFileURLs
-        />
-      </View>
-    )
-  }
-
-  return (
-    <View
-      {...innerProps}
-    >
-      <WebView
-        ref={(element) => {
+    return createElement(View, innerProps, createElement(
+      WebView,
+      {
+        ref: (element) => {
           if (canvasRef.current) {
             canvasRef.current.webview = element
           }
-        }}
-        style={[stylesheet.webview, { height, width }]}
-        source={{ html }}
-        originWhitelist={originWhitelist}
-        onMessage={onMessage}
-        onLoad={onLoad}
-        scrollEnabled={false}
-      />
-    </View>
-  )
+        },
+        style: [
+          isAndroid9 ? stylesheet.webviewAndroid9 : stylesheet.webview,
+          { height, width }
+        ],
+        source: { html },
+        originWhitelist: originWhitelist,
+        onMessage: onMessage,
+        onLoad: onLoad,
+        overScrollMode: 'never',
+        mixedContentMode: 'always',
+        scalesPageToFit: false,
+        javaScriptEnabled: true,
+        domStorageEnabled: true,
+        thirdPartyCookiesEnabled: true,
+        allowUniversalAccessFromFileURLs: true
+      })
+    )
+  }
+
+  return createElement(View, innerProps, createElement(WebView, {
+    ref: (element) => {
+      if (canvasRef.current) {
+        canvasRef.current.webview = element
+      }
+    },
+    style: [stylesheet.webview, { height, width }],
+    source: { html },
+    originWhitelist: originWhitelist,
+    onMessage: onMessage,
+    onLoad: onLoad,
+    scrollEnabled: false
+  }))
 })
+
 _Canvas.displayName = 'mpxCanvas'
 
 export default _Canvas

package/lib/runtime/components/react/mpx-checkbox-group.tsx

@@ -8,7 +8,8 @@ import {
   ReactNode,
   useContext,
   useMemo,
-  useEffect
+  useEffect,
+  createElement
 } from 'react'
 import {
   View,
@@ -156,20 +157,21 @@ const CheckboxGroup = forwardRef<
       notifyChange
     }
   }, [])
-  return (
-    <View {...innerProps}>
-      <CheckboxGroupContext.Provider value={contextValue}>
+
+  return createElement(
+    View,
+    innerProps,
+    createElement(
+      CheckboxGroupContext.Provider,
+      { value: contextValue },
+      wrapChildren(
+        props,
         {
-          wrapChildren(
-            props,
-            {
-              hasVarDec,
-              varContext: varContextRef.current
-            }
-          )
+          hasVarDec,
+          varContext: varContextRef.current
         }
-      </CheckboxGroupContext.Provider>
-    </View>
+      )
+    )
   )
 })