@kaushverse/pickify 1.0.11 → 1.0.12

package/dist/index.js

@@ -274,24 +274,22 @@ var toggleValue = (arr, value) => {
 var import_react2 = require("react");
 var import_react_native2 = require("react-native");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-if (import_react_native2.Platform.OS === "android") {
-  import_react_native2.UIManager.setLayoutAnimationEnabledExperimental?.(true);
-}
 function MultiPickerGroup({
   label,
   children,
   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 = () => {
-    import_react_native2.LayoutAnimation.configureNext(
-      import_react_native2.LayoutAnimation.create(
-        250,
-        import_react_native2.LayoutAnimation.Types.easeInEaseOut,
-        import_react_native2.LayoutAnimation.Properties.opacity
-      )
-    );
-    setOpen((prev) => !prev);
+    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: toggle, children: [
@@ -302,7 +300,26 @@ function MultiPickerGroup({
         color: "#6B7280"
       })
     ] }),
-    open && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: styles.content, 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({
@@ -320,6 +337,12 @@ var styles = import_react_native2.StyleSheet.create({
   },
   content: {
     marginTop: 6
+  },
+  //  invisible layout measurement
+  hidden: {
+    position: "absolute",
+    opacity: 0,
+    zIndex: -1
   }
 });
 

package/dist/index.mjs

@@ -254,35 +254,31 @@ var toggleValue = (arr, value) => {
 };
 
 // src/components/MultiPickerGroup.tsx
-import { useState as useState2 } from "react";
+import { useRef, useState as useState2 } from "react";
 import {
   View as View2,
   Text as Text2,
   TouchableOpacity as TouchableOpacity2,
   StyleSheet as StyleSheet2,
-  LayoutAnimation,
-  Platform,
-  UIManager
+  Animated
 } from "react-native";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-if (Platform.OS === "android") {
-  UIManager.setLayoutAnimationEnabledExperimental?.(true);
-}
 function MultiPickerGroup({
   label,
   children,
   renderGroupIcon
 }) {
   const [open, setOpen] = useState2(true);
+  const [contentHeight, setContentHeight] = useState2(0);
+  const animatedHeight = useRef(new Animated.Value(0)).current;
   const toggle = () => {
-    LayoutAnimation.configureNext(
-      LayoutAnimation.create(
-        250,
-        LayoutAnimation.Types.easeInEaseOut,
-        LayoutAnimation.Properties.opacity
-      )
-    );
-    setOpen((prev) => !prev);
+    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: toggle, children: [
@@ -293,7 +289,26 @@ function MultiPickerGroup({
         color: "#6B7280"
       })
     ] }),
-    open && /* @__PURE__ */ jsx2(View2, { style: styles.content, 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({
@@ -311,6 +326,12 @@ var styles = StyleSheet2.create({
   },
   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.11",
+  "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",