Невозможно сделать настроенный StepIndicator в реагировать родной

Question

я новичок, чтобы реагировать на родную систему, я хочу использовать StepIndicator, как показано выше picture .. Но значение StepIndicator выглядит не очень хорошо, хотя я не могу увеличить высоту разделителя ине могу добавить текст в середине шагов, таких как дата платежа и т. д., заголовки также не выравниваются прямо, и я могу только изменить цвета и ширину шагов и разделителей.Поэтому я попытался создать индивидуальный StepIndicator, но я не смог этого сделать.

const label = [{title: "Заказ подписан",}, {title: "Payment",}, {title: "Dispatched",}, {title: "site",}];

const stepIndicatorStyles = {
  stepIndicatorSize: 20,
  currentStepIndicatorSize:20,
  separatorStrokeWidth: 1,
  currentStepStrokeWidth: 20,
  stepStrokeCurrentColor: '#FFAA01',
  separatorFinishedColor: '#aaaaaa',
  separatorUnFinishedColor: '#aaaaaa',
  stepIndicatorFinishedColor: '#FFAA01',
  stepIndicatorUnFinishedColor: '#636363',
  stepIndicatorCurrentColor: '#FFAA01',
  stepIndicatorLabelFontSize: 0,
  currentStepIndicatorLabelFontSize: 0,
  stepIndicatorLabelCurrentColor: '#000000',
  stepIndicatorLabelFinishedColor: '#FFAA01',
  stepIndicatorLabelUnFinishedColor: 'rgba(255,255,255,0.5)',
  labelColor: 'black',
  labelSize: 18,
  currentStepLabelColor: 'black'
}


In class in render() method..

 <StepIndicator
        customStyles={stepIndicatorStyles}
        currentPosition={this.state.currentPosition}
        stepCount={4} 
        direction='vertical'
        labels={labels.map(title => title.title)}
        />

Пожалуйста, помогите мне решить эту проблему.Я пытаюсь добиться этого с 2 недель, но не удалось.Заранее спасибо ..