refactor(ripple): perf demo & document

docs/hippy-react/components.md

@@ -431,19 +431,27 @@ import icon from './qb_icon_new.png';
 | 参数               | 描述                                                         | 类型                                 | 支持平台  |
 | ------------------ | ------------------------------------------------------------ | ------------------------------------ | --------- |
 | collapsable        | Android 里如果一个 `View` 只用于布局它的子组件，则它可能会为了优化而从原生布局树中移除，因此该节点 DOM 的引用会丢失。 把此属性设为 `false` 可以禁用这个优化，以确保对应视图在原生结构中存在。 | `boolean`                            | `Android` |
-| nativeBackgroundAndroid    | 配置安卓水波纹效果，`最低支持版本 2.13.1`；配置项为 `{ borderless: boolean, color: Color, rippleRadius: int }`； `borderless`表示波纹是否有边界，默认false；`color`波纹颜色；`rippleRadius`波纹半径，若不设置，默认容器边框为边界； `注意：设置水波纹后默认不显示，需要在对应触摸事件中调用setPressed以及setHotspot方法进行水波纹展示，详情参考相关demo。` | `Object`| `Android`    |
+| nativeBackgroundAndroid    | 配置安卓水波纹效果，`最低支持版本 2.13.1`；配置项为 `{ borderless: boolean, color: Color, rippleRadius: number }`； `borderless` 表示波纹是否有边界，默认 false；`color` 波纹颜色；`rippleRadius` 波纹半径，若不设置，默认容器边框为边界； `注意：设置水波纹后默认不显示，需要在对应触摸事件中调用setPressed以及setHotspot方法进行水波纹展示，详情参考相关`[demo](//github.com/Tencent/Hippy/tree/master/examples/hippy-react-demo/src/components/RippleViewAndroid/index.jsx)。 | `Object`| `Android`    |
 
 ## 方法
 
 ### setPressed
 
-`(pressed: boolean) => void` 通过传入一个pressed 值（bool），通知终端当前是否需要显示水波纹效果
+[[setPressed 范例]](//github.com/Tencent/Hippy/tree/master/examples/hippy-react-demo/src/components/RippleViewAndroid/RippleViewAndroid.jsx)
 
-> * pressed: boolean - true:显示水波纹，false收起水波纹
+`最低支持版本 2.13.1`
+
+`(pressed: boolean) => void` 通过传入一个布尔值，通知终端当前是否需要显示水波纹效果
+
+> * pressed: boolean - true 显示水波纹，false 收起水波纹
 
 ### setHotspot
 
-`(x: number, y: number) => void` 通过传入一个[x,y]坐标值，通知终端设置当前波纹中心位置
+[[setHotspot 范例]](//github.com/Tencent/Hippy/tree/master/examples/hippy-react-demo/src/components/RippleViewAndroid/RippleViewAndroid.jsx)
+
+`最低支持版本 2.13.1`
+
+`(x: number, y: number) => void` 通过传入一个 `x, y` 坐标值，通知终端设置当前波纹中心位置
 
 ---
 

docs/hippy-vue/components.md

@@ -63,7 +63,7 @@
 | showScrollIndicator            | 是否显示滚动条。 `default: false`（仅在 overflow-y/x: scroll 时适用） | `boolean`  | `Android`    |
 | showsHorizontalScrollIndicator | 当此值设为 `false` 的时候，`ScrollView` 会隐藏水平的滚动条。`default: true` （仅在 overflow-y/x: scroll 时适用）| `boolean`                                                    | `iOS`    |
 | showsVerticalScrollIndicator   | 当此值设为 `false` 的时候，`ScrollView` 会隐藏垂直的滚动条。 `default: true` （仅在 overflow-y/x: scroll 时适用）| `boolean`  | `iOS`   | 
-| nativeBackgroundAndroid        | 配置安卓水波纹效果，`最低支持版本 2.13.1`；配置项为 `{ borderless: boolean, color: Color, rippleRadius: int }`； `borderless`表示波纹是否有边界，默认false；`color`波纹颜色；`rippleRadius`波纹半径，若不设置，默认容器边框为边界； `注意：设置水波纹后默认不显示，需要在对应触摸事件中调用setPressed以及setHotspot方法进行水波纹展示，详情参考相关demo。` | `Object`| `Android`    |
+| nativeBackgroundAndroid        | 配置安卓水波纹效果，`最低支持版本 2.13.1`；配置项为 `{ borderless: boolean, color: Color, rippleRadius: number }`； `borderless` 表示波纹是否有边界，默认false；`color` 波纹颜色；`rippleRadius` 波纹半径，若不设置，默认容器边框为边界； `注意：设置水波纹后默认不显示，需要在对应触摸事件中调用setPressed以及setHotspot方法进行水波纹展示，详情参考相关`[demo](//github.com/Tencent/Hippy/tree/master/examples/hippy-vue-demo/src/components/demos/demo-div.vue) | `Object`| `Android`    |
 
 ## 样式内特殊属性
 
@@ -104,13 +104,21 @@
 
 ### setPressed
 
-`(pressed: boolean) => void` 通过传入一个pressed 值（bool），通知终端当前是否需要显示水波纹效果
+[[setPressed 范例]](//github.com/Tencent/Hippy/tree/master/examples/hippy-vue-demo/src/components/demos/demo-ripple-div.vue)
 
-> * pressed: boolean - true:显示水波纹，false收起水波纹
+`最低支持版本 2.13.1`
+
+`(pressed: boolean) => void` 通过传入一个布尔值，通知终端当前是否需要显示水波纹效果
+
+> * pressed: boolean - true 显示水波纹，false 收起水波纹
 
 ### setHotspot
 
-`(x: number, y: number) => void` 通过传入一个[x,y]坐标值，通知终端设置当前波纹中心位置
+[[setHotspot 范例]](//github.com/Tencent/Hippy/tree/master/examples/hippy-vue-demo/src/components/demos/demo-ripple-div.vue)
+
+`最低支持版本 2.13.1`
+
+`(x: number, y: number) => void` 通过传入一个 `x, y` 坐标值，通知终端设置当前波纹中心位置
 
 ---
 

examples/hippy-react-demo/src/components/RippleViewAndroid/RippleViewAndroid.jsx

@@ -1,5 +1,6 @@
-import React, { useCallback, useRef } from 'react';
+import React, { useRef, useState } from 'react';
 import {
+  UIManagerModule,
   View,
 } from '@hippy/react';
 
@@ -7,28 +8,29 @@ const defaultRippleConfig = {
   borderless: false,
 };
 export default function RippleViewAndroid(props) {
+  const [viewX, setViewX] = useState(0);
+  const [viewY, setViewY] = useState(0);
   const rViewRef = useRef(null);
-  const onTouchDown = useCallback((e) => {
+  const onTouchDown = (e) => {
+    rViewRef.current.setHotspot(e.page_x - viewX, e.page_y - viewY);
     rViewRef.current.setPressed(true);
-    props.onTouchDown && props.onTouchDown(e);
-    if (props.needHotspot) {
-      rViewRef.current.setHotspot(e.page_x, e.page_y);
-    }
-  });
-  const onTouchEnd = useCallback((e) => {
+  };
+  const onTouchEnd = () => {
     rViewRef.current.setPressed(false);
-    props.onTouchEnd && props.onTouchEnd(e);
-  });
+  };
   const { nativeBackgroundAndroid, style } = props;
   return (
     <View
+      onLayout={() => {
+        UIManagerModule.measureInAppWindow(rViewRef.current, (e) => {
+          setViewX(e.x);
+          setViewY(e.y);
+        });
+      }}
       style={style}
       onTouchDown={onTouchDown}
       onTouchEnd={onTouchEnd}
       ref={rViewRef}
-      onClick={() => {
-        console.log('onClick......');
-      }}
       nativeBackgroundAndroid={{ ...defaultRippleConfig, ...nativeBackgroundAndroid }}
     >
       {props.children}

examples/hippy-react-demo/src/components/RippleViewAndroid/index.jsx

@@ -7,44 +7,32 @@ import {
   Platform,
 } from '@hippy/react';
 
-import { useCallback, useRef } from 'react/cjs/react.development';
 import imageUrl from './defaultSource.jpg';
 import RippleViewAndroid from './RippleViewAndroid';
 const httpImageUrl = 'https://user-images.githubusercontent.com/12878546/148736102-7cd9525b-aceb-41c6-a905-d3156219ef16.png';
 
 const styles = StyleSheet.create({
-  itemTitle: {
-    alignItems: 'flex-start',
-    justifyContent: 'center',
-    height: 40,
-    borderWidth: 1,
-    borderColor: '#e0e0e0',
-    borderRadius: 2,
-    backgroundColor: '#fafafa',
-    padding: 10,
-    marginTop: 10,
-  },
-  rectangle: {
-    width: 360,
+  imgRectangle: {
+    width: 260,
     height: 56,
-    marginVertical: 10,
     alignItems: 'center',
     justifyContent: 'center',
   },
   circleRipple: {
-    width: 80,
+    marginTop: 30,
+    width: 150,
     height: 56,
     alignItems: 'center',
     justifyContent: 'center',
     borderWidth: 3,
-    borderColor: 'red',
+    borderColor: '#4c9afa',
   },
   squareRipple: {
     alignItems: 'center',
     justifyContent: 'center',
     width: 150,
     height: 150,
-    backgroundColor: 'blue',
+    backgroundColor: '#4c9afa',
     marginTop: 30,
     borderRadius: 12,
     overflow: 'hidden',
@@ -60,85 +48,73 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     width: 150,
     height: 150,
-    position: 'absolute',
     borderWidth: 5,
-    borderColor: 'black',
+    backgroundSize: 'cover',
+    borderColor: '#4c9afa',
     backgroundImage: imageUrl,
+    paddingHorizontal: 10,
   },
   squareRipple2: {
     alignItems: 'center',
     justifyContent: 'center',
     width: 150,
     height: 150,
-    position: 'absolute',
+    paddingHorizontal: 10,
+    backgroundSize: 'cover',
     backgroundImage: httpImageUrl,
   },
 });
 
 export default function RippleViewExpo() {
-  const rViewRef = useRef(null);
-  const onTouchDown = useCallback((e) => {
-    rViewRef.current.setPressed(true);
-    rViewRef.current.setHotspot(e.page_x, e.page_y);
-  });
-  const onTouchEnd = useCallback(() => {
-    rViewRef.current.setPressed(false);
-  });
   if (Platform.OS === 'ios') {
-    return <Text>ios暂未支持水波纹效果</Text>;
+    return <Text>iOS暂未支持水波纹效果</Text>;
   }
   return (
-    <ScrollView style={{ padding: 10, flex: 1 }}>
-      <View style={[styles.rectangle, {
+    <ScrollView style={{ margin: 10, flex: 1 }}>
+      <View style={[styles.imgRectangle, {
         marginTop: 20,
         backgroundImage: imageUrl,
         backgroundSize: 'cover',
       }]}
        >
-        <View
-          style={[styles.rectangle]}
-          overflow={'visible'}
-          nativeBackgroundAndroid={{ borderless: true, color: '#11000000' }}
-          onTouchDown={onTouchDown}
-          onTouchEnd={onTouchEnd}
-          ref={rViewRef}
+        <RippleViewAndroid
+          style={[styles.imgRectangle]}
+          nativeBackgroundAndroid={{ borderless: true, color: '#666666' }}
         >
           <Text style={{ color: 'white', maxWidth: 200 }}>外层背景图，内层无边框水波纹，受外层影响始终有边框</Text>
-        </View>
+        </RippleViewAndroid>
       </View>
       <RippleViewAndroid
         style={[styles.circleRipple]}
-        nativeBackgroundAndroid={{ borderless: true, color: '#11000000', rippleRadius: 100 }}
+        nativeBackgroundAndroid={{ borderless: true, color: '#666666', rippleRadius: 100 }}
       >
-        <Text style={{ color: 'black' }}>圆形水波纹</Text>
+        <Text style={{ color: 'black', textAlign: 'center' }}>无边框圆形水波纹</Text>
       </RippleViewAndroid>
       <RippleViewAndroid
         style={[styles.squareRipple]}
-        nativeBackgroundAndroid={{ borderless: false, color: '#11000000' }}
+        nativeBackgroundAndroid={{ borderless: false, color: '#666666' }}
       >
         <Text style={{ color: '#fff' }}>带背景色水波纹</Text>
       </RippleViewAndroid>
       <View
         style={[styles.squareRippleWrapper]}
       >
-        <View style={{ width: 150, height: 150, position: 'absolute', zIndex: 100, top: 30 }} >
-          <Text style={{ color: 'white' }}>有边框水波纹，带本地底图效果</Text>
-        </View>
         <RippleViewAndroid
           style={[styles.squareRipple1]}
-          nativeBackgroundAndroid={{ borderless: false, color: '#11000000' }}
-        ></RippleViewAndroid>
+          nativeBackgroundAndroid={{ borderless: false, color: '#666666' }}
+        >
+          <Text style={{ color: 'white' }}>有边框水波纹，带本地底图效果</Text>
+        </RippleViewAndroid>
       </View>
       <View
         style={[styles.squareRippleWrapper]}
       >
-        <View style={{ width: 150, height: 150, position: 'absolute', zIndex: 100, top: 30 }} >
-          <Text style={{ color: 'black' }}>有边框水波纹，带网络底图效果</Text>
-        </View>
         <RippleViewAndroid
           style={[styles.squareRipple2]}
-          nativeBackgroundAndroid={{ borderless: false, color: '#11000000' }}
-        ></RippleViewAndroid>
+          nativeBackgroundAndroid={{ borderless: false, color: '#666666' }}
+        >
+          <Text style={{ color: 'black' }}>有边框水波纹，带网络底图效果</Text>
+        </RippleViewAndroid>
       </View>
     </ScrollView>
   );

examples/hippy-vue-demo/src/components/demos/demo-div.vue

@@ -1,6 +1,41 @@
 <template>
-  <div id="div-demo">
+  <div
+    id="div-demo"
+    @scroll="onOuterScroll"
+  >
     <div>
+      <div v-if="Vue.Native.Platform !== 'ios'">
+        <label>水波纹效果: </label>
+        <div :style="{ ...imgRectangle, ...imgRectangleExtra}">
+          <demo-ripple-div
+            :position-y="offsetY"
+            :wrapper-style="imgRectangle"
+            :native-background-android="{ borderless: true, color: '#666666' }"
+          >
+            <p :style="{ color: 'white', maxWidth: 200 }">
+              外层背景图，内层无边框水波纹，受外层影响始终有边框
+            </p>
+          </demo-ripple-div>
+        </div>
+        <demo-ripple-div
+          :position-y="offsetY"
+          :wrapper-style="circleRipple"
+          :native-background-android="{ borderless: true, color: '#666666', rippleRadius: 100 }"
+        >
+          <p :style="{ color: 'black', textAlign: 'center' }">
+            无边框圆形水波纹
+          </p>
+        </demo-ripple-div>
+        <demo-ripple-div
+          :position-y="offsetY"
+          :wrapper-style="squareRipple"
+          :native-background-android="{ borderless: false, color: '#666666' }"
+        >
+          <p :style="{ color: '#fff' }">
+            带背景色水波纹
+          </p>
+        </demo-ripple-div>
+      </div>
       <label>背景图效果:</label>
       <div
         :style="demo1Style"
@@ -71,7 +106,6 @@
         class="div-demo-3"
         :showsVerticalScrollIndicator="false"
       >
-        <!-- div 带着 overflow 属性的，只能有一个子节点，否则终端会崩溃 -->
         <div class="display-flex flex-column">
           <p class="text-block">
             A
@@ -90,36 +124,12 @@
           </p>
         </div>
       </div>
-      <label>水波纹效果:(iOS暂不支持水波纹效果)</label>
-      <demo-ripple-div
-        :wrapper-style="nobRippleWithBg"
-        :native-background-android="{ borderless: true, color: 'rgba(0,0,0,0.07)', rippleRadius: 100 }"
-        title="外层背景图，内层无边框水波纹，受外层影响始终有边框"
-      />
-      <demo-ripple-div
-        :wrapper-style="nobCircieRipple"
-        text-class="circle-ripple-text"
-        :native-background-android="{ borderless: true, color: '#00000011', rippleRadius: 100 }"
-        title="无边框圆形水波纹"
-      />
-      <div :style="{width: 150, height: 150, marginLeft: 20}">
-        <img
-          src="https://user-images.githubusercontent.com/12878546/148736102-7cd9525b-aceb-41c6-a905-d3156219ef16.png"
-          :style="{width: 150, height: 150}"
-        >
-        <demo-ripple-div
-          :wrapper-style="bRippleWrapper"
-          :content-style="bRippleContentStyle"
-          ripple-class="square-rippe-block"
-          :native-background-android="{ borderless: false, color: '#00000011' }"
-          title="有边框，带底图效果水波纹"
-        />
-      </div>
     </div>
   </div>
 </template>
 
 <script>
+import Vue from 'vue';
 import defaultImage from '../../assets/defaultSource.jpg';
 import DemoRippleDiv from './demo-ripple-div.vue';
 
@@ -133,6 +143,8 @@ export default {
      * if image path is remote address, declaration style class .div-demo-1 can be used.
      */
     return {
+      Vue,
+      offsetY: 0,
       demo1Style: {
         display: 'flex',
         height: '40px',
@@ -148,32 +160,37 @@ export default {
         marginTop: '10px',
         marginBottom: '10px',
       },
-      nobRippleWithBg: {
-        display: 'flex',
-        height: '40px',
-        width: '200px',
-        justifyContent: 'center',
+      imgRectangle: {
+        width: '260px',
+        height: '56px',
         alignItems: 'center',
-        marginTop: '10px',
-        marginBottom: '10px',
-        backgroundImage: 'https://user-images.githubusercontent.com/12878546/148736102-7cd9525b-aceb-41c6-a905-d3156219ef16.png',
+        justifyContent: 'center',
+      },
+      imgRectangleExtra: {
+        marginTop: '20px',
+        backgroundImage: `${defaultImage}`,
+        backgroundSize: 'cover',
         backgroundRepeat: 'no-repeat',
       },
-      nobCircieRipple: {
-        height: '40px',
-        width: '200px',
-      },
-      bRippleWrapper: {
-        height: '150px',
+      circleRipple: {
+        marginTop: '30px',
         width: '150px',
-        position: 'absolute',
-      },
-      bRippleContentStyle: {
+        height: '56px',
         alignItems: 'center',
         justifyContent: 'center',
-        width: 150,
-        height: 150,
-        position: 'absolute',
+        borderWidth: '3px',
+        borderColor: '#40b883',
+      },
+      squareRipple: {
+        marginBottom: '20px',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '150px',
+        height: '150px',
+        backgroundColor: '#40b883',
+        marginTop: '30px',
+        borderRadius: '12px',
+        overflow: 'hidden',
       },
     };
   },
@@ -184,6 +201,9 @@ export default {
     }, 1000);
   },
   methods: {
+    onOuterScroll(e) {
+      this.offsetY = e.offsetY;
+    },
     onScroll(e) {
       console.log('onScroll', e);
     },
@@ -208,6 +228,7 @@ export default {
   #div-demo {
     flex: 1;
     overflow-y: scroll;
+    margin: 7px;
   }
 
   .display-flex {
@@ -257,20 +278,10 @@ export default {
     margin-bottom: 10px;
   }
 
-  .circle-ripple-text {
-    color: black;
-    margin-left: 10px;
+  .div-demo-1-text {
+    color: white;
   }
 
-  .square-rippe-block {
-    align-items: center;
-    justify-content: center;
-    width: 150;
-    height: 150;
-    position: absolute;
-  }
-
-  /* flex-direction is necessary for horizontal scrolling for Native */
   .div-demo-2 {
     overflow-x: scroll;
     margin: 10px;
@@ -278,6 +289,7 @@ export default {
   }
 
   .div-demo-3 {
+    width: 150px;
     overflow-y: scroll;
     margin: 10px;
     height: 320px;

examples/hippy-vue-demo/src/components/demos/demo-ripple-div.vue

@@ -1,18 +1,13 @@
 <template>
   <div
-    :style="[wrapperStyle]"
+    ref="ripple1"
+    :style="wrapperStyle"
+    :nativeBackgroundAndroid="{ ...nativeBackgroundAndroid }"
+    @layout="onLayout"
+    @touchstart="onTouchStart"
+    @touchend="onTouchEnd"
   >
-    <div
-      ref="ripple1"
-      :style="contentStyle"
-      :nativeBackgroundAndroid="{ ...nativeBackgroundAndroid }"
-      @touchstart="onTouchStart"
-      @touchend="onTouchEnd"
-    >
-      <p :class="['div-demo-1-text', textClass]">
-        {{ title }}
-      </p>
-    </div>
+    <slot />
   </div>
 </template>
 
@@ -23,14 +18,11 @@ import defaultImage from '../../assets/defaultSource.jpg';
 const defaultRippleConfig = {
   borderless: false,
 };
+
 const demo1Style = {
   display: 'flex',
   height: '40px',
   width: '200px',
-  /**
-    *  inline style 'backgroundImage': `url(${DefaultImage})` with 'url()' syntax only supported above 2.6.1.
-    *  declaration css style supports 'background-image': `url('https://xxxx')` format and remote address only.
-    */
   backgroundImage: `${defaultImage}`,
   backgroundRepeat: 'no-repeat',
   justifyContent: 'center',
@@ -38,6 +30,7 @@ const demo1Style = {
   marginTop: '10px',
   marginBottom: '10px',
 };
+
 export default {
   name: 'DemoRippleDiv',
   props: {
@@ -48,75 +41,40 @@ export default {
       type: Object,
       default: () => demo1Style,
     },
-    textClass: {
-      default: '',
-    },
-    contentStyle: {
-      default: () => ({}),
-    },
-    rippleClass: {
-      default: '',
-    },
-    title: {
-      default: '',
+    positionY: {
+      default: 0,
     },
   },
   data() {
-    /**
-     * demo1 needs to use variable base64 DefaultImage，so inline style mode is a must.
-     * if image path is remote address, declaration style class .div-demo-1 can be used.
-     */
     return {
+      scrollOffsetY: this.positionY,
+      viewX: 0,
+      viewY: 0,
       demo1Style,
-      Platform: Vue.Native.Platform,
     };
   },
+  watch: {
+    positionY(to) {
+      this.scrollOffsetY = to;
+    },
+  },
   mounted() {
-    this.demon2 = this.$refs.ripple1;
+    this.rippleRef = this.$refs.ripple1;
   },
   methods: {
+    async onLayout() {
+      const rect = await Vue.Native.measureInAppWindow(this.rippleRef);
+      this.viewX = rect.left;
+      this.viewY = rect.top;
+    },
     onTouchStart(e) {
-      if (this.Platform === 'ios') {
-        return;
-      }
-      this.demon2.setPressed(true);
       const t = e.touches[0];
-      this.demon2.setHotspot(t.clientX, t.clientY);
+      this.rippleRef.setHotspot(t.clientX - this.viewX, t.clientY + this.scrollOffsetY - this.viewY);
+      this.rippleRef.setPressed(true);
     },
     onTouchEnd() {
-      if (this.Platform === 'ios') {
-        return;
-      }
-      this.demon2.setPressed(false);
+      this.rippleRef.setPressed(false);
     },
   },
 };
 </script>
-
-<style scoped>
-
-  /* Common CSS Styles */
-
-  #div-demo {
-    flex: 1;
-    overflow-y: scroll;
-  }
-
-  .display-flex {
-    display: flex;
-  }
-
-  .flex-row {
-    flex-direction: row;
-  }
-
-  .flex-column {
-    flex-direction: column;
-  }
-
-  .div-demo-1-text {
-    color: black;
-    margin-left: 10px;
-  }
-
-</style>

package-lock.json

@@ -53,6 +53,7 @@
         "module-alias": "^2.2.2",
         "nyc": "^15.1.0",
         "path-to-regexp": "^1.7.0",
+        "prismjs": "^1.27.0",
         "react": "^17.0.2",
         "rimraf": "^2.6.3",
         "rollup": "^2.63.0",
@@ -15725,9 +15726,9 @@
       }
     },
     "node_modules/prismjs": {
-      "version": "1.26.0",
-      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.26.0.tgz",
-      "integrity": "sha512-HUoH9C5Z3jKkl3UunCyiD5jwk0+Hz0fIgQ2nbwU2Oo/ceuTAQAg+pPVnfdt2TJWRVLcxKh9iuoYDUSc8clb5UQ==",
+      "version": "1.27.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.27.0.tgz",
+      "integrity": "sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==",
       "dev": true,
       "engines": {
         "node": ">=6"
@@ -31117,9 +31118,9 @@
       }
     },
     "prismjs": {
-      "version": "1.26.0",
-      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.26.0.tgz",
-      "integrity": "sha512-HUoH9C5Z3jKkl3UunCyiD5jwk0+Hz0fIgQ2nbwU2Oo/ceuTAQAg+pPVnfdt2TJWRVLcxKh9iuoYDUSc8clb5UQ==",
+      "version": "1.27.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.27.0.tgz",
+      "integrity": "sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==",
       "dev": true
     },
     "process-nextick-args": {

package.json

@@ -68,6 +68,7 @@
     "module-alias": "^2.2.2",
     "nyc": "^15.1.0",
     "path-to-regexp": "^1.7.0",
+    "prismjs": "^1.27.0",
     "react": "^17.0.2",
     "rimraf": "^2.6.3",
     "rollup": "^2.63.0",

packages/hippy-react/src/components/view.tsx

@@ -59,7 +59,7 @@ interface ViewProps extends LayoutableProps, ClickableProps, TouchableProps {
   nextFocusLeftId?: string | Fiber;
   nextFocusRightId?: string | Fiber;
   style?: HippyTypes.Style;
-  nativeBackgroundAndroid?: { color: Color, borderless: boolean, rippleRadius: number}
+  nativeBackgroundAndroid?: { color: Color, borderless: boolean, rippleRadius: number }
 
   /**
    * The focus event occurs when the component is focused.
@@ -82,17 +82,16 @@ interface ViewProps extends LayoutableProps, ClickableProps, TouchableProps {
 class View extends React.Component<ViewProps, {}> {
   private instance: HTMLDivElement | Fiber | null = null;
 
+  // startRipple
   public setPressed(pressed: boolean) {
     callUIFunction(this.instance as Fiber, 'setPressed', [pressed]);
   }
 
+  // setRippleSpot
   public setHotspot(x: number, y: number) {
     callUIFunction(this.instance as Fiber, 'setHotspot', [x, y]);
   }
 
-  /**
-   * @ignore
-   */
   public render() {
     const { collapsable, style = {}, ...nativeProps } = this.props;
     const nativeStyle: HippyTypes.Style = style;
@@ -112,7 +111,6 @@ class View extends React.Component<ViewProps, {}> {
         // @ts-ignore
         style={nativeStyle}
         {...nativeProps}
-        nativeBackgroundAndroid={nativeBackgroundAndroid}
       />
     );
   }