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 }}>
				<PSPDFKitView
					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>
		);
	}
}