Setting up Pintura Image Editor with React Native

For a quick start use the React Native example project project as a guideline.

Installation

Pintura is a web based image editor and makes extensive use of web technology, this means it cannot be rendered as a native component. The React Native version of Pintura is rendered in a WebView and communication between the WebView and the app itself is abstracted away by a proxy component.

Because Pintura runs in a WebView all communication has to be stringified. This means that image and video files will have to be sent as Data URLs.

Files created by Pintura are also sent back to the React Native layer encoded as base64 Data URLs.

To conserve memory the proxy component removes the src and dest property from the value returned by the onLoad callback and removes the src property from the value returned by the onProcess callback.

The React Native <PinturaEditor> component loads all the editor default settings and plugins and can then be used in the same manner as the non-native React component.

After installing or updating the @pqina/pintura or @pqina/pintura-video modules we need to run npm rebuild to rebuild the internal WebView component.

Please note that after installing @pqina/pintura-video and running npm rebuild no additional configuration is needed, the editor can then read and write video data.

Usage

import PinturaEditor from './PinturaEditor.js';

const editorStyle = { width: 300, height: 600 };

export default function App() {
    return (
        <View>
            <PinturaEditor
                style={editorStyle}
                src={'data:image/jpeg;base64,AB25987F=='}
                imageCropAspectRatio={1} />
        </View>
    );
}

export default App;

Events and properties

To handle events we can use camelcase props. This means that to listen for the Pintura Image Editor load event we have to set the onLoad prop.

<PinturaEditor onLoad={handleEvent} />

Except for src, properties can be used as we would with the normal JavaScript version of the editor.

<PinturaEditor
    imageCropAspectRatio={1}
    src={'data:image/jpeg;base64,AB25987F=='}
/>

Methods

To run editor methods we need to get a ref to the editor component. We can do so using the useRef hook. When the reference is set up we can access the editor instance.

export default function Example() {
    // get a reference to the PinturaEditor component
    const componentRef = useRef(null);

    const handleUndo = () => {
        // get reference to editor instance
        const { editor } = componentRef.current;

        // run history.undo()
        editor.history.undo();
    };

    return (
        <View>
            <Button onPress={handleUndo}>Undo</Button>

            <PinturaEditor
                ref={componentRef}
                src={'data:image/jpeg;base64,AB25987F=='}
            />
        </View>
    );
}

Styles

To pass custom styles to the editor we can use the styleRules property. This property passes the styles to the webview and adds them to the page.

export default function Example() {
    return (
        <View>
            <PinturaEditor
                styleRules={`
                    .pintura-editor {
                        --color-background: 0, 0, 0;
                        --color-foreground: 255, 255, 255;
                    }
                `}
                src={'data:image/jpeg;base64,AB25987F=='}
            />
        </View>
    );
}

Next steps

With the editor set up, we can continue to configure the editor to our liking by adjusting the available options exposed by the editor API