Android Pattern Lock with React Native and Expo
13 min readDec 9, 2017
Playing with gesture and animation in React Native is always a fun but challenging thing to do. My previous post covered how I implemented gesture handler for zooming and dragging a photo. This time I tried another challenge to build a UI that is familiar to Android users: the Pattern Lock.
Pattern Lock is one of the security options supported in Android to unlock your phone. In iOS, there is no pattern lock available. So I took the challenge to build this for both platforms using React Native and Expo.
Before we start coding, let’s see the pattern lock in action.
From the demo above, we can summarize some requirements:
- User starts by choosing one dot as the starting point, then swipe through the other dots to form a pattern.
- Each dot can only be visited once.
- There will be a snap animation when the user’s gesture approaches it closely.
- The dot(s) between the last connected and newly connected dots will become visited if they fall on the horizontal, vertical, or diagonal line of the pattern.
