@bigbinary/neetoui-rn 3.0.3 → 3.1.1

package/src/components/BottomSheet/BottomSheet.tsx

@@ -17,7 +17,7 @@ import {
   type TextStyle,
   type ViewStyle,
 } from "react-native";
-import { Check } from "@bigbinary/neeto-icons-rn";
+import Check from "@bigbinary/neeto-icons-rn/icons/Check";
 import {
   BottomSheetBackdrop,
   BottomSheetFlatList,
@@ -28,7 +28,7 @@ import {
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 
-import { moderateScale } from "../../utils/scale";
+import { moderateScale, scaleFor } from "../../utils/scale";
 import { Divider } from "../Divider";
 import { Loader } from "../Loader";
 import { SearchBar, type SearchBarProps } from "../SearchBar";
@@ -78,7 +78,14 @@ export type BottomSheetProps<T> = {
   noResultsLabel?: string;
   NoResultsComponent?: ComponentType;
   onBackdropPress?: () => void;
+  /** Absolute cap, in points. Wins over maxHeightRatio. */
   maxHeight?: number;
+  /**
+   * Cap as a fraction of screen height, so a long list stops short of
+   * covering the screen. Override per sheet, or pass maxHeight for an
+   * absolute value.
+   */
+  maxHeightRatio?: number;
   style?: StyleProp<ViewStyle>;
   titleContainerStyle?: StyleProp<ViewStyle>;
   titleTextStyle?: StyleProp<TextStyle>;
@@ -117,6 +124,9 @@ const DefaultContentRow = ({
 
 const ItemSeparator = () => <Divider style={styles.separator} />;
 
+/** 60% of the screen: enough to browse, never a full-screen takeover. */
+const DEFAULT_MAX_HEIGHT_RATIO = 0.6;
+
 export const BottomSheet = <T,>({
   isVisible,
   hide,
@@ -144,28 +154,33 @@ export const BottomSheet = <T,>({
   NoResultsComponent,
   onBackdropPress,
   maxHeight,
+  maxHeightRatio = DEFAULT_MAX_HEIGHT_RATIO,
   style,
   titleContainerStyle,
   titleTextStyle,
   flatListRef,
   sheetProps,
 }: BottomSheetProps<T>) => {
-  const { theme } = useUnistyles();
+  const { theme, rt } = useUnistyles();
   const insets = useSafeAreaInsets();
   const sheetRef = useRef<BottomSheetModal>(null);
   const [searchText, setSearchText] = useState("");
 
   const isVisibleRef = useRef(isVisible);
   isVisibleRef.current = isVisible;
-  const hasPresentedRef = useRef(false);
+  // Tracks whether the underlying modal is still presented, so the effect
+  // below never dismisses a sheet gorhom has already torn down.
+  const isPresentedRef = useRef(false);
 
   useEffect(() => {
     if (isVisible) {
-      hasPresentedRef.current = true;
+      isPresentedRef.current = true;
       sheetRef.current?.present();
-    } else if (hasPresentedRef.current) {
-      // Never dismiss() a modal that was never presented: gorhom marks it
-      // DISMISSING, which makes the next present() unmount immediately.
+    } else if (isPresentedRef.current) {
+      // Never dismiss() a modal that is not presented: gorhom leaves its
+      // status at DISMISSING, and from then on handlePortalRender drops
+      // every render, so present() can never bring the sheet back.
+      isPresentedRef.current = false;
       sheetRef.current?.dismiss();
     }
     setSearchText("");
@@ -173,8 +188,29 @@ export const BottomSheet = <T,>({
 
   // Gesture-driven closes (swipe down, backdrop tap, Android back) end here;
   // hand control back to the owner so its isVisible state stays in sync.
+  // rt.screen is 0x0 until unistyles has measured the window, and stays 0x0
+  // under its jest mock. Deriving a cap from that yields 0, and a sheet
+  // pinned to a 0 snap point opens invisible — so leave the cap off until a
+  // real height arrives rather than computing a broken one.
+  const cappedHeight =
+    maxHeight ??
+    (rt.screen.height ? rt.screen.height * maxHeightRatio : undefined);
+
+  // A searchable sheet is pinned to one height: dynamic sizing re-measures
+  // the filtered list on every keystroke, so the sheet shrinks under the
+  // user while they type. Everything else stays content-sized and only gets
+  // the cap — a four-row menu should not claim 60% of the screen.
+  const sizingProps =
+    canSearch && cappedHeight
+      ? { snapPoints: [cappedHeight], enableDynamicSizing: false }
+      : { maxDynamicContentSize: cappedHeight };
+
   const handleDismiss = useCallback(() => {
     setSearchText("");
+    // gorhom has already unmounted the sheet and reset its status by the
+    // time this fires, so the isVisible=false render that hide() triggers
+    // must not dismiss again.
+    isPresentedRef.current = false;
     if (!isVisibleRef.current) return;
 
     hide();
@@ -349,8 +385,8 @@ export const BottomSheet = <T,>({
       handleIndicatorStyle={styles.handleIndicator}
       keyboardBehavior="interactive"
       keyboardBlurBehavior="restore"
-      maxDynamicContentSize={maxHeight}
       ref={sheetRef}
+      {...sizingProps}
       {...sheetProps}
       // After the spread, and composed rather than replaced: this is the
       // only channel through which a gesture close reaches the owner, so an
@@ -420,49 +456,56 @@ export const BottomSheet = <T,>({
   );
 };
 
-const styles = StyleSheet.create(theme => ({
-  sheetBackground: {
-    backgroundColor: theme.colors.background.primary,
-    borderTopLeftRadius: moderateScale(20),
-    borderTopRightRadius: moderateScale(20),
-  },
-  handleIndicator: {
-    backgroundColor: theme.colors.palette.grey400,
-  },
-  separator: {
-    backgroundColor: theme.colors.palette.grey200,
-  },
-  header: {
-    backgroundColor: theme.colors.background.primary,
-    gap: moderateScale(16),
-    paddingBottom: moderateScale(12),
-  },
-  titleRow: {
-    alignItems: "center",
-    flexDirection: "row",
-    justifyContent: "space-between",
-  },
-  doneLabel: {
-    color: theme.colors.palette.purple500,
-  },
-  defaultRow: {
-    alignItems: "center",
-    flexDirection: "row",
-    gap: moderateScale(8),
-    justifyContent: "space-between",
-    minHeight: moderateScale(44),
-  },
-  createRow: {
-    alignItems: "center",
-    height: moderateScale(40),
-    justifyContent: "center",
-  },
-  noResults: {
-    alignItems: "center",
-    marginBottom: moderateScale(2),
-    paddingVertical: moderateScale(2),
-  },
-  mutedLabel: {
-    color: theme.colors.text.secondary,
-  },
-}));
+const styles = StyleSheet.create((theme, rt) => {
+  // Reading rt.screen registers the dependency that has this sheet
+  // recomputed on a window resize, so scaled sizes follow rotation,
+  // split-screen and foldables instead of freezing at first render.
+  const moderateScale = scaleFor(rt.screen);
+
+  return {
+    sheetBackground: {
+      backgroundColor: theme.colors.background.primary,
+      borderTopLeftRadius: moderateScale(20),
+      borderTopRightRadius: moderateScale(20),
+    },
+    handleIndicator: {
+      backgroundColor: theme.colors.palette.grey400,
+    },
+    separator: {
+      backgroundColor: theme.colors.palette.grey200,
+    },
+    header: {
+      backgroundColor: theme.colors.background.primary,
+      gap: moderateScale(16),
+      paddingBottom: moderateScale(12),
+    },
+    titleRow: {
+      alignItems: "center",
+      flexDirection: "row",
+      justifyContent: "space-between",
+    },
+    doneLabel: {
+      color: theme.colors.palette.purple500,
+    },
+    defaultRow: {
+      alignItems: "center",
+      flexDirection: "row",
+      gap: moderateScale(8),
+      justifyContent: "space-between",
+      minHeight: moderateScale(44),
+    },
+    createRow: {
+      alignItems: "center",
+      height: moderateScale(40),
+      justifyContent: "center",
+    },
+    noResults: {
+      alignItems: "center",
+      marginBottom: moderateScale(2),
+      paddingVertical: moderateScale(2),
+    },
+    mutedLabel: {
+      color: theme.colors.text.secondary,
+    },
+  };
+});

package/src/components/BottomSheetMenu/BottomSheetMenu.tsx

@@ -2,7 +2,7 @@ import { type ComponentType, type ReactNode } from "react";
 import { Pressable, View } from "react-native";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 
-import { moderateScale } from "../../utils/scale";
+import { moderateScale, scaleFor } from "../../utils/scale";
 import { BottomSheet } from "../BottomSheet";
 import { Typography } from "../Typography";
 
@@ -101,50 +101,57 @@ export const BottomSheetMenu = ({
   );
 };
 
-const styles = StyleSheet.create(theme => ({
-  sheetContent: {
-    paddingHorizontal: 0,
-  },
-  headerContainer: {
-    borderBottomColor: theme.colors.palette.grey200,
-    borderBottomWidth: moderateScale(1.5),
-    paddingBottom: moderateScale(12),
-    paddingHorizontal: moderateScale(16),
-    paddingTop: moderateScale(8),
-  },
-  titleContainer: {
-    borderBottomColor: theme.colors.palette.grey200,
-    borderBottomWidth: moderateScale(1.5),
-    paddingBottom: moderateScale(12),
-    paddingHorizontal: moderateScale(16),
-  },
-  title: {
-    alignSelf: "center",
-    color: theme.colors.text.muted,
-  },
-  row: {
-    alignItems: "center",
-    flexDirection: "row",
-    gap: moderateScale(12),
-    paddingHorizontal: moderateScale(16),
-    paddingVertical: moderateScale(14),
-  },
-  disabledRow: {
-    opacity: 0.5,
-  },
-  separator: {
-    borderBottomColor: theme.colors.palette.grey200,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    marginHorizontal: moderateScale(16),
-    paddingHorizontal: 0,
-  },
-  cancelButton: {
-    alignItems: "center",
-    backgroundColor: theme.colors.palette.grey100,
-    borderRadius: theme.radii.lg,
-    justifyContent: "center",
-    marginHorizontal: moderateScale(16),
-    marginTop: moderateScale(16),
-    paddingVertical: moderateScale(14),
-  },
-}));
+const styles = StyleSheet.create((theme, rt) => {
+  // Reading rt.screen registers the dependency that has this sheet
+  // recomputed on a window resize, so scaled sizes follow rotation,
+  // split-screen and foldables instead of freezing at first render.
+  const moderateScale = scaleFor(rt.screen);
+
+  return {
+    sheetContent: {
+      paddingHorizontal: 0,
+    },
+    headerContainer: {
+      borderBottomColor: theme.colors.palette.grey200,
+      borderBottomWidth: moderateScale(1.5),
+      paddingBottom: moderateScale(12),
+      paddingHorizontal: moderateScale(16),
+      paddingTop: moderateScale(8),
+    },
+    titleContainer: {
+      borderBottomColor: theme.colors.palette.grey200,
+      borderBottomWidth: moderateScale(1.5),
+      paddingBottom: moderateScale(12),
+      paddingHorizontal: moderateScale(16),
+    },
+    title: {
+      alignSelf: "center",
+      color: theme.colors.text.muted,
+    },
+    row: {
+      alignItems: "center",
+      flexDirection: "row",
+      gap: moderateScale(12),
+      paddingHorizontal: moderateScale(16),
+      paddingVertical: moderateScale(14),
+    },
+    disabledRow: {
+      opacity: 0.5,
+    },
+    separator: {
+      borderBottomColor: theme.colors.palette.grey200,
+      borderBottomWidth: StyleSheet.hairlineWidth,
+      marginHorizontal: moderateScale(16),
+      paddingHorizontal: 0,
+    },
+    cancelButton: {
+      alignItems: "center",
+      backgroundColor: theme.colors.palette.grey100,
+      borderRadius: theme.radii.lg,
+      justifyContent: "center",
+      marginHorizontal: moderateScale(16),
+      marginTop: moderateScale(16),
+      paddingVertical: moderateScale(14),
+    },
+  };
+});

package/src/components/ChatInput/AttachmentsView.tsx

@@ -3,7 +3,7 @@ import { Pressable, View } from "react-native";
 import Animated, { FadeInDown, FadeInUp } from "react-native-reanimated";
 import { StyleSheet } from "react-native-unistyles";
 
-import { moderateScale } from "../../utils/scale";
+import { scaleFor } from "../../utils/scale";
 import { Typography } from "../Typography";
 
 const Badge = ({
@@ -36,7 +36,11 @@ export const AttachmentsView = ({
   if (attachmentsCount === 0) return null;
 
   return isAttachmentsVisible ? (
-    <Animated.View entering={FadeInUp}>{Attachments}</Animated.View>
+    // Held at its natural height: the cards inside are fixed-size, so a
+    // squeeze has to come out of the text area, not out of them.
+    <Animated.View entering={FadeInUp} style={styles.expanded}>
+      {Attachments}
+    </Animated.View>
   ) : (
     <Animated.View entering={FadeInDown}>
       <Pressable style={styles.badgeRow} onPress={onExpand}>
@@ -50,19 +54,29 @@ export const AttachmentsView = ({
   );
 };
 
-const styles = StyleSheet.create(theme => ({
-  badgeRow: {
-    alignItems: "flex-start",
-    flexDirection: "row",
-    flexWrap: "wrap",
-    gap: moderateScale(4),
-  },
-  badge: {
-    backgroundColor: theme.colors.background.oldLace,
-    borderRadius: moderateScale(20),
-    paddingHorizontal: moderateScale(4),
-  },
-  badgeOnNote: {
-    backgroundColor: theme.colors.background.primary,
-  },
-}));
+const styles = StyleSheet.create((theme, rt) => {
+  // Reading rt.screen registers the dependency that has this sheet
+  // recomputed on a window resize, so scaled sizes follow rotation,
+  // split-screen and foldables instead of freezing at first render.
+  const moderateScale = scaleFor(rt.screen);
+
+  return {
+    expanded: {
+      flexShrink: 0,
+    },
+    badgeRow: {
+      alignItems: "flex-start",
+      flexDirection: "row",
+      flexWrap: "wrap",
+      gap: moderateScale(4),
+    },
+    badge: {
+      backgroundColor: theme.colors.background.oldLace,
+      borderRadius: moderateScale(20),
+      paddingHorizontal: moderateScale(4),
+    },
+    badgeOnNote: {
+      backgroundColor: theme.colors.background.primary,
+    },
+  };
+});