@kaushverse/pickify 1.0.10 → 1.0.11

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

@@ -274,14 +274,27 @@ 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 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);
+  };
   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 +302,7 @@ function MultiPickerGroup({
         color: "#6B7280"
       })
     ] }),
-    open && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: { marginTop: 6 }, children })
+    open && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: styles.content, children })
   ] });
 }
 var styles = import_react_native2.StyleSheet.create({
@@ -305,9 +318,8 @@ var styles = import_react_native2.StyleSheet.create({
     fontWeight: "600",
     fontSize: 14
   },
-  fallback: {
-    fontSize: 16,
-    color: "#6B7280"
+  content: {
+    marginTop: 6
   }
 });
 

package/dist/index.mjs

@@ -255,16 +255,37 @@ 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 {
+  View as View2,
+  Text as Text2,
+  TouchableOpacity as TouchableOpacity2,
+  StyleSheet as StyleSheet2,
+  LayoutAnimation,
+  Platform,
+  UIManager
+} 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 toggle = () => {
+    LayoutAnimation.configureNext(
+      LayoutAnimation.create(
+        250,
+        LayoutAnimation.Types.easeInEaseOut,
+        LayoutAnimation.Properties.opacity
+      )
+    );
+    setOpen((prev) => !prev);
+  };
   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 +293,7 @@ function MultiPickerGroup({
         color: "#6B7280"
       })
     ] }),
-    open && /* @__PURE__ */ jsx2(View2, { style: { marginTop: 6 }, children })
+    open && /* @__PURE__ */ jsx2(View2, { style: styles.content, children })
   ] });
 }
 var styles = StyleSheet2.create({
@@ -288,9 +309,8 @@ var styles = StyleSheet2.create({
     fontWeight: "600",
     fontSize: 14
   },
-  fallback: {
-    fontSize: 16,
-    color: "#6B7280"
+  content: {
+    marginTop: 6
   }
 });
 

package/package.json

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