From 5757cfdbc83c1213ce25a2151837db34ab8ac3a1 Mon Sep 17 00:00:00 2001
From: Stanislav Miklik <stanislav.miklik@contractors.twinformatics.at>
Date: Tue, 17 Jul 2018 16:55:38 +0200
Subject: [PATCH] add example with menu inside the flatlist

---
 examples/Demo.js              |  2 ++
 examples/InFlatListExample.js | 43 +++++++++++++++++++++++++++++++++++
 2 files changed, 45 insertions(+)
 create mode 100644 examples/InFlatListExample.js

diff --git a/examples/Demo.js b/examples/Demo.js
index ae317ea..fff4436 100644
--- a/examples/Demo.js
+++ b/examples/Demo.js
@@ -14,6 +14,7 @@ import TouchableExample from './TouchableExample';
 import MenuMethodsExample from './MenuMethodsExample';
 import CloseOnBackExample from './CloseOnBackExample';
 import FlatListExample from './FlatListExample';
+import InFlatListExample from './InFlatListExample';
 import PopoverExample from './PopoverExample';
 
 const demos = [
@@ -30,6 +31,7 @@ const demos = [
   // { Component: NavigatorExample, name: 'Example with react-native-router-flux' },
   { Component: CloseOnBackExample, name: 'Close on back button press example' },
   { Component: FlatListExample, name: 'Using FlatList' },
+  { Component: InFlatListExample, name: 'Menu in FlatList' },
   { Component: PopoverExample, name: 'Popover renderer' },
 ];
 
diff --git a/examples/InFlatListExample.js b/examples/InFlatListExample.js
new file mode 100644
index 0000000..2f7c168
--- /dev/null
+++ b/examples/InFlatListExample.js
@@ -0,0 +1,43 @@
+import React, { Component } from 'react';
+import { FlatList, Alert, StyleSheet } from 'react-native';
+import {
+  MenuProvider,
+  Menu,
+  MenuTrigger,
+  MenuOptions,
+  MenuOption,
+} from 'react-native-popup-menu';
+
+const data = new Array(100)
+  .fill(0)
+  .map((a, i) => ({ key: '' + i, value: 'item' + i }));
+
+export default class App extends Component {
+  render() {
+    return (
+      <MenuProvider style={styles.container}>
+        <FlatList
+          data={data}
+          renderItem={({ item }) => (
+            <Menu onSelect={value => Alert.alert(value)}>
+              <MenuTrigger text={'Select option ' + item.value} />
+              <MenuOptions>
+                <MenuOption value="A" text="A" />
+                <MenuOption value="B" text="B" />
+                <MenuOption value="C" text="C" />
+            </MenuOptions>
+          </Menu>
+          )}
+          style={{ height: 200 }}
+        />
+      </MenuProvider>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingTop: 20,
+  },
+});