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

[@galaxies_dev]

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

[@morale3056]

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.

[@galaxies_dev]

It has come a long way!

[@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.

[@galaxies_dev]

Great idea, will try to show a better overview upfront next time!

[@hoangng84]

In my experience, if I code up a large enough app (e.g., a full stack with create, update, and delete for users, items and something else). There is no way I could do that without sketching out a plan. Usually, 1st step is to sketch out the plan, choices of tech stack and database, 2nd step is to make a figma design - when finishing a figma file, I should have enough idea of what can be a separate component for coding the frontend, 3rd is to code up the frontend (not perfect one) and code up the backend making the apis ready, 4th is to plug things together, polishing the UI. I'm totally self-taught to do all those things

[@Dabayare]

@@hoangng84 So u see it's importance but don't acknowledge that it doesn't exist in the culture of internet pedagogy. That is your journey so that is how you plan your road ahead. So instructors also need to do the same so ppl studying with them can go along. It shouldn't be held back like some sort of secret or this dogma is not sponsoring them.

[@Dcrosssensei]

Thank you for your videos, Simon! I’d love it if you could make one about improving performance or maybe about monitoring it. Thanks for everything!

[@galaxies_dev]

Great suggestion!

[@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

[@Jordan-v7o]

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

[@galaxies_dev]

Great tip!

[@cesarmerlo9999]

Cool, i will try these implementation of security lock screen

[@galaxies_dev]

Let me know if it works!

[@fabricedufilssiyapdje4317]

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 KZbin. Und was sehe ich da ??? :-D Genau was ich brauche. Danke !!!

[@asko___]

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

[@OrealAslam]

Hi Simon Grimm, How can we build a App Locker application using react-native technology?

[@YashNandha]

Do we create this in a bare react native app

[@geraldseydoux2252]

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?

[@galaxies_dev]

Good question, maybe? Let us know if you try!

[@TestingMailiSHATechnology]

How to implement this app security in React Native CLI

[@ericsonl_]

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

[@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

[@huzzofmecca]

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

[@Mr_Zeal1001]

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

[@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 But nevertheless I made use of "@react-native-async-storage/async-storage" and it still worked perfectly

[@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?

[@galaxies_dev]

I'll have to test again Danny but afaik it did!

[@kriswong4953]

@@galaxies_dev this privacy screen does not work on Android

[@rafaelpascal3269]

am still facing the redirection after faceId

[@Mr_Zeal1001]

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

[@galaxies_dev]

That's a good question, I'll have to debug!

[@efari]

Android doesn’t report “inactive”. Only “active” or “background”

[@Mr_Zeal1001]

@@efari There are lots of thing that doesn't work in Android.

[@leojohn6702]

Do you have any expo courses ? Or react native?

[@AGUNGKAYA]

He will do udemy course on react native, wont you simon? 😅

[@leojohn6702]

@@AGUNGKAYA I would help alooot. There is Aloot of things new on expo. X style, etc….

[@mhas19xx]

Check the description, Galaxy dev has his courses

[@galaxies_dev]

All my React Native courses are on Galaxies: galaxies.dev/learn

[@nro337]

amazing video!

[@galaxies_dev]

Thank you 🙏

[@galaxies_dev]

Thanks!

[@michaelshaibu1284]

can you add the logic that if a user stays idle on the app for 3mins without doing anything like scrolling or pressing anything on the app it should log the user out please 🙏

[@galaxies_dev]

Yeah you can intercept touches or gestures and reset a timer, should work very similar!

[@michaelshaibu1284]

@@galaxies_dev can you implement it please so I or we can pick it up and see how it works please 🙏🙏🙏🙏 am begging

[@anstapol]

This is gold!

[@galaxies_dev]

Happy to help 💪

[@newadClass]

Why are you using expo

[@galaxies_dev]

Why not

[@MohammadRezaYusufy]

Perfect

[@galaxies_dev]

Thanks!

[@blacksun6761]

full course expo

[@leojohn6702]

Does he have any?

[@galaxies_dev]

@@leojohn6702 Well yeah I do have many courses here: galaxies.dev/learn

[@tranquillityEnthusiast]

Bro forgot about Ionic, 😢😢😢😅

[@bullettime2808]

Ionic is 💩

[@morale3056]

TBH it's one of the worst experiences. Using it at work. No capacitor plugins for integrations, shit support from Ionic team and complications because it's at the end of the day, it's a webview. They can't even compete with react-native.