Does react-native supports Pintura Editor? - react-native

Question

I want to use Pintura Editor in my react-native project, But it's not working and also didn't getting any error.
I am not able to understand where i am going wrong and does react-native supports Pintura ?
Is there any way i can solve this issue?
Any lead would be highly appreciated. Thank you in advance.

Answer 1

React-Native doesn't supports Pintura Editor yet. But we can use pintura with WebView, as Pintura is based on html technologies it will have to run in a WebView to work. Here is an example
Pintura_Editor.js
import { WebView } from 'react-native-webview';
import { View } from 'react-native';
import React, { forwardRef, useRef, useEffect,useState } from 'react';
const noop = () => {};
//For Making First letter uppercase.
const upperCaseFirstLetter = (str) => str.charAt(0).toUpperCase() + str.slice(1);
// PATH_TO_PINTURA.HTML file (need to download paid version)
const PinturaEditorProxy = require('./pintura.html');
const Editor = forwardRef((props, ref) => {
const { style, ...options } = props;
const webViewRef = useRef(null);
const [isStatus, setStatus] = useState(false)
setInterval(()=> {
setStatus(true)
}, 3000)
// this passes options to the editor
useEffect(() => {
clearInterval();
// setup proxy to call functions on editor
const handler = {
get: (target, prop) => {
if (prop === 'history') return new Proxy({ group: 'history' }, handler);
return (...args) => {
const name = [target.group, prop].filter(Boolean).join('.');
webViewRef.current.postMessage(
JSON.stringify({
fn: [name, ...args],
})
);
};
},
};
webViewRef.current.editor = new Proxy({}, handler);
// post new options
webViewRef.current.postMessage(JSON.stringify({ options: options }));
},[isStatus]);
return (
<View ref={ref} style={style}>
<WebView
ref={webViewRef}
javaScriptEnabled={true}
scrollEnabled={false}
domStorageEnabled={true}
allowFileAccess={true}
allowUniversalAccessFromFileURLs={true}
allowsLinkPreview={false}
automaticallyAdjustContentInsets={false}
originWhitelist={['*']}
textZoom={100}
source={PinturaEditorProxy}
onMessage={async (event) => {
// message from WebView
const { type, detail } = JSON.parse(event.nativeEvent.data);
const handler = await options[`on${upperCaseFirstLetter(type)}`] || noop;
// call handler
handler(detail);
}}
/>
</View>
);
});
export default Editor;
Now, import this editor to your app.js
import PinturaEditor from 'PATH_TO_PINTURA_EDITOR'
const editorRef = null;
....
....
render() {
return (
<PinturaEditor
ref={editorRef}
style={{ margin:40, width: '80%', height: '80%', borderWidth: 2, borderColor: '#eee' }}
imageCropAspectRatio={1}
// Image should be base64 or blob type
src={base64Image}
onLoad={(img) => {
// do something
}}
onProcess={async (image) => {
// do something with edited image
}}
/>)
}