React-native navigation progress bar

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