Achieving the iOS “glass” blur with React Native

Written By: Aryan Mittal

Perhaps the most common component in every mobile app is the header. It tells your user where they are in your app, and it’s at the very top of the screen. So, it’s crucial to have a polished and native-feeling header in your React Native apps. I use the React Navigation library for Voluntime’s mobile app, and I wanted to achieve the iOS “frosted glass” blur effect that Apple is known for.

Most of Apple’s iOS apps utilize the blurred header, including Settings, the App Store, Notes, and Reminders. It gives the user a hint about what’s hiding behind the header, and it makes the app feel polished and thought out.

Since I was using React Navigation, I started by searching for “react navigation blurred header” on Google. The results recommended writing your own custom header or installing additional libraries to achieve the blur effect. This wasn’t something I wanted to do for such a small change, so I dug deeper into React Navigation’s documentation.

Finally, after looking through the package’s TypeScript definition files, I found a property that looked promising.

blurEffect: Blur effect to be applied to the header (iOS only).

This can be added to the navigator’s headerStyle prop and can be set to one of the following values: 'extraLight' | 'light' | 'dark' | 'regular' | 'prominent' | 'systemUltraThinMaterial' | 'systemThinMaterial' | 'systemMaterial' | 'systemThickMaterial' | 'systemChromeMaterial' | 'systemUltraThinMaterialLight' | 'systemThinMaterialLight' | 'systemMaterialLight' | 'systemThickMaterialLight' | 'systemChromeMaterialLight' | 'systemUltraThinMaterialDark' | 'systemThinMaterialDark' | 'systemMaterialDark' | 'systemThickMaterialDark' | 'systemChromeMaterialDark'. I recommend trying them all out until you find the one that looks best for your app.

However, the blurEffect property seemed to have no effect in my app. No matter what I changed the value to, or if I included the property at all, my headers looked the same: not blurry. So, I looked back into the React Navigation TypeScript definition file, and found this comment regarding blurEffect:

Works with backgroundColor's alpha < 1.

Bingo! “alpha” in this context means how transparent the color is. If backgroundColor’s alpha is 1, the header is opaque, meaning not transparent at all. I was setting backgroundColor to '#F5F5F5', which is my app’s background color. It also had an alpha value of 1.

So, I set backgroundColor: ‘transparent’ in my headerStyles, and the blur worked! Here’s my final Stack.Navigator and Stack.Screen with a working blurred header:

And here’s how the header looked:

There are three buttons behind the header that are green, yellow, and red.