not working in my project

[shekhar1911]

with expo its not working why?

[pranavbabu]

It is working in expo, could you please add more context?

[Jervi-sir]

It is working in expo, could you please add more context?

really?, m I missing something, I have encountered is error
(NOBRIDGE) ERROR Error: NitroModules are not supported in Expo Go! Use EAS (expo prebuild) or eject to a bare workflow instead. like we have to give up Expo managed environment :.(

[pranavbabu]

here is what I do in order to make it work: I use patch-package lib to make direct changes to lib, here is how patch looks:

diff --git a/node_modules/react-native-photo-editor/android/build.gradle b/node_modules/react-native-photo-editor/android/build.gradle
index 603a049..e80506a 100644
--- a/node_modules/react-native-photo-editor/android/build.gradle
+++ b/node_modules/react-native-photo-editor/android/build.gradle
@@ -44,7 +44,7 @@ repositories {
 
 dependencies {
     implementation 'com.facebook.react:react-native:+'
-    implementation 'com.github.prscX:photo-editor-android:master'
+    implementation 'com.github.Rauzon:photo-editor-android:v1.1.0'
     implementation 'fr.avianey.com.viewpagerindicator:library:2.4.1@aar'
     implementation 'com.nineoldandroids:library:2.4.0'
     implementation 'com.android.support:design:28.0.0'

and also I created withPhotoEditor.js plugin for expo, put it in plugins/withPhotoEditor.js folder

const fs = require("fs");
const path = require("path");
const { withAndroidManifest, withDangerousMod } = require("@expo/config-plugins");

// Function to modify the iOS Podfile properly inside the target block
function modifyPodfile(config) {
  return withDangerousMod(config, [
    "ios",
    async (config) => {
      const podfilePath = path.join(config.modRequest.platformProjectRoot, "Podfile");

      if (fs.existsSync(podfilePath)) {
        let podfileContent = fs.readFileSync(podfilePath, "utf-8");

        const newPods = `
  pod 'RNPhotoEditor', :path => '../node_modules/react-native-photo-editor/ios'
  pod 'iOSPhotoEditor', :git => 'https://github.com/prscX/photo-editor', :branch => 'master'
`;

        // Ensure it's inside the target block
        const targetRegex = /target\s+['"]Maindeck['"]\s+do([\s\S]*?)end/;
        const match = podfileContent.match(targetRegex);

        if (match) {
          const targetBlock = match[0];

          if (!targetBlock.includes("pod 'RNPhotoEditor'")) {
            const updatedTargetBlock = targetBlock.replace(/(use_react_native!\([\s\S]*?\))/, `$1\n${newPods}`);
            podfileContent = podfileContent.replace(targetBlock, updatedTargetBlock);
            fs.writeFileSync(podfilePath, podfileContent, "utf-8");
          }
        }
      }

      return config;
    },
  ]);
}

// Function to modify AndroidManifest.xml
function addExtraActivityToApplication(androidManifest) {
  const { manifest } = androidManifest;

  if (!Array.isArray(manifest["application"])) {
    console.warn("withIntentActivity: No application array in manifest?");
    return androidManifest;
  }

  const application = manifest["application"].find(
    (item) => item.$["android:name"] === ".MainApplication"
  );

  if (!application) {
    console.warn("withIntentActivity: No .MainApplication?");
    return androidManifest;
  }

  if (!Array.isArray(application["activity"])) {
    console.warn("withIntentActivity: No activity array in .MainApplication?");
    return androidManifest;
  }

  const photoeditorActivity = {
    $: {
      "android:name": "com.ahmedadeltito.photoeditor.PhotoEditorActivity",
    },
  };

  application["activity"].push(photoeditorActivity);

  return androidManifest;
}

// Main config plugin
module.exports = function withPhotoEditor(config) {
  config = withAndroidManifest(config, (config) => {
    config.modResults = addExtraActivityToApplication(config.modResults);
    return config;
  });

  config = modifyPodfile(config);

  return config;
};

then reference it in app.json config like so:

    "plugins": [
      [
        "./plugins/withPhotoEditor.js"
      ],

then run expo prebuild to get fresh ios or android folders, but Expo Go is not working, it works with Expo Build and you can ignore ios and android folders when you push code to EAS and it will work.

[xqz-u]

Hi @pranavbabu, and thank you for sharing your code! I have a couple of issues when using it in my Expo project.

I suspect your Expo plugin and patch refer to prscX/react-native-photo-editor and not to NitrogenZLab/react-native-photo-editor (this very repo), or am I wrong?

I build locally with EAS with the following command: bun run EAS_LOCAL_BUILD_SKIP_CLEANUP=1 eas build --local --clear-cache then I append -p android --profile development or -p ios --profile ios-simulator for Android and iOS, respectively; this information should not be crucial, I just add it for context.

For the iOS emulator I am able to produce a dev build. However, when I try to use PhotoEditor in my Expo app like so:

import { Button, View } from 'react-native';
import PhotoEditor from 'react-native-photo-editor';
import { useLocalSearchParams } from 'expo-router';

const ImagePreview = () => {
  const { imageUri } = useLocalSearchParams<{ imageUri: string; }>();

  // ...


  const handleEdit = useCallback(() => {
    // Alert.alert('Edit', 'Image editing functionality coming soon!');
    PhotoEditor.Edit({
      path: imageUri,
      onDone: imagePath => {
        console.log(`Done editing image at: ${imagePath}`);
      },
    });
  }, [imageUri]);

  return (
    <View>
      // ...
      <Button title='Edit' onPress={handleEdit} />
    </View>
  );
}

I get ERROR TypeError: Cannot read property 'Edit' of null, js engine: hermes.

On the other hand, on Android I am not even able to build the project, which fails with the following message:

[RUN_GRADLEW] > Task :app:mergeDebugResources FAILED
[RUN_GRADLEW] /Users/xqz-u/.gradle/caches/8.13/transforms/429888db8e5916503c7ec8b30991ae80/transformed/material-1.12.0/res/values/values.xml:8110:4: Duplicate value for resource 'attr/labelVisibilityMode' with config 'DEFAULT' and product ''. Resource was previously defined here: com.VAPP.dev.debug.app-mergeDebugResources-72:/values/values.xml:10539: .
[RUN_GRADLEW] > Task :app:parseDebugLocalResources
[RUN_GRADLEW] [Incubating] Problems report is available at: file:///Users/xqz-u/work/VAPP/builds/build/android/build/reports/problems/problems-report.html
[RUN_GRADLEW] FAILURE: Build failed with an exception.
[RUN_GRADLEW] * What went wrong:
[RUN_GRADLEW] Execution failed for task ':app:mergeDebugResources'.
[RUN_GRADLEW] > A failure occurred while executing com.android.build.gradle.internal.res.ResourceCompilerRunnable
[RUN_GRADLEW]    > Resource compilation failed (Failed to compile values resource file /Users/xqz-u/work/VAPP/builds/build/android/app/build/intermediates/incremental/debug/mergeDebugResources/merged.dir/values/values.xml. Cause: java.lang.IllegalStateException: Can not add resource (com.android.aaptcompiler.ParsedResource@5093c9dc) to table.). Check logs for more details.
[RUN_GRADLEW] * Try:
[RUN_GRADLEW] > Run with --stacktrace option to get the stack trace.
[RUN_GRADLEW] > Run with --info or --debug option to get more log output.
[RUN_GRADLEW] > Run with --scan to get full insights.
[RUN_GRADLEW] > Get more help at https://help.gradle.org.
[RUN_GRADLEW] BUILD FAILED in 6m 16s

Do you have any clue how to fix this? Thanks!

[pranavbabu]

Oh sorry, you are right, I'm using different library and don't have any exp with this one...

[taufan-colliers]

Hi @pranavbabu What library are you using now?

[pranavbabu]

Hi @pranavbabu What library are you using now?

Hey, this one https://github.com/prscX/react-native-photo-editor