feat: creating an example of using Select together with ScrollView (#250

)

Co-authored-by: Dawid Gierdal <dawid.gierdal@mobilereality.pl>

.changeset/thick-bags-brush.md

@@ -0,0 +1,5 @@
+---
+'@mobile-reality/react-native-select-pro': patch
+---
+
+creating an example of using Select together with ScrollView

apps/expo/src/constants/routes.ts

@@ -14,6 +14,7 @@ import { RealExample } from '../examples/real-example';
 import { Ref } from '../examples/ref';
 import { RHF } from '../examples/rhf';
 import { ScrollToSelectedOption } from '../examples/scroll-to-selected-option';
+import { ScrollViewExample } from '../examples/scroll-view';
 import { Searchable } from '../examples/searchable';
 import { SearchableInModal } from '../examples/searchable-in-modal';
 import { SearchableWithKeyboardAvoidView } from '../examples/searchable-with-keyboard-avoid-view';
@@ -121,4 +122,8 @@ export const ROUTES = [
         name: 'Searchable with keyboard avoid view',
         screen: SearchableWithKeyboardAvoidView,
     },
+    {
+        name: 'Scroll view',
+        screen: ScrollViewExample,
+    },
 ];

apps/expo/src/examples/scroll-view.tsx

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import { SafeAreaView, ScrollView, StyleSheet, Text } from 'react-native';
+import { Select } from '@mobile-reality/react-native-select-pro';
+
+const data = [
+    {
+        label: 'Option 1',
+        value: 'option1',
+    },
+    {
+        label: 'Option 2',
+        value: 'option2',
+    },
+    {
+        label: 'Option 3',
+        value: 'option3',
+    },
+    {
+        label: 'Option 4',
+        value: 'option4',
+    },
+];
+
+export const ScrollViewExample = () => {
+    return (
+        <SafeAreaView style={styles.safeArea}>
+            <ScrollView style={styles.scrollView}>
+                <Text style={styles.title}>
+                    When using ScrollView together with Select, there are two key things to keep in
+                    mind.
+                </Text>
+
+                <Text style={styles.paragraph}>
+                    First, the SelectProvider must be placed above the ScrollView in the component
+                    hierarchy.
+                </Text>
+
+                <Text style={styles.paragraph}>
+                    In our case, the SelectProvider is located in the parent component, App.
+                </Text>
+
+                <Text style={styles.paragraph}>
+                    Second, it is important to ensure that SelectProvider is not duplicated across
+                    different parts of the application.
+                </Text>
+
+                <Text style={styles.paragraph}>
+                    This can cause issues with calculating the position of the dropdown menu.
+                </Text>
+                <Select options={data} />
+                <Text style={styles.paragraph}>Scroll View Example</Text>
+                <Text style={styles.paragraph}>Scroll View Example</Text>
+                <Text style={styles.paragraph}>Scroll View Example</Text>
+                <Select options={data} />
+                <Text style={styles.paragraph}>Scroll View Example</Text>
+                <Text style={styles.paragraph}>Scroll View Example</Text>
+                <Text style={styles.paragraph}>Scroll View Example</Text>
+                <Select options={data} />
+                <Text style={styles.paragraph}>Scroll View Example</Text>
+                <Text style={styles.paragraph}>Scroll View Example</Text>
+                <Text style={styles.paragraph}>Scroll View Example</Text>
+            </ScrollView>
+        </SafeAreaView>
+    );
+};
+
+const styles = StyleSheet.create({
+    title: {
+        fontSize: 20,
+        fontWeight: 'bold',
+        textAlign: 'center',
+    },
+    paragraph: {
+        margin: 24,
+        textAlign: 'center',
+    },
+    safeArea: {
+        flex: 1,
+    },
+    scrollView: {
+        flex: 1,
+        padding: 25,
+    },
+});