Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Proper Text alignment in vertical step indicator #111

Open
nammiharika opened this issue Dec 29, 2020 · 5 comments
Open

Proper Text alignment in vertical step indicator #111

nammiharika opened this issue Dec 29, 2020 · 5 comments

Comments

@nammiharika
Copy link

nammiharika commented Dec 29, 2020

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:-
Screenshot 2020-12-29 at 10 27 51 AM

@Abhishek0706
Copy link

labelAlign: "flex-start"

@Aryan6290
Copy link

labelAlign: "flex-start"

Where to put this @Abhishek0706

@infsahitya
Copy link

labelAlign: "flex-start"

Where to put this @Abhishek0706

Inside "stepIndicatorStyles" object.

@Shubhangigovil
Copy link

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

@akshitpatel1732
Copy link

akshitpatel1732 commented Aug 27, 2024

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;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants