#### Example
```typescript
import Marker, { Position, TextBackgroundType } from "react-native-image-marker"
路路路
const options = {
// background image
backgroundImage: {
src: require('./images/test.jpg'),
scale: 1,
},
watermarkTexts: [{
text: 'text marker \n multline text',
positionOptions: {
position: Position.topLeft,
},
style: {
color: '#ff00ff',
fontSize: 30,
fontName: 'Arial',
shadowStyle: {
dx: 10,
dy: 10,
radius: 10,
color: '#008F6D',
},
textBackgroundStyle: {
padding: '10% 10%',
type: TextBackgroundType.none,
color: '#0FFF00',
},
},
}],
scale: 1,
quality: 100,
filename: 'test',
saveFormat: ImageFormat.png,
};
Marker.markText(options);
```
### Text background stretchX
#### API
[TextBackgroundType.stretchX](https://jimmydaddy.github.io/react-native-image-marker/enums/TextBackgroundType.html#stretchX)
#### Sample
#### Example
```typescript
import Marker, { Position, TextBackgroundType } from "react-native-image-marker"
路路路
const options = {
// background image
backgroundImage: {
src: require('./images/test.jpg'),
scale: 1,
},
watermarkTexts: [{
text: 'text marker \n multline text',
positionOptions: {
position: Position.topLeft,
},
style: {
color: '#FC0700',
fontSize: 30,
fontName: 'Arial',
shadowStyle: {
dx: 10,
dy: 10,
radius: 10,
color: '#008F6D',
},
textBackgroundStyle: {
padding: '10% 10%',
type: TextBackgroundType.stretchX,
color: '#0FFF00',
},
},
}],
scale: 1,
quality: 100,
filename: 'test',
saveFormat: ImageFormat.png,
};
Marker.markText(options);
```
### Text background stretchY
#### API
[TextBackgroundType.stretchY](https://jimmydaddy.github.io/react-native-image-marker/enums/TextBackgroundType.html#stretchY)
#### Sample
#### Example
```typescript
import Marker, { Position, TextBackgroundType } from "react-native-image-marker"
路路路
const options = {
// background image
backgroundImage: {
src: require('./images/test.jpg'),
scale: 1,
},
watermarkTexts: [{
text: 'text marker \n multline text',
positionOptions: {
position: Position.topLeft,
},
style: {
color: '#FC0700',
fontSize: 30,
fontName: 'Arial',
shadowStyle: {
dx: 10,
dy: 10,
radius: 10,
color: '#008F6D',
},
textBackgroundStyle: {
padding: '10% 10%',
type: TextBackgroundType.stretchY,
color: '#0FFF00',
},
},
}],
scale: 1,
quality: 100,
filename: 'test',
saveFormat: ImageFormat.png,
};
ImageMarker.markText(options);
```
### Text background border radius
#### API
[TextBackgroundType.cornerRadius](https://jimmydaddy.github.io/react-native-image-marker/enums/TextBackgroundType.html#cornerRadius)
#### Sample
#### Example
```typescript
import Marker, { Position } from "react-native-image-marker"
路路路
const options = {
// background image
backgroundImage: {
src: require('./images/test.jpg'),
scale: 1,
},
watermarkTexts: [{
text: 'text marker normal',
positionOptions: {
position: Position.center,
},
style: {
color: '#FC0700',
fontSize: 30,
fontName: 'Arial',
shadowStyle: {
dx: 10,
dy: 10,
radius: 10,
color: '#008F6D',
},
textBackgroundStyle: {
padding: '10%',
color: '#0fA',
cornerRadius: {
topLeft: {
x: '20%',
y: '50%',
},
topRight: {
x: '20%',
y: '50%',
},
},
},
},
}],
scale: 1,
quality: 100,
filename: 'test',
saveFormat: ImageFormat.png,
};
ImageMarker.markText(options);
```
### Text with shadow
#### API
[ShadowLayerStyle](https://jimmydaddy.github.io/react-native-image-marker/interfaces/ShadowLayerStyle.html)
#### Sample
#### Example
```typescript
import Marker, { Position, TextBackgroundType } from "react-native-image-marker"
路路路
const options = {
// background image
backgroundImage: {
src: require('./images/test.jpg'),
scale: 1,
},
watermarkTexts: [{
text: 'text marker \n multline text',
positionOptions: {
position: Position.topLeft,
},
style: {
color: '#F4F50A',
fontSize: 30,
fontName: 'Arial',
shadowStyle: {
dx: 10,
dy: 10,
radius: 10,
color: '#6450B0',
},
},
}],
scale: 1,
quality: 100,
filename: 'test',
saveFormat: ImageFormat.png,
};
Marker.markText(options);
```
### Multiple text watermarks
#### Sample
#### Example
```typescript
import Marker, { Position, TextBackgroundType } from "react-native-image-marker"
路路路
Marker.markText({
backgroundImage: {
src: require('./images/test.jpg'),
scale: 1,
},
waterMarkTexts: [{
text: 'hello world \n 浣犲ソ',
positionOptions: {
position: Position.topLeft,
},
style: {
color: '#BB3B20',
fontSize: 30,
fontName: 'Arial',
textBackgroundStyle: {
padding: '10% 10%',
color: '#0FFF00',
},
},
}, {
text: 'text marker normal',
positionOptions: {
position: Position.topRight,
},
style: {
color: '#6450B0',
fontSize: 30,
fontName: 'Arial',
textBackgroundStyle: {
padding: '10% 10%',
color: '#02FBBE',
},
},
}],
})
```
### Text rotation
#### Sample
#### Example
```typescript
import Marker, { Position, TextBackgroundType } from "react-native-image-marker"
路路路
Marker.markImage({
backgroundImage: {
src: require('./images/test.jpg'),
scale: 1,
},
watermarkImages: [{
src: require('./images/watermark.png'),
position: {
position: Position.topLeft,
},
}],
})
```
### Multiple icon watermarks
> Note: ***require Android >= N, iOS >= iOS 13***
#### API
[markImage](https://jimmydaddy.github.io/react-native-image-marker/classes/Marker.html#markImage)
#### Sample
#### Example
```typescript
import Marker, { Position, TextBackgroundType } from "react-native-image-marker"
路路路
Marker.markImage({
backgroundImage: {
src: require('./images/test.jpg'),
scale: 1,
},
watermarkImages: [{
src: require('./images/watermark.png'),
position: {
position: Position.topLeft,
},
}, {
src: require('./images/watermark1.png'),
position: {
position: Position.topRight,
},
}, {
src: require('./images/watermark2.png'),
position: {
position: Position.bottomCenter,
},
}],
})
```
### Background rotation
#### Sample
#### Example
```typescript
import Marker, { Position, TextBackgroundType } from "react-native-image-marker"
路路路
Marker.markImage({
backgroundImage: {
src: require('./images/test.jpg'),
scale: 1,
},
watermarkImages: [{
src: require('./images/watermark.png'),
position: {
position: Position.topLeft,
},
rotate: 30,
}],
});
```
### Transparent background
#### Sample
#### Example
```typescript
import Marker, { Position, TextBackgroundType } from "react-native-image-marker"
路路路
Marker.markImage({
backgroundImage: {
src: require('./images/test.jpg'),
scale: 1,
alpha: 0.5,
},
watermarkImages: [{
src: require('./images/watermark.png'),
position: {
position: Position.topLeft,
},
}],
});
```
### Transparent icon
#### Sample
#### Example
```typescript
import Marker, { Position, TextBackgroundType } from "react-native-image-marker"
路路路
Marker.markImage({
backgroundImage: {
src: require('./images/test.jpg'),
scale: 1,
},
watermarkImages: [{
src: require('./images/watermark.png'),
position: {
position: Position.topLeft,
},
alpha: 0.5,
}],
});
```
## Compatibility
| React Native Version | react-native-image-marker Version |
| ---------------------| --------------------------------- |
| < 0.60.0 | v0.5.2 or earlier |
| >= 0.60.0, ***iOS < 13, Android < N(API Level 24)*** | v1.0.x |
| 0.60.0 <= rn version < 0.73.0 | v1.1.x |
| >= 0.73.0, other cases | v1.2.0 or later |
> ***Note: This table is only applicable to major versions of react-native-image-marker. Patch versions should be backwards compatible.***
## Installation
* npm install react-native-image-marker --save
* link
* react-native link (RN version < 0.60.0)
* [auto link](https://github.com/react-native-community/cli/blob/main/docs/autolinking.md)(RN version > 0.60.0)
> **RN version < 0.60.0 please use v0.5.2 or older**
#### iOS Pod Install (RN version < 0.60.0)
You can use `pod` instead of `link`. Add following lines in your `Podfile`:
```ruby
pod 'RNImageMarker', :path => '../node_modules/react-native-image-marker'
```
## API
* [the latest version](https://jimmydaddy.github.io/react-native-image-marker/classes/Marker.html)
* [v1.0.x](https://github.com/JimmyDaddy/react-native-image-marker/wiki/v1.0.x)
* If you are using a version lower than 1.0.0, please go to [v0.9.2](https://github.com/JimmyDaddy/react-native-image-marker/wiki/0.9.2)
## Extra about Android decoding image
This library use [Fresco](https://github.com/facebook/fresco) to decode image on Android. You can set your configuration through [Configure Fresco in React Native](https://medium.com/in-the-hudl/configure-fresco-in-react-native-28c2bc7dcc4d)
* RN version < 0.60.0 use fresco v1.10.0
* RN version >= 0.60.0 use fresco v2.0.0 +
> [ref](https://github.com/facebook/react-native/blob/8cf9505bd27c5dade33b17cc177fa5ef1613dbcd/ReactAndroid/gradle.properties#L15)
## Save image to file
* If you want to save the new image result to the phone camera roll, just use the [CameraRoll-module from react-native](https://facebook.github.io/react-native/docs/cameraroll.html#savetocameraroll).
* If you want to save it to an arbitrary file path, use something like [react-native-fs](https://github.com/itinance/react-native-fs).
* For any more advanced needs, you can write your own (or find another) native module that would solve your use-case.
## Contributors
[@filipef101](https://github.com/filipef101)
[@mikaello](https://github.com/mikaello)
[@Peretz30](https://github.com/Peretz30)
[@gaoxiaosong](https://github.com/gaoxiaosong)
[@onka13](https://github.com/onka13)
[@OrangeFlavoredColdCoffee](https://github.com/OrangeFlavoredColdCoffee)
## Examples
[examples](https://github.com/JimmyDaddy/react-native-image-marker/tree/master/example)
If you want to run the example locally, you can do the following:
```bash
git clone git@github.com:JimmyDaddy/react-native-image-marker.git
cd ./react-native-image-marker
# Android
# Open an android emulator or connect a real device at first
yarn example android
# iOS
yarn example ios
```
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
[MIT](LICENSE)
---
* If this library is useful to you, please give me a 猸愶笍. 馃ぉ
* If there is any bug, please submit an issue 馃悰, or create a pull request 馃.
* If there is any problem about using this library, please contact me, or [open a QA discussion](https://github.com/JimmyDaddy/react-native-image-marker/discussions/categories/q-a). 馃
Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)