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.

Install the package.
Terminal window
```
npm install react-native-image-marker
```
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.
Call Marker.markText, Marker.markImage, or Marker.mark. On Web, the result is an image URL you can display or download.

Add your first watermark

Marker.markText renders one or more text layers and resolves with the generated image path.

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,
});

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 and PNG 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.