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> ); } }
![Overlaid Save Button](/images/guides/react-native/knowledge-base/how-do-i-overlay-a-custom-UI-element-in-react-native/overlayed-save-button-c3db6d12.png)