Setting up Pintura Image Editor with React Native

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.

Files created by Pintura when used in the React Native WebView will be in encoded as a base64 dataURL. 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.

For a quick start use the React Native (Expo) example project included in the product package ('/presets/react native'). The React Native package only includes the normal inline editor component.

The React Native example project includes an HTML page (assets/pintura.html) that contains the editor and its styles. This page is automatically loaded in a WebView by the PinturaEditor.js component.

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.

import PinturaEditor from './PinturaEditor.js';

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

export default function App() {
    return (
        <View>
            <PinturaEditor
                style={editorStyle}
                src="./my-image.jpeg"
                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} />

Properties can be used as we would with the normal JavaScript version of the editor.

<PinturaEditor src="./my-image.jpeg" />

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="./image.jpeg" />
        </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="./image.jpeg"
            />
        </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