react-native

Does react-native supports Pintura Editor?


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.


Solution

  • 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
            }}
    />)
    }