---
title: "How do I overlay a custom UI element in React Native?"
canonical_url: "https://www.nutrient.io/guides/react-native/knowledge-base/how-do-i-overlay-a-custom-ui-element-in-react-native/"
md_url: "https://www.nutrient.io/guides/react-native/knowledge-base/how-do-i-overlay-a-custom-ui-element-in-react-native.md"
last_updated: "2026-06-19T09:21:00.305Z"
description: "You can add an overlay button on top of PSPDFKitView by setting its position offset in the containing view’s style. for Nutrient React Native SDK."
---

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](https://github.com/PSPDFKit/react-native/tree/master/samples/Catalog) overlays the **Save** button in the top-right corner of the view, like so:

```js

class ManualSave extends Component {
	render() {
		return (
			<View style={{ flex: 1 }}>
				<NutrientView
					ref={this.pdfRef}
					document={'PDFs/Annual Report.pdf'}
					configuration={{
						iOSBackgroundColor: processColor('lightgrey'),
						showThumbnailBar: 'scrollable',
						disableAutomaticSaving: true,
					}}
					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>
		);
	}
}

```
---

## Related pages

- [Customize Nutrient UI with React Native](/guides/react-native/knowledge-base/react-native-appearance-customization.md)