---
title: "Retrieve or set annotation bounding box in React Native | Nutrient"
canonical_url: "https://www.nutrient.io/guides/react-native/annotations/introduction-to-annotations/bounding-boxes/"
md_url: "https://www.nutrient.io/guides/react-native/annotations/introduction-to-annotations/bounding-boxes.md"
last_updated: "2026-05-18T12:22:04.662Z"
description: "Learn how to retrieve PDF annotation bounding boxes using getAnnotations and display their values with a button in your JavaScript application."
---

# 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 `getAnnotations(type)` or `getAnnotationsForPage(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:

```js...
export default class App extends Component<{}> {
  render() {
    return (
      <View style={{flex: 1}}>
        <NutrientView
          document={DOCUMENT}
          ref={this.pdfRef}
          fragmentTag="PDF1"
          style={{flex: 1}}
        />
        <View
          style={{
            flexDirection: 'row',
            height: 60,
            alignItems: 'center',
            padding: 10,
          }}>
          <View>
            <Button
              onPress={async () => {
                // Get all ink annotations from the first page of document.
                const inkAnnotationsJSON = await this.pdfRef?.current?.getDocument().getAnnotationsForPage(
                  15,
                  'pspdfkit/ink',
                );

                const inkAnnotation = annotations[0] as InkAnnotation;
                const boundingBox = inkAnnotation.bbox;

                // Show an alert with the first ink annotation’s bounding box.
                alert(JSON.stringify(boundingBox));
              }}
              title="Show bounding box"
            />
          </View>
        </View>
      </View>
    );
  }
}...

```![bounding box alert](@/assets/guides/react-native/annotations/intoduction-to-annotations/bounding-boxes/bounding-box-alert.png)

---

## Related pages

- [Supported annotations types in React Native](/guides/react-native/annotations/introduction-to-annotations/annotation-types.md)
- [What are PDF annotations?](/guides/react-native/annotations/introduction-to-annotations/what-are-annotations.md)