`feat: added search functionality to SearchScreen.js, updated package…

….json and removed eas.json`

netflix-clone/package.json

@@ -20,6 +20,7 @@
     "expo-av": "~15.0.1",
     "expo-screen-orientation": "~8.0.0",
     "expo-status-bar": "~2.0.0",
+    "expo-video": "~2.0.2",
     "goflix": "file:",
     "nativewind": "^2.0.11",
     "postcss": "^8.4.31",
@@ -28,8 +29,7 @@
     "react-native-gesture-handler": "~2.20.2",
     "react-native-safe-area-context": "4.12.0",
     "react-native-screens": "~4.1.0",
-    "tailwindcss": "^3.3.2",
-    "expo-video": "~2.0.2"
+    "tailwindcss": "^3.3.2"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0"

netflix-clone/screens/SearchScreen.js

@@ -1,18 +1,56 @@
-import { View, Text, TextInput, ScrollView, TouchableOpacity, Dimensions } from 'react-native';
+import { View, Text, TextInput, ScrollView, TouchableOpacity, Image } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { Ionicons } from '@expo/vector-icons';
-import { useState } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { horizontalScale, verticalScale, moderateScale } from '../utils/dimensions';
+import { useNavigation } from '@react-navigation/native';
 
 export default function SearchScreen() {
   const [searchQuery, setSearchQuery] = useState('');
+  const [allMovies, setAllMovies] = useState([]);
+  const navigation = useNavigation();
+
+  // Load all movies from database
+  useEffect(() => {
+    const loadMovies = () => {
+      try {
+        const data = require('../db.json');
+        const movies = data.categories.reduce((acc, category) => {
+          return [...acc, ...category.movies];
+        }, []);
+        setAllMovies(movies);
+      } catch (error) {
+        console.error('Error loading movies:', error);
+      }
+    };
+
+    loadMovies();
+  }, []);
+
+  // Filter movies based on search query
+  const filteredMovies = useMemo(() => {
+    if (!searchQuery.trim()) return [];
+
+    return allMovies.filter(movie => 
+      movie.title.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+  }, [searchQuery, allMovies]);
+
+  // Handle movie selection
+  const handleMoviePress = (movie) => {
+    navigation.navigate('Player', {
+      title: movie.title,
+      videoUrl: movie.videoUrl,
+      comments: movie.comments
+    });
+  };
 
   return (
     <SafeAreaView className="flex-1 bg-black">
       <View style={{ 
         margin: horizontalScale(16),
         marginTop: verticalScale(8),
-        marginBottom: verticalScale(8)
+        marginBottom: verticalScale(25)
       }}>
         <View className="flex-row items-center bg-gray-800 rounded-lg"
           style={{
@@ -44,14 +82,56 @@ export default function SearchScreen() {
           paddingBottom: verticalScale(20)
         }}
       >
-        <Text className="text-gray-400 text-center"
-          style={{
-            marginTop: verticalScale(16),
-            fontSize: moderateScale(14)
-          }}
-        >
-          Search for your favorite movies and TV shows
-        </Text>
+        {searchQuery.length === 0 ? (
+          <Text className="text-gray-400 text-center"
+            style={{
+              marginTop: verticalScale(16),
+              fontSize: moderateScale(14)
+            }}
+          >
+            Search for your favorite movies and TV shows
+          </Text>
+        ) : filteredMovies.length === 0 ? (
+          <Text className="text-gray-400 text-center"
+            style={{
+              marginTop: verticalScale(16),
+              fontSize: moderateScale(14)
+            }}
+          >
+            No results found for "{searchQuery}"
+          </Text>
+        ) : (
+          <View className="flex-row flex-wrap justify-between">
+            {filteredMovies.map((movie) => (
+              <TouchableOpacity
+                key={movie.id}
+                onPress={() => handleMoviePress(movie)}
+                style={{
+                  width: '48%',
+                  marginBottom: verticalScale(16)
+                }}
+              >
+                <Image
+                  source={{ uri: movie.imageUrl }}
+                  style={{
+                    width: '100%',
+                    height: verticalScale(200),
+                    borderRadius: moderateScale(8)
+                  }}
+                  className="mb-2"
+                />
+                <Text className="text-white"
+                  style={{
+                    fontSize: moderateScale(14)
+                  }}
+                  numberOfLines={2}
+                >
+                  {movie.title}
+                </Text>
+              </TouchableOpacity>
+            ))}
+          </View>
+        )}
       </ScrollView>
     </SafeAreaView>
   );