An <Overlay /> Component with React Native Blur


Here is an <Overlay /> component that brings content inside to the front of the view regardless of its current position in the component tree.
This was extracted from react-native-modal, from the same author brentvatne, because a modal is not the only time that you want to bring something to the front of the screen.

You'll find an example in the GitHub repo that shows how you might implement a loading overlay and uses react-native-blur to blur the background.

Loading Overlay





Component implementation for UIVisualEffectView's blur and vibrancy effect.

React Native Blur