diff --git a/src/screens/Onboarding/StepProfile/index.tsx b/src/screens/Onboarding/StepProfile/index.tsx index 85183f1b7b..8dc1747cc4 100644 --- a/src/screens/Onboarding/StepProfile/index.tsx +++ b/src/screens/Onboarding/StepProfile/index.tsx @@ -1,6 +1,7 @@ import React from 'react' import {View} from 'react-native' import {Image as ExpoImage} from 'expo-image' +import {ImageManipulator, SaveFormat} from 'expo-image-manipulator' import { type ImagePickerOptions, launchImageLibraryAsync, @@ -107,28 +108,33 @@ export function StepProfile() { }), ) - return (response.assets ?? []) - .slice(0, 1) - .filter(asset => { - if ( - !asset.mimeType?.startsWith('image/') || - (!asset.mimeType?.endsWith('jpeg') && - !asset.mimeType?.endsWith('jpg') && - !asset.mimeType?.endsWith('png') && - !asset.mimeType?.endsWith('webp')) - ) { - setError(_(msg`Only .jpg, .png, and .webp files are supported`)) - return false - } - return true + const asset = (response.assets ?? [])[0] + if (!asset) return [] + + try { + const context = ImageManipulator.manipulate(asset.uri) + const rendered = await context.renderAsync() + const result = await rendered.saveAsync({ + format: SaveFormat.JPEG, + compress: 1.0, }) - .map(image => ({ - mime: image.mimeType || 'image/jpeg', - height: image.height, - width: image.width, - path: image.uri, - size: getDataUriSize(image.uri), - })) + return [ + { + mime: 'image/jpeg', + height: rendered.height, + width: rendered.width, + path: result.uri, + size: getDataUriSize(result.uri), + }, + ] + } catch { + setError( + _( + msg`This image could not be used. Try a different format like .jpg or .png.`, + ), + ) + return [] + } }, [_, setError, sheetWrapper], )