Lenskart UI Clone in React Native

View in Expo

Screens

Click Here to watch demo video

1. Home Screen

---

2. Search Screen

• Data is retrived from the Lenskart Api using useEffect Hook
• Activity Indicator is displayed while the data is being retrieved from the api

---

3. Video Screen

• Custom component with play/pause button
• Play/Pause button disappears after 3 seconds of not pressing it
• Play/Pause button re-appears after tapping anywhere on the screen
• After video ends, navigates back to the Home Screen

---

4. Drawer

• Expandable List

---

Navigation Utilized:

• Drawer Navigation
• Stack Navigation

React Hooks Used:

• useState
• useEffect
• useRef

Primary React Native Components Used:

• ScrollView
• FlatList
• Pressable
• Image
• ImageBackground
• StyleSheet

3rd Party Components Used:

• React Native Material Ripple
  Used to achieve ripple effect on images
• Expo AV
  Used in the Video Screen
• Expo Linking
  Used for onPress external links to Whatsapp, Email, etc.