How to customize the Auth0 React-Native-Lock screen for Android

Sheena Ramirez
Aug 9, 2017 · 5 min read

I recently worked with a group using React Native to build an Android app called ProductGuardian that scans food barcodes to determine whether the item contains any allergens or undesired ingredients, based on a user’s specifications. As part of the app, I integrated Auth0 authentication for a couple reasons — 1) To give users the ease of logging into our app with Facebook or Google, and 2) because Auth0 returns a user profile during the authentication process that allowed us to prepopulate user data in our app, such as their name and an avatar.

Auth0 provides hosted web login pages that allow you to add your app’s logo, and the hosted pages are easy to use. However, my team decided not to use the hosted login page because we felt that it took our users out of the flow of our app — logging in with the hosted page would mean redirecting the user to a page in their mobile browser before they could return to our app. Instead of going that route, I opted to incorporate the react-native-lock library, which is a wrapper of Auth0’s Lock log-in form specifically for React Native. The Lock screen we implemented allows users to log-in without taking them out of the app.

The Auth0 lock screen for ProductGuardian

In the weeks since my team began building ProductGuardian, react-native-lock has been labeled as deprecated. But that has not stopped users from creating Github issues for the library, and many of those issues revolve around how to customize the react-native-lock screen. I searched many of those discussions myself when I was trying to implement the log-in screen for ProductGuardian, but answers were very few and far between. With some digging, I figured out a solution, which I’d like to share for anyone else who has added react-native-lock to their application and is still wondering how to customize the screen for Android.


  1. Look at the styles initially set for react-native-lock

Inside the folder for your React Native app, you’ll want to look at the styles inside the following file path:

/android/app/build/intermediates/exploded-aar/com.auth0.android/lock/1.17.1/res/values/values.xml

Yes, you’ll have to dig pretty deep in the files to find styles that you can customize. You’re not going to change any values here, but you can see styles that can be changed. For instance, since our app just uses social sign-in, the string value highlighted in this screenshot represents where I could change the word “Login” on the Lock screen to say something else, such as my app name. In ProductGuardian, I changed this to have no text since the everything we needed to say was on the buttons and in our logo.

com_auth0_social_only_title is the property that allowed me to change the wording on our log-in screen

You’ll want to copy any properties that you want to edit so that they can be pasted in another file, where you’ll change the values. For strings and color properties in this file, you’ll just need to copy the one line that you plan to change. To edit anything within a theme, you’ll need to highlight the whole block of code within <style> tags. For our lock screen, that meant copying the <style> block for Lock.Theme, as well as the block for Lock.Theme.Title, which contains the property for changing the log-in screen icon.

Copying Lock.Theme.Title. You’ll also need to copy the styles for Lock.Theme above this

2. Add the styles you’d like to change

Take all of the styles you copied from the previous file, and add them to the following file path:

/android/app/src/main/res/values/styles.xml

You’ll need to add the properties between the <resources> tags and after the <style> tags set for AppTheme. Here, you can change the values of any attributes that you’d like to customize in your react-native-lock screen. For instance, you can see that I changed the com_auth0_title_lock_icon_background (originally gray) to white (#ffffffff) because I wanted the icon background to blend in with the rest of the lock screen.

The customized styles I created for the ProductGuardian lock screen

I edited the icon for our lock screen by referencing a png file named pglogo.png in the line labeled <item name=”android:src”> (which doesn’t need the file extension), and I edited the size of the logo using the <item name=”android:layout_width”> and <item name=”android:layout_height”> properties. The full-size png file of our logo was saved in the same folders where the default react-native-lock icon was stored, so you’ll want to save your logo in the following file paths:

/android/app/build/intermediates/exploded-aar/com.auth0.android/lock/1.17.1/res/drawable-mdpi/<logo.png here>/android/app/build/intermediates/exploded-aar/com.auth0.android/lock/1.17.1/res/drawable-xhdpi/<logo.png here>/android/app/build/intermediates/exploded-aar/com.auth0.android/lock/1.17.1/res/drawable-xxhdpi/<logo.png here>

For the names at the top of <style> tags, you’ll want to choose a name for your customized lock screen theme and place it at the beginning of the styles. In our app, you’ll see that I named the theme “PGLock.Theme” with a parent of “Lock.Theme” (the name for the original styles). Copy your customized theme name for the next step.

3) Edit the AndroidManifest to include your custom theme

Go to your AndroidManifest.xml file in the following file path:

/android/app/src/main/AndroidManifest.xml

Here is where you’ll want to list the custom theme for your lock screen. Inside your Auth0 Lock activity, you’ll want to change the android:theme to @style/<your custom theme name here>, as you can see how I did with PGLock.Theme.

Changing the lock screen theme in AndroidManifest.xml

And that’s it! Customizing react-native-lock takes quite a bit of work, but gets much easier once you know how to set your styles.

Sheena Ramirez

Written by

Full-stack Javascript developer based in Chicago, graduate of the Hack Reactor Remote 24 cohort, recovering journalist. https://github.com/commonstarling

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade