Is there going to be Expo Support?

[siniradam]

Hello,

Right now I'm stuck with Expo and can't find a decent photo selector for Expo. Expo's original photo selector only allows a single image at a time, other third part Expo media selectors do not support adding more photos options nor if you add through settings it does not update the selection immediately.

This module looks great but I can't use it with Expo, is it a possibility in the future?

[sean-m-oleary]

https://github.com/mwegener-com/with-rn-image-crop-picker

[iway1]

can confirm this plugin works great. Unfortunately it uses an outdated version of config plugins which makes expo mad. I have a local version that uses the latest version in my project in case anyone wants to copy / paste it:

/* eslint-disable @typescript-eslint/no-var-requires */
const {
    withPlugins,
    withProjectBuildGradle,
    withAppBuildGradle,
    withAndroidManifest,
    withInfoPlist,
    WarningAggregator,
} = require('@expo/config-plugins')
const {
    addPermission,
} = require('@expo/config-plugins/build/android/Permissions')

const withUpdateInfoPlist = (
    config,
    { photolibText, cameraText, microText } = {},
) => {
    const photoDescription =
        photolibText || 'Allow $(PRODUCT_NAME) to access your photo library'
    const CameraDescription =
        cameraText || 'Allow $(PRODUCT_NAME) to access your camera'
    const MicrophoneDescription =
        microText || 'Allow $(PRODUCT_NAME) to access your microphone'

    return withInfoPlist(config, (config) => {
        config.modResults.NSPhotoLibraryUsageDescription = photoDescription
        config.modResults.NSCameraUsageDescription = CameraDescription
        config.modResults.NSMicrophoneUsageDescription = MicrophoneDescription

        return config
    })
}
const withUpdateAndroidManifest = (config) => {
    return withAndroidManifest(config, async (config) => {
        config.modResults = await setCustomConfigAsync(
            config,
            config.modResults,
        )
        return config
    })
}
async function setCustomConfigAsync(_config, androidManifest) {
    addPermission(androidManifest, 'android.permission.CAMERA')
    return androidManifest
}

const withUpdateAppBuildGradle = (config) => {
    return withAppBuildGradle(config, (config) => {
        if (config.modResults.language === 'groovy') {
            config.modResults.contents = setBuildscript(
                config.modResults.contents,
            )
        } else {
            WarningAggregator.addWarningAndroid(
                'android-google-services',
                `Cannot automatically configure project build.gradle if it's not groovy`,
            )
        }
        return config
    })
}

function setBuildscript(buildGradle) {
    let newBuildGradle = buildGradle
    if (!newBuildGradle.includes('vectorDrawables.useSupportLibrary = true')) {
        const newEntry = `defaultConfig {\n\t\tvectorDrawables.useSupportLibrary = true`
        newBuildGradle = newBuildGradle.replace(/defaultConfig\s?{/, newEntry)
    }

    return newBuildGradle
}

const withUpdateProjectBuildGradle = (config) => {
    return withProjectBuildGradle(config, (config) => {
        if (config.modResults.language === 'groovy') {
            config.modResults.contents = setBuildscriptProjectGradle(
                config.modResults.contents,
            )
        } else {
            WarningAggregator.addWarningAndroid(
                'android-google-services',
                `Cannot automatically configure project build.gradle if it's not groovy`,
            )
        }
        return config
    })
}

function setBuildscriptProjectGradle(buildGradle) {
    let newBuildGradle = buildGradle
    if (!newBuildGradle.includes("maven { url 'https://maven.google.com' }")) {
        const google = `allprojects {\n\trepositories {\n\t\tmaven { url 'https://maven.google.com' }`
        newBuildGradle = newBuildGradle.replace(
            /allprojects *{\n.*repositories\s?{/,
            google,
        )
    }
    if (!newBuildGradle.includes("maven { url 'https://www.jitpack.io' }")) {
        const jitpack = `allprojects {
            repositories {
                maven { url 'https://www.jitpack.io' }`
        newBuildGradle = newBuildGradle.replace(
            /allprojects *{\n.*repositories\s?{/,
            jitpack,
        )
    }

    return newBuildGradle
}

const withImageCropPicker = (
    config,
    {
        PhotoLibraryUsageDescription,
        CameraUsageDescription,
        MicrophoneUsageDescription,
    } = {},
) => {
    return withPlugins(config, [
        [
            withUpdateInfoPlist,
            {
                photolibText: PhotoLibraryUsageDescription,
                cameraText: CameraUsageDescription,
                microText: MicrophoneUsageDescription,
            },
        ],
        withUpdateProjectBuildGradle,
        withUpdateAppBuildGradle,
        withUpdateAndroidManifest,
    ])
}

module.exports = withImageCropPicker

[lucksp]

I assume this works ok with an EAS build?