I am using the expo-camera library to take a selfie image. The preview is mirrored but the saved image is reverted to the normal orientation. How do I prevent this effect from happening (I want the image to stay mirrored), or if I can't, how can I flip my image horizontally?

Here's what I have so far for taking pictures:

const takePic = async () => {
  if (cameraRef) {
    const photo = await cameraRef.current.takePictureAsync();
    setFrontProfile(photo.uri);
  }
};

I am using the expo-camera library to take a selfie image. The preview is mirrored but the saved image is reverted to the normal orientation. How do I prevent this effect from happening (I want the image to stay mirrored), or if I can't, how can I flip my image horizontally?

Here's what I have so far for taking pictures:

const takePic = async () => {
  if (cameraRef) {
    const photo = await cameraRef.current.takePictureAsync();
    setFrontProfile(photo.uri);
  }
};

• javascript
• reactjs
• react-native
• expo
• expo-camera

Share Improve this question Follow asked May 1, 2021 at 15:25 KenKen 1,48144 gold badges2323 silver badges4545 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

I know this was already answered by @Kartikey but I wanted to offer a direct answer to the authors question.

The example in the link @Kartikey gave had the rotation set to 90 not 180. My answer checks if the photo was from the front camera before applying the manipulation, and fits right into the given code nice and clean.

import { manipulateAsync, FlipType, SaveFormat } from 'expo-image-manipulator';

...

const takePic = async () => {
    if (!cameraRef) return;
    
    let photo = await cameraRef.takePictureAsync();

    if (cameraType === Camera.Constants.Type.front) {
        photo = await manipulateAsync(
            photo.localUri || photo.uri,
            [
                { rotate: 180 },
                { flip: FlipType.Vertical },
            ],
            { press: 1, format: SaveFormat.PNG }
        );
    }

    setFrontProfile(photo.uri);
};

Use ImageManipulator to flip it.

expo-camera give have by default function mirror

<CameraView
              style={styles.camera}
              ref={cameraRef}
              facing='front'
              ratio="1:1"
              mirror={true} //use this for stop the flip image 
            />