react-native-autocomplete-dropdown/example/App.tsx at main · onmotion/react-native-autocomplete-dropdown · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
import React, { useMemo } from 'react'
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
  Platform,
  KeyboardAvoidingView,
} from 'react-native'

import { Colors } from 'react-native/Libraries/NewAppScreen'
import { AutocompleteDropdownContextProvider } from 'react-native-autocomplete-dropdown'
import { LocalDataSetExample } from './components/LocalDataSetExample'
import { LocalDataSetExample2 } from './components/LocalDataSetExample2'
import { RemoteDataSetExample3 } from './components/RemoteDataSetExample3'
import { RemoteDataSetExample } from './components/RemoteDataSetExample'
import { RemoteDataSetExample2 } from './components/RemoteDataSetExample2'
import { CustomRightIconExample } from './components/CustomRightIconExample'
import { ModalExample } from './components/ModalExample'

const App = () => {
  const themeName = useColorScheme() || 'light'
  const styles = useMemo(() => getStyles(themeName), [themeName])
  const isDarkMode = themeName === 'dark'

  const backgroundStyle = {
    backgroundColor: isDarkMode ? '#121212' : Colors.lighter,
  }

  return (
    <AutocompleteDropdownContextProvider
    //  headerOffset={100}
    >
      <SafeAreaView style={[styles.safeArea, backgroundStyle]}>
        <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
        <KeyboardAvoidingView
          style={styles.scrollContainer}
          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
          enabled>
          <ScrollView
            nestedScrollEnabled
            keyboardDismissMode="on-drag"
            keyboardShouldPersistTaps="handled"
            contentInsetAdjustmentBehavior="automatic"
            style={styles.scrollContainer}>
            <View style={styles.container}>
              <Text style={styles.title}>Autocomplete dropdown</Text>
              <View style={styles.section}>
                <Text style={styles.sectionTitle}>Local list</Text>
                <LocalDataSetExample />
              </View>
              <View style={styles.section}>
                <Text style={styles.sectionTitle}>Local list customization</Text>
                <LocalDataSetExample2 />
              </View>
              <View style={styles.section}>
                <Text style={styles.sectionTitle}>Remote list</Text>
                <RemoteDataSetExample />
              </View>
              <View style={styles.section}>
                <Text style={styles.sectionTitle}>Remote list customization</Text>
                <RemoteDataSetExample2 />
              </View>
              <View style={styles.section}>
                <Text style={styles.sectionTitle}>Remote list customization 2</Text>
                <RemoteDataSetExample3 />
              </View>
              <View style={styles.section}>
                <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>
      </SafeAreaView>
    </AutocompleteDropdownContextProvider>
  )
}

const getStyles = (themeName: 'light' | 'dark' = 'light') =>
  StyleSheet.create({
    safeArea: {
      flex: 1,
    },
    scrollContainer: {
      flex: 1,
    },
    container: {
      padding: 20,
    },
    title: {
      textAlign: 'center',
      fontSize: 25,
      marginBottom: 50,
      color: themeName === 'dark' ? '#fff' : '#000',
    },
    section: {
      marginBottom: 40,
    },
    sectionTitle: {
      fontWeight: 'bold',
      marginBottom: 3,
      color: themeName === 'dark' ? '#ffffffb6' : '#000000b0',
    },
  })

export default App