diff --git a/package-lock.json b/package-lock.json
index 5779e1b..368b961 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,8 +29,12 @@
         "prettier": "3.4.2",
         "react": "19.0.0",
         "react-native": "0.77.0",
+        "react-native-safe-area-context": "^5.0.0",
         "typescript": "5.7.3",
         "typescript-eslint": "^8.21.0"
+      },
+      "peerDependencies": {
+        "react-native-safe-area-context": ">=4.0.0"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -9635,6 +9639,17 @@
         }
       }
     },
+    "node_modules/react-native-safe-area-context": {
+      "version": "5.8.0",
+      "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-5.8.0.tgz",
+      "integrity": "sha512-t+ZsAVzY/wWzzx34vqGbo3/as9EEESJdbyZNL7Yg5EYX+toYMtMqFoDDCvqZUi35eeGVsXc6pAaEk4edMwbuCQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native/node_modules/@react-native/virtualized-lists": {
       "version": "0.77.0",
       "resolved": "https://registry.npmjs.org/@react-native/virtualized-lists/-/virtualized-lists-0.77.0.tgz",
diff --git a/package.json b/package.json
index c38ee05..c380fab 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,9 @@
     "url": "https://github.com/dev-yakuza/react-native-image-modal/issues"
   },
   "homepage": "https://github.com/dev-yakuza/react-native-image-modal#readme",
+  "peerDependencies": {
+    "react-native-safe-area-context": ">=4.0.0"
+  },
   "devDependencies": {
     "@eslint/js": "^9.19.0",
     "@types/react": "19.0.8",
@@ -57,6 +60,7 @@
     "prettier": "3.4.2",
     "react": "19.0.0",
     "react-native": "0.77.0",
+    "react-native-safe-area-context": "^5.0.0",
     "typescript": "5.7.3",
     "typescript-eslint": "^8.21.0"
   }
diff --git a/src/components/ImageDetail/components/Header/index.tsx b/src/components/ImageDetail/components/Header/index.tsx
index 8ab0951..5e24ace 100644
--- a/src/components/ImageDetail/components/Header/index.tsx
+++ b/src/components/ImageDetail/components/Header/index.tsx
@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react'
 
-import { Animated, SafeAreaView, StatusBar, StyleSheet, Text, TouchableOpacity } from 'react-native'
+import { Animated, StatusBar, StyleSheet, Text, TouchableOpacity } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
 
 const styles = StyleSheet.create({
   closeButton: {