react-native-hmplatform

v1.0.15

Published

2 years ago

A common WebView extended by ImagePicker for React Native (Android and iOS platform).

Downloads

0High
0Medium
0Low

smiletomyself

react-native webview image-pikcer

react-native-hmplatform

Getting started

$ npm install react-native-hmplatform --save

Mostly automatic installation

$ react-native link react-native-hmplatform

Manual installation

iOS

In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
Go to node_modules ➜ react-native-hmplatform and add RNHmplatform.xcodeproj
In XCode, in the project navigator, select your project. Add libRNHmplatform.a to your project's Build Phases ➜ Link Binary With Libraries
Run your project (Cmd+R)<

Android

Open up android/app/src/main/java/[...]/MainActivity.java

Add import com.hessian.hmplatform.RNHmplatformPackage; to the imports at the top of the file
Add new RNHmplatformPackage() to the list returned by the getPackages() method

Append the following lines to android/settings.gradle:

include ':react-native-hmplatform'
project(':react-native-hmplatform').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-hmplatform/android')

Insert the following lines inside the dependencies block in android/app/build.gradle:
```
  compile project(':react-native-hmplatform')
```

Common Usage as a Webview

import  {HMView}  from 'react-native-hmplatform';

// the other code
...

render() {
	var url = "https://github.com/smiletomyself/react-native-hmplatform/blob/main/README.md";
	return(
		<HMView url={url} />
	)
}

Load local html file

import  {HMView}  from 'react-native-hmplatform';

// the other code
...

render() {
	var html = `
      <html>
      <head>
        <meta charset="utf-8">
        <title>RNHmplatform</title>
      </head>
      <body>
        <h1>A common WebView extended by ImagePicker for React Native (Android and iOS platform).</h1>
      </body>
      </html>
    `;
	return(
		<HMView html={html} />
	)
}

Extend Usage as a image picker view

Before your want to use image picker by javascript in H5, notice as below:

H5 need to post a message to RN;
RN listen the message from H5 and do something about image picking;
After image selected, RN inject a message named onRNMessage include image's datas;
H5 listen the onRNMessage function and parse the callback result;

select from camera

you need to copy code blow in your H5 page

function openCamera(){
  window.ReactNativeWebView.postMessage(JSON.stringify({ type: "HSopenCamera",data: { } }))
}

Select from gallery

you need to copy code blow in your H5 page

function selectGalley(){
  window.ReactNativeWebView.postMessage(JSON.stringify({ type: "HSselectGalley",data: { } }))
}

Listen the result

you need to copy code blow in your H5 page

window["onRNMessage"] = (data) => {
	// todo parse the data

	// example:
	if (data instanceof Object) {
		var img = new Image()
    img.src='data:image/jpeg;base64,'+data.data
    document.body.appendChild(img)
	} else if (data instanceof Array) {
		for (var i = 0 ; i < data.length ; i++) {
      var img = new Image()
      img.src='data:image/jpeg;base64,'+data[i].data
      document.body.appendChild(img)
    }
	} else {
		console.e('pase data failed')
	}
}

Result data object

| Property | Type | Description | | ------------------------- | :----: | :--------------------------------------- | | path | string | Selected image location. This is null when the writeTempFile option is set to false. | | localIdentifier(ios only) | string | Selected images' localidentifier, used for PHAsset searching | | sourceURL(ios only) | string | Selected images' source path, do not have write access | | filename(ios only) | string | Selected images' filename | | width | number | Selected image width | | height | number | Selected image height | | mime | string | Selected image MIME type (image/jpeg, image/png) | | size | number | Selected image size in bytes | | duration | number | Video duration time in milliseconds | | data | base64 | Optional base64 selected file representation | | exif | object | Extracted exif data from image. Response format is platform specific | | cropRect | object | Cropped image rectangle (width, height, x, y) | | creationDate (ios only) | string | UNIX timestamp when image was created | | modificationDate | string | UNIX timestamp when image was last modified |

Optional

The custom props for the HMView

|Property|Type|Description| |:------------|:-----------------------------|:------------------| |html|string|Load local html file| |url|string|Load remote url| |pickerOptions|object|the common properties for image picker|

pickerOptions

| Property | --------------------------------------- | cropping | width | height | multiple | writeTempFile (ios only) | includeBase64 | includeExif | avoidEmptySpaceAroundImage (ios only) | | cropperActiveWidgetColor (android only) | | cropperStatusBarColor (android only) | | cropperToolbarColor (android only) | cropperToolbarWidgetColor (android only) | freeStyleCropEnabled | | cropperToolbarTitle | cropperCircleOverlay | disableCropperColorSetters (android only)| | minFiles (ios only) | maxFiles (ios only) | waitAnimationEnd (ios only) | smartAlbums (ios only) | useFrontCamera | compressVideoPreset (ios only) | compressImageMaxWidth | compressImageMaxHeight | compressImageQuality | loadingLabelText (ios only) | mediaType | showsSelectedCount (ios only) | sortOrder (ios only) | | forceJpg (ios only) | | showCropGuidelines (android only) | showCropFrame (android only) | | hideBottomControls (android only) | enableRotationGesture (android only) | | cropperChooseText (ios only) | cropperCancelText (ios only) | cropperRotateButtonsHidden (ios only) | | Type | Description | | :--------------------------------------: | :--------------------------------------- | | bool (default false) | Enable or disable cropping | | number | Width of result image when used with cropping option | | number | Height of result image when used with cropping option | | bool (default false) | Enable or disable multiple image selection | | bool (default true) | When set to false, does not write temporary files for the selected images. This is useful to improve performance when you are retrieving file contents with the includeBase64 option and don't need to read files from disk. | | bool (default false) | When set to true, the image file content will be available as a base64-encoded string in the data property. Hint: To use this string as an image source, use it like: <Image source={{uri: `data:${image.mime};base64,${image.data}`}} /> | | bool (default false) | Include image exif data in the response | bool (default true) | When set to true, the image will always fill the mask space. | string (default "#424242") | When cropping image, determines ActiveWidget color. | string (default #424242) | When cropping image, determines the color of StatusBar. | | string (default #424242) | When cropping image, determines the color of Toolbar. | | string (default darker orange) | When cropping image, determines the color of Toolbar text and buttons. | bool (default false) | Enables user to apply custom rectangle area for cropping | | string (default Edit Photo) | When cropping image, determines the title of Toolbar. | | bool (default false) | Enable or disable circular cropping mask. | bool (default false) | When cropping image, disables the color setters for cropping library. | | number (default 1) | Min number of files to select when using multiple option | | number (default 5) | Max number of files to select when using multiple option | | bool (default true) | Promise will resolve/reject once ViewController completion block is called | | array (default ['UserLibrary', 'PhotoStream', 'Panoramas', 'Videos', 'Bursts']) | List of smart albums to choose from | | bool (default false) | Whether to default to the front/'selfie' camera when opened. Please note that not all Android devices handle this parameter| | string (default MediumQuality) | Choose which preset will be used for video compression | | number (default none) | Compress image with maximum width | | number (default none) | Compress image with maximum height | | number (default 1 (Android)/0.8 (iOS)) | Compress image with quality (from 0 to 1, where 1 is best quality). On iOS, values larger than 0.8 don't produce a noticeable quality increase in most images, while a value of 0.8 will reduce the file size by about half or less compared to a value of 1. | | string (default "Processing assets...") | Text displayed while photo is loading in picker | | string (default any) | Accepted mediaType for image selection, can be one of: 'photo', 'video', or 'any' | | bool (default true) | Whether to show the number of selected assets | string (default 'none', supported values: 'asc', 'desc', 'none') | Applies a sort order on the creation date on how media is displayed within the albums/detail photo views when opening the image picker | bool (default false) | Whether to convert photos to JPG. This will also convert any Live Photo into its JPG representation | | bool (default true) | Whether to show the 3x3 grid on top of the image during cropping | bool (default true) | Whether to show crop frame during cropping | | bool (default false) | Whether to display bottom controls | bool (default false) | Whether to enable rotating the image by hand gesture | | string (default choose) | Choose button text | | string (default Cancel) | Cancel button text | bool (default false) | Enable or disable cropper rotate buttons |

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

react-native-hmplatform

Getting started

Mostly automatic installation

Manual installation

iOS

Android

Common Usage as a Webview

Load local html file

Extend Usage as a image picker view

select from camera

Select from gallery

Listen the result

Result data object

Optional

pickerOptions