@momo-kits/arrangement-view 0.168.1-beta.18 → 0.168.1-beta.19

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/arrangement-view",
-    "version": "0.168.1-beta.18",
+    "version": "0.168.1-beta.19",
     "description": "Foldable-aware two-pane arrangement and hinge observation. Fork of react-native-arrangement-view 0.2.0 (MIT, Thiago Brezinski).",
     "main": "./src/index.tsx",
     "files": [

package/src/ArrangementView.android.tsx

@@ -19,6 +19,8 @@ export function ArrangementView({
   observeHinge = true,
   hingePolicy,
   hingeGap,
+  forceSplit,
+  primaryRatio,
   ...props
 }: ArrangementViewProps) {
   const [store, onHingeChange] = useHingeStore(observeHinge);
@@ -41,6 +43,8 @@ export function ArrangementView({
       hingePolicy,
       hingeGap,
       rtl: I18nManager.isRTL,
+      forceSplit,
+      primaryRatio,
     });
   const { primary, secondary, problems } = resolveSlots(children);
   warnOnce(problems);

package/src/SplitView.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState, type ReactNode } from 'react';
 import {
+  Platform,
   StyleSheet,
   UIManager,
   useWindowDimensions,
@@ -27,7 +28,7 @@ export interface SplitViewProps extends ViewProps {
   onSplitChange?: (isSplit: boolean) => void;
 
   /**
-   * Optional. iOS only. Share of the width `primary` takes beside `secondary`, e.g. 0.35
+   * Optional. Share of the width `primary` takes beside `secondary`, e.g. 0.35
    * for a sidebar like Settings. Default: the system decides.
    */
   primaryRatio?: number;
@@ -89,6 +90,7 @@ export function SplitView({
       style={[styles.flex, style]}
       // side by side only: a narrow window keeps primary alone instead of stacking
       axes={'horizontal'}
+      forceSplit={Platform.OS === 'android'}
       onLayout={(e: LayoutChangeEvent) => {
         setContainerWidth(e.nativeEvent.layout.width);
         onLayout?.(e);

package/src/arrange.ts

@@ -30,6 +30,8 @@ export interface ArrangeOptions {
   hingePolicy?: HingePolicy;
   hingeGap?: number;
   rtl?: boolean;
+  forceSplit?: boolean;
+  primaryRatio?: number;
 }
 
 export interface Frame {
@@ -75,13 +77,16 @@ export function arrange(
     hingePolicy = 'avoidSeparating',
     hingeGap = 24,
     rtl = false,
+    forceSplit = false,
+    primaryRatio = 0,
   }: ArrangeOptions
 ): PaneFrames {
   const full = { left: 0, top: 0, width, height };
   const tabletop =
     fold?.halfOpened === true && fold.orientation === 'horizontal';
   const twoColumns =
-    window.height >= COMPACT_HEIGHT && window.width >= EXPANDED_WIDTH;
+    forceSplit ||
+    (window.height >= COMPACT_HEIGHT && window.width >= EXPANDED_WIDTH);
   const twoRows = tabletop || (!twoColumns && window.height >= EXPANDED_HEIGHT);
   const allows = (axis: Axis) => axes === 'both' || axes === axis;
   const fits = (axis: Axis) =>
@@ -146,6 +151,8 @@ export function arrange(
       ? 'vertical'
       : null;
   if (!axis) return { primary: full, secondary: null };
-  const middle = (axis === 'horizontal' ? width : height) / 2;
-  return split(axis, middle, middle);
+  if (axis === 'vertical') return split(axis, height / 2, height / 2);
+  const ratio = primaryRatio > 0 && primaryRatio < 1 ? primaryRatio : 0.5;
+  const edge = width * (rtl ? 1 - ratio : ratio);
+  return split(axis, edge, edge);
 }

package/src/types.ts

@@ -23,10 +23,10 @@ export interface ArrangementViewProps extends ViewProps {
   axes?: ArrangementAxes;
   /** Disable hinge observation without affecting adaptive layout. Default true. */
   observeHinge?: boolean;
-  /** iOS only. Split side by side whatever the size classes. Default false. */
+  /** Split side by side whatever the size classes. Default false. */
   forceSplit?: boolean;
   /**
-   * iOS only. Share of the width the primary pane takes when split side by side,
+   * Share of the width the primary pane takes when split side by side,
    * e.g. 0.35 for a sidebar like Settings. Default: the system decides.
    */
   primaryRatio?: number;