1

app/_layout.tsx

@@ -1,6 +1,7 @@
 import { Tabs } from 'expo-router';
 import { Ionicons } from '@expo/vector-icons';
 import { StatusBar } from 'expo-status-bar';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { useEffect } from 'react';
 import { useAuthStore } from '../store/authStore';
 
@@ -12,7 +13,7 @@ export default function RootLayout() {
   }, []);
 
   return (
-    <>
+    <SafeAreaProvider>
       <StatusBar style="dark" />
       <Tabs
         screenOptions={{
@@ -36,6 +37,6 @@ export default function RootLayout() {
           options={{ href: null }}
         />
       </Tabs>
-    </>
+    </SafeAreaProvider>
   );
 }

app/index.tsx

@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import {
-  View, FlatList, StyleSheet, SafeAreaView,
+  View, FlatList, StyleSheet,
   Text, TouchableOpacity, ActivityIndicator, Dimensions
 } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { useRouter } from 'expo-router';
 import { Ionicons } from '@expo/vector-icons';
 import { VideoCard } from '../components/VideoCard';
@@ -52,7 +53,7 @@ export default function HomeScreen() {
 
       <FlatList
         data={videos}
-        keyExtractor={item => item.bvid}
+        keyExtractor={(item, index) => `${item.bvid}-${index}`}
         numColumns={2}
         columnWrapperStyle={styles.row}
         contentContainerStyle={styles.list}

app/video/[bvid].tsx

@@ -1,8 +1,9 @@
 import React, { useState, useEffect } from 'react';
 import {
-  View, Text, ScrollView, StyleSheet, SafeAreaView,
+  View, Text, ScrollView, StyleSheet,
   TouchableOpacity, Image, ActivityIndicator
 } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { useLocalSearchParams, useRouter } from 'expo-router';
 import { Ionicons } from '@expo/vector-icons';
 import { VideoPlayer } from '../../components/VideoPlayer';