React Native Tutorial #2 - Building a lock screen(Passcode) using ReactNative & Expo | iOS 13 GUI

#2 - Building a lock screen(Passcode) using ReactNative & Expo | iOS 13 GUI

In this video we learn:
- How to use the React Native basics components. e.g. View, Text, Image, TouchableOpacity;
- How to use ImageBackground and blurRadius to blurring the image.
- Handliing the state of passcode while press the Number or Cancel

Don't forget to leave a thumbs up if you found the video useful. Also, click on the bell icon to turn on notifications. This way you'll be notified the moment new videos are uploaded.

Follow me!

Software Used:
VSCode, React Native, Expo

---Music----
Track: Anna Yvette - Red Line [NCS Release]
Music provided by NoCopyrightSounds.

Track: Netrum - Colorblind (feat. Halvorsen) [NCS Release]
Music provided by NoCopyrightSounds.

#reactnative #reactnativeui #javascript #design #ios #expo

[desoxy]

Amazing video thank you so much. Greetings from switzerland.

[putchhaymorm]

Hello bro! How to set validation in locker screen?

[FULLUPE]

pls am using functional component and i need the screen to re-render before the styles work

[bisathe_paglu]

Zero is not working and instead of cancel word using the image it's not working. 😢😢

But still nice idea. Helped a lot

[arifbudiman]

for the people who have problem why zero is not working, you can add 3 equals like this.
if(tempCode[i] === ''){
//statement

Thank you

[zaidmohammad]

There is something wrong with the zero button. The 0 doesn't change the style and is also not updated in the state...

[faidmomed]

Correction:
this.state.passcode.map((p, index) => {
let style = p != '' ? styles.code2 : styles.code1;
return <View style={style} key={index}></View>

})