chore: docs compile 1.1.x

.github/workflows/npm-publish.yml

@@ -15,7 +15,7 @@ jobs:
           registry-url: https://registry.npmjs.org/
       - run: npm install
       - run: npm run prepack
-      - run: npm publish
+      - run: npm publish --tag 1.1.x_latest
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_AUTH_TOKEN}}
 

CHANGELOG.md

@@ -1,5 +1,11 @@
 
 
+## [1.1.15](https://github.com/JimmyDaddy/react-native-image-marker/compare/v1.1.4...v1.1.15) (2024-01-26)
+
+### Features
+
+* expo support ([16c660b](https://github.com/JimmyDaddy/react-native-image-marker/commit/16c660b47790d27b69af10bf477d2a6f7d5bdeed))
+
 ## [1.1.14](https://github.com/JimmyDaddy/react-native-image-marker/compare/v1.1.13...v1.1.14) (2024-01-24)
 
 

README.MD

@@ -7,7 +7,7 @@
 </div>
 <div align="center">
 
-  [![npm version](https://img.shields.io/npm/v/react-native-image-marker.svg?logo=npm&style=for-the-badge&label=latest)](https://www.npmjs.com/package/react-native-image-marker) 
+  [![npm version](https://img.shields.io/npm/v/react-native-image-marker.svg?logo=npm&style=for-the-badge&label=latest)](https://www.npmjs.com/package/react-native-image-marker)
   [![npm](https://img.shields.io/npm/dm/react-native-image-marker?logo=npm&style=for-the-badge)](https://www.npmjs.com/package/react-native-image-marker) [![npm](https://img.shields.io/npm/dt/react-native-image-marker.svg?cacheSeconds=88660&logo=npm&label=total%20downloads&style=for-the-badge)](https://www.npmjs.com/package/react-native-image-marker)
   [![stars](https://img.shields.io/github/stars/jimmydaddy/react-native-image-marker?logo=github&style=for-the-badge)](https://github.com/JimmyDaddy/react-native-image-marker) [![forks](https://img.shields.io/github/forks/jimmydaddy/react-native-image-marker?logo=github&style=for-the-badge)](https://github.com/JimmyDaddy/react-native-image-marker/fork)
   [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?logo=github&style=for-the-badge)](https://github.com/JimmyDaddy/react-native-image-marker/pulls) ![license](https://img.shields.io/npm/l/react-native-image-marker?style=for-the-badge)
@@ -24,16 +24,54 @@
 > * 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). 🤔
 ---
 
+<!-- toc -->
+## Table of Contents
+
+* [Features](#features)
+* [Installation](#installation)
+  * [React Native](#react-native)
+  * [Expo](#expo)
+* [Compatibility](#compatibility)
+* [Usage](#usage)
+  * [Text background fit](#text-background-fit)
+  * [Text background stretchX](#text-background-stretchx)
+  * [Text background stretchY](#text-background-stretchy)
+  * [Text background border radius](#text-background-border-radius)
+  * [Text with shadow](#text-with-shadow)
+  * [Multiple text watermarks](#multiple-text-watermarks)
+  * [Text rotation](#text-rotation)
+  * [Icon watermarks](#icon-watermarks)
+  * [Multiple icon watermarks](#multiple-icon-watermarks)
+  * [Background rotation](#background-rotation)
+  * [Icon rotation](#icon-rotation)
+  * [Transparent background](#transparent-background)
+  * [Transparent icon](#transparent-icon)
+* [API](#api-6)
+* [Save image to file](#save-image-to-file)
+* [Contributors](#contributors)
+* [Examples](#examples)
+* [Contributing](#contributing)
+* [License](#license)
+
+<!-- tocstop -->
+
+<br/>
+
 ## Features
 
-* [Add **multiple text** watermarks to images](https://jimmydaddy.github.io/react-native-image-marker/interfaces/TextMarkOptions.html#watermarkTexts)
-* [Add **multiple icon** watermarks to images *(Android >= N, iOS >= iOS 13)*](https://jimmydaddy.github.io/react-native-image-marker/classes/Marker.html#markImage)
-* [Support **rotating** background image and icon watermarks.](https://jimmydaddy.github.io/react-native-image-marker/interfaces/ImageOptions.html#rotate)
-* [Support setting opacity for background image and icon watermarks.](https://jimmydaddy.github.io/react-native-image-marker/interfaces/ImageOptions.html#rotate)
-* Support base64 format
+<div>
+  <img align="right" width="25%" src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/assets/IOSMarker.gif" width='150'>
+  <img align="right" width="25%" src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/assets/AndroidMarker.gif" width='150'>
+</div>
+
+* [**Multiple text** watermarks](https://jimmydaddy.github.io/react-native-image-marker/interfaces/TextMarkOptions.html#watermarkTexts)
+* [**Multiple icon** watermarks](https://jimmydaddy.github.io/react-native-image-marker/classes/Marker.html#markImage)
+* [**Rotating** background and icon](https://jimmydaddy.github.io/react-native-image-marker/interfaces/ImageOptions.html#rotate)
+* [Setting transparency for background and icon](https://jimmydaddy.github.io/react-native-image-marker/interfaces/ImageOptions.html#rotate)
+* Base64
 * Flexible text style settings, including:
   * [Rotating](https://jimmydaddy.github.io/react-native-image-marker/interfaces/TextStyle.html#rotate)
-  * [Text shadow](https://jimmydaddy.github.io/react-native-image-marker/interfaces/ShadowLayerStyle.html)
+  * [Shadow](https://jimmydaddy.github.io/react-native-image-marker/interfaces/ShadowLayerStyle.html)
   * Background color
   * [Italic](https://jimmydaddy.github.io/react-native-image-marker/interfaces/TextStyle.html#italic)
   * [Bold](https://jimmydaddy.github.io/react-native-image-marker/interfaces/TextStyle.html#bold)
@@ -43,13 +81,41 @@
   * Relative position
   * [Background border radius](https://jimmydaddy.github.io/react-native-image-marker/interfaces/TextBackgroundStyle.html#cornerRadius)
 * Compatible with both Android and iOS
+* Expo
 
-## Sample
+## Installation
 
-<p>
- <img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/assets/IOSMarker.gif" width='150'>
- <img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/assets/AndroidMarker.gif" width='150'>
-</p>
+#### React Native
+
+```shell
+# npm
+npm install react-native-image-marker --save
+
+# yarn
+yarn add react-native-image-marker
+```
+
+#### Expo
+
+```shell
+# install
+npx expo install react-native-image-marker
+
+# compile
+npx expo prebuild
+
+```
+
+## 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.***
 
 ## Usage
 
@@ -76,8 +142,8 @@ const options = {
     scale: 1,
   },
   watermarkTexts: [{
-    text: 'text marker \n multline text',
-    positionOptions: {
+    text: 'text marker \n multiline text',
+    position: {
       position: Position.topLeft,
     },
     style: {
@@ -129,8 +195,8 @@ const options = {
     scale: 1,
   },
   watermarkTexts: [{
-    text: 'text marker \n multline text',
-    positionOptions: {
+    text: 'text marker \n multiline text',
+    position: {
       position: Position.topLeft,
     },
     style: {
@@ -181,8 +247,8 @@ const options = {
     scale: 1,
   },
   watermarkTexts: [{
-    text: 'text marker \n multline text',
-    positionOptions: {
+    text: 'text marker \n multiline text',
+    position: {
       position: Position.topLeft,
     },
     style: {
@@ -235,7 +301,7 @@ const options = {
   },
   watermarkTexts: [{
     text: 'text marker normal',
-    positionOptions: {
+    position: {
       position: Position.center,
     },
     style: {
@@ -296,8 +362,8 @@ const options = {
     scale: 1,
   },
   watermarkTexts: [{
-    text: 'text marker \n multline text',
-    positionOptions: {
+    text: 'text marker \n multiline text',
+    position: {
       position: Position.topLeft,
     },
     style: {
@@ -340,7 +406,7 @@ Marker.markText({
   },
   waterMarkTexts: [{
     text: 'hello world \n 你好',
-    positionOptions: {
+    position: {
       position: Position.topLeft,
     },
     style: {
@@ -354,7 +420,7 @@ Marker.markText({
     },
   }, {
     text: 'text marker normal',
-    positionOptions: {
+    position: {
       position: Position.topRight,
     },
     style: {
@@ -394,7 +460,7 @@ Marker.markText({
   },
   waterMarkTexts: [{
     text: 'hello world \n 你好',
-    positionOptions: {
+    position: {
       position: Position.topLeft,
     },
     style: {
@@ -411,7 +477,7 @@ Marker.markText({
     },
   }, {
     text: 'text marker normal',
-    positionOptions: {
+    position: {
       position: Position.center,
     },
     style: {
@@ -535,7 +601,7 @@ Marker.markText({
   },
   watermarkTexts: [{
     text: 'hello world \n 你好',
-    positionOptions: {
+    position: {
       position: Position.topLeft,
     },
     style: {
@@ -558,7 +624,7 @@ Marker.markText({
     },
   }, {
     text: 'hello world \n 你好',
-    positionOptions: {
+    position: {
       position: Position.center,
     },
     style: {
@@ -655,33 +721,6 @@ Marker.markImage({
 });
 ```
 
-## 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, other cases | v1.1.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)
@@ -715,7 +754,9 @@ This library use [Fresco](https://github.com/facebook/fresco) to decode image on
 
 ## Examples
 
-[examples](https://github.com/JimmyDaddy/react-native-image-marker/tree/master/example)
+#### React Native
+
+[example](https://github.com/JimmyDaddy/react-native-image-marker/tree/master/example)
 
 If you want to run the example locally, you can do the following:
 
@@ -734,6 +775,31 @@ yarn example ios
 
 ```
 
+#### Expo
+
+[expo-example](https://github.com/JimmyDaddy/react-native-image-marker/tree/master/expo-example)
+
+If you want to run the example locally, you can do the following:
+
+```bash
+
+git clone [email protected]:JimmyDaddy/react-native-image-marker.git
+
+cd ./react-native-image-marker
+
+# Expo
+# install dependencies
+yarn
+
+# Android
+# Open an android emulator or connect a real device at first
+yarn expo-example android
+
+# iOS
+yarn expo-example ios
+
+```
+
 ## Contributing
 
 See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

app.plugin.js

@@ -0,0 +1 @@
+module.exports = require('./lib/commonjs/expo-plugin/withImageMarker');

example/ios/Podfile.lock

@@ -331,7 +331,7 @@ PODS:
     - glog
   - react-native-blob-util (0.19.6):
     - React-Core
-  - react-native-image-marker (1.1.11):
+  - react-native-image-marker (1.1.14):
     - React-Core
   - react-native-image-picker (5.7.0):
     - React-Core
@@ -617,7 +617,7 @@ SPEC CHECKSUMS:
   React-jsinspector: b6ed4cb3ffa27a041cd440300503dc512b761450
   React-logger: 186dd536128ae5924bc38ed70932c00aa740cd5b
   react-native-blob-util: d8fa1a7f726867907a8e43163fdd8b441d4489ea
-  react-native-image-marker: d58c3e046b75e3302fd4f365cd7c32051badfef2
+  react-native-image-marker: 372a979d762d27f85ac6c31715f4f419942052e1
   react-native-image-picker: 3269f75c251cdcd61ab51b911dd30d6fff8c6169
   React-perflogger: e706562ab7eb8eb590aa83a224d26fa13963d7f2
   React-RCTActionSheet: 57d4bd98122f557479a3359ad5dad8e109e20c5a

example/src/App.tsx

@@ -492,7 +492,7 @@ function useViewModel() {
           watermarkTexts: [
             {
               text,
-              positionOptions: {
+              position: {
                 position,
               },
               style: {
@@ -527,7 +527,7 @@ function useViewModel() {
             },
             {
               text: 'text marker normal',
-              positionOptions: {
+              position: {
                 position: Position.center,
               },
               style: {
@@ -640,7 +640,7 @@ function useViewModel() {
           watermarkTexts: [
             {
               text,
-              positionOptions: {
+              position: {
                 X,
                 Y,
               },
@@ -674,7 +674,7 @@ function useViewModel() {
             },
             {
               text,
-              positionOptions: {
+              position: {
                 X: 500,
                 Y: 600,
               },