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

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 }}>