@xaui/native 0.0.4 → 0.0.6

package/dist/accordion/index.d.ts

@@ -0,0 +1,141 @@
+import React, { ReactNode } from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
+
+type AccordionVariant = 'light' | 'bordered' | 'splitted';
+type AccordionSelectionMode = 'toggle' | 'multiple';
+type AccordionEvents = {
+    onSelectionChange?: (selectedKeys: string[]) => void;
+};
+type AccordionProps = {
+    /**
+     * List of AccordionItem components
+     */
+    children: ReactNode;
+    /**
+     * Visual variant of the accordion
+     * @default 'light'
+     */
+    variant?: AccordionVariant;
+    /**
+     * Selection behavior mode
+     * - toggle: Only one accordion item can be expanded at a time
+     * - multiple: Multiple accordion items can be expanded simultaneously
+     * @default 'toggle'
+     */
+    selectionMode?: AccordionSelectionMode;
+    /**
+     * Show dividers between accordion items
+     * @default false
+     */
+    showDivider?: boolean;
+    /**
+     * Hide the collapse/expand indicator
+     * @default false
+     */
+    hideIndicator?: boolean;
+    /**
+     * Whether the accordion should take full width
+     * @default true
+     */
+    fullWidth?: boolean;
+    /**
+     * Controlled expanded keys
+     */
+    expandedKeys?: string[];
+    /**
+     * Default expanded keys for uncontrolled mode
+     * Items with these keys will be expanded by default
+     */
+    defaultExpandedKeys?: string[];
+    /**
+     * Keys of disabled accordion items
+     */
+    disabledKeys?: string[];
+    /**
+     * Disable animations
+     * @default false
+     */
+    disableAnimation?: boolean;
+    /**
+     * Make the accordion items more compact
+     * @default false
+     */
+    isCompact?: boolean;
+    /**
+     * Custom styles for the container
+     */
+    containerStyle?: ViewStyle;
+    /**
+     * Custom styles for individual items
+     */
+    itemStyle?: ViewStyle;
+} & AccordionEvents;
+
+declare const Accordion: React.FC<AccordionProps>;
+
+type AccordionItemEvents = {
+    onSelected?: (isSelected: boolean) => void;
+};
+type AccordionItemProps = {
+    /**
+     * Unique key for the accordion item
+     */
+    itemKey?: string;
+    /**
+     * Content to display when accordion item is expanded
+     */
+    children: ReactNode;
+    /**
+     * Title displayed in the accordion header
+     */
+    title: ReactNode;
+    /**
+     * Optional subtitle displayed below the title
+     */
+    subtitle?: ReactNode;
+    /**
+     * Content displayed at the start of the header (left side)
+     */
+    startContent?: ReactNode;
+    /**
+     * Custom indicator for the expanded/collapsed state
+     * @default ChevronRight icon
+     */
+    indicator?: ReactNode;
+    /**
+     * Custom styles for the base container
+     */
+    baseStyle?: ViewStyle;
+    /**
+     * Custom styles for the header container
+     */
+    headingStyle?: ViewStyle;
+    /**
+     * Custom styles for the trigger button
+     */
+    triggerStyle?: ViewStyle;
+    /**
+     * Custom styles for the title text
+     */
+    titleStyle?: TextStyle;
+    /**
+     * Custom styles for the subtitle text
+     */
+    subtitleStyle?: TextStyle;
+    /**
+     * Custom styles for the content container
+     */
+    contentStyle?: ViewStyle;
+    /**
+     * Custom styles for the start content container
+     */
+    startContentStyle?: ViewStyle;
+    /**
+     * Custom styles for the indicator
+     */
+    indicatorStyle?: ViewStyle;
+} & AccordionItemEvents;
+
+declare const AccordionItem: React.FC<AccordionItemProps>;
+
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, type AccordionSelectionMode, type AccordionVariant };

package/dist/accordion/index.js

@@ -0,0 +1,434 @@
+import {
+  Divider
+} from "../chunk-R34CVLCX.js";
+import {
+  useXUIPalette,
+  useXUITheme
+} from "../chunk-ORMNMNOK.js";
+
+// src/components/accordion/accordion.tsx
+import React4 from "react";
+import { View as View2 } from "react-native";
+
+// src/components/accordion/accordion-context.ts
+import { createContext, useContext } from "react";
+var AccordionContext = createContext(void 0);
+var useAccordionContext = () => {
+  const context = useContext(AccordionContext);
+  if (!context) {
+    throw new Error("AccordionItem must be used within an Accordion component");
+  }
+  return context;
+};
+
+// src/components/accordion/accordion.hook.ts
+import { useState, useCallback, useMemo } from "react";
+var useAccordionStyles = ({ variant, fullWidth }) => {
+  const theme = useXUITheme();
+  const palette2 = useXUIPalette();
+  const containerStyles = useMemo(() => {
+    const base = {};
+    if (fullWidth) {
+      base.width = "100%";
+    }
+    if (variant === "bordered") {
+      base.borderWidth = theme.borderWidth.md;
+      base.borderColor = theme.mode === "dark" ? palette2.gray[800] : theme.palette.gray[200];
+      base.borderRadius = theme.borderRadius.md;
+      base.marginHorizontal = theme.spacing.sm;
+      base.overflow = "hidden";
+    } else if (variant === "light") {
+      base.paddingHorizontal = theme.spacing.sm;
+    }
+    return base;
+  }, [variant, fullWidth, theme]);
+  const dividerColor = variant === "bordered" ? containerStyles.borderColor : theme.mode === "dark" ? palette2.gray[800] : theme.palette.gray[200];
+  const dividerOpacity = variant === "bordered" ? 1 : 0.2;
+  return { containerStyles, dividerColor, dividerOpacity };
+};
+var useAccordionSelection = ({
+  selectionMode,
+  expandedKeys,
+  defaultExpandedKeys,
+  onSelectionChange
+}) => {
+  const [internalExpandedKeys, setInternalExpandedKeys] = useState(defaultExpandedKeys);
+  const isControlled = expandedKeys !== void 0;
+  const currentExpandedKeys = isControlled ? expandedKeys : internalExpandedKeys;
+  const toggleItem = useCallback(
+    (key) => {
+      const isExpanded = currentExpandedKeys.includes(key);
+      const newExpandedKeys = selectionMode === "toggle" ? isExpanded ? [] : [key] : isExpanded ? currentExpandedKeys.filter((k) => k !== key) : [...currentExpandedKeys, key];
+      if (!isControlled) {
+        setInternalExpandedKeys(newExpandedKeys);
+      }
+      onSelectionChange?.(newExpandedKeys);
+    },
+    [selectionMode, currentExpandedKeys, isControlled, onSelectionChange]
+  );
+  return { currentExpandedKeys, toggleItem };
+};
+var useAccordionContextValue = (config) => {
+  const { currentExpandedKeys, toggleItem } = useAccordionSelection({
+    selectionMode: config.selectionMode,
+    expandedKeys: config.expandedKeys,
+    defaultExpandedKeys: config.defaultExpandedKeys,
+    onSelectionChange: config.onSelectionChange
+  });
+  return useMemo(
+    () => ({
+      variant: config.variant,
+      hideIndicator: config.hideIndicator,
+      disableAnimation: config.disableAnimation,
+      isCompact: config.isCompact,
+      showDivider: config.showDivider,
+      expandedKeys: currentExpandedKeys,
+      disabledKeys: config.disabledKeys,
+      toggleItem
+    }),
+    [
+      config.variant,
+      config.hideIndicator,
+      config.disableAnimation,
+      config.isCompact,
+      config.showDivider,
+      currentExpandedKeys,
+      config.disabledKeys,
+      toggleItem
+    ]
+  );
+};
+
+// src/components/accordion/accordion-item.tsx
+import React2 from "react";
+import { View, Text, Pressable, Animated as Animated2 } from "react-native";
+
+// src/components/accordion/accordion-item.style.ts
+import { StyleSheet } from "react-native";
+var styles = StyleSheet.create({
+  startContent: {
+    flexShrink: 0
+  },
+  titleWrapper: {
+    flex: 1
+  },
+  indicator: {
+    flexShrink: 0
+  },
+  hiddenMeasure: {
+    position: "absolute",
+    opacity: 0,
+    left: 0,
+    right: 0,
+    zIndex: -999
+  },
+  contentOverflow: {
+    overflow: "hidden"
+  }
+});
+
+// src/components/accordion/accordion-item.hook.ts
+import { useRef, useEffect, useState as useState2, useMemo as useMemo2, useCallback as useCallback2 } from "react";
+import {
+  Animated,
+  Easing
+} from "react-native";
+import { colors as palette } from "@xaui/core/palette";
+var useAccordionItemState = (itemKey) => {
+  const context = useAccordionContext();
+  const resolvedItemKey = itemKey ?? "";
+  const isExpanded = resolvedItemKey ? context.expandedKeys.includes(resolvedItemKey) : false;
+  const isDisabled = resolvedItemKey ? context.disabledKeys.includes(resolvedItemKey) : false;
+  const handlePress = useCallback2(() => {
+    if (isDisabled || !resolvedItemKey) return;
+    context.toggleItem(resolvedItemKey);
+  }, [isDisabled, resolvedItemKey, context]);
+  return { ...context, resolvedItemKey, isExpanded, isDisabled, handlePress };
+};
+var useAccordionItemAnimation = (isExpanded, disableAnimation) => {
+  const [contentHeight, setContentHeight] = useState2(0);
+  const [isMeasured, setIsMeasured] = useState2(false);
+  const animatedHeight = useRef(new Animated.Value(isExpanded ? 1 : 0)).current;
+  const animatedRotation = useRef(new Animated.Value(isExpanded ? 1 : 0)).current;
+  const prevContentHeight = useRef(contentHeight);
+  useEffect(() => {
+    if (disableAnimation) {
+      animatedHeight.setValue(isExpanded ? 1 : 0);
+      animatedRotation.setValue(isExpanded ? 1 : 0);
+      return;
+    }
+    Animated.parallel([
+      Animated.timing(animatedHeight, {
+        toValue: isExpanded ? 1 : 0,
+        duration: 300,
+        easing: Easing.bezier(0.4, 0, 0.2, 1),
+        useNativeDriver: false
+      }),
+      Animated.timing(animatedRotation, {
+        toValue: isExpanded ? 1 : 0,
+        duration: 300,
+        easing: Easing.bezier(0.4, 0, 0.2, 1),
+        useNativeDriver: true
+      })
+    ]).start();
+  }, [isExpanded, disableAnimation, animatedHeight, animatedRotation]);
+  useEffect(() => {
+    if (contentHeight <= 0 || contentHeight === prevContentHeight.current || !isExpanded)
+      return;
+    prevContentHeight.current = contentHeight;
+    if (!disableAnimation && isMeasured) {
+      Animated.timing(animatedHeight, {
+        toValue: 1,
+        duration: 200,
+        easing: Easing.out(Easing.ease),
+        useNativeDriver: false
+      }).start();
+    }
+  }, [contentHeight, isExpanded, disableAnimation, isMeasured, animatedHeight]);
+  const onContentLayout = useCallback2((event) => {
+    const height = event.nativeEvent.layout.height;
+    if (height > 0) {
+      setContentHeight(height);
+      setIsMeasured(true);
+    }
+  }, []);
+  const heightInterpolation = animatedHeight.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, contentHeight]
+  });
+  const rotationInterpolation = animatedRotation.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["0deg", "90deg"]
+  });
+  return {
+    onContentLayout,
+    heightInterpolation,
+    rotationInterpolation,
+    contentHeight
+  };
+};
+var useBaseStyles = (variant, isDisabled) => {
+  const theme = useXUITheme();
+  const baseStyles = useMemo2(() => {
+    const base = { overflow: "hidden" };
+    if (variant === "splitted") {
+      base.paddingHorizontal = theme.spacing.md;
+      base.backgroundColor = theme.colors.default.background;
+      base.borderRadius = theme.borderRadius.md;
+      base.marginBottom = theme.spacing.sm;
+    } else if (variant === "bordered") {
+      base.paddingHorizontal = theme.spacing.md;
+    }
+    if (isDisabled) {
+      base.opacity = 0.4;
+    }
+    return base;
+  }, [variant, isDisabled, theme]);
+  return baseStyles;
+};
+var useTriggerStyles = (variant, isCompact) => {
+  const theme = useXUITheme();
+  const triggerStyles = useMemo2(() => {
+    const trigger = {
+      flexDirection: "row",
+      alignItems: "center",
+      paddingVertical: isCompact ? theme.spacing.xs : theme.spacing.md,
+      gap: theme.spacing.md
+    };
+    if (variant === "light") {
+      trigger.paddingHorizontal = theme.spacing.sm;
+    }
+    return trigger;
+  }, [variant, isCompact, theme]);
+  return triggerStyles;
+};
+var useTitleTextStyle = (isCompact) => {
+  const theme = useXUITheme();
+  const titleTextStyle = useMemo2(
+    () => ({
+      fontSize: isCompact ? theme.fontSizes.md : theme.fontSizes.lg,
+      fontWeight: theme.fontWeights.medium,
+      color: theme.colors.foreground
+    }),
+    [isCompact, theme]
+  );
+  return titleTextStyle;
+};
+var useSubtitleTextStyle = () => {
+  const theme = useXUITheme();
+  const subtitleTextStyle = useMemo2(
+    () => ({
+      fontSize: theme.fontSizes.sm,
+      color: palette.gray[500],
+      marginTop: theme.spacing.xs
+    }),
+    [theme]
+  );
+  return subtitleTextStyle;
+};
+var useContentContainerStyle = (isCompact, variant) => {
+  const theme = useXUITheme();
+  const contentContainerStyle = useMemo2(
+    () => ({
+      paddingBottom: isCompact ? theme.spacing.sm : theme.spacing.md,
+      paddingHorizontal: variant === "light" ? theme.spacing.sm : 0
+    }),
+    [isCompact, variant, theme]
+  );
+  return contentContainerStyle;
+};
+var useForegroundColor = () => {
+  const theme = useXUITheme();
+  return theme.colors.foreground;
+};
+
+// src/components/accordion/chevron-right-icon.tsx
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+var ChevronRightIcon = ({
+  color = "#000",
+  size = 20
+}) => {
+  return /* @__PURE__ */ React.createElement(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React.createElement(
+    Path,
+    {
+      d: "M9 18l6-6-6-6",
+      stroke: color,
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ));
+};
+
+// src/components/accordion/accordion-item.tsx
+var AccordionItem = ({
+  itemKey,
+  children,
+  title,
+  subtitle,
+  startContent,
+  indicator,
+  baseStyle,
+  headingStyle,
+  triggerStyle,
+  titleStyle,
+  subtitleStyle,
+  contentStyle,
+  startContentStyle,
+  indicatorStyle,
+  onSelected
+}) => {
+  const {
+    variant,
+    hideIndicator,
+    disableAnimation,
+    isCompact,
+    isExpanded,
+    isDisabled,
+    handlePress: togglePress
+  } = useAccordionItemState(itemKey);
+  const handlePress = () => {
+    togglePress();
+    onSelected?.(!isExpanded);
+  };
+  const { onContentLayout, heightInterpolation, rotationInterpolation } = useAccordionItemAnimation(isExpanded, disableAnimation);
+  const baseStyles = useBaseStyles(variant, isDisabled);
+  const triggerStyles = useTriggerStyles(variant, isCompact);
+  const titleTextStyle = useTitleTextStyle(isCompact);
+  const subtitleTextStyle = useSubtitleTextStyle();
+  const contentContainerStyle = useContentContainerStyle(isCompact, variant);
+  const foregroundColor = useForegroundColor();
+  return /* @__PURE__ */ React2.createElement(View, { style: [baseStyles, baseStyle] }, /* @__PURE__ */ React2.createElement(View, { style: headingStyle }, /* @__PURE__ */ React2.createElement(
+    Pressable,
+    {
+      style: [triggerStyles, triggerStyle],
+      onPress: handlePress,
+      disabled: isDisabled,
+      accessibilityRole: "button",
+      accessibilityState: { expanded: isExpanded, disabled: isDisabled }
+    },
+    startContent && /* @__PURE__ */ React2.createElement(View, { style: [styles.startContent, startContentStyle] }, startContent),
+    /* @__PURE__ */ React2.createElement(View, { style: styles.titleWrapper }, typeof title === "string" ? /* @__PURE__ */ React2.createElement(Text, { style: [titleTextStyle, titleStyle] }, title) : title, subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ React2.createElement(Text, { style: [subtitleTextStyle, subtitleStyle] }, subtitle) : subtitle)),
+    !hideIndicator && /* @__PURE__ */ React2.createElement(
+      Animated2.View,
+      {
+        style: [
+          styles.indicator,
+          indicatorStyle,
+          { transform: [{ rotate: rotationInterpolation }] }
+        ]
+      },
+      indicator || /* @__PURE__ */ React2.createElement(ChevronRightIcon, { color: foregroundColor })
+    )
+  )), /* @__PURE__ */ React2.createElement(View, { style: styles.hiddenMeasure, pointerEvents: "none" }, /* @__PURE__ */ React2.createElement(View, { onLayout: onContentLayout, style: [contentContainerStyle, contentStyle] }, children)), /* @__PURE__ */ React2.createElement(
+    Animated2.View,
+    {
+      style: [
+        styles.contentOverflow,
+        disableAnimation ? { height: isExpanded ? void 0 : 0 } : { height: heightInterpolation }
+      ]
+    },
+    /* @__PURE__ */ React2.createElement(View, { style: [contentContainerStyle, contentStyle] }, children)
+  ));
+};
+AccordionItem.displayName = "AccordionItem";
+
+// src/components/accordion/accordion.utils.ts
+import React3 from "react";
+var getItemKey = (value, fallback) => {
+  if (value === null || value === void 0) return String(fallback);
+  if (typeof value === "string" || typeof value === "number") return String(value);
+  return String(fallback);
+};
+var normalizeElementKey = (value) => {
+  if (typeof value !== "string") return value;
+  return value.startsWith(".$") ? value.slice(2) : value.startsWith(".") ? value.slice(1) : value;
+};
+var isAccordionItem = (value) => React3.isValidElement(value) && (value.type === AccordionItem || typeof value.type === "function" && value.type.displayName === "AccordionItem");
+var buildAccordionContextParams = (props) => {
+  return {
+    variant: props.variant || "light",
+    hideIndicator: Boolean(props.hideIndicator),
+    disableAnimation: Boolean(props.disableAnimation),
+    isCompact: Boolean(props.isCompact),
+    showDivider: Boolean(props.showDivider),
+    expandedKeys: props.expandedKeys,
+    defaultExpandedKeys: props.defaultExpandedKeys || [],
+    disabledKeys: props.disabledKeys || [],
+    selectionMode: props.selectionMode || "toggle",
+    onSelectionChange: props.onSelectionChange
+  };
+};
+
+// src/components/accordion/accordion.tsx
+var Accordion = (props) => {
+  const {
+    children,
+    variant = "light",
+    showDivider = false,
+    fullWidth = true,
+    containerStyle,
+    itemStyle
+  } = props;
+  const { containerStyles, dividerColor } = useAccordionStyles({
+    variant,
+    fullWidth
+  });
+  const contextParams = buildAccordionContextParams(props);
+  const contextValue = useAccordionContextValue(contextParams);
+  const childrenArray = React4.Children.toArray(children);
+  return /* @__PURE__ */ React4.createElement(AccordionContext.Provider, { value: contextValue }, /* @__PURE__ */ React4.createElement(View2, { style: [containerStyles, containerStyle] }, childrenArray.map((child, index) => {
+    const isLast = index === childrenArray.length - 1;
+    const showBottomDivider = (showDivider || variant === "bordered") && !isLast && variant !== "splitted";
+    const resolvedChildKey = isAccordionItem(child) ? getItemKey(child.props.itemKey ?? normalizeElementKey(child.key), index) : getItemKey(
+      React4.isValidElement(child) ? normalizeElementKey(child.key) : void 0,
+      index
+    );
+    return /* @__PURE__ */ React4.createElement(View2, { key: resolvedChildKey, style: itemStyle }, isAccordionItem(child) ? React4.cloneElement(child, { itemKey: resolvedChildKey }) : child, showBottomDivider && /* @__PURE__ */ React4.createElement(Divider, { color: dividerColor, size: 2 }));
+  })));
+};
+export {
+  Accordion,
+  AccordionItem
+};

package/dist/button/index.cjs

@@ -46,6 +46,7 @@ var import_react_native6 = require("react-native");
 var import_react = __toESM(require("react"), 1);
 var import_react_native = require("react-native");
 var import_theme = require("@xaui/core/theme");
+var import_palette = require("@xaui/core/palette");
 var XUIThemeContext = (0, import_react.createContext)(null);
 
 // src/core/theme-hooks.ts
@@ -73,6 +74,9 @@ function useBorderRadiusStyles(radius) {
   return borderRadius;
 }
 
+// src/core/index.ts
+var import_theme2 = require("@xaui/core/theme");
+
 // src/components/indicator/circular-activity-indicator.tsx
 var import_react3 = __toESM(require("react"), 1);
 var import_react_native4 = require("react-native");
@@ -81,6 +85,8 @@ var import_react_native4 = require("react-native");
 var import_react_native3 = require("react-native");
 var styles = import_react_native3.StyleSheet.create({
   container: {
+    flexShrink: 1,
+    flexBasis: "auto",
     width: "100%",
     justifyContent: "center"
   },
@@ -459,6 +465,8 @@ var styles2 = import_react_native7.StyleSheet.create({
     marginHorizontal: 4
   },
   fullWidth: {
+    flexShrink: 1,
+    flexBasis: "auto",
     width: "100%"
   },
   disabled: {

package/dist/button/index.js

@@ -1,10 +1,10 @@
 import {
   ActivityIndicator
-} from "../chunk-52PIZF2Z.js";
+} from "../chunk-B2VGVZ3J.js";
 import {
   useBorderRadiusStyles,
   useXUITheme
-} from "../chunk-DNJWBME5.js";
+} from "../chunk-ORMNMNOK.js";
 
 // src/components/button/button.tsx
 import React from "react";
@@ -39,6 +39,8 @@ var styles = StyleSheet.create({
     marginHorizontal: 4
   },
   fullWidth: {
+    flexShrink: 1,
+    flexBasis: "auto",
     width: "100%"
   },
   disabled: {

package/dist/checkbox/index.cjs

@@ -189,6 +189,7 @@ var import_core = require("@xaui/core");
 var import_react2 = __toESM(require("react"), 1);
 var import_react_native3 = require("react-native");
 var import_theme = require("@xaui/core/theme");
+var import_palette = require("@xaui/core/palette");
 var XUIThemeContext = (0, import_react2.createContext)(null);
 
 // src/core/theme-hooks.ts
@@ -202,6 +203,9 @@ function useXUITheme() {
   return theme;
 }
 
+// src/core/index.ts
+var import_theme2 = require("@xaui/core/theme");
+
 // src/components/checkbox/checkbox.hook.ts
 function useSizeStyles(size, variant) {
   const theme = useXUITheme();
@@ -271,7 +275,7 @@ function useCheckmarkColors(themeColor, variant, isActive) {
     }
     return {
       checked: theme.colors.foreground,
-      unchecked: theme.colors.background
+      unchecked: colorScheme.background
     };
   }, [variant, colorScheme, isActive, themeColor, theme.colors]);
   return checkmarkColors;
@@ -316,6 +320,8 @@ var styles = import_react_native5.StyleSheet.create({
     gap: 10
   },
   fullWidth: {
+    flexShrink: 1,
+    flexBasis: "auto",
     width: "100%"
   },
   checkbox: {

package/dist/checkbox/index.js

@@ -1,6 +1,6 @@
 import {
   useXUITheme
-} from "../chunk-DNJWBME5.js";
+} from "../chunk-ORMNMNOK.js";
 
 // src/components/checkbox/checkbox.tsx
 import React2, { useEffect as useEffect2, useRef as useRef2, useState } from "react";
@@ -220,7 +220,7 @@ function useCheckmarkColors(themeColor, variant, isActive) {
     }
     return {
       checked: theme.colors.foreground,
-      unchecked: theme.colors.background
+      unchecked: colorScheme.background
     };
   }, [variant, colorScheme, isActive, themeColor, theme.colors]);
   return checkmarkColors;
@@ -265,6 +265,8 @@ var styles = StyleSheet.create({
     gap: 10
   },
   fullWidth: {
+    flexShrink: 1,
+    flexBasis: "auto",
     width: "100%"
   },
   checkbox: {