diff --git a/CHANGELOG.md b/CHANGELOG.md
index bfb7b86..af83015 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,12 @@
+## [1.2.5](https://github.com/JimmyDaddy/react-native-image-marker/compare/v1.2.4...v1.2.5) (2024-01-26)
+
+
+### Features
+
+* expo support ([6c97c55](https://github.com/JimmyDaddy/react-native-image-marker/commit/6c97c5560e874b2e1509db34627c9775f71e9d7a))
+
## [1.2.4](https://github.com/JimmyDaddy/react-native-image-marker/compare/v1.2.3...v1.2.4) (2024-01-24)
diff --git a/README.MD b/README.MD
index 8c0907e..8d3ae2a 100644
--- a/README.MD
+++ b/README.MD
@@ -30,56 +30,24 @@
## Table of Contents
* [Features](#features)
+* [Installation](#installation)
+ * [React Native](#react-native)
+ * [Expo](#expo)
* [Compatibility](#compatibility)
-* [Sample](#sample)
* [Usage](#usage)
* [Text background fit](#text-background-fit)
- * [API](#api)
- * [Sample](#sample-1)
- * [Example](#example)
* [Text background stretchX](#text-background-stretchx)
- * [API](#api-1)
- * [Sample](#sample-2)
- * [Example](#example-1)
* [Text background stretchY](#text-background-stretchy)
- * [API](#api-2)
- * [Sample](#sample-3)
- * [Example](#example-2)
* [Text background border radius](#text-background-border-radius)
- * [API](#api-3)
- * [Sample](#sample-4)
- * [Example](#example-3)
* [Text with shadow](#text-with-shadow)
- * [API](#api-4)
- * [Sample](#sample-5)
- * [Example](#example-4)
* [Multiple text watermarks](#multiple-text-watermarks)
- * [Sample](#sample-6)
- * [Example](#example-5)
* [Text rotation](#text-rotation)
- * [Sample](#sample-7)
- * [Example](#example-6)
* [Icon watermarks](#icon-watermarks)
- * [Sample](#sample-8)
- * [Example](#example-7)
* [Multiple icon watermarks](#multiple-icon-watermarks)
- * [API](#api-5)
- * [Sample](#sample-9)
- * [Example](#example-8)
* [Background rotation](#background-rotation)
- * [Sample](#sample-10)
- * [Example](#example-9)
* [Icon rotation](#icon-rotation)
- * [Sample](#sample-11)
- * [Example](#example-10)
* [Transparent background](#transparent-background)
- * [Sample](#sample-12)
- * [Example](#example-11)
* [Transparent icon](#transparent-icon)
- * [Sample](#sample-13)
- * [Example](#example-12)
-* [Installation](#installation)
- * [iOS Pod Install (RN version < 0.60.0)](#ios-pod-install-rn-version--0600)
* [API](#api-6)
* [Save image to file](#save-image-to-file)
* [Contributors](#contributors)
@@ -89,16 +57,23 @@
+
+
## 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
+
+
+
+
-
-
-
-
## Usage
### Text background fit
@@ -152,7 +144,7 @@ const options = {
},
watermarkTexts: [{
text: 'text marker \n multiline text',
- positionOptions: {
+ position: {
position: Position.topLeft,
},
style: {
@@ -204,7 +196,7 @@ const options = {
},
watermarkTexts: [{
text: 'text marker \n multiline text',
- positionOptions: {
+ position: {
position: Position.topLeft,
},
style: {
@@ -255,7 +247,7 @@ const options = {
},
watermarkTexts: [{
text: 'text marker \n multiline text',
- positionOptions: {
+ position: {
position: Position.topLeft,
},
style: {
@@ -307,7 +299,7 @@ const options = {
},
watermarkTexts: [{
text: 'text marker normal',
- positionOptions: {
+ position: {
position: Position.center,
},
style: {
@@ -368,7 +360,7 @@ const options = {
},
watermarkTexts: [{
text: 'text marker \n multiline text',
- positionOptions: {
+ position: {
position: Position.topLeft,
},
style: {
@@ -410,7 +402,7 @@ Marker.markText({
},
waterMarkTexts: [{
text: 'hello world \n 你好',
- positionOptions: {
+ position: {
position: Position.topLeft,
},
style: {
@@ -424,7 +416,7 @@ Marker.markText({
},
}, {
text: 'text marker normal',
- positionOptions: {
+ position: {
position: Position.topRight,
},
style: {
@@ -464,7 +456,7 @@ Marker.markText({
},
waterMarkTexts: [{
text: 'hello world \n 你好',
- positionOptions: {
+ position: {
position: Position.topLeft,
},
style: {
@@ -481,7 +473,7 @@ Marker.markText({
},
}, {
text: 'text marker normal',
- positionOptions: {
+ position: {
position: Position.center,
},
style: {
@@ -605,7 +597,7 @@ Marker.markText({
},
watermarkTexts: [{
text: 'hello world \n 你好',
- positionOptions: {
+ position: {
position: Position.topLeft,
},
style: {
@@ -628,7 +620,7 @@ Marker.markText({
},
}, {
text: 'hello world \n 你好',
- positionOptions: {
+ position: {
position: Position.center,
},
style: {
@@ -725,21 +717,6 @@ Marker.markImage({
});
```
-## 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)
-
-### 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)
@@ -765,7 +742,9 @@ pod 'RNImageMarker', :path => '../node_modules/react-native-image-marker'
## 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:
@@ -787,6 +766,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 git@github.com: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.
diff --git a/app.plugin.js b/app.plugin.js
new file mode 100644
index 0000000..1227483
--- /dev/null
+++ b/app.plugin.js
@@ -0,0 +1,2 @@
+
+module.exports = require('./lib/commonjs/expo-plugin/withImageMarker');
diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
index 6464d85..ec7691d 100644
--- a/example/ios/Podfile.lock
+++ b/example/ios/Podfile.lock
@@ -946,7 +946,7 @@ PODS:
- React-debug
- react-native-blob-util (0.19.6):
- React-Core
- - react-native-image-marker (1.2.2):
+ - react-native-image-marker (1.2.4-beta.4):
- React-Core
- react-native-image-picker (5.7.0):
- React-Core
@@ -1360,7 +1360,7 @@ SPEC CHECKSUMS:
React-logger: e0c1e918d9588a9f39c9bc62d9d6bfe9ca238d9d
React-Mapbuffer: 9731a0a63ebaf8976014623c4d637744d7353a7c
react-native-blob-util: d8fa1a7f726867907a8e43163fdd8b441d4489ea
- react-native-image-marker: 5c211bedcc2c74c68775e63d58b6e76b6e4c7bee
+ react-native-image-marker: 9aa793ce8195941aaed5482a23d926b51f6b5b9f
react-native-image-picker: 3269f75c251cdcd61ab51b911dd30d6fff8c6169
React-nativeconfig: 37aecd26d64b79327c3f10e43b2e9a6c425e0a60
React-NativeModulesApple: 9ca6d2eaa1dd5606588262195b46d0774bdec83a
diff --git a/example/src/App.tsx b/example/src/App.tsx
index fcefa20..0b14826 100644
--- a/example/src/App.tsx
+++ b/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,
},
diff --git a/expo-example/.gitignore b/expo-example/.gitignore
new file mode 100644
index 0000000..05647d5
--- /dev/null
+++ b/expo-example/.gitignore
@@ -0,0 +1,35 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
diff --git a/expo-example/App.tsx b/expo-example/App.tsx
new file mode 100644
index 0000000..06e5500
--- /dev/null
+++ b/expo-example/App.tsx
@@ -0,0 +1,1209 @@
+/* eslint-disable react-native/no-inline-styles */
+import React, { useEffect, useState } from 'react';
+import {
+ StyleSheet,
+ View,
+ Text,
+ Dimensions,
+ TouchableOpacity,
+ ScrollView,
+ ActivityIndicator,
+ Platform,
+ Image,
+ TextInput,
+ Switch,
+ Modal,
+} from 'react-native';
+import Marker, {
+ Position,
+ ImageFormat,
+ TextBackgroundType,
+} from 'react-native-image-marker';
+import {
+ launchImageLibraryAsync as launchImageLibrary,
+ MediaTypeOptions,
+} from 'expo-image-picker';
+import {
+ ActionSheetProvider,
+ useActionSheet,
+} from '@expo/react-native-action-sheet';
+import Toast from 'react-native-toast-message';
+import * as FileSystem from 'expo-file-system';
+import filesize from 'filesize';
+
+const icon = require('./assets/icon.jpeg');
+const icon1 = require('./assets/yahaha.jpeg');
+const bg = require('./assets/bg.png');
+const base64Bg = require('./assets/bas64bg').default;
+
+const { width, height } = Dimensions.get('window');
+
+const s = StyleSheet.create({
+ container: {
+ flex: 1,
+ marginTop: 50,
+ },
+ op: {
+ marginTop: 10,
+ justifyContent: 'center',
+ flexWrap: 'wrap',
+ backgroundColor: '#f1f1f1',
+ alignItems: 'flex-start',
+ paddingLeft: 10,
+ paddingRight: 10,
+ paddingBottom: 5,
+ },
+ row: {
+ flexDirection: 'row',
+ justifyContent: 'flex-start',
+ alignItems: 'center',
+ marginTop: 5,
+ flex: 1,
+ },
+ btn: {
+ padding: 10,
+ paddingTop: 5,
+ paddingBottom: 5,
+ borderRadius: 3,
+ backgroundColor: '#00BF00',
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ btnOp: {
+ padding: 10,
+ borderRadius: 3,
+ backgroundColor: '#1A1AA1',
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ text: {
+ fontSize: 15,
+ color: 'white',
+ },
+ preview: {
+ width,
+ height: 300,
+ flex: 1,
+ backgroundColor: '#ffffAA',
+ },
+ picker: {
+ backgroundColor: '#00B96B5A',
+ width: width - 20,
+ height: 50,
+ },
+ textInput: {
+ width: 110,
+ height: 50,
+ backgroundColor: '#ffA',
+ borderColor: '#00B96B5A',
+ borderWidth: 1,
+ padding: 0,
+ },
+ loading: {
+ position: 'absolute',
+ width,
+ height,
+ backgroundColor: 'rgba(0,0,0,0.5)',
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ modalContainer: {
+ justifyContent: 'center',
+ alignItems: 'center',
+ height: height,
+ backgroundColor: 'rgba(0,0,0,0.5)',
+ },
+ modalContent: {
+ width: width - 40,
+ height: 300,
+ backgroundColor: '#fff',
+ borderRadius: 5,
+ padding: 10,
+ },
+ shortTextInput: {
+ width: 30,
+ height: 30,
+ backgroundColor: '#ffA',
+ borderColor: '#00B96B5A',
+ borderWidth: 1,
+ textAlign: 'center',
+ padding: 0,
+ },
+ label: {
+ marginRight: 2,
+ textAlign: 'left',
+ },
+ rowSplit: {
+ flex: 1,
+ alignItems: 'center',
+ justifyContent: 'flex-start',
+ flexDirection: 'row',
+ },
+});
+
+function RowSplit(props: any) {
+ return {props.children};
+}
+
+function ImageOptions(props: {
+ alpha: number;
+ scale: number;
+ rotate: number;
+ quality: number;
+ setAlpha: (alpha: number) => void;
+ setScale: (scale: number) => void;
+ setRotate: (rotate: number) => void;
+ setQuality: (quality: number) => void;
+}) {
+ const {
+ alpha,
+ scale,
+ rotate,
+ quality,
+ setAlpha,
+ setScale,
+ setRotate,
+ setQuality,
+ } = props;
+ return (
+
+ scale:
+ {
+ const value = Number(v);
+ if (value < 0) {
+ Toast.show({
+ type: 'error',
+ text1: 'scale range error',
+ text2: 'scale must greater than or equal to 1',
+ });
+ return;
+ }
+ setScale(value);
+ }}
+ />
+ alpha:
+ {
+ const value = Number(v);
+ if (value < 0 || value > 1) {
+ Toast.show({
+ type: 'error',
+ text1: 'alpha range error',
+ text2: 'alpha must be between 0 and 1',
+ });
+ return;
+ }
+ setAlpha(value);
+ }}
+ />
+ rotate:
+ {
+ const value = Number(v);
+ if (value < -360 || value > 360) {
+ Toast.show({
+ type: 'error',
+ text1: 'rotate range error',
+ text2: 'rotate must be between -360 and 360',
+ });
+ return;
+ }
+ setRotate(value);
+ }}
+ />
+ quality:
+ {
+ const value = Number(v);
+ if (value < 0 || value > 100) {
+ Toast.show({
+ type: 'error',
+ text1: 'quality range error',
+ text2: 'quality must be between 0 and 100',
+ });
+ return;
+ }
+ setQuality(value);
+ }}
+ />
+
+ );
+}
+
+function useViewModel() {
+ const { showActionSheetWithOptions } = useActionSheet();
+ const [backgroundFormat, setBackgroundFormat] = useState<
+ 'normal image' | 'base64'
+ >('normal image');
+ const [waterMarkType, setWaterMarkType] = useState<'text' | 'image'>('text');
+ const [saveFormat, setSaveFormat] = useState(ImageFormat.png);
+ const [image, setImage] = useState(bg);
+ const [uri, setUri] = useState('');
+ const [marker, setMarker] = useState(icon);
+ const [text, setText] = useState('hello world \n 你好');
+ const [useTextShadow, setUseTextShadow] = useState(true);
+ const [useTextBgStyle, setUseTextBgStyle] = useState(true);
+ const [textBgStretch, setTextBgStretch] = useState(
+ TextBackgroundType.none
+ );
+ const [position, setPosition] = useState(Position.topLeft);
+ const [X, setX] = useState(20);
+ const [Y, setY] = useState(20);
+ const [loading, setLoading] = useState(false);
+ const [show, setShow] = useState(false);
+ const [underline, setUnderline] = useState(false);
+ const [italic, setItalic] = useState(false);
+ const [bold, setBold] = useState(false);
+ const [strikeThrough, setStrikeThrough] = useState(false);
+ const [textAlign, setTextAlign] = useState<'left' | 'right' | 'center'>(
+ 'left'
+ );
+
+ const [textRotate, setTextRotate] = useState(0);
+
+ const [textOptionsVisible, setTextOptionsVisible] = useState(false);
+
+ const [backgroundScale, setBackgroundScale] = useState(1);
+ const [backgroundRotate, setBackgroundRotate] = useState(0);
+ const [backgroundAlpha, setBackgroundAlpha] = useState(1);
+ const [watermarkScale, setWatermarkScale] = useState(1);
+ const [watermarkRotate, setWatermarkRotate] = useState(0);
+ const [watermarkAlpha, setWatermarkAlpha] = useState(1);
+ const [quality, setQuality] = useState(100);
+ const [fileSize, setFileSize] = useState('0');
+ const [fontSize, setFontSize] = useState(44);
+
+ function showBackgroundFormatSelector() {
+ const options = ['normal image', 'base64', 'cancel'];
+ const cancelButtonIndex = 2;
+
+ showActionSheetWithOptions(
+ {
+ options,
+ title: 'select background format',
+ cancelButtonIndex,
+ useModal: true,
+ },
+ (buttonIndex) => {
+ if (buttonIndex === cancelButtonIndex || buttonIndex == null) {
+ return;
+ } else {
+ setBackgroundFormat(options[buttonIndex] as any);
+ }
+ }
+ );
+ }
+
+ function showWatermarkTypeSelector() {
+ const options = ['image', 'text', 'cancel'];
+ const cancelButtonIndex = 2;
+
+ showActionSheetWithOptions(
+ {
+ options,
+ title: 'select watermark type',
+ cancelButtonIndex,
+ useModal: true,
+ },
+ (buttonIndex) => {
+ if (buttonIndex === cancelButtonIndex || buttonIndex == null) {
+ return;
+ } else {
+ setWaterMarkType(options[buttonIndex] as any);
+ }
+ }
+ );
+ }
+
+ function showExportResultTypeSelector() {
+ const options = [
+ ImageFormat.png,
+ ImageFormat.jpg,
+ ImageFormat.base64,
+ 'cancel',
+ ];
+ const cancelButtonIndex = 3;
+
+ showActionSheetWithOptions(
+ {
+ options,
+ title: 'select export result format type',
+ cancelButtonIndex,
+ useModal: true,
+ },
+ (buttonIndex) => {
+ if (buttonIndex === cancelButtonIndex || buttonIndex == null) {
+ return;
+ } else {
+ setSaveFormat(options[buttonIndex] as any);
+ }
+ }
+ );
+ }
+
+ function showPositionSelector() {
+ const options = [
+ Position.topLeft,
+ Position.topCenter,
+ Position.topRight,
+ Position.center,
+ Position.bottomLeft,
+ Position.bottomCenter,
+ Position.bottomRight,
+ 'cancel',
+ ];
+ const cancelButtonIndex = 7;
+
+ showActionSheetWithOptions(
+ {
+ options,
+ title: 'select export result format type',
+ cancelButtonIndex,
+ useModal: true,
+ },
+ (buttonIndex) => {
+ if (buttonIndex === cancelButtonIndex || buttonIndex == null) {
+ return;
+ } else {
+ setPosition(options[buttonIndex] as any);
+ }
+ }
+ );
+ }
+
+ function showTextBgStretchSelector() {
+ const options = [
+ TextBackgroundType.none,
+ TextBackgroundType.stretchX,
+ TextBackgroundType.stretchY,
+ 'cancel',
+ ];
+ const cancelButtonIndex = 3;
+
+ showActionSheetWithOptions(
+ {
+ options,
+ title: 'select text bg stretch type',
+ cancelButtonIndex,
+ useModal: true,
+ },
+ (buttonIndex) => {
+ if (buttonIndex === cancelButtonIndex || buttonIndex == null) {
+ return;
+ } else {
+ setTextBgStretch(options[buttonIndex] as any);
+ }
+ }
+ );
+ }
+
+ function showTextAlignSelector() {
+ const options = ['left', 'right', 'center', 'cancel'];
+ const cancelButtonIndex = 3;
+
+ showActionSheetWithOptions(
+ {
+ options,
+ title: 'select text align type',
+ cancelButtonIndex,
+ useModal: true,
+ },
+ (buttonIndex) => {
+ if (buttonIndex === cancelButtonIndex || buttonIndex == null) {
+ return;
+ } else {
+ setTextAlign(options[buttonIndex] as any);
+ }
+ }
+ );
+ }
+
+ useEffect(() => {
+ if (backgroundFormat === 'normal image') {
+ setImage(bg);
+ } else {
+ setImage(base64Bg);
+ }
+ }, [backgroundFormat]);
+
+ function showLoading() {
+ setLoading(true);
+ }
+
+ async function markByPosition() {
+ showLoading();
+ let path = '';
+
+ try {
+ if (waterMarkType === 'image') {
+ path = await Marker.markImage({
+ backgroundImage: {
+ src: image,
+ scale: backgroundScale,
+ alpha: backgroundAlpha,
+ rotate: backgroundRotate,
+ },
+ watermarkImage: {
+ src: marker,
+ scale: watermarkScale,
+ alpha: watermarkAlpha,
+ rotate: watermarkRotate,
+ },
+ watermarkPositions: {
+ position,
+ },
+ quality,
+ saveFormat: saveFormat,
+ watermarkImages: [
+ {
+ src: icon1,
+ scale: watermarkScale,
+ alpha: watermarkAlpha,
+ rotate: watermarkRotate,
+ position: {
+ position: Position.topLeft,
+ },
+ },
+ {
+ src: marker,
+ scale: watermarkScale,
+ alpha: watermarkAlpha,
+ rotate: watermarkRotate,
+ position: {
+ position: Position.topRight,
+ },
+ },
+ ],
+ });
+ } else {
+ path = await Marker.markText({
+ backgroundImage: {
+ src: image,
+ scale: backgroundScale,
+ alpha: backgroundAlpha,
+ rotate: backgroundRotate,
+ },
+ watermarkTexts: [
+ {
+ text,
+ position: {
+ position,
+ },
+ style: {
+ color: '#FF0000AA',
+ fontName: 'MaShanZheng-Regular',
+ fontSize,
+ underline,
+ bold,
+ italic,
+ strikeThrough,
+ textAlign: textAlign,
+ rotate: textRotate,
+ shadowStyle: useTextShadow
+ ? {
+ dx: 10.5,
+ dy: 20.8,
+ radius: 20.9,
+ color: '#0000FF',
+ }
+ : null,
+ textBackgroundStyle: useTextBgStyle
+ ? {
+ type: textBgStretch,
+ paddingBottom: '15%',
+ paddingRight: '10%',
+ paddingTop: '15%',
+ paddingLeft: '100',
+ color: '#0f0A',
+ }
+ : null,
+ },
+ },
+ {
+ text: 'text marker normal',
+ position: {
+ position: Position.center,
+ },
+ style: {
+ color: '#FF00AA9F',
+ fontName: 'RubikBurned-Regular',
+ fontSize,
+ underline,
+ bold,
+ italic,
+ strikeThrough,
+ textAlign: textAlign,
+ rotate: textRotate,
+ shadowStyle: useTextShadow
+ ? {
+ dx: 10.5,
+ dy: 20.8,
+ radius: 20.9,
+ color: '#00EEFF',
+ }
+ : null,
+ textBackgroundStyle: useTextBgStyle
+ ? {
+ type: textBgStretch,
+ padding: '10%',
+ color: '#0fA',
+ cornerRadius: {
+ topLeft: {
+ x: '20%',
+ y: '50%',
+ },
+ topRight: {
+ x: '20%',
+ y: '50%',
+ },
+ },
+ }
+ : null,
+ },
+ },
+ ],
+ quality,
+ saveFormat: saveFormat,
+ });
+ }
+ const resUri =
+ saveFormat === ImageFormat.base64
+ ? path
+ : Platform.OS === 'android'
+ ? 'file:' + path
+ : path;
+ setUri(resUri);
+ console.log(resUri);
+ setLoading(false);
+ setShow(true);
+ const stat = await FileSystem.getInfoAsync(path);
+ setFileSize(filesize.filesize(stat.exists ? stat.size : 0));
+ } catch (err) {
+ console.log('====================================');
+ console.log(err, 'err');
+ console.log('====================================');
+ }
+ }
+
+ useEffect(() => {
+ if (position) {
+ markByPosition();
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [position]);
+
+ async function mark() {
+ showLoading();
+ let path = '';
+ try {
+ if (waterMarkType === 'image') {
+ path = await Marker.markImage({
+ backgroundImage: {
+ src: image,
+ scale: backgroundScale,
+ rotate: backgroundRotate,
+ alpha: backgroundAlpha,
+ },
+ watermarkImages: [
+ {
+ src: marker,
+ scale: watermarkScale,
+ alpha: watermarkAlpha,
+ rotate: watermarkRotate,
+ position: { X, Y },
+ },
+ {
+ src: icon1,
+ scale: watermarkScale,
+ alpha: watermarkAlpha,
+ rotate: watermarkRotate,
+ position: { X: 200, Y: 100 },
+ },
+ ],
+ quality,
+ saveFormat: saveFormat,
+ });
+ } else {
+ path = await Marker.markText({
+ backgroundImage: {
+ src: image,
+ scale: backgroundScale,
+ alpha: backgroundAlpha,
+ rotate: backgroundRotate,
+ },
+ watermarkTexts: [
+ {
+ text,
+ position: {
+ X,
+ Y,
+ },
+ style: {
+ underline,
+ strikeThrough,
+ color: '#FF0',
+ fontName: 'NotoSansSC-Regular',
+ fontSize,
+ bold,
+ italic,
+ textAlign: textAlign,
+ rotate: textRotate,
+ shadowStyle: useTextShadow
+ ? {
+ dx: 10.5,
+ dy: 20.8,
+ radius: 20.9,
+ color: '#0000FF',
+ }
+ : null,
+ textBackgroundStyle: useTextBgStyle
+ ? {
+ type: textBgStretch,
+ paddingX: 10,
+ paddingY: 10,
+ color: '#00B96B',
+ }
+ : null,
+ },
+ },
+ {
+ text,
+ position: {
+ X: 500,
+ Y: 600,
+ },
+ style: {
+ underline: true,
+ strikeThrough: true,
+ bold: true,
+ italic: true,
+ color: '#FF0',
+ fontSize,
+ textAlign: textAlign,
+ rotate: textRotate,
+ shadowStyle: useTextShadow
+ ? {
+ dx: 10.5,
+ dy: 20.8,
+ radius: 20.9,
+ color: '#0000FF',
+ }
+ : null,
+ textBackgroundStyle: useTextBgStyle
+ ? {
+ type: textBgStretch,
+ // paddingX: 10,
+ // paddingY: 10,
+ padding: '10%',
+ color: '#0f09',
+ }
+ : null,
+ },
+ },
+ ],
+ quality,
+ saveFormat: saveFormat,
+ });
+ }
+ const resUri =
+ saveFormat === ImageFormat.base64
+ ? path
+ : Platform.OS === 'android'
+ ? 'file:' + path
+ : path;
+ setUri(resUri);
+ console.log(resUri);
+ setShow(true);
+ setLoading(false);
+ const stat = await FileSystem.getInfoAsync(path);
+ setFileSize(filesize.filesize(stat.exists ? stat.size : 0));
+ } catch (error) {
+ console.log('====================================');
+ console.log(error, 'error');
+ console.log('====================================');
+ }
+ }
+
+ async function pickImage(type: any) {
+ const response = await launchImageLibrary({
+ quality: 0.5,
+ mediaTypes: MediaTypeOptions.Images,
+ allowsEditing: false,
+ selectionLimit: 1,
+ });
+
+ if (response.canceled) {
+ console.log('User cancelled photo picker');
+ } else {
+ // You can display the image using either:
+ // const source = {uri: 'data:image/jpeg;base64,' + response.data, isStatic: true};
+ const myUri = response.assets?.[0]?.uri;
+ if (type === 'image') {
+ setImage(myUri);
+ } else {
+ setMarker(myUri);
+ }
+ }
+ }
+
+ return {
+ state: {
+ image,
+ uri,
+ marker,
+ loading,
+ show,
+ backgroundFormat,
+ saveFormat,
+ useTextShadow,
+ useTextBgStyle,
+ textBgStretch,
+ waterMarkType,
+ text,
+ position,
+ underline,
+ strikeThrough,
+ bold,
+ italic,
+ X,
+ Y,
+ backgroundScale,
+ backgroundAlpha,
+ backgroundRotate,
+ watermarkScale,
+ watermarkAlpha,
+ watermarkRotate,
+ textOptionsVisible,
+ textAlign,
+ textRotate,
+ quality,
+ fileSize,
+ fontSize,
+ },
+ setLoading,
+ setImage,
+ setMarker,
+ setShow,
+ setUri,
+ setSaveFormat,
+ setUseTextShadow,
+ setUseTextBgStyle,
+ setTextBgStretch,
+ mark,
+ markByPosition,
+ pickImage,
+ showBackgroundFormatSelector,
+ showWatermarkTypeSelector,
+ showExportResultTypeSelector,
+ setText,
+ showPositionSelector,
+ showTextBgStretchSelector,
+ setItalic,
+ setBold,
+ setStrikeThrough,
+ setUnderline,
+ setX,
+ setY,
+ setBackgroundAlpha,
+ setBackgroundScale,
+ setBackgroundRotate,
+ setWatermarkAlpha,
+ setWatermarkRotate,
+ setWatermarkScale,
+ setTextOptionsVisible,
+ setTextAlign,
+ setTextRotate,
+ showTextAlignSelector,
+ setQuality,
+ setFontSize,
+ };
+}
+
+function App() {
+ const {
+ state,
+ pickImage,
+ mark,
+ setUseTextShadow,
+ setUseTextBgStyle,
+ showBackgroundFormatSelector,
+ showWatermarkTypeSelector,
+ showExportResultTypeSelector,
+ setText,
+ showPositionSelector,
+ showTextBgStretchSelector,
+ setItalic,
+ setBold,
+ setStrikeThrough,
+ setUnderline,
+ setX,
+ setY,
+ setBackgroundAlpha,
+ setBackgroundScale,
+ setBackgroundRotate,
+ setWatermarkAlpha,
+ setWatermarkRotate,
+ setWatermarkScale,
+ setTextOptionsVisible,
+ showTextAlignSelector,
+ setTextRotate,
+ setQuality,
+ setFontSize,
+ } = useViewModel();
+ return (
+
+
+
+
+
+ background image format:
+
+
+
+ {state.backgroundFormat}
+
+
+
+
+
+ watermark type:
+
+
+
+ {state.waterMarkType}
+
+
+
+
+
+ export result format:
+
+
+
+ {state.saveFormat}
+
+
+
+
+
+
+
+ pickImage('image')}
+ >
+ select bg
+
+
+
+
+
+
+
+ {state.waterMarkType === 'image' ? (
+
+
+ pickImage('mark')}
+ >
+ select watermark icon
+
+
+
+
+
+
+ ) : (
+
+
+ text watermark:
+
+
+
+ fontSize:
+ {
+ const value = Number(v);
+ if (value <= 0) {
+ Toast.show({
+ type: 'error',
+ text1: 'fontSize range error',
+ text2: 'fontSize must be greater than 0',
+ });
+ return;
+ }
+ setFontSize(value);
+ }}
+ />
+ setTextOptionsVisible(true)}
+ >
+ options
+
+
+
+ )}
+
+
+
+
+
+ given position:
+
+
+
+ {state.position}
+
+
+
+
+
+ custom x/y:
+
+
+ X:
+ setX(v)}
+ />
+ Y:
+ setY(v)}
+ />
+
+ mark
+
+
+
+
+
+
+
+
+
+ text shadow:
+
+
+
+ text background:
+
+
+
+ {state.useTextBgStyle ? (
+
+
+ text bg stretch:
+
+
+ {state.textBgStretch == null ||
+ state.textBgStretch === TextBackgroundType.none
+ ? 'fit'
+ : state.textBgStretch}
+
+
+
+
+ text align:
+
+ {state.textAlign}
+
+
+
+ ) : null}
+
+
+
+ underline:
+
+
+
+
+
+
+
+ italic:
+
+
+
+
+
+
+
+
+
+ bold:
+
+
+
+
+
+
+
+ strikeThrough:
+
+
+
+
+
+
+
+
+ rotate:
+ {
+ const value = Number(v);
+ if (value < -360 || value > 360) {
+ Toast.show({
+ type: 'error',
+ text1: 'rotate range error',
+ text2: 'rotate must be between -360 and 360',
+ });
+ return;
+ }
+ setTextRotate(value);
+ }}
+ />
+
+ {/*
+
+ */}
+ {
+ setTextOptionsVisible(false);
+ }}
+ >
+ Confirm
+
+
+
+
+
+
+
+ result file size: {state.fileSize}
+
+ {state.show ? (
+
+ ) : null}
+
+
+ {state.loading && (
+
+
+ loading...
+
+ )}
+
+ );
+}
+
+export default function AppContainer() {
+ return (
+
+ <>
+
+
+
+
+ );
+}
diff --git a/expo-example/android/.gitignore b/expo-example/android/.gitignore
new file mode 100644
index 0000000..877b87e
--- /dev/null
+++ b/expo-example/android/.gitignore
@@ -0,0 +1,15 @@
+# OSX
+#
+.DS_Store
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+*.hprof
+
+# Bundle artifacts
+*.jsbundle
diff --git a/expo-example/android/app/build.gradle b/expo-example/android/app/build.gradle
new file mode 100644
index 0000000..871f14b
--- /dev/null
+++ b/expo-example/android/app/build.gradle
@@ -0,0 +1,171 @@
+apply plugin: "com.android.application"
+apply plugin: "org.jetbrains.kotlin.android"
+apply plugin: "com.facebook.react"
+
+def projectRoot = rootDir.getAbsoluteFile().getParentFile().getAbsolutePath()
+
+/**
+ * This is the configuration block to customize your React Native Android app.
+ * By default you don't need to apply any configuration, just uncomment the lines you need.
+ */
+react {
+ entryFile = file(["node", "-e", "require('expo/scripts/resolveAppEntry')", projectRoot, "android", "absolute"].execute(null, rootDir).text.trim())
+ reactNativeDir = new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim()).getParentFile().getAbsoluteFile()
+ hermesCommand = new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim()).getParentFile().getAbsolutePath() + "/sdks/hermesc/%OS-BIN%/hermesc"
+ codegenDir = new File(["node", "--print", "require.resolve('@react-native/codegen/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim()).getParentFile().getAbsoluteFile()
+
+ // Use Expo CLI to bundle the app, this ensures the Metro config
+ // works correctly with Expo projects.
+ cliFile = new File(["node", "--print", "require.resolve('@expo/cli', { paths: [require.resolve('expo/package.json')] })"].execute(null, rootDir).text.trim())
+ bundleCommand = "export:embed"
+
+ /* Folders */
+ // The root of your project, i.e. where "package.json" lives. Default is '..'
+ // root = file("../")
+ // The folder where the react-native NPM package is. Default is ../node_modules/react-native
+ // reactNativeDir = file("../node_modules/react-native")
+ // The folder where the react-native Codegen package is. Default is ../node_modules/@react-native/codegen
+ // codegenDir = file("../node_modules/@react-native/codegen")
+
+ /* Variants */
+ // The list of variants to that are debuggable. For those we're going to
+ // skip the bundling of the JS bundle and the assets. By default is just 'debug'.
+ // If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
+ // debuggableVariants = ["liteDebug", "prodDebug"]
+
+ /* Bundling */
+ // A list containing the node command and its flags. Default is just 'node'.
+ // nodeExecutableAndArgs = ["node"]
+
+ //
+ // The path to the CLI configuration file. Default is empty.
+ // bundleConfig = file(../rn-cli.config.js)
+ //
+ // The name of the generated asset file containing your JS bundle
+ // bundleAssetName = "MyApplication.android.bundle"
+ //
+ // The entry file for bundle generation. Default is 'index.android.js' or 'index.js'
+ // entryFile = file("../js/MyApplication.android.js")
+ //
+ // A list of extra flags to pass to the 'bundle' commands.
+ // See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
+ // extraPackagerArgs = []
+
+ /* Hermes Commands */
+ // The hermes compiler command to run. By default it is 'hermesc'
+ // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
+ //
+ // The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
+ // hermesFlags = ["-O", "-output-source-map"]
+}
+
+/**
+ * Set this to true to Run Proguard on Release builds to minify the Java bytecode.
+ */
+def enableProguardInReleaseBuilds = (findProperty('android.enableProguardInReleaseBuilds') ?: false).toBoolean()
+
+/**
+ * The preferred build flavor of JavaScriptCore (JSC)
+ *
+ * For example, to use the international variant, you can use:
+ * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
+ *
+ * The international variant includes ICU i18n library and necessary data
+ * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
+ * give correct results when using with locales other than en-US. Note that
+ * this variant is about 6MiB larger per architecture than default.
+ */
+def jscFlavor = 'org.webkit:android-jsc:+'
+
+android {
+ ndkVersion rootProject.ext.ndkVersion
+
+ buildToolsVersion rootProject.ext.buildToolsVersion
+ compileSdk rootProject.ext.compileSdkVersion
+
+ namespace 'com.jimmydaddy.expoexample'
+ defaultConfig {
+ applicationId 'com.jimmydaddy.expoexample'
+ minSdkVersion rootProject.ext.minSdkVersion
+ targetSdkVersion rootProject.ext.targetSdkVersion
+ versionCode 1
+ versionName "1.0.0"
+
+ buildConfigField("boolean", "REACT_NATIVE_UNSTABLE_USE_RUNTIME_SCHEDULER_ALWAYS", (findProperty("reactNative.unstable_useRuntimeSchedulerAlways") ?: true).toString())
+ }
+ signingConfigs {
+ debug {
+ storeFile file('debug.keystore')
+ storePassword 'android'
+ keyAlias 'androiddebugkey'
+ keyPassword 'android'
+ }
+ }
+ buildTypes {
+ debug {
+ signingConfig signingConfigs.debug
+ }
+ release {
+ // Caution! In production, you need to generate your own keystore file.
+ // see https://reactnative.dev/docs/signed-apk-android.
+ signingConfig signingConfigs.debug
+ shrinkResources (findProperty('android.enableShrinkResourcesInReleaseBuilds')?.toBoolean() ?: false)
+ minifyEnabled enableProguardInReleaseBuilds
+ proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
+ }
+ }
+}
+
+// Apply static values from `gradle.properties` to the `android.packagingOptions`
+// Accepts values in comma delimited lists, example:
+// android.packagingOptions.pickFirsts=/LICENSE,**/picasa.ini
+["pickFirsts", "excludes", "merges", "doNotStrip"].each { prop ->
+ // Split option: 'foo,bar' -> ['foo', 'bar']
+ def options = (findProperty("android.packagingOptions.$prop") ?: "").split(",");
+ // Trim all elements in place.
+ for (i in 0.. 0) {
+ println "android.packagingOptions.$prop += $options ($options.length)"
+ // Ex: android.packagingOptions.pickFirsts += '**/SCCS/**'
+ options.each {
+ android.packagingOptions[prop] += it
+ }
+ }
+}
+
+dependencies {
+ // The version of react-native is set by the React Native Gradle Plugin
+ implementation("com.facebook.react:react-android")
+
+ def isGifEnabled = (findProperty('expo.gif.enabled') ?: "") == "true";
+ def isWebpEnabled = (findProperty('expo.webp.enabled') ?: "") == "true";
+ def isWebpAnimatedEnabled = (findProperty('expo.webp.animated') ?: "") == "true";
+
+ if (isGifEnabled) {
+ // For animated gif support
+ implementation("com.facebook.fresco:animated-gif:${reactAndroidLibs.versions.fresco.get()}")
+ }
+
+ if (isWebpEnabled) {
+ // For webp support
+ implementation("com.facebook.fresco:webpsupport:${reactAndroidLibs.versions.fresco.get()}")
+ if (isWebpAnimatedEnabled) {
+ // Animated webp support
+ implementation("com.facebook.fresco:animated-webp:${reactAndroidLibs.versions.fresco.get()}")
+ }
+ }
+
+ implementation("com.facebook.react:flipper-integration")
+
+ if (hermesEnabled.toBoolean()) {
+ implementation("com.facebook.react:hermes-android")
+ } else {
+ implementation jscFlavor
+ }
+}
+
+apply from: new File(["node", "--print", "require.resolve('@react-native-community/cli-platform-android/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim(), "../native_modules.gradle");
+applyNativeModulesAppBuildGradle(project)
diff --git a/expo-example/android/app/debug.keystore b/expo-example/android/app/debug.keystore
new file mode 100644
index 0000000..364e105
Binary files /dev/null and b/expo-example/android/app/debug.keystore differ
diff --git a/expo-example/android/app/proguard-rules.pro b/expo-example/android/app/proguard-rules.pro
new file mode 100644
index 0000000..551eb41
--- /dev/null
+++ b/expo-example/android/app/proguard-rules.pro
@@ -0,0 +1,14 @@
+# Add project specific ProGuard rules here.
+# By default, the flags in this file are appended to flags specified
+# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
+# You can edit the include path and order by changing the proguardFiles
+# directive in build.gradle.
+#
+# For more details, see
+# http://developer.android.com/guide/developing/tools/proguard.html
+
+# react-native-reanimated
+-keep class com.swmansion.reanimated.** { *; }
+-keep class com.facebook.react.turbomodule.** { *; }
+
+# Add any project specific keep options here:
diff --git a/expo-example/android/app/src/debug/AndroidManifest.xml b/expo-example/android/app/src/debug/AndroidManifest.xml
new file mode 100644
index 0000000..3ec2507
--- /dev/null
+++ b/expo-example/android/app/src/debug/AndroidManifest.xml
@@ -0,0 +1,7 @@
+
+
+
+
+
+
diff --git a/expo-example/android/app/src/main/AndroidManifest.xml b/expo-example/android/app/src/main/AndroidManifest.xml
new file mode 100644
index 0000000..caf6fa7
--- /dev/null
+++ b/expo-example/android/app/src/main/AndroidManifest.xml
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/expo-example/android/app/src/main/assets/fonts/MaShanZheng-Regular.ttf b/expo-example/android/app/src/main/assets/fonts/MaShanZheng-Regular.ttf
new file mode 100644
index 0000000..2fab282
Binary files /dev/null and b/expo-example/android/app/src/main/assets/fonts/MaShanZheng-Regular.ttf differ
diff --git a/expo-example/android/app/src/main/assets/fonts/RubikBurned-Regular.ttf b/expo-example/android/app/src/main/assets/fonts/RubikBurned-Regular.ttf
new file mode 100644
index 0000000..9daebd2
Binary files /dev/null and b/expo-example/android/app/src/main/assets/fonts/RubikBurned-Regular.ttf differ
diff --git a/expo-example/android/app/src/main/java/com/jimmydaddy/expoexample/MainActivity.kt b/expo-example/android/app/src/main/java/com/jimmydaddy/expoexample/MainActivity.kt
new file mode 100644
index 0000000..0694e4b
--- /dev/null
+++ b/expo-example/android/app/src/main/java/com/jimmydaddy/expoexample/MainActivity.kt
@@ -0,0 +1,61 @@
+package com.jimmydaddy.expoexample
+
+import android.os.Build
+import android.os.Bundle
+
+import com.facebook.react.ReactActivity
+import com.facebook.react.ReactActivityDelegate
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
+import com.facebook.react.defaults.DefaultReactActivityDelegate
+
+import expo.modules.ReactActivityDelegateWrapper
+
+class MainActivity : ReactActivity() {
+ override fun onCreate(savedInstanceState: Bundle?) {
+ // Set the theme to AppTheme BEFORE onCreate to support
+ // coloring the background, status bar, and navigation bar.
+ // This is required for expo-splash-screen.
+ setTheme(R.style.AppTheme);
+ super.onCreate(null)
+ }
+
+ /**
+ * Returns the name of the main component registered from JavaScript. This is used to schedule
+ * rendering of the component.
+ */
+ override fun getMainComponentName(): String = "main"
+
+ /**
+ * Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate]
+ * which allows you to enable New Architecture with a single boolean flags [fabricEnabled]
+ */
+ override fun createReactActivityDelegate(): ReactActivityDelegate {
+ return ReactActivityDelegateWrapper(
+ this,
+ BuildConfig.IS_NEW_ARCHITECTURE_ENABLED,
+ object : DefaultReactActivityDelegate(
+ this,
+ mainComponentName,
+ fabricEnabled
+ ){})
+ }
+
+ /**
+ * Align the back button behavior with Android S
+ * where moving root activities to background instead of finishing activities.
+ * @see onBackPressed
+ */
+ override fun invokeDefaultOnBackPressed() {
+ if (Build.VERSION.SDK_INT <= Build.VERSION_CODES.R) {
+ if (!moveTaskToBack(false)) {
+ // For non-root activities, use the default implementation to finish them.
+ super.invokeDefaultOnBackPressed()
+ }
+ return
+ }
+
+ // Use the default back button implementation on Android S
+ // because it's doing more than [Activity.moveTaskToBack] in fact.
+ super.invokeDefaultOnBackPressed()
+ }
+}
diff --git a/expo-example/android/app/src/main/java/com/jimmydaddy/expoexample/MainApplication.kt b/expo-example/android/app/src/main/java/com/jimmydaddy/expoexample/MainApplication.kt
new file mode 100644
index 0000000..47762c4
--- /dev/null
+++ b/expo-example/android/app/src/main/java/com/jimmydaddy/expoexample/MainApplication.kt
@@ -0,0 +1,65 @@
+package com.jimmydaddy.expoexample
+
+import android.app.Application
+import android.content.res.Configuration
+import androidx.annotation.NonNull
+
+import com.facebook.react.PackageList
+import com.facebook.react.ReactApplication
+import com.facebook.react.ReactNativeHost
+import com.facebook.react.ReactPackage
+import com.facebook.react.ReactHost
+import com.facebook.react.config.ReactFeatureFlags
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
+import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
+import com.facebook.react.defaults.DefaultReactNativeHost
+import com.facebook.react.flipper.ReactNativeFlipper
+import com.facebook.soloader.SoLoader
+
+import expo.modules.ApplicationLifecycleDispatcher
+import expo.modules.ReactNativeHostWrapper
+
+class MainApplication : Application(), ReactApplication {
+
+ override val reactNativeHost: ReactNativeHost = ReactNativeHostWrapper(
+ this,
+ object : DefaultReactNativeHost(this) {
+ override fun getPackages(): List {
+ // Packages that cannot be autolinked yet can be added manually here, for example:
+ // packages.add(new MyReactNativePackage());
+ return PackageList(this).packages
+ }
+
+ override fun getJSMainModuleName(): String = ".expo/.virtual-metro-entry"
+
+ override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG
+
+ override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
+ override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
+ }
+ )
+
+ override val reactHost: ReactHost
+ get() = getDefaultReactHost(this.applicationContext, reactNativeHost)
+
+ override fun onCreate() {
+ super.onCreate()
+ SoLoader.init(this, false)
+ if (!BuildConfig.REACT_NATIVE_UNSTABLE_USE_RUNTIME_SCHEDULER_ALWAYS) {
+ ReactFeatureFlags.unstable_useRuntimeSchedulerAlways = false
+ }
+ if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
+ // If you opted-in for the New Architecture, we load the native entry point for this app.
+ load()
+ }
+ if (BuildConfig.DEBUG) {
+ ReactNativeFlipper.initializeFlipper(this, reactNativeHost.reactInstanceManager)
+ }
+ ApplicationLifecycleDispatcher.onApplicationCreate(this)
+ }
+
+ override fun onConfigurationChanged(newConfig: Configuration) {
+ super.onConfigurationChanged(newConfig)
+ ApplicationLifecycleDispatcher.onConfigurationChanged(this, newConfig)
+ }
+}
diff --git a/expo-example/android/app/src/main/res/drawable-hdpi/splashscreen_image.png b/expo-example/android/app/src/main/res/drawable-hdpi/splashscreen_image.png
new file mode 100644
index 0000000..c52c2c6
Binary files /dev/null and b/expo-example/android/app/src/main/res/drawable-hdpi/splashscreen_image.png differ
diff --git a/expo-example/android/app/src/main/res/drawable-mdpi/splashscreen_image.png b/expo-example/android/app/src/main/res/drawable-mdpi/splashscreen_image.png
new file mode 100644
index 0000000..c52c2c6
Binary files /dev/null and b/expo-example/android/app/src/main/res/drawable-mdpi/splashscreen_image.png differ
diff --git a/expo-example/android/app/src/main/res/drawable-xhdpi/splashscreen_image.png b/expo-example/android/app/src/main/res/drawable-xhdpi/splashscreen_image.png
new file mode 100644
index 0000000..c52c2c6
Binary files /dev/null and b/expo-example/android/app/src/main/res/drawable-xhdpi/splashscreen_image.png differ
diff --git a/expo-example/android/app/src/main/res/drawable-xxhdpi/splashscreen_image.png b/expo-example/android/app/src/main/res/drawable-xxhdpi/splashscreen_image.png
new file mode 100644
index 0000000..c52c2c6
Binary files /dev/null and b/expo-example/android/app/src/main/res/drawable-xxhdpi/splashscreen_image.png differ
diff --git a/expo-example/android/app/src/main/res/drawable-xxxhdpi/splashscreen_image.png b/expo-example/android/app/src/main/res/drawable-xxxhdpi/splashscreen_image.png
new file mode 100644
index 0000000..c52c2c6
Binary files /dev/null and b/expo-example/android/app/src/main/res/drawable-xxxhdpi/splashscreen_image.png differ
diff --git a/expo-example/android/app/src/main/res/drawable/rn_edit_text_material.xml b/expo-example/android/app/src/main/res/drawable/rn_edit_text_material.xml
new file mode 100644
index 0000000..73b37e4
--- /dev/null
+++ b/expo-example/android/app/src/main/res/drawable/rn_edit_text_material.xml
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+