Welcome to my React Native 50 Days UI Challenge repository! If you find this project helpful or inspiring, please consider supporting me by giving a star ⭐. Your support helps me keep building and sharing more awesome content.
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.
Bouncy Onboarding component slides its content either to the left or right.
Circular Onboarding component shows the process of onboarding screens using a circle and also contains an animated dot indicator to show the current screen.
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
Sticky Header component that interpolates its content to the Y-axis origin based on the defined value.
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.
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.
An Animated loader component that simply interopolates its scale border radius and adjust itself to a circular shape
animated-loader.mp4
Animated shpae animation which slightly rotates to right with interpolating the border radius and also back to the original
animated-shapes.mp4
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
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
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
A React Native component that provides a smooth, interactive, and customizable card-flipping animation for both iOS and Android platforms.
flippy-card.mp4
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
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
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
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
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.
Screen.Recording.2024-02-06.at.11.56.52.mp4
The Expandable Floating Action Button (FAB) component is a customizable, circular button that expands to reveal multiple action buttons. When the main FAB is pressed, it expands smoothly to display a list of actions, each with its own icon, color, title, and description. This component is designed to provide quick access to multiple actions in a user-friendly and visually appealing manner.
Expandabla-FAB.mp4
Micro Swipe Actions brings a sleek and intuitive way for users to interact with list items or cards through swipe gestures. This component allows for smooth, responsive swipe actions that reveal a set of customizable icons. As the user swipes, icons transition from dots to fully visible icons, offering actions such as bookmarking, starring and etc. The component ensures a fluid user experience with spring animations that make the interactions feel natural and engaging. Perfect for enhancing the functionality of lists or cards in some apps.
micro-swipe-actions.mp4
The Direction Aware Tabs component introduces a dynamic and responsive tab navigation system that enhances user interaction with visual cues. This innovative component seamlessly integrates animated transitions and directional awareness, creating an intuitive experience as users switch between different sections. Each tab smoothly animates into view, with content shifting in a visually appealing manner, guided by the direction of the tab change. The addition of a blur effect during transitions further enriches the user experience, providing a subtle yet effective visual feedback. This component is perfect for applications that aim to offer an engaging and visually rich navigation experience, making content exploration smooth and enjoyable.
direction-aware-tabs.1.mp4
The Accordion Component brings an organized and interactive way to display expandable content within your application. This component is designed to reveal or hide content sections dynamically, based on user interaction. Each accordion item smoothly transitions between its expanded and collapsed states, ensuring a seamless user experience. The animation is enhanced with customized spring physics to make the transitions feel natural and responsive, minimizing bounce during collapse and providing quick expansion. This component is ideal for FAQs, settings menus, and any content-heavy sections where users need to access detailed information without navigating away from the main page.