React Native 50 Days UI Challenge
This repository contains my implementation of the React Native 50 Days UI Challenge. In this challenge, I will be creating 50 different UI designs using React Native.
Day 1 Bouncy Onboarding
Bouncy Onboarding component slides its content either to the left or right.
Day 2 Circular Onboarding
Circular Onboarding component shows the process of onboarding screens using a circle and also contains an animated dot indicator to show the current screen.
Day 3 Dynamic Tabs
This React Native component is a customizable, dynamic, and animated tab bar with a paginator. The implementation uses a ScrollView with pagingEnabled set to true to mimic the behavior of native tabs. The component is designed to provide a smooth and interactive user experience when navigating between tabs.
dynamic-tabs.mp4
Day 4 Sticky Header
Sticky Header component that interpolates its content to the Y-axis origin based on the defined value.
Day 5 Animated Cards
The AnimatedCards component displays a list of cards (Master or Visa) that can be expanded when pressed. When a card is expanded, the component navigates to the CardDetail screen. The cards are animated with React Native Reanimated, and the animations include moving the cards to their expanded positions, changing the opacity of the close button, and translating the title.
Day 6 Swipeable Rows
Swipeable Rows is a customizable React Native component that provides swipeable row functionality for lists. It allows you to reveal hidden actions on each row with a smooth swiping gesture.
Day 7 Animated Loader
An Animated loader component that simply interopolates its scale border radius and adjust itself to a circular shape
animated-loader.mp4
Day 8 Animated Shapes
Animated shpae animation which slightly rotates to right with interpolating the border radius and also back to the original
animated-shapes.mp4
Day 9 Dial Button
The Dial Button Component is a custom circular menu, featuring a central button surrounded by six selectable icons. When the central button is pressed, the menu expands or collapses with a smooth animation. Each selectable icon is positioned along the circumference of the circle, and an animated icon indicator highlights the currently selected icon. The component is built using React Native and the react-native-reanimated library.
dial-button.mp4
Day 10
Floating Button is a customizable, circular floating action button (FAB) component for React It features an expandable menu with multiple action buttons. When the main FAB is pressed, it rotates, and the action buttons appear in a circular arc around it. Users can interact with these action buttons to perform various actions in the app.
floating-button.mp4
Day 11
The component displays a real-time audio waveform visualization, updating as new audio data comes in. The interface includes a play/pause button for starting and stopping recording and a timer that shows the elapsed recording time.
audio-input-visualizer.mp4
Day 12
A React Native component that provides a smooth, interactive, and customizable card-flipping animation for both iOS and Android platforms.
flippy-card.mp4
Day 13
The Expandable List component is a customizable, interactive, and animated list that can be expanded or collapsed with a smooth animation. The component displays a list of transactions, and each item in the list can be expanded to reveal more details. The expand/collapse button changes its text and rotates the chevron icon based on the current state of the list.
expanding-list.mp4
Day 14
Today's challenge showcases an interactive and animated card deck designed in React Native. The deck of cards can transition between two primary states - stacked and spread. Each card in the deck is a FlipCard component, designed to display the suit and rank of the card.
playing-cards.mp4
Day 15
Runny Border offers an animated border effect for UI elements, creating a unique "melting" visual. This component can serve both as a distinctive design highlight for specific UI components and as an interactive loading indicator.
runny-border.mp4
Day 16 StarRateWave
The Rating Wave component presents a fresh take on the classic star rating system. Each star smoothly animates in sequence, filling up as if liquid is being poured into them. With an additional half-fill feature, the stars can depict half ratings visually using a gradient effect. The wave-like animation and the harmonious transition from one star to another capture user attention, ensuring an interactive and delightful rating experience.
rating-wave.mp4
Day 17 Animated Gauge
The Mood Gauge introduces an interactive and visually captivating way for users to express their feelings. This component transforms the conventional mood selector into a dynamic and colorful gauge, where each segment vividly represents a different mood. Users can effortlessly select how they feel by tapping on a segment, which then animates to highlight their choice. The seamless transition between moods, combined with a harmonious color palette, not only makes the Mood Gauge aesthetically pleasing but also enhances user engagement. It's an innovative tool for apps focusing on mental well-being, user feedback, or any platform seeking to enrich user interaction with a touch of emotion and playfulness.