React Native Stepper component like described in https://material.io/guidelines/components/steppers.html

Stepper.js

/**
 * @flow
 */

import React from 'react';
import {
    Image,
    View,
} from 'react-native';

import {primaryColor} from '../colors';

const pinSize = 14;
// .blockName__elemName_modName
const styles = {
    stepper__container: {
        flexDirection: 'row',
        marginLeft: 10,
        justifyContent: 'center',
        borderLeftWidth: 1,
        borderLeftColor: '#CCC',
    },

    stepper__pin_wrapper: {
        flexDirection: 'column',
    },

    stepper__line_top: {
        flex: 1,
        backgroundColor: '#FFF',
    },
    stepper__line_top_start: {
        marginLeft: -~~(pinSize/2),
    },
    stepper__line_top_current: {},
    stepper__line_top_end: {
    },

    stepper__line_bottom: {
        flex: 1,
        backgroundColor: '#FFF',
        bottom: 0,
    },
    stepper__line_bottom_start: {},
    stepper__line_bottom_current: {},
    stepper__line_bottom_end: {
        marginLeft: -~~(pinSize/2),
    },

    stepper__pin: {
        marginLeft: -~~(pinSize/2),
        alignSelf: 'center',
        borderWidth: ~~(pinSize/4),
        borderColor: '#FFF',
    },
    stepper__pin_start: {
        width: pinSize,
        height: pinSize,
        backgroundColor: '#AAA8AB',
        borderRadius: 50,
    },
    stepper__pin_current: {
        width: pinSize,
        height: pinSize,
        backgroundColor: '#343138',
    },
    stepper__pin_end: {},

    stepper__content: {
        flexGrow: 1,
    },
};

export default ({ children, style, start, current, end }) => {

    return (
        <View style={{...styles.stepper__container, ...style}}>
            <View style={{...styles.stepper__pin_wrapper,}}>
                <View style={{
                    ...styles.stepper__line_top,
                    ...(start ? styles.stepper__line_top_start : {}),
                    ...(current ? styles.stepper__line_top_current : {}),
                    ...(end ? styles.stepper__line_top_end : {}),
                }} />
                <View style={{
                    ...styles.stepper__pin,
                    ...(start ? styles.stepper__pin_start : {}),
                    ...(current ? styles.stepper__pin_current : {}),
                    ...(end ? styles.stepper__pin_end : {}),
                }} />
                <View style={{
                    ...styles.stepper__line_bottom,
                    ...(start ? styles.stepper__line_bottom_start : {}),
                    ...(current ? styles.stepper__line_bottom_current : {}),
                    ...(end ? styles.stepper__line_bottom_end : {}),
                }} />
            </View>
            <View style={styles.stepper__content}>{children}</View>
        </View>
    );
};