React Native Security: Lock Screen, Face ID & Privacy Overlay

Let's build a React Native Lock Screen with FaceID and privacy overlay that automatically shows when the user is inactive!

#############################

❤️ You can also find me on:

#############################

00:00 App Overview
00:43 App Setup and Expo Prebuild
05:02 User Inactivity Provider
14:30 Lock Screen
31:50 Recap

[galaxies_dev]

Join Galaxies.dev today - the Home of the Best React Native content

[Jordan-vo]

Thanks for this usefull video Simon!
For the face id, replacing router.replace() in the biometric press func by router.back() does the job !

[Dabayare]

When I was learning at college. We would always start with diagramming our logic and our gui. I feel this is something ppl self learning miss out on cus I haven't seen a single online tutorial who does that.

[morale]

Simon, your videos have made me fall in love with react-native after a bad experience few years ago. Just shows how much react-native has come along.

[cesarmerlo]

Cool, i will try these implementation of security lock screen

[efari]

When the faceID prompt shows up, the appstate changes to “background”. It’s why it was bugging since you took more than 3 seconds to have valid faceID

[fabricedufilssiyapdje]

My guess with the navigation after the face-id is when you click on face id button the app enter (!maybe) on inactive state or the app is backgrounded somehow and the lock-time is reached hence after the face-id stuff it navigate back to the correct page and then to the lock-screen because the lock-time was reach while the user was doing face-id. to test this theory maybe you can increase the LOCK_TIME to be enough for you to perform the face-id. DANKE SCHÖN HERR GRIMM. Ich wollte genau so ein Feature implementieren, dann schaue ich schnell auf Youtube. Und was sehe ich da ??? :-D Genau was ich brauche. Danke !!!

[EfeAsiughu]

Hello Simon,

Great video tutorial helped a lot, just got one question and it's about the mmkv package
It doesn't seem to run perfect on the expo android application without display and error saying package does not have a valid config plugins

when I make use of the start command "npx expo start -c" and I don't know why that happens although I don't have an android studio installed on my window 11 Pc

[asko___]

Why is there no dynamic island animation? Is that a discrepancy between the simulator and physical device?

[AllahomAnsorGaza]

please please
tell us how we can create draw over other apps
or Display over Apps
opening windows if app in background or already closed
by background task notification

[ericsonl_]

Not sure if the face id looks something wrong it's always back to lock.tsx? 🤔

[YashNandha]

Do we create this in a bare react native app

[huzzofmecca]

Does this work for android? Since there is no inactive state for android only background or active

[dannyhw]

I had issues in the past with android not showing the privacy screen because the code doesn't run whilst the app gets backgrounded, does this work on android?

[leojohn]

Do you have any expo courses ? Or react native?

[geraldseydoux]

28:58 in apple's note it says if you don't provide that infoPlist description it will default to device passcode, does this mean you could've skipped the whole custom pin screen you made and use that instead?

[TestingMailiSHATechnology]

How to implement this app security in React Native CLI

[Mr_Zeal]

And how to setup and save the user passcode when it first time ?

[Mr_Zeal]

Simmon nextAppState (active, inactive) not working in android phone, Why ?

[rafaelpascal]

am still facing the redirection after faceId