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.
The Pintura video extension is aimed at editing short videos, combined with the base64 encoding of src
and dest
files needed for React Native, large or long video files can cause devices to crash.
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