Retrieve or Set the Annotation Bounding Box in React Native

Each annotation has a size and a position, known as the annotation’s bounding box. To access the bounding box of a given annotation, you need to call getAllAnnotations(type) or getAnnotations(pageIndex, type) to get the annotation. Then you can access its bounding box (bbox). The value of the bounding box is a rect array instance, which holds the annotation’s size and position in PDF coordinates.

The example below shows how to add a button that displays an alert with the value of the bounding box of the first ink annotation on the first page of the document:

export default class App extends Component<{}> {
  render() {
    return (
      <View style={{flex: 1}}>
          style={{flex: 1}}
            flexDirection: 'row',
            height: 60,
            alignItems: 'center',
            padding: 10,
              onPress={async () => {
                // Get all ink annotations from the first page of document.
                const inkAnnotationsJSON = await this.refs.pdfView.getAnnotations(

                const inkAnnotationsArray = inkAnnotationsJSON['annotations'];
                const firstInkAnnotation = inkAnnotationsArray[0];
                const boundingBox = firstInkAnnotation['bbox'];

                // Show an alert with the first ink annotation’s bounding box.
              title="Show bounding box"

bounding box alert