How to create a vertical progress path in React Native? - react-native

Question

how do I create a vertical progress path in React Native? Please refer to the first image below for the current design that I have and to the second image below for the output that I want (I want it with lines).
Here is a clearer example from Google

Answer 1

I managed to solve this in two ways. My first idea was to have for every step (row) two elements, one for the indicator and one for the actual information for the step. This solution has some spacing issues but still isn't that bad. To fix the spacing issues I came up with solution number two.
Solution 1 - absolute position the line
return (
<View style={styles.stepContainer}>
{/* the first element for the indicator and the line */}
<View style={styles.stepIndicator}>
{i < steps.length - 1 ? <View style={styles.stepLine}></View> : null}
<Text style={styles.stepIndicatorText}>{i + 1}</Text>
</View>
{/* the second element for the actual step and its information */}
<View style={styles.step}>
<Text>{step.name}</Text>
</View>
</View>
);
The idea here is to push the stepLine down by x and don't render the line on the last step since that will cause some overflow.
This approach works quite well but the issue comes when you're trying to add spacing to the steps, e.g. marginBottom. The line won't connect anymore since it is limit by the height of their row. You could hard code the amount of spacing to the height of the line but that gets unmanageable very quickly. For this problem I found solution 2.
Solution 2 - two columns
<View
style={{
flexDirection: "row",
}}
>
{/* the column for the line */}
<View style={styles.stepLineContainer}>
<View style={styles.stepLine}></View>
</View>
{/* the column for the steps */}
<View
style={{
flex: 1,
gap: 8,
}}
>
{steps.map((step, i) => (
<View style={styles.stepContainer}>
{/* the indicator */}
<View style={styles.stepIndicator}>
<Text style={styles.stepIndicatorText}>{i + 1}</Text>
</View>
<View style={styles.step}>
<Text>{step.name}</Text>
</View>
</View>
))}
</View>
</View>
This solution involves two columns. One for the progress line and one for the steps. The idea here is to have the line in the left column which, with flexbox, will have the same height as the steps column. To have the indicators in the correct place we can place them on the actual step and give them a position: "absolute". Now we can add spacing to the steps by using marginBottom or even better the gap property.
Here is a live preview of both solutions.