Skip to content

Commit 6ce9b4b

Browse files
itsandrehereitsandrehere
committed
feat: init select react native and expo
1 parent 6a4cf5c commit 6ce9b4b

6 files changed

Lines changed: 35716 additions & 19 deletions

File tree

‎README.md‎

Lines changed: 33 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,16 @@
1-
# rn-selector
1+
# React Native Selector
22

3-
selector from expo and react native
3+
A customizable and feature-rich selector component for React Native with Expo support.
4+
5+
## Features
6+
7+
- 🔍 **Searchable**: Optional search functionality to filter options
8+
- 🎨 **Highly Customizable**: Custom styles for all parts of the component
9+
- 📱 **Cross-platform**: Works on iOS, Android, and Web
10+
- ♿ **Accessible**: Built with accessibility in mind
11+
- 🚀 **TypeScript Support**: Full TypeScript support with type definitions
12+
- 🎯 **Expo Compatible**: Works seamlessly with Expo projects
13+
- 🔧 **Flexible**: Custom render functions for options and selected values
414

515
## Installation
616

@@ -10,16 +20,30 @@ npm install rn-selector
1020

1121
## Usage
1222

13-
1423
```js
15-
import { multiply } from 'rn-selector';
16-
17-
// ...
18-
19-
const result = await multiply(3, 7);
24+
import React, { useState } from 'react';
25+
import { Selector } from 'rn-selector';
26+
27+
const options = [
28+
{ label: 'Apple', value: 'apple' },
29+
{ label: 'Banana', value: 'banana' },
30+
{ label: 'Orange', value: 'orange' },
31+
];
32+
33+
export default function App() {
34+
const [selectedValue, setSelectedValue] = useState('');
35+
36+
return (
37+
<Selector
38+
options={options}
39+
selectedValue={selectedValue}
40+
onValueChange={(value) => setSelectedValue(value)}
41+
placeholder="Select a fruit"
42+
/>
43+
);
44+
}
2045
```
2146

22-
2347
## Contributing
2448

2549
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

‎example/src/App.tsx‎

Lines changed: 253 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,266 @@
1-
import { multiply } from 'rn-selector';
2-
import { Text, View, StyleSheet } from 'react-native';
1+
import { useState } from 'react';
2+
import { Selector } from 'rn-selector';
3+
import type { SelectorOption } from 'rn-selector';
4+
import { Text, View, StyleSheet, ScrollView, SafeAreaView } from 'react-native';
35

4-
const result = multiply(3, 7);
6+
const fruits: SelectorOption[] = [
7+
{ label: 'Apple', value: 'apple' },
8+
{ label: 'Banana', value: 'banana' },
9+
{ label: 'Orange', value: 'orange' },
10+
{ label: 'Mango', value: 'mango' },
11+
{ label: 'Grapes', value: 'grapes' },
12+
{ label: 'Strawberry', value: 'strawberry' },
13+
{ label: 'Pineapple', value: 'pineapple' },
14+
{ label: 'Watermelon', value: 'watermelon' },
15+
];
16+
17+
const countries: SelectorOption[] = [
18+
{ label: 'United States', value: 'us' },
19+
{ label: 'Canada', value: 'ca' },
20+
{ label: 'United Kingdom', value: 'uk' },
21+
{ label: 'Germany', value: 'de' },
22+
{ label: 'France', value: 'fr' },
23+
{ label: 'Japan', value: 'jp' },
24+
{ label: 'Australia', value: 'au' },
25+
{ label: 'Brazil', value: 'br' },
26+
{ label: 'India', value: 'in' },
27+
{ label: 'China', value: 'cn' },
28+
];
29+
30+
const colors: SelectorOption[] = [
31+
{ label: 'Red', value: 'red' },
32+
{ label: 'Blue', value: 'blue' },
33+
{ label: 'Green', value: 'green' },
34+
{ label: 'Yellow', value: 'yellow' },
35+
{ label: 'Purple', value: 'purple' },
36+
{ label: 'Orange', value: 'orange' },
37+
{ label: 'Pink', value: 'pink' },
38+
{ label: 'Black', value: 'black', disabled: true },
39+
];
540

641
export default function App() {
42+
const [selectedFruit, setSelectedFruit] = useState<string[]>([]);
43+
const [selectedCountry, setSelectedCountry] = useState<string>('');
44+
const [selectedColor, setSelectedColor] = useState<string>('');
45+
const [selectedMultipleCountries, setSelectedMultipleCountries] = useState<
46+
string[]
47+
>([]);
48+
49+
const handleFruitChange = (value: string[]) => {
50+
setSelectedFruit(value);
51+
};
52+
53+
const handleCountryChange = (value: string) => {
54+
setSelectedCountry(value);
55+
};
56+
57+
const handleColorChange = (value: string) => {
58+
setSelectedColor(value);
59+
};
60+
761
return (
8-
<View style={styles.container}>
9-
<Text>Result: {result}</Text>
10-
</View>
62+
<SafeAreaView style={styles.safeAreaViewContent}>
63+
<ScrollView style={styles.container}>
64+
<View style={styles.content}>
65+
<Text style={styles.title}>React Native Selector Demo</Text>
66+
67+
<View style={styles.section}>
68+
<Text style={styles.sectionTitle}>Single Selection Selector</Text>
69+
<Text style={styles.description}>
70+
Choose one country (single selection):
71+
</Text>
72+
<Selector
73+
options={countries}
74+
selectedValue={selectedMultipleCountries[0] || ''}
75+
onValueChange={(value) => setSelectedMultipleCountries([value])}
76+
placeholder="Select a single country"
77+
/>
78+
{selectedMultipleCountries.length > 0 ? (
79+
<Text style={styles.result}>
80+
Selected: {selectedMultipleCountries[0]}
81+
</Text>
82+
) : null}
83+
</View>
84+
85+
<View style={styles.section}>
86+
<Text style={styles.sectionTitle}>Multiple Selection Selector</Text>
87+
<Text style={styles.description}>
88+
Choose your favorite fruits (multiple):
89+
</Text>
90+
<Selector
91+
options={fruits}
92+
selectedValue={selectedFruit}
93+
multiple
94+
onValueChange={handleFruitChange}
95+
placeholder="Select fruits"
96+
/>
97+
{selectedFruit.length > 0 ? (
98+
<Text style={styles.result}>
99+
Selected: {selectedFruit.join(', ')}
100+
</Text>
101+
) : null}
102+
</View>
103+
104+
<View style={styles.section}>
105+
<Text style={styles.sectionTitle}>
106+
Multiple Bottom Selection Selector
107+
</Text>
108+
<Selector
109+
options={fruits}
110+
selectedValue={selectedFruit}
111+
multiple
112+
onValueChange={handleFruitChange}
113+
searchable
114+
modalPosition="bottom"
115+
placeholder="Select sfruits"
116+
/>
117+
{selectedFruit.length > 0 ? (
118+
<Text style={styles.result}>
119+
Selected: {selectedFruit.join(', ')}
120+
</Text>
121+
) : null}
122+
</View>
123+
124+
<View style={styles.section}>
125+
<Text style={styles.sectionTitle}>Searchable Selector</Text>
126+
<Text style={styles.description}>Search and select a country:</Text>
127+
<Selector
128+
options={countries}
129+
selectedValue={selectedCountry}
130+
onValueChange={handleCountryChange}
131+
placeholder="Select a country"
132+
searchable
133+
searchPlaceholder="Type to search countries..."
134+
/>
135+
{selectedCountry ? (
136+
<Text style={styles.result}>Selected: {selectedCountry}</Text>
137+
) : null}
138+
</View>
139+
140+
<View style={styles.section}>
141+
<Text style={styles.sectionTitle}>Custom Styled Selector</Text>
142+
<Text style={styles.description}>
143+
Choose a color (with disabled option):
144+
</Text>
145+
<Selector
146+
options={colors}
147+
selectedValue={selectedColor}
148+
onValueChange={handleColorChange}
149+
placeholder="Pick a color"
150+
style={styles.customSelector}
151+
dropdownStyle={styles.customDropdown}
152+
textStyle={styles.customText}
153+
placeholderTextStyle={styles.customPlaceholder}
154+
selectedOptionStyle={styles.customSelectedOption}
155+
/>
156+
{selectedColor ? (
157+
<View style={styles.colorPreview}>
158+
<View
159+
style={[styles.colorBox, { backgroundColor: selectedColor }]}
160+
/>
161+
<Text style={styles.result}>Selected: {selectedColor}</Text>
162+
</View>
163+
) : null}
164+
</View>
165+
166+
<View style={styles.section}>
167+
<Text style={styles.sectionTitle}>Disabled Selector</Text>
168+
<Text style={styles.description}>This selector is disabled:</Text>
169+
<Selector
170+
options={fruits}
171+
selectedValue=""
172+
onValueChange={() => {}}
173+
placeholder="This is disabled"
174+
disabled
175+
/>
176+
</View>
177+
</View>
178+
</ScrollView>
179+
</SafeAreaView>
11180
);
12181
}
13182

14183
const styles = StyleSheet.create({
184+
safeAreaViewContent: {
185+
flex: 1,
186+
},
15187
container: {
16188
flex: 1,
189+
backgroundColor: '#f5f5f5',
190+
paddingTop: 30,
191+
},
192+
content: {
193+
padding: 20,
194+
},
195+
title: {
196+
fontSize: 24,
197+
fontWeight: 'bold',
198+
textAlign: 'center',
199+
marginBottom: 30,
200+
color: '#333',
201+
},
202+
section: {
203+
marginBottom: 30,
204+
backgroundColor: '#fff',
205+
padding: 20,
206+
borderRadius: 12,
207+
shadowColor: '#000',
208+
shadowOffset: { width: 0, height: 2 },
209+
shadowOpacity: 0.1,
210+
shadowRadius: 4,
211+
elevation: 3,
212+
},
213+
sectionTitle: {
214+
fontSize: 18,
215+
fontWeight: '600',
216+
marginBottom: 8,
217+
color: '#333',
218+
},
219+
description: {
220+
fontSize: 14,
221+
color: '#666',
222+
marginBottom: 12,
223+
},
224+
result: {
225+
marginTop: 10,
226+
fontSize: 14,
227+
color: '#007AFF',
228+
fontWeight: '500',
229+
},
230+
customSelector: {
231+
borderColor: '#007AFF',
232+
borderWidth: 2,
233+
borderRadius: 12,
234+
backgroundColor: '#f8f9ff',
235+
},
236+
customDropdown: {
237+
borderRadius: 12,
238+
borderWidth: 2,
239+
borderColor: '#007AFF',
240+
},
241+
customText: {
242+
fontSize: 16,
243+
fontWeight: '500',
244+
color: '#007AFF',
245+
},
246+
customPlaceholder: {
247+
color: '#99c5ff',
248+
fontStyle: 'italic',
249+
},
250+
customSelectedOption: {
251+
backgroundColor: '#007AFF',
252+
},
253+
colorPreview: {
254+
flexDirection: 'row',
17255
alignItems: 'center',
18-
justifyContent: 'center',
256+
marginTop: 10,
257+
},
258+
colorBox: {
259+
width: 24,
260+
height: 24,
261+
borderRadius: 4,
262+
marginRight: 10,
263+
borderWidth: 1,
264+
borderColor: '#ddd',
19265
},
20266
});

0 commit comments

Comments
 (0)