refactor example to use flatlist

Author: imdevan

examples/App.tsx

@@ -1,18 +1,7 @@
 import React, { JSX } from 'react';
-import { StyleSheet, View, useColorScheme } from 'react-native';
+import { StyleSheet, View, Text, FlatList, useColorScheme } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
-import DropDownPickerExample from './example-src-files/example';
-
-enum ExampleComponent {
-  JavaScriptClassSingleValue,
-  JavaScriptClassMultiValue,
-  JavaScriptFunctionSingleValue,
-  JavaScriptFunctionMultiValue,
-  TypeScriptClassSingleValue,
-  TypeScriptClassMultiValue,
-  TypeScriptFunctionSingleValue,
-  TypeScriptFunctionMultiValue,
-}
+import DropDownPickerExample, { ExampleProps } from './example-src-files/example';
 
 const styles = StyleSheet.create({
   page: {
@@ -32,67 +21,77 @@ const styles = StyleSheet.create({
     flexDirection: 'column',
     justifyContent: 'flex-start',
     gap: 32
+  },
+  exampleCard: {
+    zIndex:0,
+    borderRadius: 8,
+    marginBottom: 48
   }
 });
 
+const EXAMPLES: ExampleProps[] = [{
+  title: "Default Example",
+  description: "This is the default dropdown picker"
+},{
+  title: "Multiple Select",
+  description: "Multiple select example",
+  multiple: true
+},{
+  title: "Multiple Select Badge Mode",
+  description: "Multiple select example - with badges",
+  multiple: true,
+  dropdownProps: {mode: "BADGE"},
+},{
+  title: "Autoscroll Example",
+  description: "This is the default dropdown picker - with autoscroll",
+  dropdownProps: {autoScroll: true},
+},{
+  title: "Searchable Example",
+  description: "This is the default dropdown picker - with search",
+  dropdownProps: {searchable: true},
+},{
+  title: "Multiple Search Example",
+  description: "This is the default dropdown picker - with search",
+  multiple: true,
+  dropdownProps: {searchable: true},
+},{
+  title: "Multiple Search Clear on Select Example",
+  description: "This is the default dropdown picker - with search",
+  multiple: true,
+  dropdownProps: {searchable: true, clearSearchFieldOnSelect: true, mode: "BADGE"},
+},{
+  title: "Modal Example",
+  description: "This is the default dropdown picker - with search",
+  multiple: true,
+  dropdownProps: {listMode: "MODAL"}
+}]
+
 export default function App(): JSX.Element {
   const colorScheme = useColorScheme();
   const backgroundColor = colorScheme === 'dark' ? '#222' : '#fff';
 
+  const renderItem = ({ item }: { item: ExampleProps }) => (
+    <View style={styles.exampleCard} key={item.title}>
+      <DropDownPickerExample 
+        {...item}
+      />
+    </View>
+  );
+
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
       <View style={{
         ...styles.page,
         backgroundColor,
       }}>
-        <View style={styles.container}>
-          <View style={styles.examplesContainer}>
-            <DropDownPickerExample 
-              title="Default Example"
-              description="This is the default dropdown picker"
-              />
-            
-            <DropDownPickerExample
-              title="Multiple Select"
-              description="Multiple select example"
-              multiple
-              />
-          
-            <DropDownPickerExample
-              title="Multiple Select Badge Mode"
-              description="Multiple select example - with badges"
-              multiple
-              dropdownProps={{mode: "BADGE"}}
-              />
-
-            <DropDownPickerExample 
-              title="Autoscroll Example"
-              description="This is the default dropdown picker - with autoscroll"
-              dropdownProps={{autoScroll: true}}
-              />
-
-
-            <DropDownPickerExample 
-              title="Searchable Example"
-              description="This is the default dropdown picker - with search"
-              dropdownProps={{searchable: true}}
-              />
-            
-            <DropDownPickerExample 
-              title="Multiple Search Example"
-              description="This is the default dropdown picker - with search"
-              multiple
-              dropdownProps={{searchable: true}}
-              />
-
-            <DropDownPickerExample 
-              title="Multiple Search Clear on Select Example"
-              description="This is the default dropdown picker - with search"
-              multiple
-              dropdownProps={{searchable: true, clearSearchFieldOnSelect: true, mode: "BADGE"}}
-              />
-          </View>
-        </View>
+        <FlatList
+          data={EXAMPLES}
+          style={{zIndex: 0}}
+          keyExtractor={(example: ExampleProps) => example.title}
+          renderItem={renderItem}
+          contentContainerStyle={styles.container}
+          showsVerticalScrollIndicator={false}
+        />
       </View>
     </GestureHandlerRootView>
   );

examples/example-src-files/example.tsx

@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
+import React, { useState, JSX } from 'react';
 import { StyleSheet, Button, Text, View, useColorScheme } from 'react-native';
 import DropDownPicker, { ItemType,DropDownPickerProps } from 'react-native-dropdown-picker';
 
-type ExampleProps = {
+export type ExampleProps = {
   multiple?: boolean;
   title: string;
   description?: string;
@@ -36,6 +36,11 @@ const styles = StyleSheet.create({
   },
   description: {
     fontSize: 12,
+    marginBottom: 16
+  },
+  body: {
+    fontSize: 12,
+    marginBottom: 72,
   },
   exampleContainer: {
     display: 'flex',
@@ -111,16 +116,14 @@ export default function DropDownPickerExample({
           {...dropdownProps}
         />
       )}
-    <View>
+    <View style={{...styles.body}}>
         <Text style={{...styles.description, color}}>
         {multiple ? 'Fruits currently are: ' : 'Fruit currently is: '}
         {multiple
             ? JSON.stringify(multiValue)
             : JSON.stringify(singleValue)}
         </Text>
-    </View>
 
-    <View>
         <Button
         title={multiple ? 'Clear fruits' : 'Clear fruit'}
         onPress={(): void => {