React-native navigation progress bar - react-native

Question

I am new to React-native can anyone please tell me how I would create a header menu with a progress bar, something like the attached image. Any advice much appreciated...
I have made progress, how can I remove the space inbetween each step?
<View style={styles.stepIndicatorBox}>
{stepsIds.map((step, idx) => {
const words = steps[step].split(' ');
const activeStepStyle = step === activeStep && styles.activeStep;
return (
<View key={`${step}${idx}`}>
<Svg height="25" width="100">
<Line
x1="10"
y1="10"
x2="100"
y2="10"
stroke={theme.colors.blue}
strokeWidth="2"
/>
<Circle
cx="50"
cy="10"
r="3"
stroke={theme.colors.blue}
strokeWidth="2.5"
fill={theme.colors.lightBlue}
/>
</Svg>
{words.map(w =>
<Text style={[styles.stepName, activeStepStyle]}>
{w}
</Text>
)}
</View>
);
})}
</View>
My styles are:
const styles = StyleSheet.create({
sceneContainer: {
bottom: 0,
left: 0,
position: 'absolute',
right: 0,
top: 0,
},
stepIndicatorBox: {
height: theme.utils.em(4),
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
backgroundColor: theme.colors.lightBlue,
paddingHorizontal: theme.metrics.mainPadding,
},
activeStep: {
...theme.fontStyles.smallBold,
color: theme.colors.activeStepName,
fontWeight: 'bold',
},
stepName: {
...theme.fontStyles.small,
color: theme.colors.blue,
textAlign: 'center',
},
});

Answer 1

I used the following code and react-native-svg:
_renderStepIndicator = () => {
const { navigation } = this.props; // {dispatch}
const { steps, getStep } = stepsOptions;
const route = navigation.state.routes[navigation.state.routes.length - 1];
const activeStep = getStep(route.routeName);
const stepsIds = Object.keys(steps);
const { height, width } = Dimensions.get('window');
const stepWidth = width / 5;
const RouteComponent = StepIndicatorRouter.getComponentForRouteName(
route.routeName
);
if (RouteComponent.navigatorType === STEP_INDICATOR) {
return null;
}
return (
<View style={styles.stepIndicatorBox}>
{stepsIds.map((step, idx) => {
const words = steps[step].split(' ');
const activeStepStyle = step === activeStep && styles.activeStep;
return (
<View key={`${step}${idx}`} style={styles.stepIndicatorStep}>
<Svg height="25" width={stepWidth}>
<Line
x1="0"
y1="15"
x2={stepWidth}
y2="15"
stroke={theme.colors.blue}
strokeWidth="2"
/>
<Circle
cx="40"
cy="15"
r="3"
stroke={theme.colors.blue}
strokeWidth="2"
fill={
step === activeStep
? theme.colors.blue
: theme.colors.lightBlue
}
/>
</Svg>
{words.map(w =>
<Text style={[styles.stepName, activeStepStyle]}>
{w}
</Text>
)}
</View>
);
})}
</View>
);
};