Add Modal example

Author: onmotion

example/App.tsx

@@ -19,6 +19,7 @@ import { RemoteDataSetExample } from './components/RemoteDataSetExample'
 import { RemoteDataSetExample2 } from './components/RemoteDataSetExample2'
 import { CustomRightIconExample } from './components/CustomRightIconExample'
 import { AutocompleteDropdownContextProvider } from 'react-native-autocomplete-dropdown'
+import { ModalExample } from './components/ModalExample'
 
 const App = () => {
   const isDarkMode = useColorScheme() === 'dark'
@@ -68,6 +69,10 @@ const App = () => {
                 <Text style={styles.sectionTitle}>Custom Right Icon Example</Text>
                 <CustomRightIconExample />
               </View>
+              <View style={styles.section}>
+                <Text style={styles.sectionTitle}>Modal Example</Text>
+                <ModalExample />
+              </View>
             </View>
           </ScrollView>
         </KeyboardAvoidingView>

example/components/ModalExample.tsx

@@ -0,0 +1,21 @@
+import React, { memo, useState } from 'react'
+import { Button, Modal, View } from 'react-native'
+import { RemoteDataSetExample } from './RemoteDataSetExample'
+import { AutocompleteDropdownContextProvider } from '../../src'
+
+export const ModalExample = memo(() => {
+  const [opened, setOpened] = useState(false)
+  return (
+    <>
+      <Button onPress={() => setOpened(prev => !prev)} title="Open modal" />
+      <Modal visible={opened}>
+        <AutocompleteDropdownContextProvider>
+          <View style={{ paddingHorizontal: 20, flex: 1 }}>
+            <RemoteDataSetExample />
+            <Button onPress={() => setOpened(false)} title="Close modal" />
+          </View>
+        </AutocompleteDropdownContextProvider>
+      </Modal>
+    </>
+  )
+})

example/package.json

@@ -35,7 +35,8 @@
     "metro-react-native-babel-preset": "0.76.8",
     "prettier": "^3.0.0",
     "react-test-renderer": "18.2.0",
-    "typescript": "4.8.4"
+    "typescript": "4.8.4",
+    "@react-native-community/cli-platform-android": "*"
   },
   "engines": {
     "node": ">=16"