About this animation
A fitness dashboard with an interactive eclipse score and configurable metrics, avatar image, colors, and fonts.
How it works
- A single Reanimated progress value drives the planet's entrance and score count-up.
- The eclipse rim and satellite move on the UI thread; a pan gesture lets the user redirect the light.
- Tapping the score switches between the daily and weekly range.
- Three compact activity summaries and a supplied training image complete the dashboard.
Install
npx expo install expo-image expo-linear-gradient react-native-gesture-handler react-native-reanimated react-native-worklets @expo/vector-iconsUsage
<CosmicMotionScore
avatar={require('./member.webp')}
training={{ kicker: 'SUGGESTED TRAINING', title: 'Orbit Flow', meta: 'Strength • 28 min', image: require('./orbit-flow.webp') }}
/>The component is a full-screen dashboard. Its parent owns safe-area insets. Call ref.replay() to replay the entrance or ref.toggleRange() to switch the score range.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
userName | string | ALEX | Profile name. |
avatar | ImageSourcePropType | required | Profile image. |
greeting | string | Good orbit, | Header greeting. |
headline | string | MOTION | Display headline. |
tagline | string | Keep your rhythm cosmic. | Supporting copy. |
score | number | 86 | Today's score. |
maxScore | number | 100 | Score maximum. |
scoreLabel | string | MOVEMENT SCORE | Score caption. |
rating | string | Stellar | Score rating. |
weekScore | number | 78 | Weekly score. |
stats | CosmicMotionStat[] | 3 activity metrics | Labels, values, progress and colors. |
training | CosmicMotionTraining | required | Suggested training content and image. |
colors | CosmicMotionColors | cosmic palette | Eclipse stops, satellite and background. |
onTrainingPress | () => void | — | Training card action. |
onTabChange | (tab) => void | — | Bottom tab action. |
fontFamily | string | system | Interface typeface. |
displayFontFamily | string | system | Headline and metric typeface. |
scoreFontFamily | string | system | Score typeface. |
style | StyleProp<ViewStyle> | — | Root container style. |
testID | string | cosmic-motion-score | Root test identifier. |
Compatibility
Expo SDK 58, React Native 0.88, Reanimated 4.7, iOS, Android and web. Uses Feather icons from @expo/vector-icons. Expo Go supports the dependencies used here.
Accessibility
Score and training actions expose labels and button roles. Reduced motion skips the entrance and continuous orbit while keeping final values visible. The parent screen provides safe-area spacing.
Why this one
The central score is treated as a small world with movable light, orbiting motion and supporting activity data instead of another repeated set of progress rings.
