Lock Screen Challenge

Description

• In this repo, I used react native to implement the lock screen dialer Challenge that I recently stumbled upon twitter

    Link: Twitter - https://twitter.com/mkobuolys/status/1587417971743408129?t=50ojxlAN3WDWVqxb4S5-GA&s=09
  

• I learnt a lot from modifying native code to using trigonometry while animating(Yes, I never took notes but I need to workout the math - Thanks to my Trainer for his help)

• So, There are basically two Views,

  1. Dialer View
  2. Simplified View

• At most care in supporting most of the devices (Portrait)

Tech Stack

Client: React Native - javascript

Lessons Learned

• Using Trigometric to position elements along the boundaries of the circle
• Coordinate Systems in React Native, and how to utilize it
• Synchronizing setTimeout for Smoother Animations

Demo

demo-video.mp4

Authors

• @Balasuriya K A

Acknowledgements

• Math behind Animations - Williams Reanimated