Use React Native Photo Editor (RNPE)

March 15, 2022

🌄Image editor using native modules for iOS and Android. Inherit from 2 available libraries,ZLImageEditor(iOS) andPhotoEditor(Android)

Requirements

Swift 5.1+ (Xcode12.4+)
iOS 12+

Installation

yarn add @baronha/react-native-photo-editor

iOS

The Swift pod@baronha/react-native-photo-editordepends uponSDWebImageandSDWebImageWebPCoder, which do not define modules. To opt into those targets generating module maps (which is necessary to import them from Swift when building as static libraries), you may setuse_modular_headers!globally in your Podfile, or specify:modular_headers => truefor particular dependencies:

ios > podfile you can add this line into the top don’t forgot to use pod install

pod 'SDWebImage', :modular_headers => true
pod 'SDWebImageWebPCoder', :modular_headers => true

Then runcd ios/ && pod install

Don’t forget add file.swiftin your project (and create bridging header file swift).

Please check AlVelig answer https://stackoverflow.com/questions/52536380/why-do-i-get-ios-linker-errors-with-my-static-libraries

Note : if there is any error with run ios you can use the xcode and fix the float or double error in React Native Photo Editor library

App.js

import { StyleSheet,SafeAreaView, TouchableOpacity ,Text} from 'react-native'
import React from 'react'
import PhotoEditor from '@baronha/react-native-photo-editor';
const stickers = [];
const App = () => {
  const remoteURL =
  'https://images.unsplash.com/photo-1634915728822-5ad85582837a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=774&q=80';

  const onEdit = async () => { 
    try {
      const path = await PhotoEditor.open({
        path: remoteURL,
        stickers,
      })
      console.log('resultEdit', path);
    } catch (e) {
      console.log('e', e);
    }
  };

  return (
    <SafeAreaView style={style.container}>
      <TouchableOpacity style={style.Button} onPress={onEdit}>
          <Text>Open</Text>
      </TouchableOpacity>
    </SafeAreaView>
  )
}

export default App;
const style = StyleSheet.create({
  container: {
    flex:1,
    justifyContent:'center',
    alignItems:'center'
  },
  Button:{
    backgroundColor:'orange',
    padding: 10,
    width:100,
    alignItems:'center',
  }

 
});