Skip to content

Commit ec9904c

Browse files
dawidgierdaldawidgierdalmr
dawidgierdal
and
dawidgierdalmr
authored
feat: Added example using overridden flatListProps (#261)
* feat: Added example using overridden flatListProps * feat: Added example using overridden flatListProps * feat: Added example using overridden flatListProps --------- Co-authored-by: Dawid Gierdal <dawid.gierdal@mobilereality.pl>
1 parent 531d18f commit ec9904c

File tree

8 files changed

+396
-1
lines changed

8 files changed

+396
-1
lines changed

‎.changeset/few-guests-smell.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@mobile-reality/react-native-select-pro': patch
3+
---
4+
5+
Added example using overridden flatListProps

‎apps/expo/src/constants/routes.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { MultiSelectWithSeparatedOptions } from '../examples/multiselect-with-se
1414
import { MultiSelectWithSeparatedOptionsStyled } from '../examples/multiselect-with-separated-options-styled';
1515
import { NoBackdrop } from '../examples/no-backdrop';
1616
import { Overflow } from '../examples/overflow';
17+
import { OverriddenFlatListProps } from '../examples/overridden-flat-list-props';
1718
import { RealExample } from '../examples/real-example';
1819
import { Ref } from '../examples/ref';
1920
import { RHF } from '../examples/rhf';
@@ -33,6 +34,10 @@ export const ROUTES = [
3334
name: 'Basic',
3435
screen: Basic,
3536
},
37+
{
38+
name: 'Overridden FlatList Props',
39+
screen: OverriddenFlatListProps,
40+
},
3641
{
3742
name: 'Overflow',
3843
screen: Overflow,

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

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
import React, { useState } from 'react';
2+
import { StyleSheet, Text, View } from 'react-native';
3+
import { Select } from '@mobile-reality/react-native-select-pro';
4+
5+
import { SafeAreaViewWrapper } from '../components/safe-area-view-wrapper';
6+
import { DATA } from '../constants/data';
7+
8+
export const OverriddenFlatListProps = () => {
9+
const [isRefreshing, setIsRefreshing] = useState(false);
10+
const [isAtEnd, setIsAtEnd] = useState(false);
11+
const [isScrolling, setIsScrolling] = useState(false);
12+
13+
const handleRefresh = () => {
14+
setIsRefreshing(true);
15+
setTimeout(() => {
16+
setIsRefreshing(false);
17+
}, 2000);
18+
};
19+
20+
const handleEndReached = () => {
21+
setIsAtEnd(true);
22+
};
23+
24+
const handleScroll = () => {
25+
setIsScrolling(true);
26+
setTimeout(() => {
27+
setIsScrolling(false);
28+
}, 500);
29+
};
30+
31+
return (
32+
<SafeAreaViewWrapper style={styles.container}>
33+
<Select
34+
options={DATA}
35+
flatListProps={{
36+
horizontal: false,
37+
initialNumToRender: 10,
38+
maxToRenderPerBatch: 5,
39+
windowSize: 21,
40+
refreshing: isRefreshing,
41+
onRefresh: handleRefresh,
42+
ListEmptyComponent: () => <Text>No options available</Text>,
43+
ItemSeparatorComponent: () => <View style={styles.separator} />,
44+
ListFooterComponent: () => (
45+
<View style={styles.footer}>
46+
<Text>End of the list</Text>
47+
</View>
48+
),
49+
ListHeaderComponent: () => (
50+
<View style={styles.header}>
51+
<Text>Start of the list</Text>
52+
</View>
53+
),
54+
onEndReached: handleEndReached,
55+
onEndReachedThreshold: 0.5,
56+
onScroll: handleScroll,
57+
ListFooterComponentStyle: styles.footerBackground,
58+
scrollEnabled: true,
59+
bounces: true,
60+
persistentScrollbar: true,
61+
keyboardShouldPersistTaps: 'handled',
62+
}}
63+
/>
64+
<View>
65+
{isScrolling && (
66+
<View style={styles.scrollIndicator}>
67+
<Text>The list is being scrolled...</Text>
68+
</View>
69+
)}
70+
71+
{isAtEnd && (
72+
<View style={styles.endIndicator}>
73+
<Text>The end of the list has been reached</Text>
74+
</View>
75+
)}
76+
</View>
77+
</SafeAreaViewWrapper>
78+
);
79+
};
80+
81+
const styles = StyleSheet.create({
82+
container: {
83+
justifyContent: 'space-between',
84+
paddingTop: 100,
85+
},
86+
scrollIndicator: {
87+
padding: 10,
88+
backgroundColor: 'lightyellow',
89+
},
90+
endIndicator: {
91+
padding: 10,
92+
backgroundColor: 'lightgreen',
93+
},
94+
separator: {
95+
height: 1,
96+
backgroundColor: 'gray',
97+
},
98+
footer: {
99+
padding: 20,
100+
},
101+
header: {
102+
padding: 20,
103+
},
104+
footerBackground: {
105+
backgroundColor: 'lightgray',
106+
},
107+
});

‎website/docs/api/select.mdx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ hide_table_of_contents: true
77

88
import {
99
OptionsPropSnackLink,
10+
OverriddenFlatListPropsSnackLink,
1011
Animation,
1112
Clearable,
1213
CloseOptionsListOnSelect,
@@ -133,7 +134,7 @@ The `Select` component has only one required prop, which is the `options` prop.
133134
| `backdropProps` | `Omit<TouchableWithoutFeedbackProps, 'onPress'>` | Override the backdrop element props. | To Do |
134135
| `clearOptionButtonProps` | `Omit<ViewProps, 'style'` \| `'onPress'>` | Override the clear option button props. | To Do |
135136
| `clearOptionImageProps` | `Omit<ImageProps, 'style'>` | Override the clear option image props. | To Do |
136-
| `flatListProps` | `Omit<FlatListProps<OptionType>, 'ref'` \| `'data'` \| `'getItemLayout'` \| `'renderItem'` \| `'keyExtractor'>` | Override the options list props. | To Do |
137+
| `flatListProps` | `Omit<FlatListProps<OptionType>, 'ref'` \| `'data'` \| `'getItemLayout'` \| `'renderItem'` \| `'keyExtractor'>` | Override the options list props. | <TableExample expo={<OverriddenFlatListPropsSnackLink />} /> |
137138
| `noOptionsProps` | `Omit<ViewProps, 'style'>` | Override the no options element props. | To Do |
138139
| `noOptionsTextProps` | `Omit<TextProps, 'style'>` | Override the no options text props. | To Do |
139140
| `optionButtonProps` | `Omit<PressableProps, 'ref'` \| `'style'` \| `'onPress'` \| `'accessibilityRole'` \| `'accessibilityState'` \| `'disabled'>` | Override the option button props. | To Do |

‎website/docs/usage.md‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1134,6 +1134,142 @@ const styles = StyleSheet.create({
11341134
export default App;
11351135
```
11361136

1137+
### Overridden flatListProps
1138+
1139+
```SnackPlayer name=Overridden flatListProps&dependencies=@mobile-reality/react-native-select-pro@2.0.0
1140+
import React, { useState } from 'react';
1141+
import { StyleSheet, Text, View } from 'react-native';
1142+
import { Select, SelectProvider } from '@mobile-reality/react-native-select-pro';
1143+
1144+
const data = [
1145+
{
1146+
label: 'Option 1',
1147+
value: 'option1',
1148+
},
1149+
{
1150+
label: 'Option 2',
1151+
value: 'option2',
1152+
},
1153+
{
1154+
label: 'Option 3',
1155+
value: 'option3',
1156+
},
1157+
{
1158+
label: 'Option 4',
1159+
value: 'option4',
1160+
},
1161+
];
1162+
1163+
const App = () => {
1164+
const [isRefreshing, setIsRefreshing] = useState(false);
1165+
const [isAtEnd, setIsAtEnd] = useState(false);
1166+
const [isScrolling, setIsScrolling] = useState(false);
1167+
1168+
const handleRefresh = () => {
1169+
setIsRefreshing(true);
1170+
setTimeout(() => {
1171+
setIsRefreshing(false);
1172+
}, 2000);
1173+
};
1174+
1175+
const handleEndReached = () => {
1176+
setIsAtEnd(true);
1177+
};
1178+
1179+
const handleScroll = () => {
1180+
setIsScrolling(true);
1181+
setTimeout(() => {
1182+
setIsScrolling(false);
1183+
}, 500);
1184+
};
1185+
1186+
return (
1187+
<SelectProvider>
1188+
<View style={styles.container}>
1189+
<Select
1190+
options={data}
1191+
flatListProps={{
1192+
horizontal: false,
1193+
initialNumToRender: 10,
1194+
maxToRenderPerBatch: 5,
1195+
windowSize: 21,
1196+
refreshing: isRefreshing,
1197+
onRefresh: handleRefresh,
1198+
ListEmptyComponent: () => <Text>No options available</Text>,
1199+
ItemSeparatorComponent: () => <View style={styles.separator} />,
1200+
ListFooterComponent: () => (
1201+
<View style={styles.footer}>
1202+
<Text>End of the list</Text>
1203+
</View>
1204+
),
1205+
ListHeaderComponent: () => (
1206+
<View style={styles.header}>
1207+
<Text>Start of the list</Text>
1208+
</View>
1209+
),
1210+
onEndReached: handleEndReached,
1211+
onEndReachedThreshold: 0.5,
1212+
onScroll: handleScroll,
1213+
ListFooterComponentStyle: styles.footerBackground,
1214+
scrollEnabled: true,
1215+
bounces: true,
1216+
persistentScrollbar: true,
1217+
keyboardShouldPersistTaps: 'handled',
1218+
}}
1219+
/>
1220+
<View>
1221+
{isScrolling && (
1222+
<View style={styles.scrollIndicator}>
1223+
<Text>The list is being scrolled...</Text>
1224+
</View>
1225+
)}
1226+
1227+
{isAtEnd && (
1228+
<View style={styles.endIndicator}>
1229+
<Text>The end of the list has been reached</Text>
1230+
</View>
1231+
)}
1232+
</View>
1233+
</View>
1234+
</SelectProvider>
1235+
);
1236+
};
1237+
1238+
const styles = StyleSheet.create({
1239+
container: {
1240+
flex: 1,
1241+
alignItems: 'center',
1242+
justifyContent: 'space-between',
1243+
paddingHorizontal: 20,
1244+
paddingBottom: 20,
1245+
paddingTop: 100,
1246+
},
1247+
scrollIndicator: {
1248+
padding: 10,
1249+
backgroundColor: 'lightyellow',
1250+
},
1251+
endIndicator: {
1252+
padding: 10,
1253+
backgroundColor: 'lightgreen',
1254+
},
1255+
separator: {
1256+
height: 1,
1257+
backgroundColor: 'gray',
1258+
},
1259+
footer: {
1260+
padding: 20,
1261+
},
1262+
header: {
1263+
padding: 20,
1264+
},
1265+
footerBackground: {
1266+
backgroundColor: 'lightgray',
1267+
},
1268+
});
1269+
1270+
export default App;
1271+
```
1272+
11371273
### Real example
11381274

11391275
```SnackPlayer name=Real example&dependencies=@mobile-reality/react-native-select-pro@2.0.0,react-hook-form@7.43.0

‎website/docs/v2.mdx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ sidebar_label: React Native Select Pro v2
66

77
### Changes
88

9+
- Added example using overridden `flatListProps`
10+
911
- Added an option to hide already selected options from the list `hideSelectedOptions`
1012

1113
- Added option to show selected options below select input `separatedMultiple`

‎website/src/snack-examples/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export * from './options'
2+
export * from './overridden-flat-list-props'
23
export * from './animation'
34
export * from './clearable'
45
export * from './close-options-list-on-select'

0 commit comments

Comments
 (0)