# Setting up Pintura Image Editor with React Native

For a quick start use the [React Native Expo example project](https://github.com/pqina/pintura-example-react-native-expo) project as a guideline.

Pintura also works without Expo, but as the React Native team advises using Expo, and setting up React Native without a framework can be incredibly tricky, the [non-framework React Native integration](https://github.com/pqina/pintura-example-react-native) has been deprecated.

## Installation

Pintura is a web based image editor and thus 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](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics%5Fof%5FHTTP/Data%5FURLs).

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

```jsx
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](../../api/ui/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.

```jsx
<PinturaEditor onLoad={handleEvent} />
```

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

```jsx
<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.

```jsx
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](../../customization/) to the editor we can use the `styleRules` property. This property passes the styles to the webview and adds them to the page.

```jsx
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](../../api/image-editor/)