Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Crop result wrong on iOS 16.3

Open
#163 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
48/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Quiet
Tech stack
ios, javascript, react-native
Domain
mobile

Research direction

Start at the handlePress entry point and its ImageEditor.cropImage call, then compare the image URI produced by react-native-vision-camera with one from expo-image-picker on the listed iOS environment. Reproduce the crop using the provided ratios and crop data; done means the result matches the selected area on iOS without regressing the other platforms.

Written by the indexing model from the issue text.

Description

Environment

Phisical Device: iPhone 13 Pro Max
OS: iOS 16.2.7

Project:
"react-native": "0.74.3",
"@react-native-community/image-editor": "^4.2.0",
"expo": "~51.0.23",
"react-native-vision-camera": "^4.5.1",

Description

The crop result is outside what was expected

*This code works perfectly in all other devices/emulators and OS versions, for both Android, iOS.

This bug only happen when I got a picture from react native vision camera, when picked with expo-image-picker, it works fine!

The green toast in end of the video is:
Original Image Height and Image Width

Image crop area Height and Width
Position X and Y above the Image crop area

https://github.com/user-attachments/assets/ab1b5711-82ed-4dcc-88b7-6cec8b45e4f8

Reproducible Demo

  const handlePress = async () => {
    try {
      setTranscriptionLoading(true);
      const widthRatio = image.width / imageLayout.width;
      const heightRatio = image.height / imageLayout.height;

      const cropData: ImageCropData = {
        offset: { x: cropX.value * widthRatio, y: cropY.value * heightRatio },
        size: { width: cropWidth.value * widthRatio, height: cropHeight.value * heightRatio },
        resizeMode: "cover",
        format: "webp",
        quality: Platform.OS === "ios" ? 0.5 : 0.9,
        includeBase64: false,
      };

      const croppedImageUri: CropResult = await ImageEditor.cropImage(image.uri, cropData);

      handleTranscription(croppedImageUri);
    } catch (error) {
      console.error("Crop Error", error);
      Toast.show({ type: "error", text1: "Erro ao processar imagem" });
    }
  };
Dominant language
Kotlin
Stars
447
Forks
118
Avg merge
1d 11h
Merged PRs (30d)
4

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from callstack/react-native-image-editor

All issues in callstack/react-native-image-editor

Similar issues

More Kotlin issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.