From 0e1dcd488efe8c0fb895eb48702df181fa6a7412 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 20 Feb 2026 00:00:18 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=90=B9=E3=81=8D=E5=87=BA=E3=81=97?=
 =?UTF-8?q?=E5=86=85=E3=81=AENativeWind=20className=E3=82=92style=E3=81=AB?=
 =?UTF-8?q?=E5=A4=89=E6=8F=9B=E3=81=97=E3=83=AC=E3=82=A4=E3=82=A2=E3=82=A6?=
 =?UTF-8?q?=E3=83=88=E3=81=9A=E3=82=8C=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

react-native-mapsのCallout内でNativeWindのclassNameを使用すると、
スタイルが非同期に適用されるため初回レンダリング時にレイアウトが
ずれる問題を修正。状態バッジのスタイルをStyleSheetに移行し、
初回レンダリングから正しいサイズで表示されるようにした。

https://claude.ai/code/session_013ZFH74Dyo4ghzS2KwvZfjX
---
 app/(tabs)/map.tsx | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/app/(tabs)/map.tsx b/app/(tabs)/map.tsx
index fe97af3..1a0c062 100644
--- a/app/(tabs)/map.tsx
+++ b/app/(tabs)/map.tsx
@@ -88,10 +88,12 @@ function CalloutContent({
       <View style={styles.calloutHeader}>
         <Text style={styles.calloutTitle}>{deviceId}</Text>
         <View
-          className={cn("px-2 py-0.5 rounded-full", stateConf.bgClass)}
-          style={{ borderWidth: 1, borderColor }}
+          style={[
+            styles.calloutBadge,
+            { borderColor, backgroundColor: borderColor + "33" },
+          ]}
         >
-          <Text className={cn("text-xs font-medium", stateConf.textClass)}>
+          <Text style={[styles.calloutBadgeText, { color: borderColor }]}>
             {stateLabel}
           </Text>
         </View>
@@ -683,6 +685,16 @@ const styles = StyleSheet.create({
     fontSize: 14,
     fontWeight: "600",
   },
+  calloutBadge: {
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 9999,
+    borderWidth: 1,
+  },
+  calloutBadgeText: {
+    fontSize: 12,
+    fontWeight: "500",
+  },
   calloutDescription: {
     fontSize: 12,
     color: "#687076",