Who Turned on the Lights?

Manipulating Screen Brightness on iOS and Android Devices

Undoubtedly one of the most annoying side effects our phones have is its ability to change screen brightness dynamically. Whether it’s a setting enabled on your device to automatically adjust brightness based on your environment, or an app you downloaded manipulates it based on its needs, sometimes it’s just out of your control.

Maybe you’re an avid digital content creator and having your screen brightness at its max is to help your content be “pixel-perfect” and edited just the way you want. Maybe you’re visiting a store and need to scan your screen to quickly and easily pay for something without fumbling through your wallet or purse. Or, maybe you’re at a show or at home for a movie night and having your screen brightness as low as possible is important to one, not blind you, and two, not blind your neighbors. Whatever the backstory, it’s important for the apps we use to consider how we use our phones in our day-to-day lives to create a seamless experience that users will enjoy.

Let’s look at how we can help with this experience in native development using Ionic React with Ionic React Hooks (recently renamed to React Hooks for Capacitor). Keep reading if you have basic experience with React and React Hooks. If not, I would suggest getting familiar with React and then hop back on over!

Why Ionic React?

Short answer? Ionic React is ultimately just… React. Music to my ears.

Ionic React is also built using web components, making it compatible with a multitude of web libraries and supports iOS, Android, Desktop, and PWA (i.e. progressive web apps) all by using one shared codebase (I‘m hearing music again…).

Ionic React Hooks Re-introduced

Ionic announced their launch of Ionic React Hooks back in December of 2019. It has recently been renamed and moved to the Capacitor Community org — @capacitor-community/react-hooks. This package provides a collection of wrappers around Capacitor APIs along with a few other Ionic platform-specific features.

Alright, cool. But, why do we need this? Well, our work is cut out for us when it comes to answering the question: Is my app currently in the foreground (active) or in the background (inactive)?

I stumbled upon this package in my quest for learning how to keep track of app state in the most efficient and accurate way possible, and this was a nice surprise to find. Even better, it was started by the Capacitor team themselves and welcomes new ideas for hooks from the community — yet another benefit of using Ionic React. With this package, we’ll be able to keep track of whether our app is active or inactive in a very concise and straightforward way. So, let’s get started on building our app and seeing how this all comes together.

Creating Our Ionic React App

First, let’s build a very basic Ionic React App that will display a card letting us know what our screen brightness currently is. We will also add a button to route us to a page where our screen brightness will automatically change to maximum brightness. From there, we can dig into how we can make seamless changes in screen brightness that feels “natural” to the user.

1. We will need to install the latest version of the Ionic CLI.

npm i -g @ionic/cli

2. Now we can create our new project and get it running in the browser. Ionic React will automatically create your project using Typescript, by the way 😏.

ionic start my-screen-brightness blank --type=react
ionic serve

3. Let’s make sure we also have what we need for manipulating screen brightness, tracking app state, and then sync your project.

npm i @ionic-native/core --save
npm i cordova-plugin-brightness
npm i @ionic-native/brightness
npm i @capacitor-community/react-hooks
npx cap sync

4. Lastly, we need to create iOS and Android apps to run locally on our device. Read the docs for iOS and Android to be sure you have all dependencies installed prior to taking this step.

npx cap add ios
npx cap add android
npx cap sync

From here we can create a simple functional component as the Home page that will render a card letting us know how bright our screen is and a button that will take us to a page with a QR code to scan.

How Bright Is It?

Now that we have built our Ionic React app, let’s look at how we can get the brightness level of our device screen. This is where @ionic-native/brightness comes in. We simply import the Brightness methods to be able to get the brightness level and set the brightness level we want. For now, we just want to get the current value. So, let’s add a simple useEffect that will give us the value of our screen’s brightness when the home page mounts.

Let’s Manipulate!

Now that we know what our brightness level is, let’s navigate over to a page that requires us to have the maximum brightness level. This is common in any app where you may need to scan a QR/bar code or watching a video. Here, we will want to scan a QR code.

Let’s create a custom useBrightness hook (that we are calling in the above Scan page) to set maximum brightness on this page while storing the user’s initial brightness.

Who turned on the lights?! Oh, that’s right…we did 🙂. But, we need to consider the behavior of your everyday user. Chances are, they will get distracted at some point in their journey on our app and will switch over to another app or return to their home screen. No fear! We have the perfect cocktail for this — our custom useBrightness hook combined with the appState Capacitor hook. So, let’s go ahead and import the appState hook into our custom hook and see what this will look like.

Great! So we are now able to keep track of when our app is active or inactive, allowing us to easily revert the user’s screen brightness:

Mission Accomplished

With these changes, users won’t be as frustrated when switching through their apps. The change in brightness will feel temporary to them and specific to the QR code screen they were on — hence, a more natural feeling they may not think twice about. There’s definitely further tweaking we can do in this scenario when we really dive in deep to consider all vantage points. For example, what if a user decides to adjust their screen brightness WHILE on a page where the app has already manipulated the brightness 🤔? But, we’ll save that discussion for another day.