Migrate to Expo SDK 52 and replace expo-av with expo-video

app.json

@@ -1,8 +1,8 @@
 {
   "expo": {
-    "name": "sora",
-    "slug": "sora",
-    "version": "1.0.0",
+    "name": "aora",
+    "slug": "aora",
+    "version": "1.1.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "userInterfaceStyle": "light",
@@ -11,7 +11,7 @@
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
-    "scheme": "sora",
+    "scheme": "aora",
     "assetBundlePatterns": ["**/*"],
     "ios": {
       "supportsTablet": true

app/(tabs)/create.jsx

@@ -1,7 +1,5 @@
 import { useState } from "react";
 import { router } from "expo-router";
-import { ResizeMode, Video } from "expo-av";
-import * as DocumentPicker from "expo-document-picker";
 import { SafeAreaView } from "react-native-safe-area-context";
 import {
   View,
@@ -11,6 +9,7 @@ import {
   TouchableOpacity,
   ScrollView,
 } from "react-native";
+import * as ImagePicker from 'expo-image-picker';
 
 import { icons } from "../../constants";
 import { createVideoPost } from "../../lib/appwrite";
@@ -28,11 +27,11 @@ const Create = () => {
   });
 
   const openPicker = async (selectType) => {
-    const result = await DocumentPicker.getDocumentAsync({
-      type:
-        selectType === "image"
-          ? ["image/png", "image/jpg"]
-          : ["video/mp4", "video/gif"],
+    let result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: selectType === 'image' ?   'images' : 'videos',
+      allowsEditing: true,
+      aspect: [4, 3],
+      quality: 1,
     });
 
     if (!result.canceled) {

app/(tabs)/home.jsx

@@ -6,11 +6,14 @@ import { images } from "../../constants";
 import useAppwrite from "../../lib/useAppwrite";
 import { getAllPosts, getLatestPosts } from "../../lib/appwrite";
 import { EmptyState, SearchInput, Trending, VideoCard } from "../../components";
+import { useGlobalContext } from "../../context/GlobalProvider";
 
 const Home = () => {
   const { data: posts, refetch } = useAppwrite(getAllPosts);
   const { data: latestPosts } = useAppwrite(getLatestPosts);
 
+  const { user } = useGlobalContext();
+
   const [refreshing, setRefreshing] = useState(false);
 
   const onRefresh = async () => {
@@ -47,7 +50,7 @@ const Home = () => {
                   Welcome Back
                 </Text>
                 <Text className="text-2xl font-psemibold text-white">
-                  JSMastery
+                  {user?.username}
                 </Text>
               </View>
 
@@ -85,4 +88,4 @@ const Home = () => {
   );
 };
 
-export default Home;
+export default Home;

app/_layout.jsx

@@ -2,6 +2,7 @@ import { useEffect } from "react";
 import { useFonts } from "expo-font";
 import "react-native-url-polyfill/auto";
 import { SplashScreen, Stack } from "expo-router";
+import "../global.css";
 
 import GlobalProvider from "../context/GlobalProvider";
 

babel.config.js

@@ -1,7 +1,9 @@
 module.exports = function (api) {
   api.cache(true);
   return {
-    presets: ["babel-preset-expo"],
-    plugins: ["nativewind/babel", "react-native-reanimated/plugin"],
+    presets: [
+      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
+      "nativewind/babel",
+    ],
   };
-};
+};

components/Trending.jsx

@@ -1,14 +1,15 @@
 import { useState } from "react";
-import { ResizeMode, Video } from "expo-av";
 import * as Animatable from "react-native-animatable";
 import {
   FlatList,
   Image,
   ImageBackground,
+  StyleSheet,
   TouchableOpacity,
 } from "react-native";
 
 import { icons } from "../constants";
+import { useVideoPlayer } from "expo-video";
 
 const zoomIn = {
   0: {
@@ -31,24 +32,26 @@ const zoomOut = {
 const TrendingItem = ({ activeItem, item }) => {
   const [play, setPlay] = useState(false);
 
+
+  const player = useVideoPlayer(item.video, player => {
+    player.loop = true;
+    player.play();
+  });
+
+
   return (
     <Animatable.View
       className="mr-5"
       animation={activeItem === item.$id ? zoomIn : zoomOut}
       duration={500}
     >
       {play ? (
-        <Video
-          source={{ uri: item.video }}
-          className="w-52 h-72 rounded-[33px] mt-3 bg-white/10"
-          resizeMode={ResizeMode.CONTAIN}
-          useNativeControls
-          shouldPlay
-          onPlaybackStatusUpdate={(status) => {
-            if (status.didJustFinish) {
-              setPlay(false);
-            }
-          }}
+        <VideoView
+          style={styles.customStyle}
+          player={player} 
+          allowsFullscreen 
+          allowsPictureInPicture 
+          nativeControls
         />
       ) : (
         <TouchableOpacity
@@ -102,3 +105,14 @@ const Trending = ({ posts }) => {
 };
 
 export default Trending;
+
+
+const styles = StyleSheet.create({
+  customStyle: {
+    width: 208, // Equivalent to w-52
+    height: 288, // Equivalent to h-72
+    borderRadius: 33, // Equivalent to rounded-[33px]
+    marginTop: 12, // Equivalent to mt-3
+    backgroundColor: 'rgba(255, 255, 255, 0.1)', // Equivalent to bg-white/10
+  },
+});

components/VideoCard.jsx

@@ -1,12 +1,17 @@
 import { useState } from "react";
-import { ResizeMode, Video } from "expo-av";
 import { View, Text, TouchableOpacity, Image } from "react-native";
 
 import { icons } from "../constants";
+import { useVideoPlayer, VideoView } from "expo-video";
 
 const VideoCard = ({ title, creator, avatar, thumbnail, video }) => {
   const [play, setPlay] = useState(false);
 
+  const player = useVideoPlayer(video, player => {
+    player.loop = true;
+    player.play();
+  });
+
   return (
     <View className="flex flex-col items-center px-4 mb-14">
       <View className="flex flex-row gap-3 items-start">
@@ -41,17 +46,12 @@ const VideoCard = ({ title, creator, avatar, thumbnail, video }) => {
       </View>
 
       {play ? (
-        <Video
-          source={{ uri: video }}
-          className="w-full h-60 rounded-xl mt-3"
-          resizeMode={ResizeMode.CONTAIN}
-          useNativeControls
-          shouldPlay
-          onPlaybackStatusUpdate={(status) => {
-            if (status.didJustFinish) {
-              setPlay(false);
-            }
-          }}
+        <VideoView
+          style={{ width: '100%',height: 240,borderRadius: 12 }}
+          player={player} 
+          allowsFullscreen 
+          allowsPictureInPicture 
+          nativeControls
         />
       ) : (
         <TouchableOpacity

global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

lib/appwrite.js

@@ -67,7 +67,7 @@ export async function createUser(email, password, username) {
 // Sign In
 export async function signIn(email, password) {
   try {
-    const session = await account.createEmailSession(email, password);
+    const session = await account.createEmailPasswordSession(email, password);
 
     return session;
   } catch (error) {
@@ -122,23 +122,29 @@ export async function signOut() {
 export async function uploadFile(file, type) {
   if (!file) return;
 
-  const { mimeType, ...rest } = file;
-  const asset = { type: mimeType, ...rest };
+  const asset = { 
+    name: file.fileName,
+    type: file.mimeType,
+    size: file.fileSize,
+    uri: file.uri
+  };
 
   try {
+
     const uploadedFile = await storage.createFile(
       appwriteConfig.storageId,
       ID.unique(),
       asset
     );
-
+    
     const fileUrl = await getFilePreview(uploadedFile.$id, type);
     return fileUrl;
   } catch (error) {
     throw new Error(error);
   }
 }
 
+
 // Get File Preview
 export async function getFilePreview(fileId, type) {
   let fileUrl;
@@ -167,6 +173,8 @@ export async function getFilePreview(fileId, type) {
   }
 }
 
+
+
 // Create Video Post
 export async function createVideoPost(form) {
   try {

metro.config.js

@@ -0,0 +1,7 @@
+const { getDefaultConfig } = require("expo/metro-config");
+const { withNativeWind } = require("nativewind/metro");
+
+const config = getDefaultConfig(__dirname);
+
+module.exports = withNativeWind(config, { input: "./global.css" });
+