Installation

React Native Image Marker uses native code on iOS and Android and a Canvas 2D implementation on Web. Install it once; native targets must link and rebuild, while Web runs directly in the browser.

This page installs Core 2.1. Add only the optional toolchain package your workflow needs: Editor 0.3, Recipe 0.1, Node 0.1, or CLI 0.1.

Install the standalone package for a browser-only application.
Terminal window
```
npm install @image-marker/web@0.1.0
```
An existing Expo Web application may keep using react-native-image-marker; the standalone package is intended for a Web build that does not install React Native.
Install iOS pods when your project has an iOS target.
Terminal window
```
npx pod-install
```

Rebuild the native app.

npx react-native run-android
# or
npx react-native run-ios

Install the package and Expo’s development client.
Terminal window
```
npx expo install react-native-image-marker expo-dev-client
```
Build and install your native app locally.
Terminal window
```
npx expo run:android
# or
npx expo run:ios
```
Alternatively, create and install a development build with EAS Build.
Start the development server after the native app is installed.
Terminal window
```
npx expo start
```

Install the package.
Terminal window
```
npm install react-native-image-marker
```
Pass a browser-readable image source such as a URL, data URL, Blob, File, or { uri }.
```
const backgroundImage = { src: '/images/background.jpg' };
```
In Expo Web, convert a numeric bundled asset before passing it to Marker:
```
import { Asset } from 'expo-asset';

const backgroundImage = {
  src: { uri: Asset.fromModule(require('./background.jpg')).uri },
};
```
Add the resolver explicitly with npx expo install expo-asset if it is not already a direct dependency.
Import Marker from @image-marker/web and call Marker.markText, Marker.markImage, or Marker.mark. On Web, display or download result.uri.

Add your first watermark

Marker.markText renders one or more text layers and resolves with a structured result. result.uri is the generated native path or Web data URL.

import Marker, { ImageFormat, Position } from 'react-native-image-marker';

const result = await Marker.markText({
  backgroundImage: {
    src: require('./images/background.jpg'),
  },
  watermarkTexts: [
    {
      text: '© Acme Studio',
      position: {
        position: Position.bottomRight,
        X: 24,
        Y: 24,
      },
      style: {
        color: '#FFFFFF',
        fontSize: 28,
      },
    },
  ],
  filename: 'marked-photo',
  saveFormat: ImageFormat.jpg,
  quality: 92,
});

console.log(result.uri, result.jobId, result.durationMs);

For image-only or mixed layers, see Choose an API.

Accepted image sources

On iOS and Android, use the same source shapes you already use in React Native:

A bundled asset from require('./image.png')
A URI object or remote URI supported by React Native’s image loader
A complete data:image/...;base64,... data URL

On Web, use a URL string, { uri }, data URL, Blob, File, or loaded browser image. Remote URLs must permit CORS. Numeric React Native asset IDs must first be resolved to a URL.

Native JPEG, PNG, and supported WebP output is written to the platform cache directory. Web output is always a data URL; native ImageFormat.base64 also returns an in-memory data URL. The URI is always available as result.uri.