Advanced Components
A guide to the complex, interactive components for building rich user interfaces.
VibeFast includes several advanced components designed for specific, interactive use cases. These components are located in src/components/advanced-ui/.
Timeline
The Timeline component is perfect for displaying a sequence of events in chronological order, such as a shipping tracker or a project's history.
- Location:
src/components/advanced-ui/timeline/ - Key Feature: It's highly customizable, allowing you to pass in custom React components as children for individual timeline items. It also supports different animation types for when the status of an item changes.
Example Usage:
import { Timeline } from '@/components/advanced-ui/timeline';
import type { TimelineItem } from '@/components/advanced-ui/timeline/types';
const orderTimelineItems: TimelineItem[] = [
{
id: 1,
title: 'Order Placed',
description: "We've received your order.",
timestamp: 'May 7, 10:23 AM',
icon: 'shopping-bag',
status: 'complete',
},
{
id: 2,
title: 'Shipped',
description: 'The package is on its way.',
timestamp: 'May 8, 9:15 AM',
icon: 'package',
status: 'current',
},
{
id: 3,
title: 'Delivered',
timestamp: 'Est. May 10, by 6:00 PM',
icon: 'home',
status: 'upcoming',
},
];
<Timeline items={orderTimelineItems} />;Stepper
The Stepper is a flexible component for incrementing or decrementing a numerical value. It's built with a context provider, allowing you to compose its parts (StepperButton, StepperValue, StepperContent) in any way you choose.
- Location:
src/components/advanced-ui/stepper/ - Key Feature: Uses
react-native-animated-rolling-numbersto provide a fun, animated number display.
Example Usage:
import {
Stepper,
StepperButton,
StepperContent,
StepperValue,
} from '@/components/advanced-ui/stepper';
import { useState } from 'react';
function MyStepper() {
const [quantity, setQuantity] = useState(1);
return (
<Stepper
value={quantity}
onChange={setQuantity}
min={1}
max={10}
step={1}
>
<StepperContent>
<StepperButton type="decrement" />
<StepperValue />
<StepperButton type="increment" />
</StepperContent>
</Stepper>
);
}ChipGroup
The ChipGroup component is ideal for filter UIs or segmented controls where a user can select one option from a set.
- Location:
src/components/advanced-ui/chip/ - Key Feature: It uses
expo-symbolsfor icons and features a smooth, animated transition when the selected chip changes.
Example Usage:
import { ChipGroup } from '@/components/advanced-ui/chip';
import { useState } from 'react';
const chipData = [
{
label: 'Primary',
icon: 'person',
activeIcon: 'person.fill',
},
{
label: 'Notifications',
icon: 'bell',
activeIcon: 'bell.fill',
},
];
function MyFilter() {
const [selectedIndex, setSelectedIndex] = useState(0);
return (
<ChipGroup
chips={chipData}
selectedIndex={selectedIndex}
onChange={setSelectedIndex}
/>
);
}These advanced components provide the building blocks for creating a sophisticated and engaging user experience in your VibeFast application.