feat: typeing & docs fix #54

Author: JimmyDaddy

README.MD

@@ -55,6 +55,30 @@ pod 'RNImageMarker', :path => '../node_modules/react-native-image-marker'
 |`saveFormat`| `png` or `jpg` |
 |`textBackgroundStyle` | text background style |
 
+```typescript
+export type TextMarkOption = {
+  // image src, local image
+  src: ImageSourcePropType,
+  text: string,
+  // if you set position you don't need to set X and Y
+  X?: number,
+  Y?: number,
+  // eg. '#aacc22'
+  color: string,
+  fontName: string,
+  fontSize: number,
+  // scale image
+  scale: number,
+  // image quality
+  quality: number,
+  position?: Position,
+  filename?: string,
+  shadowStyle: ShadowLayerStyle,
+  textBackgroundStyle: TextBackgroundStyle,
+  saveFormat?: ImageFormat,
+}
+```
+
 * `ImageMarkOption`
 
 |name|description|
@@ -70,6 +94,24 @@ pod 'RNImageMarker', :path => '../node_modules/react-native-image-marker'
 |`filename` | set filename for the result |
 |`saveFormat`| `png` or `jpg`, default is `jpg` |
 
+```typescript
+export type ImageMarkOption = {
+  // image src, local image
+  src: ImageSourcePropType,
+  markerSrc: ImageSourcePropType,
+  X?: number,
+  Y?: number,
+  // marker scale
+  markerScale: number,
+  // image scale
+  scale: number,
+  quality: number,
+  position?: Position,
+  filename?: string,
+  saveFormat?: ImageFormat,
+}
+```
+
 * `ShadowStyle`
 
 |name|description|
@@ -79,6 +121,15 @@ pod 'RNImageMarker', :path => '../node_modules/react-native-image-marker'
 |`dy`| y offset|
 |`color`| shadow color |
 
+```typescript
+export type ShadowLayerStyle = {
+  'dx': number,
+  'dy': number,
+  'radius': number,
+  'color': string
+}
+```
+
 * `textBackgroundStyle`
 
 > thanks [@onka13](https://github.com/onka13) for [#38](https://github.com/JimmyDaddy/react-native-image-marker/pull/38)
@@ -90,6 +141,13 @@ pod 'RNImageMarker', :path => '../node_modules/react-native-image-marker'
 |`type`| default is fit the text, `stretchX` stretch to fill width, `stretchY` stretch to fill height |
 |`color`| bg color |
 
+```typescript
+export enum TextBackgroundType {
+  stretchX = 'stretchX',
+  stretchY = 'stretchY'
+}
+```
+
 ## Usage
 
 ```javascript

example/markerExample/App.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { TouchableOpacity, Image, View, Text, Platform, Dimensions, StyleSheet, ScrollView } from 'react-native'
-import Marker from 'react-native-image-marker'
+import Marker, { Position, ImageFormat } from 'react-native-image-marker'
 import Picker from 'react-native-image-picker'
 const icon = require('./icon.jpeg')
 // const iconTP = require('./tpimage.png')
@@ -127,43 +127,43 @@ export default class MarkerTest extends React.Component {
           </TouchableOpacity>
           <TouchableOpacity
             style={s.btn}
-            onPress={() => this._markByPosition('topLeft')}
+            onPress={() => this._markByPosition(Position.topLeft)}
           >
             <Text style={s.text} >TopLeft</Text>
           </TouchableOpacity>
           <TouchableOpacity
             style={s.btn}
-            onPress={() => this._markByPosition('topCenter')}
+            onPress={() => this._markByPosition(Position.topCenter)}
           >
             <Text style={s.text} >topCenter</Text>
           </TouchableOpacity>
           <TouchableOpacity
             style={s.btn}
-            onPress={() => this._markByPosition('topRight')}
+            onPress={() => this._markByPosition(Position.topRight)}
           >
             <Text style={s.text} >topRight</Text>
           </TouchableOpacity>
           <TouchableOpacity
             style={s.btn}
-            onPress={() => this._markByPosition('center')}
+            onPress={() => this._markByPosition(Position.center)}
           >
             <Text style={s.text} >Center</Text>
           </TouchableOpacity>
           <TouchableOpacity
             style={s.btn}
-            onPress={() => this._markByPosition('bottomLeft')}
+            onPress={() => this._markByPosition(Position.bottomLeft)}
           >
             <Text style={s.text} >bottomLeft</Text>
           </TouchableOpacity>
           <TouchableOpacity
             style={s.btn}
-            onPress={() => this._markByPosition('bottomCenter')}
+            onPress={() => this._markByPosition(Position.bottomCenter)}
           >
             <Text style={s.text} >bottomCenter</Text>
           </TouchableOpacity>
           <TouchableOpacity
             style={s.btn}
-            onPress={() => this._markByPosition('bottomRight')}
+            onPress={() => this._markByPosition(Position.bottomRight)}
           >
             <Text style={s.text} >bottomRight</Text>
           </TouchableOpacity>
@@ -233,7 +233,7 @@ export default class MarkerTest extends React.Component {
         scale: 1,
         markerScale: 1,
         quality: 100,
-        saveFormat: 'jpg'
+        saveFormat: ImageFormat.jpg
       }).then((path) => {
         console.log('====================================')
         console.log(path)