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.
Screen.Recording.2024-06-24.at.00.55.02.mp4
The Animated Collapsible Card component provides a sleek and modern way to display expandable content within your application. This component features smooth animations for expanding and collapsing card content, enhancing the user experience by offering an interactive way to access detailed information. The card header includes an animated icon and dynamic content that transitions seamlessly. The component leverages React Native Reanimated for performant animations and Lucide icons for visually appealing graphics. Perfect for displaying notifications, updates, and expandable lists.
collapsible-card.mp4
The Wiggling Cards component adds a fun and interactive animation to your card elements. As users scroll through the cards, they wiggle dynamically using React Native Reanimated's spring animations. This effect is enhanced with a blur overlay, creating a visually engaging experience perfect for showcasing products, images, or any card-based content. The component ensures smooth, responsive animations that captivate users and make flow enjoyable.
wiggling-cards.mp4
The Spinning Circle component introduces a visually engaging and interactive way to display and select technology icons in a circular layout. This component utilizes smooth, continuous rotation to showcase various icons, with each icon dynamically highlighted when selected. The selected icon moves to the center of the circle, displaying additional information like title and description, enhancing the user interaction experience. The transitions are seamlessly animated, providing an intuitive and visually appealing way to navigate through different options. This component is perfect for applications aiming to present selectable items in a compact and engaging format.
spinning-circle.mp4
This component features split buttons for navigating back and forth between steps and a dynamic progress view that highlights the current step with animated dots. The navigation buttons dynamically resize and reposition, creating an engaging and fluid experience as users progress through the steps. The progress view on top transitions smoothly with each step, offering visual feedback on the user's progress. Utilizing spring animations, this component ensures a natural and responsive interaction, making it ideal for guiding new users through key features or instructions in a visually appealing and interactive manner.
onboarding-steps.mp4
The Split Button component is an innovative UI element that features two connected buttons that can smoothly split apart upon interaction. This component is designed to be visually appealing and interactive, providing a seamless experience for users. The left button contains a label, while the right button features an arrow icon. When pressed, the buttons animate to split apart, revealing additional functionality or navigation options. The component leverages React Native Reanimated for smooth animations and SVG for scalable graphics.
split-button.mp4
The Bar Chart component offers a visually engaging way to display data, perfect for summarizing and comparing information across multiple categories. This component uses a circular layout to represent data proportionally, with each segment corresponding to a specific category's value. Smooth animations enhance the user experience, including transitions for segment selection and data display. When a segment is selected, detailed information is dynamically displayed in the center of the chart. This component is ideal for health apps, activity trackers, and dashboards, providing an intuitive and interactive method for data visualization.
piechart.mp4
The Circular Progress Bar component provides a dynamic and visually appealing way to represent progress in a circular format. This component features animated progress lines that grow and change color as the progress value updates, creating a smooth and engaging user experience. The progress percentage is displayed in the center of the circle, with an accompanying "Processing" text. A responsive "Start" button at the bottom of the screen triggers the progress animation, scaling when pressed to enhance interactivity. The component is built using React Native Reanimated for smooth animations and SVG for scalable graphics, making it perfect for fitness apps, loading indicators, and progress tracking interfaces.
circular-progress.mp4
The FlashCards component provides an engaging and interactive way to display content, making it ideal for a variety of applications. Each card features a smooth flip animation, allowing for dynamic transitions between the front and back sides. This component supports full customization of both sides, enabling the integration of icons, styled text, and other elements to enhance the user experience. The flip animation includes a slight translation effect, adding a natural and fluid motion to the transition. Perfect for educational apps, product showcases, quizzes, and more.
flash-cards.mp4
The Heart Progress Circle component is a visually engaging and interactive way to display progress. This component features a circular progress bar that fills up in segments, with a delay after each segment to create a step-by-step animation effect. Additionally, a heart icon in the center scales up and down with a smooth animation, adding an extra layer of interactivity and visual appeal.
heart-progress-circle.mp4
The Radial FAB (Floating Action Button) is an interactive component that expands a series of icons in a semi-circular arc around a central button. When the main FAB is pressed, the icons smoothly animate into view, providing quick access to various actions. This visually appealing component leverages React Native Reanimated for smooth animations and is perfect for applications that require efficient navigation and action-taking in a compact interface.