About this animation
A glass course carousel with a swipe-synced photo backdrop and configurable course data, fonts, tint, and background color.
Why this one
The active course cover also becomes the ambient light source for the upper screen, so changing courses recolors the whole scene. A featured lesson card, filter row, glass navigation dock, and progress segment complete the course dashboard.
How it works
- Measure the container and derive the card width from the available space.
- Track horizontal pans with a shared fractional index and spring to the nearest course on release.
- Derive each card’s position and depth from its distance to that index.
- Animate the filter and bottom navigation indicators with independent shared values; taps request the same selections as gestures.
Install
npx expo install @expo/vector-icons react-native-gesture-handler react-native-reanimated react-native-workletsUsage
import { useRef } from 'react';
import CourseGlassCarousel, { type CourseGlassCarouselRef } from './CourseGlassCarousel';
export function CoursesScreen() {
const carousel = useRef<CourseGlassCarouselRef>(null);
return <CourseGlassCarousel ref={carousel} courses={courses} featured={featured} />;
}Call next(), previous(), or setSegment(index) through the ref. The card pan and all background layers use one continuous shared index.
Props
| Prop | Description |
|---|---|
courses | Course IDs, titles, images, duration, rating, lesson counts, parts, and learner labels. |
featured | Featured lower card title, image, and learner label. |
tabs | Lower filter labels and counts. |
segments | The two glass segment labels. |
avatar | Profile image used by the profile and learner stacks. |
colors | Optional pink tint and lower background colors. |
onContinue | Called with the active course ID. |
onCourseChange | Called with the settled course index and ID. |
onTabChange | Called with the selected lower tab index. |
fontFamily, mediumFontFamily, boldFontFamily | Optional UI font family names. |
style, testID | Root view style and test identifier. |
Layout
Card content uses a 16 pt inset, with 4/8 pt spacing for metadata and section gaps. The segment thumb travels exactly one option width, and filter counts sit above the label baseline with a separate gap. The featured artwork uses 54% of its row; the title has room for three lines.
The screen reserves 88 pt below its content viewport for the 56 pt navigation dock, a 16 pt bottom inset, and a 16 pt content gap. Short containers scroll above the dock without a visible scroll indicator. Content width is capped at 430 pt on tablets and in landscape. The host screen supplies system safe area insets.
Compatibility
- Expo SDK 58 and React Native 0.88
- Reanimated 4.7, Worklets 0.13, and Gesture Handler 3
- iOS, Android, and web supported.
Accessibility
Course actions expose button roles and a title-based Continue label; navigation exposes selected states. Cards can be selected without dragging. Reduced motion replaces spring travel with immediate selection updates. The host owns safe-area insets and supplies the course content and fonts.
