feat: Added example using overridden flatListProps

apps/expo/src/constants/routes.ts

@@ -14,6 +14,7 @@ import { MultiSelectWithSeparatedOptions } from '../examples/multiselect-with-se
 import { MultiSelectWithSeparatedOptionsStyled } from '../examples/multiselect-with-separated-options-styled';
 import { NoBackdrop } from '../examples/no-backdrop';
 import { Overflow } from '../examples/overflow';
+import { OverriddenFlatListProps } from '../examples/overridden-flat-list-props';
 import { RealExample } from '../examples/real-example';
 import { Ref } from '../examples/ref';
 import { RHF } from '../examples/rhf';
@@ -33,6 +34,10 @@ export const ROUTES = [
         name: 'Basic',
         screen: Basic,
     },
+    {
+        name: 'Overridden FlatList Props',
+        screen: OverriddenFlatListProps,
+    },
     {
         name: 'Overflow',
         screen: Overflow,

apps/expo/src/examples/overridden-flat-list-props.tsx

@@ -0,0 +1,107 @@
+import React, { useState } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { Select } from '@mobile-reality/react-native-select-pro';
+
+import { SafeAreaViewWrapper } from '../components/safe-area-view-wrapper';
+import { DATA } from '../constants/data';
+
+export const OverriddenFlatListProps = () => {
+    const [isRefreshing, setIsRefreshing] = useState(false);
+    const [isAtEnd, setIsAtEnd] = useState(false);
+    const [isScrolling, setIsScrolling] = useState(false);
+
+    const handleRefresh = () => {
+        setIsRefreshing(true);
+        setTimeout(() => {
+            setIsRefreshing(false);
+        }, 2000);
+    };
+
+    const handleEndReached = () => {
+        setIsAtEnd(true);
+    };
+
+    const handleScroll = () => {
+        setIsScrolling(true);
+        setTimeout(() => {
+            setIsScrolling(false);
+        }, 500);
+    };
+
+    return (
+        <SafeAreaViewWrapper style={styles.container}>
+            <Select
+                options={DATA}
+                flatListProps={{
+                    horizontal: false,
+                    initialNumToRender: 10,
+                    maxToRenderPerBatch: 5,
+                    windowSize: 21,
+                    refreshing: isRefreshing,
+                    onRefresh: handleRefresh,
+                    ListEmptyComponent: () => <Text>No options available</Text>,
+                    ItemSeparatorComponent: () => <View style={styles.separator} />,
+                    ListFooterComponent: () => (
+                        <View style={styles.footer}>
+                            <Text>End of the list</Text>
+                        </View>
+                    ),
+                    ListHeaderComponent: () => (
+                        <View style={styles.header}>
+                            <Text>Start of the list</Text>
+                        </View>
+                    ),
+                    onEndReached: handleEndReached,
+                    onEndReachedThreshold: 0.5,
+                    onScroll: handleScroll,
+                    ListFooterComponentStyle: styles.footerBackground,
+                    scrollEnabled: true,
+                    bounces: true,
+                    persistentScrollbar: true,
+                    keyboardShouldPersistTaps: 'handled',
+                }}
+            />
+            <View>
+                {isScrolling && (
+                    <View style={styles.scrollIndicator}>
+                        <Text>The list is being scrolled...</Text>
+                    </View>
+                )}
+
+                {isAtEnd && (
+                    <View style={styles.endIndicator}>
+                        <Text>The end of the list has been reached</Text>
+                    </View>
+                )}
+            </View>
+        </SafeAreaViewWrapper>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        justifyContent: 'space-between',
+        paddingTop: 100,
+    },
+    scrollIndicator: {
+        padding: 10,
+        backgroundColor: 'lightyellow',
+    },
+    endIndicator: {
+        padding: 10,
+        backgroundColor: 'lightgreen',
+    },
+    separator: {
+        height: 1,
+        backgroundColor: 'gray',
+    },
+    footer: {
+        padding: 20,
+    },
+    header: {
+        padding: 20,
+    },
+    footerBackground: {
+        backgroundColor: 'lightgray',
+    },
+});

website/docs/v2.mdx

@@ -6,6 +6,8 @@ sidebar_label: React Native Select Pro v2
 
 ### Changes
 
+-   Added example using overridden `flatListProps`
+
 -   Added an option to hide already selected options from the list `hideSelectedOptions`
 
 -   Added option to show selected options below select input `separatedMultiple`