fix: 吹き出し内のNativeWind classNameをstyleに変換しレイアウトずれを修正

[TinyKitten]

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

https://claude.ai/code/session_013ZFH74Dyo4ghzS2KwvZfjX

Summary by CodeRabbit

リリースノート

• スタイル
  • マップ表示のバッジコンポーネントのスタイル定義を更新しました。バッジの外観とテキスト表示がより一貫した方法で管理されるようになります。

[coderabbitai]

Caution

Review failed

The pull request is closed.

📝 Walkthrough

ウォークスルー

app/(tabs)/map.tsxのコールアウトバッジのスタイリングをクラス名ベースのアプローチからRN Styleシート形式の明示的なスタイル配列に変更しました。バッジコンテナと テキストのスタイル定義を追加し、視覚的な表現を更新しています。

変更

コホート / ファイル	概要
コールアウトバッジスタイル更新 app/(tabs)/map.tsx	CalloutContentコンポーネント内のバッジコンテナをインラインスタイル配列 [styles.calloutBadge, { borderColor, backgroundColor: borderColor + "33" }] に変更。バッジテキストのスタイルも配列形式に更新。新しいスタイルシート定義（calloutBadge、calloutBadgeText）を追加。

推定コード レビュー作業量

🎯 2 (Simple) | ⏱️ ~8 分

関連する可能性のあるPR

• feat: マップ吹き出しに経過時間表示を追加 #24: 同じapp/(tabs)/map.tsxファイルのコールアウトレンダリングを修正しており、このPRのバッジスタイル変更と関連しています。
• feat: マップピンの吹き出しに状態タグ(到着/接近中/通過中/移動中)を表示 #13: このPRで変更されるコールアウトバッジUIと同じ要素に触れており、直接的な関連があります。

詩

🐰 バッジたちが新しい衣を纏い、
スタイル配列の庭で輝く、
インラインから解放されて、
より清潔な実装へ、
カラフルな境界線とともに踊る。 ✨

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch claude/fix-tooltip-positioning-UiPig

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}