Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: docs compile 1.1.x #208

Closed
wants to merge 7 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .github/workflows/npm-publish.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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}}

6 changes: 6 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -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)


Expand Down
176 changes: 121 additions & 55 deletions README.MD
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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)
Expand All @@ -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

Expand All @@ -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: {
Expand Down Expand Up @@ -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: {
Expand Down Expand Up @@ -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: {
Expand Down Expand Up @@ -235,7 +301,7 @@ const options = {
},
watermarkTexts: [{
text: 'text marker normal',
positionOptions: {
position: {
position: Position.center,
},
style: {
Expand Down Expand Up @@ -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: {
Expand Down Expand Up @@ -340,7 +406,7 @@ Marker.markText({
},
waterMarkTexts: [{
text: 'hello world \n 你好',
positionOptions: {
position: {
position: Position.topLeft,
},
style: {
Expand All @@ -354,7 +420,7 @@ Marker.markText({
},
}, {
text: 'text marker normal',
positionOptions: {
position: {
position: Position.topRight,
},
style: {
Expand Down Expand Up @@ -394,7 +460,7 @@ Marker.markText({
},
waterMarkTexts: [{
text: 'hello world \n 你好',
positionOptions: {
position: {
position: Position.topLeft,
},
style: {
Expand All @@ -411,7 +477,7 @@ Marker.markText({
},
}, {
text: 'text marker normal',
positionOptions: {
position: {
position: Position.center,
},
style: {
Expand Down Expand Up @@ -535,7 +601,7 @@ Marker.markText({
},
watermarkTexts: [{
text: 'hello world \n 你好',
positionOptions: {
position: {
position: Position.topLeft,
},
style: {
Expand All @@ -558,7 +624,7 @@ Marker.markText({
},
}, {
text: 'hello world \n 你好',
positionOptions: {
position: {
position: Position.center,
},
style: {
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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:

Expand All @@ -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.
Expand Down
1 change: 1 addition & 0 deletions app.plugin.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
module.exports = require('./lib/commonjs/expo-plugin/withImageMarker');
4 changes: 2 additions & 2 deletions example/ios/Podfile.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
8 changes: 4 additions & 4 deletions example/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -492,7 +492,7 @@ function useViewModel() {
watermarkTexts: [
{
text,
positionOptions: {
position: {
position,
},
style: {
Expand Down Expand Up @@ -527,7 +527,7 @@ function useViewModel() {
},
{
text: 'text marker normal',
positionOptions: {
position: {
position: Position.center,
},
style: {
Expand Down Expand Up @@ -640,7 +640,7 @@ function useViewModel() {
watermarkTexts: [
{
text,
positionOptions: {
position: {
X,
Y,
},
Expand Down Expand Up @@ -674,7 +674,7 @@ function useViewModel() {
},
{
text,
positionOptions: {
position: {
X: 500,
Y: 600,
},
Expand Down
Loading