melta-app 0.2.2 → 0.2.3

package/README.md

@@ -193,11 +193,21 @@ npx expo install react-native-safe-area-context
 // アプリの entry（Screen の初回 render より前）で一度だけ
 import { enableSafeAreaContext } from "melta-app/safe-area";
 enableSafeAreaContext();
+
+// ボトムタブバー等が bottom inset を自前処理するアプリは edge を絞る
+// （全 edge のまま使うとタブ内 Screen の bottom が二重余白になる）
+enableSafeAreaContext({ edges: ["top"] });
 ```
 
-⚠️ react-native-safe-area-context の SafeAreaView は祖先に `SafeAreaProvider` が必要
-（React Navigation / Expo Router を使っていれば設置済みのことが多い。無い場合は root を
-`<SafeAreaProvider>` で包むこと — 無いと警告は消えるが inset が効かない）。
+⚠️ 前提と契約:
+
+- 祖先に `SafeAreaProvider` が**必須**（無いと `useSafeAreaInsets` が **throw する**。
+  React Navigation / Expo Router を使っていれば設置済みのことが多い）。初回 render から
+  正しい inset を使うには Provider に `initialMetrics` を渡す
+- adapter は `useSafeAreaInsets()` を render 中に同期参照して View padding に加算する方式
+  （native SafeAreaView の初回フレーム inset 未適用によるフラッシュを避けるため）
+- safe-area と合成する padding は**数値のみ**サポート（`"5%"` 等の非数値は基底として扱えず、
+  対象 edge は inset 値に置き換わる）。RTL / `paddingStart`・`paddingEnd` は対応済み
 
 ## ステータス
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "melta-app",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "melta for APP — melta デザインシステムの React Native UI kit。melta-contracts（デザイン契約）を single source of truth に RN 実装でその契約を満たす。アプリ本体ではなくライブラリ。",
   "license": "MIT",
   "homepage": "https://app.melta.tsubotax.com",

package/src/safe-area/index.ts

@@ -15,13 +15,17 @@
  * Provider の context 値を render 中に同期参照して padding を付けるため、native
  * SafeAreaView の layout/state 更新を待たず、初回 render から inset が反映される。
  *
- * ⚠️ 前提: アプリの root に SafeAreaProvider が必要。初回 render から正しい inset を
- * 使うには Provider に initialMetrics も渡す。React Navigation / Expo Router 利用時は
- * Provider が設置済みのことが多い。
+ * ⚠️ 前提: アプリの root に SafeAreaProvider が必要（無いと useSafeAreaInsets が throw
+ * する）。初回 render から正しい inset を使うには Provider に initialMetrics も渡す。
+ * React Navigation / Expo Router 利用時は Provider が設置済みのことが多い。
+ *
+ * ⚠️ 公開契約: safe-area と合成する padding は数値のみサポート。"5%" 等の非数値は
+ * 基底値として扱えず、対象 edge の padding は inset 値に置き換わる（RNSAC native も
+ * percentage padding 未サポートのため、より弱い保証を契約化はしない）。
  */
 
 import { createElement, useMemo } from "react";
-import { StyleSheet, View, type ViewStyle } from "react-native";
+import { I18nManager, StyleSheet, View, type ViewStyle } from "react-native";
 import {
   useSafeAreaInsets,
   type Edge,
@@ -47,21 +51,36 @@ function additivePadding(
   edges: ReadonlySet<Edge>,
 ): ViewStyle {
   const flat = StyleSheet.flatten(style) ?? {};
+  const num = (value: unknown): number | null => (typeof value === "number" ? value : null);
 
-  const base = (edge: Edge): number => {
-    const edgeValue = flat[`padding${edge[0].toUpperCase()}${edge.slice(1)}` as keyof ViewStyle];
-    const axisValue =
-      edge === "top" || edge === "bottom" ? flat.paddingVertical : flat.paddingHorizontal;
-    const value = edgeValue ?? axisValue ?? flat.padding;
-    return typeof value === "number" ? value : 0;
-  };
+  // 基底 padding の解決は Yoga の優先順位（論理 > 物理 > 軸 > 全体）に合わせる。
+  // 論理キー（paddingStart/End）を読まないと、基底が論理指定のとき取りこぼす。
+  const isRTL = I18nManager.isRTL;
+  const baseVertical = (edge: "top" | "bottom"): number =>
+    num(edge === "top" ? flat.paddingTop : flat.paddingBottom) ??
+    num(flat.paddingVertical) ??
+    num(flat.padding) ??
+    0;
+  const baseHorizontal = (edge: "left" | "right"): number =>
+    num(flat[(edge === "left") === !isRTL ? "paddingStart" : "paddingEnd"]) ??
+    num(edge === "left" ? flat.paddingLeft : flat.paddingRight) ??
+    num(flat.paddingHorizontal) ??
+    num(flat.padding) ??
+    0;
 
-  return {
-    ...(edges.has("top") ? { paddingTop: base("top") + insets.top } : null),
-    ...(edges.has("right") ? { paddingRight: base("right") + insets.right } : null),
-    ...(edges.has("bottom") ? { paddingBottom: base("bottom") + insets.bottom } : null),
-    ...(edges.has("left") ? { paddingLeft: base("left") + insets.left } : null),
-  };
+  // 水平方向は論理キーで出力する。物理キー（paddingLeft/Right）で上書きすると、
+  // 基底 style 側に paddingStart/End があるとき論理キーが Yoga 上で勝ち、
+  // inset の加算結果ごと無視されるため。
+  const out: ViewStyle = {};
+  if (edges.has("top")) out.paddingTop = baseVertical("top") + insets.top;
+  if (edges.has("bottom")) out.paddingBottom = baseVertical("bottom") + insets.bottom;
+  if (edges.has("left")) {
+    out[isRTL ? "paddingEnd" : "paddingStart"] = baseHorizontal("left") + insets.left;
+  }
+  if (edges.has("right")) {
+    out[isRTL ? "paddingStart" : "paddingEnd"] = baseHorizontal("right") + insets.right;
+  }
+  return out;
 }
 
 function createContextSafeAreaView(selectedEdges: readonly Edge[]): SafeAreaViewLike {