@kaushverse/pickify 1.0.11 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.d.mts +15 -8
  2. package/dist/index.d.ts +15 -8
  3. package/dist/index.js +67 -37
  4. package/dist/index.mjs +69 -41
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -98,6 +98,18 @@ type MultiPickerGroupProps = {
98
98
  renderGroupIcon?: IconRenderer;
99
99
  styles?: MultiPickerGroupStyles;
100
100
  };
101
+ type MultiPickerStyles = {
102
+ overlay?: ViewStyle;
103
+ container?: ViewStyle;
104
+ doneBtn?: ViewStyle;
105
+ doneText?: TextStyle;
106
+ label?: TextStyle;
107
+ selectBox?: ViewStyle;
108
+ selectText?: TextStyle;
109
+ error?: TextStyle;
110
+ item?: MultiPickerItemStyles;
111
+ group?: MultiPickerGroupStyles;
112
+ };
101
113
  type MultiPickerProps = {
102
114
  visible?: boolean;
103
115
  setVisible?: (val: boolean) => void;
@@ -110,15 +122,10 @@ type MultiPickerProps = {
110
122
  error?: string;
111
123
  renderInputIcon?: IconRenderer;
112
124
  renderGroupIcon?: IconRenderer;
113
- styles?: {
114
- container?: ViewStyle;
115
- selectBox?: ViewStyle;
116
- selectText?: TextStyle;
117
- };
118
- errorStyle?: TextStyle;
125
+ styles?: MultiPickerStyles;
119
126
  };
120
127
 
121
- declare function MultiPickerModal({ visible, setVisible, selectedValues, options, groups, onChange, label, placeholder, error, renderInputIcon, renderGroupIcon, errorStyle, }: MultiPickerProps): react_jsx_runtime.JSX.Element;
128
+ declare function MultiPickerModal({ visible, setVisible, selectedValues, options, groups, onChange, label, placeholder, error, renderInputIcon, renderGroupIcon, styles, }: MultiPickerProps): react_jsx_runtime.JSX.Element;
122
129
 
123
130
  declare function MultiPickerItem({ label, selected, onPress, renderIcon, styles: customStyles, }: MultiPickerItemProps): react_jsx_runtime.JSX.Element;
124
131
 
@@ -128,4 +135,4 @@ declare const toggleValue: (arr: string[], value: string) => string[];
128
135
 
129
136
  declare const groupOptions: (options: Option[], config: Record<string, string[]>) => Group[];
130
137
 
131
- export { type Group, type MultiGroup, type MultiOption, MultiPickerGroup, type MultiPickerGroupProps, type MultiPickerGroupStyles, MultiPickerItem, type MultiPickerItemProps, type MultiPickerItemStyles, MultiPickerModal, type MultiPickerProps, type Option, PickerModal, type PickerStyles, type Props, type Theme, groupOptions, toggleValue };
138
+ export { type Group, type MultiGroup, type MultiOption, MultiPickerGroup, type MultiPickerGroupProps, type MultiPickerGroupStyles, MultiPickerItem, type MultiPickerItemProps, type MultiPickerItemStyles, MultiPickerModal, type MultiPickerProps, type MultiPickerStyles, type Option, PickerModal, type PickerStyles, type Props, type Theme, groupOptions, toggleValue };
package/dist/index.d.ts CHANGED
@@ -98,6 +98,18 @@ type MultiPickerGroupProps = {
98
98
  renderGroupIcon?: IconRenderer;
99
99
  styles?: MultiPickerGroupStyles;
100
100
  };
101
+ type MultiPickerStyles = {
102
+ overlay?: ViewStyle;
103
+ container?: ViewStyle;
104
+ doneBtn?: ViewStyle;
105
+ doneText?: TextStyle;
106
+ label?: TextStyle;
107
+ selectBox?: ViewStyle;
108
+ selectText?: TextStyle;
109
+ error?: TextStyle;
110
+ item?: MultiPickerItemStyles;
111
+ group?: MultiPickerGroupStyles;
112
+ };
101
113
  type MultiPickerProps = {
102
114
  visible?: boolean;
103
115
  setVisible?: (val: boolean) => void;
@@ -110,15 +122,10 @@ type MultiPickerProps = {
110
122
  error?: string;
111
123
  renderInputIcon?: IconRenderer;
112
124
  renderGroupIcon?: IconRenderer;
113
- styles?: {
114
- container?: ViewStyle;
115
- selectBox?: ViewStyle;
116
- selectText?: TextStyle;
117
- };
118
- errorStyle?: TextStyle;
125
+ styles?: MultiPickerStyles;
119
126
  };
120
127
 
121
- declare function MultiPickerModal({ visible, setVisible, selectedValues, options, groups, onChange, label, placeholder, error, renderInputIcon, renderGroupIcon, errorStyle, }: MultiPickerProps): react_jsx_runtime.JSX.Element;
128
+ declare function MultiPickerModal({ visible, setVisible, selectedValues, options, groups, onChange, label, placeholder, error, renderInputIcon, renderGroupIcon, styles, }: MultiPickerProps): react_jsx_runtime.JSX.Element;
122
129
 
123
130
  declare function MultiPickerItem({ label, selected, onPress, renderIcon, styles: customStyles, }: MultiPickerItemProps): react_jsx_runtime.JSX.Element;
124
131
 
@@ -128,4 +135,4 @@ declare const toggleValue: (arr: string[], value: string) => string[];
128
135
 
129
136
  declare const groupOptions: (options: Option[], config: Record<string, string[]>) => Group[];
130
137
 
131
- export { type Group, type MultiGroup, type MultiOption, MultiPickerGroup, type MultiPickerGroupProps, type MultiPickerGroupStyles, MultiPickerItem, type MultiPickerItemProps, type MultiPickerItemStyles, MultiPickerModal, type MultiPickerProps, type Option, PickerModal, type PickerStyles, type Props, type Theme, groupOptions, toggleValue };
138
+ export { type Group, type MultiGroup, type MultiOption, MultiPickerGroup, type MultiPickerGroupProps, type MultiPickerGroupStyles, MultiPickerItem, type MultiPickerItemProps, type MultiPickerItemStyles, MultiPickerModal, type MultiPickerProps, type MultiPickerStyles, type Option, PickerModal, type PickerStyles, type Props, type Theme, groupOptions, toggleValue };
package/dist/index.js CHANGED
@@ -39,7 +39,7 @@ function PickerModal({
39
39
  selectedValue,
40
40
  options,
41
41
  groups = [],
42
- styles: styles3,
42
+ styles: styles2,
43
43
  theme,
44
44
  renderTab,
45
45
  renderItem,
@@ -97,7 +97,7 @@ function PickerModal({
97
97
  style: [
98
98
  defaultStyles.container,
99
99
  { backgroundColor: bg },
100
- styles3?.container
100
+ styles2?.container
101
101
  ],
102
102
  children: [
103
103
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -106,10 +106,10 @@ function PickerModal({
106
106
  style: [
107
107
  defaultStyles.doneBtn,
108
108
  { backgroundColor: primary },
109
- styles3?.doneBtn
109
+ styles2?.doneBtn
110
110
  ],
111
111
  onPress: handleClose,
112
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: [defaultStyles.doneText, styles3?.doneText], children: "Done" })
112
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: [defaultStyles.doneText, styles2?.doneText], children: "Done" })
113
113
  }
114
114
  ),
115
115
  hasGroups && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, children: groups.map((tab, index) => {
@@ -122,7 +122,7 @@ function PickerModal({
122
122
  {
123
123
  style: [
124
124
  defaultStyles.tab,
125
- styles3?.tab,
125
+ styles2?.tab,
126
126
  isActive && { backgroundColor: primary }
127
127
  ],
128
128
  onPress: () => setActiveTab(index),
@@ -132,7 +132,7 @@ function PickerModal({
132
132
  style: [
133
133
  defaultStyles.tabText,
134
134
  { color: isActive ? "#fff" : text },
135
- styles3?.tabText
135
+ styles2?.tabText
136
136
  ],
137
137
  children: tab.label
138
138
  }
@@ -163,14 +163,14 @@ function PickerModal({
163
163
  }
164
164
  );
165
165
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
166
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { style: styles3?.inputContainer, children: [
167
- label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: [defaultStyles.label, styles3?.label, labelStyle], children: label }),
166
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { style: styles2?.inputContainer, children: [
167
+ label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: [defaultStyles.label, styles2?.label, labelStyle], children: label }),
168
168
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
169
169
  import_react_native.TouchableOpacity,
170
170
  {
171
171
  style: [
172
172
  defaultStyles.selectBox,
173
- styles3?.selectBox,
173
+ styles2?.selectBox,
174
174
  selectBoxStyle,
175
175
  error && { borderColor: "red" }
176
176
  ],
@@ -181,7 +181,7 @@ function PickerModal({
181
181
  {
182
182
  style: [
183
183
  defaultStyles.selectText,
184
- styles3?.selectText,
184
+ styles2?.selectText,
185
185
  selectTextStyle
186
186
  ],
187
187
  children: getLabel() || placeholder
@@ -195,7 +195,7 @@ function PickerModal({
195
195
  ]
196
196
  }
197
197
  ),
198
- error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: [defaultStyles.error, styles3?.error, errorStyle], children: error })
198
+ error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: [defaultStyles.error, styles2?.error, errorStyle], children: error })
199
199
  ] }),
200
200
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Modal, { visible: isVisible, transparent: true, animationType: "slide", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: defaultStyles.modalOverlay, children: renderContainer ? renderContainer(content) : content }) })
201
201
  ] });
@@ -274,24 +274,22 @@ var toggleValue = (arr, value) => {
274
274
  var import_react2 = require("react");
275
275
  var import_react_native2 = require("react-native");
276
276
  var import_jsx_runtime2 = require("react/jsx-runtime");
277
- if (import_react_native2.Platform.OS === "android") {
278
- import_react_native2.UIManager.setLayoutAnimationEnabledExperimental?.(true);
279
- }
280
277
  function MultiPickerGroup({
281
278
  label,
282
279
  children,
283
280
  renderGroupIcon
284
281
  }) {
285
282
  const [open, setOpen] = (0, import_react2.useState)(true);
283
+ const [contentHeight, setContentHeight] = (0, import_react2.useState)(0);
284
+ const animatedHeight = (0, import_react2.useRef)(new import_react_native2.Animated.Value(0)).current;
286
285
  const toggle = () => {
287
- import_react_native2.LayoutAnimation.configureNext(
288
- import_react_native2.LayoutAnimation.create(
289
- 250,
290
- import_react_native2.LayoutAnimation.Types.easeInEaseOut,
291
- import_react_native2.LayoutAnimation.Properties.opacity
292
- )
293
- );
294
- setOpen((prev) => !prev);
286
+ const toValue = open ? 0 : contentHeight;
287
+ import_react_native2.Animated.timing(animatedHeight, {
288
+ toValue,
289
+ duration: 250,
290
+ useNativeDriver: false
291
+ }).start();
292
+ setOpen(!open);
295
293
  };
296
294
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: styles.group, children: [
297
295
  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.TouchableOpacity, { style: styles.header, onPress: toggle, children: [
@@ -302,7 +300,26 @@ function MultiPickerGroup({
302
300
  color: "#6B7280"
303
301
  })
304
302
  ] }),
305
- open && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: styles.content, children })
303
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
304
+ import_react_native2.View,
305
+ {
306
+ style: styles.hidden,
307
+ onLayout: (e) => {
308
+ setContentHeight(e.nativeEvent.layout.height);
309
+ },
310
+ children
311
+ }
312
+ ),
313
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
314
+ import_react_native2.Animated.View,
315
+ {
316
+ style: {
317
+ height: animatedHeight,
318
+ overflow: "hidden"
319
+ },
320
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: styles.content, children })
321
+ }
322
+ )
306
323
  ] });
307
324
  }
308
325
  var styles = import_react_native2.StyleSheet.create({
@@ -320,6 +337,12 @@ var styles = import_react_native2.StyleSheet.create({
320
337
  },
321
338
  content: {
322
339
  marginTop: 6
340
+ },
341
+ // invisible layout measurement
342
+ hidden: {
343
+ position: "absolute",
344
+ opacity: 0,
345
+ zIndex: -1
323
346
  }
324
347
  });
325
348
 
@@ -405,7 +428,7 @@ function MultiPickerModal({
405
428
  error,
406
429
  renderInputIcon,
407
430
  renderGroupIcon,
408
- errorStyle
431
+ styles: styles2
409
432
  }) {
410
433
  const [internalVisible, setInternalVisible] = (0, import_react3.useState)(false);
411
434
  const isControlled = visible !== void 0 && setVisible !== void 0;
@@ -458,23 +481,30 @@ function MultiPickerModal({
458
481
  ));
459
482
  };
460
483
  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
461
- label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: styles2.label, children: label }),
462
- /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native4.TouchableOpacity, { style: styles2.box, onPress: open, children: [
463
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: styles2.text, children: getLabel() }),
464
- renderInputIcon?.({
465
- name: "chevron-down",
466
- size: 18,
467
- color: "#6B7280"
468
- })
469
- ] }),
470
- error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: [styles2.error, errorStyle], children: error }),
471
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Modal, { visible: isVisible, transparent: true, animationType: "slide", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style: styles2.overlay, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native4.View, { style: styles2.container, children: [
472
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.TouchableOpacity, { onPress: close, style: styles2.done, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: styles2.doneText, children: "Done" }) }),
484
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: [defaultStyles3.label, styles2?.label], children: label }),
485
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
486
+ import_react_native4.TouchableOpacity,
487
+ {
488
+ style: [defaultStyles3.box, styles2?.selectBox],
489
+ onPress: open,
490
+ children: [
491
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: [defaultStyles3.text, styles2?.selectText], children: getLabel() }),
492
+ renderInputIcon?.({
493
+ name: "chevron-down",
494
+ size: 18,
495
+ color: "#6B7280"
496
+ })
497
+ ]
498
+ }
499
+ ),
500
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: [defaultStyles3.error, styles2?.error], children: error }),
501
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Modal, { visible: isVisible, transparent: true, animationType: "slide", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style: [defaultStyles3.overlay, styles2?.overlay], children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native4.View, { style: [defaultStyles3.container, styles2?.container], children: [
502
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.TouchableOpacity, { style: [defaultStyles3.done, styles2?.doneBtn], children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: [defaultStyles3.doneText, styles2?.doneText], children: "Done" }) }),
473
503
  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.ScrollView, { children: renderList() })
474
504
  ] }) }) })
475
505
  ] });
476
506
  }
477
- var styles2 = import_react_native4.StyleSheet.create({
507
+ var defaultStyles3 = import_react_native4.StyleSheet.create({
478
508
  label: {
479
509
  marginBottom: 6,
480
510
  fontSize: 14
package/dist/index.mjs CHANGED
@@ -15,7 +15,7 @@ function PickerModal({
15
15
  selectedValue,
16
16
  options,
17
17
  groups = [],
18
- styles: styles3,
18
+ styles: styles2,
19
19
  theme,
20
20
  renderTab,
21
21
  renderItem,
@@ -73,7 +73,7 @@ function PickerModal({
73
73
  style: [
74
74
  defaultStyles.container,
75
75
  { backgroundColor: bg },
76
- styles3?.container
76
+ styles2?.container
77
77
  ],
78
78
  children: [
79
79
  /* @__PURE__ */ jsx(
@@ -82,10 +82,10 @@ function PickerModal({
82
82
  style: [
83
83
  defaultStyles.doneBtn,
84
84
  { backgroundColor: primary },
85
- styles3?.doneBtn
85
+ styles2?.doneBtn
86
86
  ],
87
87
  onPress: handleClose,
88
- children: /* @__PURE__ */ jsx(Text, { style: [defaultStyles.doneText, styles3?.doneText], children: "Done" })
88
+ children: /* @__PURE__ */ jsx(Text, { style: [defaultStyles.doneText, styles2?.doneText], children: "Done" })
89
89
  }
90
90
  ),
91
91
  hasGroups && /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, children: groups.map((tab, index) => {
@@ -98,7 +98,7 @@ function PickerModal({
98
98
  {
99
99
  style: [
100
100
  defaultStyles.tab,
101
- styles3?.tab,
101
+ styles2?.tab,
102
102
  isActive && { backgroundColor: primary }
103
103
  ],
104
104
  onPress: () => setActiveTab(index),
@@ -108,7 +108,7 @@ function PickerModal({
108
108
  style: [
109
109
  defaultStyles.tabText,
110
110
  { color: isActive ? "#fff" : text },
111
- styles3?.tabText
111
+ styles2?.tabText
112
112
  ],
113
113
  children: tab.label
114
114
  }
@@ -139,14 +139,14 @@ function PickerModal({
139
139
  }
140
140
  );
141
141
  return /* @__PURE__ */ jsxs(Fragment, { children: [
142
- /* @__PURE__ */ jsxs(View, { style: styles3?.inputContainer, children: [
143
- label && /* @__PURE__ */ jsx(Text, { style: [defaultStyles.label, styles3?.label, labelStyle], children: label }),
142
+ /* @__PURE__ */ jsxs(View, { style: styles2?.inputContainer, children: [
143
+ label && /* @__PURE__ */ jsx(Text, { style: [defaultStyles.label, styles2?.label, labelStyle], children: label }),
144
144
  /* @__PURE__ */ jsxs(
145
145
  TouchableOpacity,
146
146
  {
147
147
  style: [
148
148
  defaultStyles.selectBox,
149
- styles3?.selectBox,
149
+ styles2?.selectBox,
150
150
  selectBoxStyle,
151
151
  error && { borderColor: "red" }
152
152
  ],
@@ -157,7 +157,7 @@ function PickerModal({
157
157
  {
158
158
  style: [
159
159
  defaultStyles.selectText,
160
- styles3?.selectText,
160
+ styles2?.selectText,
161
161
  selectTextStyle
162
162
  ],
163
163
  children: getLabel() || placeholder
@@ -171,7 +171,7 @@ function PickerModal({
171
171
  ]
172
172
  }
173
173
  ),
174
- error && /* @__PURE__ */ jsx(Text, { style: [defaultStyles.error, styles3?.error, errorStyle], children: error })
174
+ error && /* @__PURE__ */ jsx(Text, { style: [defaultStyles.error, styles2?.error, errorStyle], children: error })
175
175
  ] }),
176
176
  /* @__PURE__ */ jsx(Modal, { visible: isVisible, transparent: true, animationType: "slide", children: /* @__PURE__ */ jsx(View, { style: defaultStyles.modalOverlay, children: renderContainer ? renderContainer(content) : content }) })
177
177
  ] });
@@ -254,35 +254,31 @@ var toggleValue = (arr, value) => {
254
254
  };
255
255
 
256
256
  // src/components/MultiPickerGroup.tsx
257
- import { useState as useState2 } from "react";
257
+ import { useRef, useState as useState2 } from "react";
258
258
  import {
259
259
  View as View2,
260
260
  Text as Text2,
261
261
  TouchableOpacity as TouchableOpacity2,
262
262
  StyleSheet as StyleSheet2,
263
- LayoutAnimation,
264
- Platform,
265
- UIManager
263
+ Animated
266
264
  } from "react-native";
267
265
  import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
268
- if (Platform.OS === "android") {
269
- UIManager.setLayoutAnimationEnabledExperimental?.(true);
270
- }
271
266
  function MultiPickerGroup({
272
267
  label,
273
268
  children,
274
269
  renderGroupIcon
275
270
  }) {
276
271
  const [open, setOpen] = useState2(true);
272
+ const [contentHeight, setContentHeight] = useState2(0);
273
+ const animatedHeight = useRef(new Animated.Value(0)).current;
277
274
  const toggle = () => {
278
- LayoutAnimation.configureNext(
279
- LayoutAnimation.create(
280
- 250,
281
- LayoutAnimation.Types.easeInEaseOut,
282
- LayoutAnimation.Properties.opacity
283
- )
284
- );
285
- setOpen((prev) => !prev);
275
+ const toValue = open ? 0 : contentHeight;
276
+ Animated.timing(animatedHeight, {
277
+ toValue,
278
+ duration: 250,
279
+ useNativeDriver: false
280
+ }).start();
281
+ setOpen(!open);
286
282
  };
287
283
  return /* @__PURE__ */ jsxs2(View2, { style: styles.group, children: [
288
284
  /* @__PURE__ */ jsxs2(TouchableOpacity2, { style: styles.header, onPress: toggle, children: [
@@ -293,7 +289,26 @@ function MultiPickerGroup({
293
289
  color: "#6B7280"
294
290
  })
295
291
  ] }),
296
- open && /* @__PURE__ */ jsx2(View2, { style: styles.content, children })
292
+ /* @__PURE__ */ jsx2(
293
+ View2,
294
+ {
295
+ style: styles.hidden,
296
+ onLayout: (e) => {
297
+ setContentHeight(e.nativeEvent.layout.height);
298
+ },
299
+ children
300
+ }
301
+ ),
302
+ /* @__PURE__ */ jsx2(
303
+ Animated.View,
304
+ {
305
+ style: {
306
+ height: animatedHeight,
307
+ overflow: "hidden"
308
+ },
309
+ children: /* @__PURE__ */ jsx2(View2, { style: styles.content, children })
310
+ }
311
+ )
297
312
  ] });
298
313
  }
299
314
  var styles = StyleSheet2.create({
@@ -311,6 +326,12 @@ var styles = StyleSheet2.create({
311
326
  },
312
327
  content: {
313
328
  marginTop: 6
329
+ },
330
+ // invisible layout measurement
331
+ hidden: {
332
+ position: "absolute",
333
+ opacity: 0,
334
+ zIndex: -1
314
335
  }
315
336
  });
316
337
 
@@ -396,7 +417,7 @@ function MultiPickerModal({
396
417
  error,
397
418
  renderInputIcon,
398
419
  renderGroupIcon,
399
- errorStyle
420
+ styles: styles2
400
421
  }) {
401
422
  const [internalVisible, setInternalVisible] = useState3(false);
402
423
  const isControlled = visible !== void 0 && setVisible !== void 0;
@@ -449,23 +470,30 @@ function MultiPickerModal({
449
470
  ));
450
471
  };
451
472
  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
452
- label && /* @__PURE__ */ jsx4(Text4, { style: styles2.label, children: label }),
453
- /* @__PURE__ */ jsxs4(TouchableOpacity4, { style: styles2.box, onPress: open, children: [
454
- /* @__PURE__ */ jsx4(Text4, { style: styles2.text, children: getLabel() }),
455
- renderInputIcon?.({
456
- name: "chevron-down",
457
- size: 18,
458
- color: "#6B7280"
459
- })
460
- ] }),
461
- error && /* @__PURE__ */ jsx4(Text4, { style: [styles2.error, errorStyle], children: error }),
462
- /* @__PURE__ */ jsx4(Modal2, { visible: isVisible, transparent: true, animationType: "slide", children: /* @__PURE__ */ jsx4(View4, { style: styles2.overlay, children: /* @__PURE__ */ jsxs4(View4, { style: styles2.container, children: [
463
- /* @__PURE__ */ jsx4(TouchableOpacity4, { onPress: close, style: styles2.done, children: /* @__PURE__ */ jsx4(Text4, { style: styles2.doneText, children: "Done" }) }),
473
+ /* @__PURE__ */ jsx4(Text4, { style: [defaultStyles3.label, styles2?.label], children: label }),
474
+ /* @__PURE__ */ jsxs4(
475
+ TouchableOpacity4,
476
+ {
477
+ style: [defaultStyles3.box, styles2?.selectBox],
478
+ onPress: open,
479
+ children: [
480
+ /* @__PURE__ */ jsx4(Text4, { style: [defaultStyles3.text, styles2?.selectText], children: getLabel() }),
481
+ renderInputIcon?.({
482
+ name: "chevron-down",
483
+ size: 18,
484
+ color: "#6B7280"
485
+ })
486
+ ]
487
+ }
488
+ ),
489
+ /* @__PURE__ */ jsx4(Text4, { style: [defaultStyles3.error, styles2?.error], children: error }),
490
+ /* @__PURE__ */ jsx4(Modal2, { visible: isVisible, transparent: true, animationType: "slide", children: /* @__PURE__ */ jsx4(View4, { style: [defaultStyles3.overlay, styles2?.overlay], children: /* @__PURE__ */ jsxs4(View4, { style: [defaultStyles3.container, styles2?.container], children: [
491
+ /* @__PURE__ */ jsx4(TouchableOpacity4, { style: [defaultStyles3.done, styles2?.doneBtn], children: /* @__PURE__ */ jsx4(Text4, { style: [defaultStyles3.doneText, styles2?.doneText], children: "Done" }) }),
464
492
  /* @__PURE__ */ jsx4(ScrollView2, { children: renderList() })
465
493
  ] }) }) })
466
494
  ] });
467
495
  }
468
- var styles2 = StyleSheet4.create({
496
+ var defaultStyles3 = StyleSheet4.create({
469
497
  label: {
470
498
  marginBottom: 6,
471
499
  fontSize: 14
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kaushverse/pickify",
3
- "version": "1.0.11",
3
+ "version": "1.1.0",
4
4
  "description": "A fully customizable React Native picker with search, multi-select, grouping, and async support.",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",