Unable to apply styling to react-native-progress-steps

Question

I have been trying to apply styling to react-native-progress-steps but it's not working in my app. I applied the styles to View and ProgressSteps components but it's not showing in my app.

      <View style={{flex: 1}}>
    <ProgressSteps style={styles.progressStepsStyle}>
        <ProgressStep label="Information">
            <View style={{ alignItems: 'center' }}>
                <Text>This is the content within step 1!</Text>
            </View>
        </ProgressStep>
        <ProgressStep label="Account">
            <View style={{ alignItems: 'center' }}>
                <Text>This is the content within step 2!</Text>
            </View>
        </ProgressStep>
        <ProgressStep label="Completion">
            <View style={{ alignItems: 'center' }}>
                <Text>This is the content within step 3!</Text>
            </View>
        </ProgressStep>
        <ProgressStep label="Verification">
            <View style={{ alignItems: 'center' }}>
                <Text>This is the content within step 4!</Text>
            </View>
        </ProgressStep>
    </ProgressSteps>
    </View>
    </View>

Here is the link to the library: https://www.npmjs.com/package/react-native-progress-steps

Answer 1

it is actually very simple.

You have to create a constant and call it inside the who is the dad that locks up the ProgressStep.

For example:

  const progressStepsStyle = {
    activeStepIconBorderColor: '#0a0d64',
    activeLabelColor: '#0a0d64',
    activeStepNumColor: 'white',
    activeStepIconColor: '#0a0d64',
    completedStepIconColor: '#0a0d64',
    completedProgressBarColor: '#0a0d64',
    completedCheckColor: 'white'
  };

And then call it:

    <ProgressSteps  {...progressStepsStyle}>
        <ProgressStep label="Information">
            <View style={{ alignItems: 'center' }}>
                <Text>This is the content within step 1!</Text>
            </View>
        </ProgressStep>
        <ProgressStep label="Account">
            <View style={{ alignItems: 'center' }}>
                <Text>This is the content within step 2!</Text>
            </View>
        </ProgressStep>
        <ProgressStep label="Completion">
            <View style={{ alignItems: 'center' }}>
                <Text>This is the content within step 3!</Text>
            </View>
        </ProgressStep>
        <ProgressStep label="Verification">
            <View style={{ alignItems: 'center' }}>
                <Text>This is the content within step 4!</Text>
            </View>
        </ProgressStep>
    </ProgressSteps>

So you will have styles in your circles and in the progress bar.

If you want to style your buttons and button text you have to place the following properties inside nextBtnStyle, nextBtnTextStyle, previousBtnStyle, and previousBtnTextStyle.

For example:

<ProgressStep nextBtnText={"Next"} nextBtnStyle={{ textAlign: 'center', padding: 8, backgroundColor: '#F8CC23', }} nextBtnTextStyle={{ color: '#007aff', fontSize: 18 }}>