Proper Text alignment in vertical step indicator

[nammiharika]

Hi, i am using this module.It's working fine. But text is not aligned in vertical step-indicator.

Code:-

    const stepIndicatorStyles = {
        stepIndicatorSize: 30,
        currentStepIndicatorSize: 60,
        separatorStrokeWidth: 2,
        currentStepStrokeWidth: 3,
        stepStrokeCurrentColor: primary,
        stepStrokeWidth: 3,
        stepStrokeFinishedColor: primary,
        stepStrokeUnFinishedColor: '#aaaaaa',
        separatorFinishedColor: primary,
        separatorUnFinishedColor: '#aaaaaa',
        stepIndicatorFinishedColor: primary,
        stepIndicatorUnFinishedColor: '#ffffff',
        stepIndicatorCurrentColor: primary,
        stepIndicatorLabelFontSize: 13,
        currentStepIndicatorLabelFontSize: 13,
        stepIndicatorLabelCurrentColor: primary,
        stepIndicatorLabelFinishedColor: '#ffffff',
        stepIndicatorLabelUnFinishedColor: '#aaaaaa',
        labelColor: text,
        labelSize: 17,
        currentStepLabelColor: primary,
        labelFontFamily: weight.bold
    };
  const renderStepIndicator = (params) => {
        return <Image source={params.stepStatus == "current" ? getStepIndicatorConfig(params) : Images.empty} style={{ tintColor: Colors.white, width: 35, height: 35 }} />
    };
   <StepIndicator
                customStyles={stepIndicatorStyles}
                currentPosition={1}
                labels={labels}
                direction="vertical"
                stepCount={labels.length}
                renderStepIndicator={renderStepIndicator}
            />

Screenshot:-

[Abhishek0706]

labelAlign: "flex-start"

[Aryan6290]

labelAlign: "flex-start"

Where to put this @Abhishek0706

[infsahitya]

labelAlign: "flex-start"

Where to put this @Abhishek0706

Inside "stepIndicatorStyles" object.

[Shubhangigovil]

There is no such property labelAlign: "flex-start" in customStyles.

[akshitpatel1732]

EDIT: I know, It's too late. But just in case someone needs it (like me).

Well, it worked for me!

Here's my code:

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import StepIndicator from 'react-native-step-indicator';

const customStyles = {
    stepIndicatorSize: 25,
    currentStepIndicatorSize: 30,
    separatorStrokeWidth: 2,
    currentStepStrokeWidth: 3,
    stepStrokeCurrentColor: '#79CFFF',
    stepStrokeWidth: 3,
    stepStrokeFinishedColor: '#79CFFF',
    stepStrokeUnFinishedColor: '#aaaaaa',
    separatorFinishedColor: '#79CFFF',
    separatorUnFinishedColor: '#aaaaaa',
    stepIndicatorFinishedColor: '#1a2b64',
    stepIndicatorUnFinishedColor: '#ffffff',
    stepIndicatorCurrentColor: '#79CFFF',
    stepIndicatorLabelFontSize: 13,
    currentStepIndicatorLabelFontSize: 13,
    stepIndicatorLabelCurrentColor: '#1a2b64',
    stepIndicatorLabelFinishedColor: '#ffffff',
    stepIndicatorLabelUnFinishedColor: '#aaaaaa',
    labelColor: '#999999',
    labelSize: 13,
    currentStepLabelColor: '#1a2b64',
    labelAlign: "flex-start" // this fixed alignment issues.
};

const VerticalStepIndicator = ({ currentPosition, labels, descriptions }) => {
    return (
        <View style={styles.container}>
            <StepIndicator
                customStyles={customStyles}
                currentPosition={currentPosition}
                labels={labels}
                direction="vertical"
                stepCount={labels.length}
                renderLabel={({ position, stepStatus }) => (
                    <View style={styles.labelContainer}>
                        <Text style={styles.label}>{labels[position]}</Text>
                        <Text style={styles.description}>{descriptions[position]}</Text>
                    </View>
                )}
            />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingVertical: 20,
        paddingHorizontal: 10,
        backgroundColor: '#f00'
    },
    labelContainer: {
        marginLeft: 10,
        backgroundColor: '#0f0',
    },
    label: {
        fontSize: 16,
        fontWeight: 'bold',
        color: '#333',
    },
    description: {
        fontSize: 14,
        color: '#666',
        marginTop: 4
    }
});

export default VerticalStepIndicator;