/reactnative-50-days

50 days React Native UI Challenge

Primary LanguageTypeScript

React Native 50 Days UI Challenge

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.

Buy Me A Coffee

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.

Demo

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.

Demo

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.

Demo

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.

Demo

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.

Demo

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.

Screen.Recording.2024-02-06.at.11.56.52.mp4

Day 18 Expandable FAB

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