@uiw/react-native/lib/Steps/index.js

UIW for React Native

import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import Icon from '../Icon';
export default (props => {
  const {
    items = [],
    current = 0,
    onChange,
    ...others
  } = props;
  const onStepsPress = index => {
    // onChange?.(index);
    onChange && onChange(current);
  };
  return <View style={styles.steps} {...others}>
      {items.map((item, index) => <TouchableOpacity style={[styles.item]} key={index} onPress={() => onStepsPress(index)}>
          <View style={styles.wrap}>
            {index !== 0 && <View style={styles.leftLine}></View>}
            <View style={[styles.circular, {
          backgroundColor: current >= index && !item?.status ? '#008EF0' : '#e5e5e5'
        }]}>
              {item?.status === 'error' && <Icon name="circle-close" size={22} fill="#dc3545" />}
              {item?.status === 'success' && <Icon name="circle-check" size={22} fill="#008EF0" />}
              {!item?.status && <Text style={{
            color: current >= index ? '#fff' : '#333'
          }}>
                  {index + 1}
                </Text>}
            </View>
            {index < items.length - 1 && <View style={styles.rightLine}></View>}
          </View>
          <Text>{item.title}</Text>
          <Text style={styles.desc}>{item.desc}</Text>
        </TouchableOpacity>)}
    </View>;
});
const styles = StyleSheet.create({
  steps: {
    flexDirection: 'row',
    paddingTop: 10,
    paddingBottom: 10
  },
  item: {
    flex: 1,
    flexDirection: 'column',
    alignItems: 'center'
  },
  wrap: {
    position: 'relative',
    alignItems: 'center',
    width: '100%',
    marginBottom: 10
  },
  leftLine: {
    backgroundColor: '#ccc',
    position: 'absolute',
    width: '50%',
    top: '50%',
    height: 1,
    left: '0%'
  },
  rightLine: {
    backgroundColor: '#ccc',
    position: 'absolute',
    width: '50%',
    top: '50%',
    height: 1,
    right: '0%'
  },
  circular: {
    width: 25,
    height: 25,
    backgroundColor: '#e5e5e5',
    borderRadius: 20,
    position: 'relative',
    zIndex: 3,
    alignItems: 'center',
    justifyContent: 'center'
  },
  desc: {
    color: '#ccc',
    fontSize: 12,
    textAlign: 'center',
    paddingLeft: 5,
    paddingRight: 5,
    marginTop: 10,
    lineHeight: 18
  }
});