⭐️ Example - Added: ContextMenuViewTest08

Author: dominicstop

example/src/App.js

@@ -28,6 +28,7 @@ import { ContextMenuViewTest04 } from './components/ContextMenuView/ContextMenuV
 import { ContextMenuViewTest05 } from './components/ContextMenuView/ContextMenuViewTest05';
 import { ContextMenuViewTest06 } from './components/ContextMenuView/ContextMenuViewTest06';
 import { ContextMenuViewTest07 } from './components/ContextMenuView/ContextMenuViewTest07';
+import { ContextMenuViewTest08 } from './components/ContextMenuView/ContextMenuViewTest08';
 
 import { ContextMenuButtonSimpleExample01 } from './components/ContextMenuButton/ContextMenuButtonSimpleExample01';
 import { ContextMenuButtonSimpleExample02 } from './components/ContextMenuButton/ContextMenuButtonSimpleExample02';
@@ -58,6 +59,7 @@ const contextMenuViewItems = [
   ContextMenuViewTest05,
   ContextMenuViewTest06,
   ContextMenuViewTest07,
+  ContextMenuViewTest08,
 ];
 
 const contextMenuButtonItems = [

example/src/components/ContextMenuView/ContextMenuViewTest08.js

@@ -0,0 +1,76 @@
+import React, { useState, useRef } from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+
+import { ExampleContextMenuItem } from '../ExampleContextMenuItem';
+
+
+export class ContextMenuViewTest08 extends React.PureComponent {
+  constructor(props){
+    super(props);
+
+    this.timer = null;
+
+    this.state = {
+      counter: 0,
+    };
+  };
+
+  componentWillUnmount() {
+    this.resetTimer();
+  };
+
+  startTimer = () => {
+    this.timer = setInterval(() => {
+      const { counter } = this.state;
+      if (counter < 3){
+        this.setState(prevState => ({
+          counter: (prevState.counter + 1)
+        }));
+
+      } else {
+        const ref = this.contexMenuItemRef.getContextMenuRef()
+        ref.dismissMenu();
+        this.resetTimer();
+      };
+    }, 500);
+  };
+
+  resetTimer = () => {
+    if(this.timer){
+      clearInterval(this.timer);
+      this.setState({ counter: 0 });
+    };
+  };
+
+  render(){
+    return (
+      <ExampleContextMenuItem
+        {...this.props}
+        ref={r => this.contexMenuItemRef = r}
+        title={'Test #8'}
+        subtitle={'dismiss menu'}
+        desc={`Test for programatically dismissing the menu.`}
+        // `ContextMenuView` Props
+        previewConfig={{
+          previewType: 'CUSTOM',
+          backgroundColor: 'white'
+        }}
+        renderPreview={() => (
+          <View style={{ padding: 20 }}>
+            <Text style={{fontSize: 32}}>
+              {`Will Dismiss in: ${3 - this.state.counter}`}
+            </Text>
+          </View>
+        )}
+        onMenuDidShow={() => this.startTimer()}
+        onMenuDidHide={() => this.resetTimer()}
+        menuConfig={{
+          menuTitle: 'ContextMenuViewTest08',
+        }}
+      />
+    );
+  };
+};
+
+const styles = StyleSheet.create({
+});

example/src/components/ExampleContextMenuItem.js

@@ -58,11 +58,16 @@ export class ExampleContextMenuItem extends React.Component {
     index   : Proptypes.number,
   };
 
+  getContextMenuRef = () => {
+    return this.contexMenuRef;
+  };
+
   render(){
     const { title, subtitle, desc, index, style, children, ...props } = this.props;
 
     return(
-      <ContextMenuView 
+      <ContextMenuView
+        ref={r => this.contexMenuRef = r}
         style={[styles.rootContainer, style]}
         {...props}
       >