Getting Started with marker.js for React Native

marker.js for React Native is a powerful library for creating and managing annotations in your React Native applications. This quick start guide will help you set up your environment, install the library, and create your first annotation.

Setup

Basic Expo app

We will use Expo to scaffold our React Native project. To create a new Expo project, run the following command:

npx create-expo-app@latest
Copy

Follow the prompts to set up your project. Once the project is created, navigate into the project directory:

cd your-project-name
Copy

Reset the project

The default Expo project comes with some boilerplate code that we don't need. Luckily, it includes a script to reset the project. Run the following command to reset your project:

npm run reset-project
Copy

Install marker.js for React Native

To install marker.js for React Native, run the following command:

npm install @markerjs/react-native-markerjs
Copy

Add a sample image

You can use any image you wish, but if you don't have one handy you can use the image below. Just save it in your project under the assets folder.

Add the MarkerArea component

Let's add the basic MarkerArea component to our app in the app/index.tsx file.

Before we add the component itself, let's take care of some chores. Namely, we need to setup the sample image and add some state to store the annotations.

Target image

First, we need to import the image. Add the following code to your app/index.tsx file outside of the Index component:

const targetImage = require("@/assets/images/sample-image.png");
Copy

State for annotations

Next, we need to add a state variable to store the annotations. Inside the Index component, add the following code:

const [annotation, setAnnotation] = useState<AnnotationState | null>(null);
Copy

Add the MarkerArea component

Now we can add the MarkerArea component.

<MarkerArea
  targetSrc={targetImage}
  annotation={annotation}
  onAnnotationChange={setAnnotation}
/>
Copy

Complete app/index.tsx so far

At this point, your app/index.tsx file should look like this:

import { AnnotationState, MarkerArea } from "@markerjs/react-native-markerjs";
import { useState } from "react";
import { View } from "react-native";

const targetImage = require("@/assets/images/sample-image.png");

export default function Index() {
  const [annotation, setAnnotation] = useState<AnnotationState | null>(null);

  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <MarkerArea
        targetSrc={targetImage}
        annotation={annotation}
        onAnnotationChange={setAnnotation}
      />
    </View>
  );
}
Copy

And when you run your app with npm run ios or npm run android, you should see the image displayed by the MarkerArea component. You can't do anything with it yet, and that's what we are addressing next.

Creating markers

Setting up a ref

To interact with the MarkerArea component, we need to set up a ref. This will allow us to call methods on the MarkerArea instance.

const markerAreaRef = useRef<MarkerAreaHandle>(null);
...
      <MarkerArea
        targetSrc={targetImage}
        annotation={annotation}
        ref={markerAreaRef}
        onAnnotationChange={setAnnotation}
      />
Copy

Adding a button to create a marker

Finally, let's add a button that will initiate the marker creation process. We will use the markerAreaRef to call the createMarker method and create a new arrow marker.

<View style={{ flex: 1 / 4 }}>
  <Button
    title="Add arrow"
    onPress={() => {
      markerAreaRef.current?.createMarker("ArrowMarker");
    }}
  />
</View>
Copy

Now when you run your app and tap the "Add arrow" button, you can drag your finger on the image to create an arrow marker. You can create more arrows by tapping the button again or you can manipulate the existing marker by dragging it around.

Complete app/index.tsx with marker creation

import {
  AnnotationState,
  MarkerArea,
  MarkerAreaHandle,
} from "@markerjs/react-native-markerjs";
import { useRef, useState } from "react";
import { Button, View } from "react-native";

const targetImage = require("@/assets/images/sample-image.png");

export default function Index() {
  const [annotation, setAnnotation] = useState<AnnotationState | null>(null);

  const markerAreaRef = useRef<MarkerAreaHandle>(null);

  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <MarkerArea
        targetSrc={targetImage}
        annotation={annotation}
        ref={markerAreaRef}
        onAnnotationChange={setAnnotation}
      />

      <View style={{ flex: 1 / 4 }}>
        <Button
          title="Add arrow"
          onPress={() => {
            markerAreaRef.current?.createMarker("ArrowMarker");
          }}
        />
      </View>
    </View>
  );
}
Copy

Next steps

This quick start covered the very basics of using marker.js for React Native. You can now create markers on an image and manipulate them.

For a more extensive demo, check out the marker.js for React Native demo app.