Skip to main content

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.


Labels:

Comments

  1. zennooberhausMarch 5, 2022 at 8:10 AM

    columbia titanium boots | Titsanium Art
    We titanium gravel bike are a company founded to bring you babyliss pro titanium hair dryer a true quality brand with a high level of titanium ore experience in our Сustomers' betting business. Visit fallout 76 black titanium us nano titanium flat iron now!

    ReplyDelete

Post a Comment

Popular posts from this blog

React - Uncaught TypeError: destroy is not a function

Written by Aryan Mittal While experimenting with useEffect hooks in React and React Native, I came across the following error: Uncaught TypeError: destroy is not a function and my app was unable to run. After debugging and searching around, I found the cause and how to solve it. A simplified version of my code looked like this: The key here is that myFunction is async and the shorthand arrow function syntax I used. The reason the simple code above was crashing my app is due to how the useEffect hook, async functions, and the shorthand arrow function syntax works. One feature of the useEffect hook is a cleanup function. If you return anything from the useEffect hook function, it must be a cleanup function. This function will run when the component unmounts. This can be thought of as roughly equivalent to the componentWillUnmount lifecycle method in class components. In JavaScript, functions marked with the async keyword enable the use of the await feature, which lets developers paus...
Post a Comment
Read more

Calculating the number of business days between dates in Python

Written By: Aryav Nagar Calculating the number of business days between varying lengths of time, even excluding federal holidays, may seem like a tricky problem to solve, but the solution is quite simple. While developing Stockscast , an AI-based stock market forecaster, I came across this issue as I needed to find the number of days the stock exchange would be open throughout the year. The solution I found involved the use of pandas.tseries.holiday.USFederalHolidayCalendar() and pandas.tseries.offsets.CustomBusinessDay() functions are found in the Pandas library. By creating a custom calendar, using the CustomBusinessDay function, with the frequency of USFederalHolidayCalendar , we can create a calendar excluding both weekends and federal holidays. Next, find the length of time you want to calculate the number of business days in. In my case, I needed to find the number of business days between one week, one month, three months, six months, and one year from now. Finally, w...
Post a Comment
Read more