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.