chore(bump): upgrade to Expo SDK 54 (#84)

Co-authored-by: Claude <[email protected]>

Author: wataru-maeda

.cursor/rules/coding-guidelines.mdc

@@ -7,7 +7,7 @@ alwaysApply: true
 
 ## Project Overview
 
-React Native Expo SDK 53 project with TypeScript, Expo Router v5, Redux Toolkit, and modern development practices.
+React Native Expo SDK 54 project with TypeScript, Expo Router v6, Redux Toolkit, and modern development practices.
 
 ## Built-in Features to Always Use
 
@@ -96,6 +96,16 @@ React Native Expo SDK 53 project with TypeScript, Expo Router v5, Redux Toolkit,
 - Use descriptive test names
 - Mock external dependencies
 
+### SafeAreaView Usage
+
+- **Import from `react-native-safe-area-context`**, not React Native
+- React Native's SafeAreaView is deprecated as of SDK 54
+
+### Required Peer Dependencies
+
+- **@expo/metro-runtime** - Required for Expo Router
+- **react-native-worklets** - Required for React Native Reanimated
+
 ## Built-in Architecture Patterns
 
 ### Navigation (Expo Router v5)
@@ -170,10 +180,10 @@ React Native Expo SDK 53 project with TypeScript, Expo Router v5, Redux Toolkit,
 
 ## Migration and Updates
 
-- Currently on Expo SDK 53 with React 19
+- Currently on Expo SDK 54 with React 19.1
 - ESLint 9 with flat config
-- Modern React Native 0.79.5
-- TypeScript strict mode enabled
+- Modern React Native 0.81.4
+- TypeScript strict mode enabled (v5.9.2)
 
 ## Key Principles
 

.github/workflows/preview.yml

@@ -46,6 +46,10 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
+      # install platform-specific lightningcss binary for Linux
+      - name: Install lightningcss Linux binary
+        run: npm install lightningcss-linux-x64-gnu --save-optional
+
       # get branch name
       - name: Get branch name
         id: branch-name

CLAUDE.md

@@ -6,12 +6,12 @@ This React Native Expo project follows specific patterns and uses built-in featu
 
 **Technology Stack:**
 
-- React Native with Expo SDK 53
+- React Native with Expo SDK 54
 - TypeScript (strict mode)
-- Expo Router v5 (flat config)
+- Expo Router v6 (flat config)
 - Redux Toolkit for state management
 - ESLint 9 with flat config
-- React 19 and React Native 0.79.5
+- React 19.1 and React Native 0.81.4
 
 ## Always Use These Built-in Features
 
@@ -183,12 +183,14 @@ import { useDataPersist } from '@/hooks';
 
 ## Architecture Notes
 
-- Project recently upgraded to Expo SDK 53
-- Using modern React 19 features
+- Project upgraded to Expo SDK 54
+- Using React 19.1 with React Native 0.81.4
 - ESLint 9 with flat config
 - Directory "pages" was renamed to "scenes"
-- TypeScript strict mode enabled
+- TypeScript strict mode enabled (v5.9.2)
 - Custom theme system with dark/light support
+- SafeAreaView imported from react-native-safe-area-context (not React Native)
+- Required peer dependencies: @expo/metro-runtime, react-native-worklets
 
 ## Available Scripts
 

README.md

@@ -14,13 +14,13 @@
   <img src='https://github.com/wataru-maeda/react-native-boilerplate/blob/main/__DELELE_ME__/demo-dark-theme.gif' width='150px'>
 </p>
 
-Say goodbye to time-consuming setup tasks like restructuring files, installing libraries, and crafting reusable components. Our project boilerplate is your solution to eliminate redundant work when starting from scratch. Built with the latest Expo SDK 53, React 19, and modern development practices, it includes only the most commonly-used libraries, so you can hit the ground running with a fully configured setup.
+Say goodbye to time-consuming setup tasks like restructuring files, installing libraries, and crafting reusable components. Our project boilerplate is your solution to eliminate redundant work when starting from scratch. Built with the latest Expo SDK 54, React 19.1, and modern development practices, it includes only the most commonly-used libraries, so you can hit the ground running with a fully configured setup.
 
 ## 🎯 Pre-configured Features
 
-- 📱 **Expo SDK 53** with React 19 and React Native 0.79.5
+- 📱 **Expo SDK 54** with React 19.1 and React Native 0.81.4
 - 🏗️ **New Architecture** enabled by default for optimal performance
-- 🧭 **Expo Router v5** with flat config for file-based routing
+- 🧭 **Expo Router v6** with flat config for file-based routing
 - 🎨 **Light/Dark theme** support with automatic detection
 - 🔄 **Redux Toolkit** for predictable state management
 - 📦 **Environment configuration** with dotenvx for dev/staging/prod

components/layouts/DrawerContents/DrawerContents.tsx

@@ -1,4 +1,5 @@
-import { StyleSheet, SafeAreaView, View, Text } from 'react-native';
+import { StyleSheet, View, Text } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import useColorScheme from '@/hooks/useColorScheme';
 import { colors } from '@/theme';