feat: Add media file size validation for images and videos and remove allowsEditing from image picker configurations.

Author: Exo1i

src/__tests__/components/TweetComposer.test.tsx

@@ -41,6 +41,10 @@ jest.mock('expo-image-picker', () => ({
   },
 }));
 
+jest.mock('expo-file-system', () => ({
+  getInfoAsync: jest.fn().mockResolvedValue({ exists: true, size: 1024 * 1024 }), // 1MB mock
+}));
+
 jest.mock('expo-video', () => {
   const addListener = jest.fn(() => ({ remove: jest.fn() }));
   const React = jest.requireActual('react');
@@ -280,7 +284,6 @@ describe('TweetComposer', () => {
         mediaTypes: ['images', 'videos'],
         allowsMultipleSelection: true,
         selectionLimit: 4,
-        allowsEditing: true,
         quality: 1,
         videoMaxDuration: 140,
         exif: false,
@@ -558,7 +561,6 @@ describe('TweetComposer', () => {
       expect(mockLaunchCamera).toHaveBeenCalledWith({
         mediaTypes: ['images'],
         quality: 1,
-        allowsEditing: true,
         exif: false,
       });
     });

src/components/ui/TweetComposer.tsx

@@ -16,6 +16,7 @@ import {
 
 import { Ionicons } from '@expo/vector-icons';
 import { useQueryClient } from '@tanstack/react-query';
+import * as FileSystem from 'expo-file-system/legacy';
 import * as ImagePicker from 'expo-image-picker';
 import { replaceTriggerValues } from 'react-native-controlled-mentions';
 import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -67,6 +68,26 @@ type TweetComposerProps = {
 const CHARACTER_LIMIT = 280;
 const MAX_CHARACTER_LIMIT = Math.ceil(CHARACTER_LIMIT / 100) * 100;
 
+const MAX_IMAGE_SIZE = 5 * 1024 * 1024;
+const MAX_VIDEO_SIZE = 10 * 1024 * 1024;
+
+const checkFileSize = async (
+  uri: string,
+  isVideo: boolean
+): Promise<{ valid: boolean; sizeMB?: number }> => {
+  try {
+    const info = await FileSystem.getInfoAsync(uri);
+    if (!info.exists || info.size === undefined || info.size === null) {
+      return { valid: true };
+    }
+    const maxSize = isVideo ? MAX_VIDEO_SIZE : MAX_IMAGE_SIZE;
+    const sizeMB = info.size / (1024 * 1024);
+    return { valid: info.size <= maxSize, sizeMB };
+  } catch {
+    return { valid: true };
+  }
+};
+
 export default function TweetComposer({
   visible,
   onClose,
@@ -138,28 +159,52 @@ export default function TweetComposer({
       });
 
       if (!result.canceled) {
-        const newAssets: Asset[] = result.assets.map((asset) => ({
-          id: asset.fileName || asset.uri,
-          uri: asset.uri,
-          fileName: asset.fileName ?? undefined,
-          mediaType: asset.duration ? 'video' : 'photo',
-          duration: asset.duration ? asset.duration / 1000 : undefined,
-        }));
+        const oversizedFiles: string[] = [];
+        const validAssets: Asset[] = [];
+
+        for (const asset of result.assets) {
+          const isVideo = !!asset.duration;
+          const sizeCheck = await checkFileSize(asset.uri, isVideo);
+
+          if (!sizeCheck.valid) {
+            const maxMB = isVideo ? 10 : 5;
+            oversizedFiles.push(
+              `${asset.fileName || 'File'} (${sizeCheck.sizeMB?.toFixed(1)}MB > ${maxMB}MB)`
+            );
+          } else {
+            validAssets.push({
+              id: asset.fileName || asset.uri,
+              uri: asset.uri,
+              fileName: asset.fileName ?? undefined,
+              mediaType: isVideo ? 'video' : 'photo',
+              duration: asset.duration ? asset.duration / 1000 : undefined,
+            });
+          }
+        }
+
+        if (oversizedFiles.length > 0) {
+          Alert.alert(
+            'File Too Large',
+            `The following files exceed size limits:\n${oversizedFiles.join('\n')}`
+          );
+        }
 
         const availableSlots = 4 - selectedAssets.length;
-        const assetsToAdd = newAssets
+        const assetsToAdd = validAssets
           .filter(
             (asset) =>
               !selectedAssets.some((a) => (a.fileName || a.id) === (asset.fileName || asset.id))
           )
           .slice(0, availableSlots);
 
-        setSelectedAssets([...assetsToAdd, ...selectedAssets]);
+        if (assetsToAdd.length > 0) {
+          setSelectedAssets([...assetsToAdd, ...selectedAssets]);
 
-        const newForAllPicked = assetsToAdd.filter(
-          (asset) => !allPickedAssets.some((a) => a.fileName === asset.fileName)
-        );
-        setAllPickedAssets([...allPickedAssets, ...newForAllPicked]);
+          const newForAllPicked = assetsToAdd.filter(
+            (asset) => !allPickedAssets.some((a) => a.fileName === asset.fileName)
+          );
+          setAllPickedAssets([...allPickedAssets, ...newForAllPicked]);
+        }
       }
     } finally {
       setIsPickingMedia(false);
@@ -283,6 +328,16 @@ export default function TweetComposer({
 
       if (!result.canceled) {
         const asset = result.assets[0];
+        const sizeCheck = await checkFileSize(asset.uri, false);
+
+        if (!sizeCheck.valid) {
+          Alert.alert(
+            'Image Too Large',
+            `This image is ${sizeCheck.sizeMB?.toFixed(1)}MB. Maximum size is 5MB.`
+          );
+          return;
+        }
+
         const newAsset: Asset = {
           id: asset.uri,
           uri: asset.uri,
@@ -317,6 +372,16 @@ export default function TweetComposer({
 
       if (!result.canceled) {
         const asset = result.assets[0];
+        const sizeCheck = await checkFileSize(asset.uri, true);
+
+        if (!sizeCheck.valid) {
+          Alert.alert(
+            'Video Too Large',
+            `This video is ${sizeCheck.sizeMB?.toFixed(1)}MB. Maximum size is 10MB.`
+          );
+          return;
+        }
+
         const newAsset: Asset = {
           id: asset.uri,
           uri: asset.uri,