How do I Overlay a Custom UI Element in React Native?

Q: How do I Overlay a Custom UI Element in React Native?

A: You can add an overlay button on top of PSPDFKitView by setting its position offset in the containing view’s style.

In this modified version of the ManualSave component from our Catalog example, we overlay the “Save” button in the top-right corner of the view, like so:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
class ManualSave extends Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <PSPDFKitView
          ref="pdfView"
          document={"PDFs/Annual Report.pdf"}
          disableAutomaticSaving={true}
          configuration={{
            backgroundColor: processColor("lightgrey"),
            showThumbnailBar: "scrollable"
          }}
          style={{ flex: 1, color: pspdfkitColor }}
        />
        <View
          style={{
            position: 'absolute',
            right: 10,
            top: 40,
            flexDirection: "row",
            height: 60,
            alignItems: "center",
            padding: 10
          }}
        >
          <View>
            <Button
              onPress={() => {
                // Manual Save
                this.refs.pdfView.saveCurrentDocument();
              }}
              title="Save"
            />
          </View>
        </View>
      </View>
    );
  }
}
Overlayed Save Button