How do I overlay a custom UI element in React Native?

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

This modified version of the ManualSave component from our Catalog example overlays the Save button in the top-right corner of the view, like so:

class ManualSave extends Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <NutrientView
          ref="pdfView"
          document={'PDFs/Annual Report.pdf'}
          disableAutomaticSaving={true}
          configuration={{
            iOSBackgroundColor: 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.pdfRef.current?.getDocument().save();
              }}
              title="Save"
            />
          </View>
        </View>
      </View>
    );
  }
}
Overlaid Save Button