react-native-markup

A RN component that allows you to add markups to an image. Under the hood this library uses a WebView that loads markerJS. Keep in mind that, in order to meet the needs of our users, in the future we'll be using a forked version of markerJS that will have significant modifications.

Installation

yarn add react-native-webview events

// package.json
{
  "dependencies": {
    "react-native-markup": "git+ssh://[email protected]:openspacelabs/react-native-markup.git#{some commit hash}"
  }
}

Set Up File Access Mode

# Install the following if you wanna turn on file access mode
# to load local image files

# for expo projects
yarn add expo-file-system
# for non-expo projects
yarn add react-native-fs

// Optionally turn on file access to load local image files
import { enableRNMarkupFileAccess } from 'react-native-markup';

// for expo projects
import * as ExpoFS from 'react-native-fs';
enableRNMarkupFileAccess(ExpoFS, ExpoFS.documentDirectory);

// for non-expo projects
import RNFS from 'react-native-fs';
enableRNMarkupFileAccess(RNFS, RNFS.DocumentDirectoryPath);

Usage

// ...
import {
  RNMarkup,
  RNMarkupEventName,
  RNMarkupAction,
  RNMarkupDelegate
} from 'react-native-markup';

// ...
const markupRef = useRef<RNMarkupDelegate>();
<RNMarkup
  ref={markupRef}
  imageUri="https://images.unsplash.com/photo-1633943934219-c1853ca6fdea?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1976&q=80"
  initMarkerState={
    // prettier-ignore
    {"width":450,"height":674,"markers":[{"fillColor":"transparent","strokeColor":"yellow","strokeWidth":3,"strokeDasharray":"","opacity":1,"left":162.09375,"top":396.56640625,"width":243.140625,"height":136.97265625,"rotationAngle":0,"visualTransformMatrix":{"a":1,"b":0,"c":0,"d":1,"e":0,"f":0},"containerTransformMatrix":{"a":1,"b":0,"c":0,"d":1,"e":0,"f":0},"typeName":"EllipseFrameMarker","state":"select"}]}
  }
/>

// ...
markupRef.current.triggerAction(RNMarkupAction.delete);
markupRef.current.triggerAction(RNMarkupAction.undo);
markupRef.current.triggerAction(RNMarkupAction.redo);
markupRef.current.triggerAction(RNMarkupAction.rasterize);

// ...
markupRef.current.addListener(({ eventName, payload }) => {
  switch (eventName) {
    case RNMarkupEventName.undoRedoChange:
    case RNMarkupEventName.selectionChange:
      setEditorState((state) => ({ ...state, ...payload }));
      break;
    case RNMarkupEventName.rasterize:
      // saves payload
      break;
  }
});
const { canDelete, canRedo, canUndo } = editorState;

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT