How to Add a Vertical Timeline To your React Native App

To add a component to show the progress/timeline of a process with different statuses, you can use the library react-native-vertical-status-progress. Works with Expo and React Native.

The component from the library is designed to visually represent the progress of a multi-step process. Each step is represented by a status indicator that can be customized to show whether the step is completed or pending. This component is ideal for workflows, onboarding processes, or any scenario where you need to display progress through a series of steps. It is compatible with both Expo and React Native projects, making it versatile and easy to integrate into your existing applications.

Features

Accordion Support: Each status can be expanded or collapsed to show more details. This is useful for providing additional information or actions related to each step.
Customizable Content: You can render any component within the accordion, including call-to-action (CTA) buttons, forms, or any other React Native components.

Installation

npm install react-native-vertical-status-progress

Usage

import { VerticalStatusProgress } from 'react-native-vertical-status-progress';

const statuses = [
  {
    title: 'Sign Up Complete',
    subtitle: 'You have successfully signed up.',
    status: 'registered',
  },
  {
    title: 'Set up your account',
    subtitle: 'Add your account details to get started.',
    renderContent: (
      <TouchableOpacity>
        <Text>vbireuvgbireubgireuf</Text>
      </TouchableOpacity>
    ),
    status: 'setting_up',
  },
  {
    title: 'Account Verification',
    subtitle: 'We are verifying your account.',
    renderContent: (
      <View>
        <Text>
          We will contact you shortly if we need any additional information.
          Please contact us if you have any questions. Check your email for
          updates.
        </Text>
        <TouchableOpacity
          style={{
            backgroundColor: colors.ACCENT_BLUE,
            padding: 10,
            borderRadius: 5,
            width: 150,
            alignItems: 'center',
            marginTop: 10,
          }}
        >
          <Text style={{ color: '#fff' }}>Resend Email</Text>
        </TouchableOpacity>
      </View>
    ),
    status: 'verifying',
  },
  {
    title: 'Account Verified',
    subtitle: 'Your account has been verified.',
    status: 'waiting',
  },
  {
    title: 'All Set!',
    subtitle:
      "You're all set up and ready to go. Start using your account now.",
    renderContent: (
      <View>
        <Text>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. A ullam
          assumenda obcaecati? Minima libero vitae ducimus, omnis, excepturi
          saepe, doloribus corrupti hic deleniti id iure? Qui consequuntur at
          magnam consequatur!
        </Text>
      </View>
    ),
    status: 'ready',
  },
];

const App = () => {
    return (
        <VerticalStatusProgress statuses={statuses} />
    );
};

export default App;

Customization

You can customize the appearance of the react-native-vertical-status-progress component by passing in custom styles and render functions. Here are some examples:

Custom Ball Component

const renderCustomBall = (label, idx, isPrev, isFuture) => (
  <View style={{ backgroundColor: isPrev ? 'blue' : 'grey', width: 16, height: 16, alignItems: 'center', justifyContent: 'center', borderRadius: 4 }}>
    <Text style={{ color: 'white', fontSize: 10 }}>{idx}</Text>
  </View>
);

<VerticalStatusProgress
  statuses={statuses}
  renderBall={renderCustomBall}
/>

Custom Stick Component

const renderCustomStick = (label, idx, isPrev, isFuture) => (
  <View style={{ flex: 1, width: 5, backgroundColor: isPrev ? 'blue' : 'grey' }} />
);

<VerticalStatusProgress
  statuses={statuses}
  renderStick={renderCustomStick}
/>

Custom Chevron Component

const renderCustomChevron = (open, index) => (
  <Text>{open ? '-' : '+'}</Text>
);

<VerticalStatusProgress
  statuses={statuses}
  renderChevron={renderCustomChevron}
/>

With react-native-vertical-status-progress it becomes very easy to add any timeline for status progress on your app.

To see more details about customisation, props and example, visit the library page on npm or github.