Expo - ImagePicker aspect on iOS not working. Square only

Question

The imagePicker component works well on both iOS and Android.

The aspect ratio works perfectly on android however doesn't work on iOS. I am using create-react-native-app and I don't want to eject and use another package.

I need to create three cropping options - Landscape, Square and Portrait. Right now I can only get square images.

I get square dimensions for width and height when taking a picture from the camera but getting the original image dimensions when selecting from gallery.

I'm using a sample piece of code. Let me know what can be done to fix this please or another package I could use to achieve this without ejecting. Many thanks.

import React, { Component } from 'react';
import { Button, Text, ScrollView, StyleSheet } from 'react-native';
import { ImagePicker, Permissions, Constants } from 'expo';

export default class App extends Component {
state = {
result: null,
};

askPermissionsAsync = async () => {
    await Permissions.askAsync(Permissions.CAMERA);
    await Permissions.askAsync(Permissions.CAMERA_ROLL);
    // you would probably do something to verify that permissions
    // are actually granted, but I'm skipping that for brevity
};

useLibraryHandler = async () => {
    await this.askPermissionsAsync();
    let result = await ImagePicker.launchImageLibraryAsync({
        allowsEditing: true,
        aspect: [12, 3],
        base64: false,
    });
    console.log(result.width, result.height, "result");
    this.setState({ result });
};

useCameraHandler = async () => {
    await this.askPermissionsAsync();
    let result = await ImagePicker.launchCameraAsync({
        allowsEditing: true,
        aspect: [12, 3],
        base64: false,
    });
    console.log(result.width, result.height, "result");
    this.setState({ result });
};

render() {
    return (
        <ScrollView style={{flex: 1}} contentContainerStyle={styles.container}>
            <Button title="launchCameraAsync" onPress={this.useCameraHandler} />
            <Button
                title="launchImageLibraryAsync"
                onPress={this.useLibraryHandler}
            />
            <Text style={styles.paragraph}>
                {JSON.stringify(this.state.result)}
            </Text>
        </ScrollView>
    );
}
}

Answer 1

You'll be returned with only square image in IOS

As mentioned in the expo docs.

aspect (array) -- An array with two entries [x, y] specifying the aspect ratio to maintain if the user is allowed to edit the image (by passing allowsEditing: true).

This is only applicable on Android, since on iOS the crop rectangle is always a square.

Therefore you need to manually resize the image by using react-native-image-resizer or any other alternative packages.