@kaushverse/pickify 1.0.10 → 1.0.12

package/dist/index.d.mts

@@ -3,9 +3,9 @@ import React$1 from 'react';
 import { TextStyle, ViewStyle } from 'react-native';
 
 type IconRenderer = (props: {
-    name: string;
-    size: number;
-    color: string;
+    name?: string;
+    size?: number;
+    color?: string;
 }) => React.ReactNode;
 
 type Option = {

package/dist/index.d.ts

@@ -3,9 +3,9 @@ import React$1 from 'react';
 import { TextStyle, ViewStyle } from 'react-native';
 
 type IconRenderer = (props: {
-    name: string;
-    size: number;
-    color: string;
+    name?: string;
+    size?: number;
+    color?: string;
 }) => React.ReactNode;
 
 type Option = {

package/dist/index.js

@@ -280,8 +280,19 @@ function MultiPickerGroup({
   renderGroupIcon
 }) {
   const [open, setOpen] = (0, import_react2.useState)(true);
+  const [contentHeight, setContentHeight] = (0, import_react2.useState)(0);
+  const animatedHeight = (0, import_react2.useRef)(new import_react_native2.Animated.Value(0)).current;
+  const toggle = () => {
+    const toValue = open ? 0 : contentHeight;
+    import_react_native2.Animated.timing(animatedHeight, {
+      toValue,
+      duration: 250,
+      useNativeDriver: false
+    }).start();
+    setOpen(!open);
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: styles.group, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.TouchableOpacity, { style: styles.header, onPress: () => setOpen(!open), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.TouchableOpacity, { style: styles.header, onPress: toggle, children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: styles.title, children: label }),
       renderGroupIcon?.({
         name: open ? "chevron-up" : "chevron-down",
@@ -289,7 +300,26 @@ function MultiPickerGroup({
         color: "#6B7280"
       })
     ] }),
-    open && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: { marginTop: 6 }, children })
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_react_native2.View,
+      {
+        style: styles.hidden,
+        onLayout: (e) => {
+          setContentHeight(e.nativeEvent.layout.height);
+        },
+        children
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_react_native2.Animated.View,
+      {
+        style: {
+          height: animatedHeight,
+          overflow: "hidden"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: styles.content, children })
+      }
+    )
   ] });
 }
 var styles = import_react_native2.StyleSheet.create({
@@ -305,9 +335,14 @@ var styles = import_react_native2.StyleSheet.create({
     fontWeight: "600",
     fontSize: 14
   },
-  fallback: {
-    fontSize: 16,
-    color: "#6B7280"
+  content: {
+    marginTop: 6
+  },
+  //  invisible layout measurement
+  hidden: {
+    position: "absolute",
+    opacity: 0,
+    zIndex: -1
   }
 });
 

package/dist/index.mjs

@@ -254,8 +254,14 @@ var toggleValue = (arr, value) => {
 };
 
 // src/components/MultiPickerGroup.tsx
-import { useState as useState2 } from "react";
-import { View as View2, Text as Text2, TouchableOpacity as TouchableOpacity2, StyleSheet as StyleSheet2 } from "react-native";
+import { useRef, useState as useState2 } from "react";
+import {
+  View as View2,
+  Text as Text2,
+  TouchableOpacity as TouchableOpacity2,
+  StyleSheet as StyleSheet2,
+  Animated
+} from "react-native";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function MultiPickerGroup({
   label,
@@ -263,8 +269,19 @@ function MultiPickerGroup({
   renderGroupIcon
 }) {
   const [open, setOpen] = useState2(true);
+  const [contentHeight, setContentHeight] = useState2(0);
+  const animatedHeight = useRef(new Animated.Value(0)).current;
+  const toggle = () => {
+    const toValue = open ? 0 : contentHeight;
+    Animated.timing(animatedHeight, {
+      toValue,
+      duration: 250,
+      useNativeDriver: false
+    }).start();
+    setOpen(!open);
+  };
   return /* @__PURE__ */ jsxs2(View2, { style: styles.group, children: [
-    /* @__PURE__ */ jsxs2(TouchableOpacity2, { style: styles.header, onPress: () => setOpen(!open), children: [
+    /* @__PURE__ */ jsxs2(TouchableOpacity2, { style: styles.header, onPress: toggle, children: [
       /* @__PURE__ */ jsx2(Text2, { style: styles.title, children: label }),
       renderGroupIcon?.({
         name: open ? "chevron-up" : "chevron-down",
@@ -272,7 +289,26 @@ function MultiPickerGroup({
         color: "#6B7280"
       })
     ] }),
-    open && /* @__PURE__ */ jsx2(View2, { style: { marginTop: 6 }, children })
+    /* @__PURE__ */ jsx2(
+      View2,
+      {
+        style: styles.hidden,
+        onLayout: (e) => {
+          setContentHeight(e.nativeEvent.layout.height);
+        },
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      Animated.View,
+      {
+        style: {
+          height: animatedHeight,
+          overflow: "hidden"
+        },
+        children: /* @__PURE__ */ jsx2(View2, { style: styles.content, children })
+      }
+    )
   ] });
 }
 var styles = StyleSheet2.create({
@@ -288,9 +324,14 @@ var styles = StyleSheet2.create({
     fontWeight: "600",
     fontSize: 14
   },
-  fallback: {
-    fontSize: 16,
-    color: "#6B7280"
+  content: {
+    marginTop: 6
+  },
+  //  invisible layout measurement
+  hidden: {
+    position: "absolute",
+    opacity: 0,
+    zIndex: -1
   }
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaushverse/pickify",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "description": "A fully customizable React Native picker with search, multi-select, grouping, and async support.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",