text: import React, { Component } from 'react';
  import { View, ScrollView, TouchableOpacity, Text } from 'react-native';
  import PropTypes from 'prop-types';
  
  import ProgressButtons from './ProgressButtons';
  
  class ProgressStep extends Component {
    scrollRef;
    onNextStep = async () => {
      this.props.onNext && (await this.props.onNext());
      this.scrollRef && this.scrollRef.scrollTo({x: 0, y: 0, animate: true})
      // Return out of method before moving to next step if errors exist.
      if (this.props.errors) {
        return;
      }
  
      this.props.setActiveStep(this.props.activeStep + 1);
    };
  
    onPreviousStep = () => {
      // Changes active index and calls previous function passed by parent
      this.props.onPrevious && this.props.onPrevious();
      this.scrollRef && this.scrollRef.scrollTo({x: 0, y: 0, animate: true})
      this.props.setActiveStep(this.props.activeStep - 1);
    };
  
    onSubmit = () => {
      this.props.onSubmit && this.props.onSubmit();
    };
  
    renderNextButton = () => {
      const btnStyle = {
        textAlign: 'center',
        padding: 8,
        ...this.props.nextBtnStyle
      };
  
      const btnTextStyle = {
        color: '#007AFF',
        fontSize: 16,
        ...this.props.nextBtnTextStyle
      };
  
      const disabledBtnText = {
        color: '#cdcdcd'
      };
  
      let textStyle = [btnTextStyle];
      if (this.props.nextBtnDisabled) textStyle.push(disabledBtnText);
  
      return (
        <TouchableOpacity
          style={btnStyle}
          onPress={this.props.activeStep === this.props.stepCount - 1 ? this.onSubmit : this.onNextStep}
          disabled={this.props.nextBtnDisabled}
        >
          <Text style={textStyle}>
            {this.props.activeStep === this.props.stepCount - 1 ? this.props.finishBtnText : this.props.nextBtnText}
          </Text>
        </TouchableOpacity>
      );
    };
  
    renderPreviousButton = () => {
      const btnStyle = {
        textAlign: 'center',
        padding: 8,
        ...this.props.previousBtnStyle
      };
  
      const btnTextStyle = {
        color: '#007AFF',
        fontSize: 18,
        ...this.props.previousBtnTextStyle
      };
  
      const disabledBtnText = {
        color: '#cdcdcd'
      };
  
      let textStyle = [btnTextStyle];
      if (this.props.previousBtnDisabled) textStyle.push(disabledBtnText);
  
      return (
        <TouchableOpacity style={btnStyle} onPress={this.onPreviousStep} disabled={this.props.previousBtnDisabled}>
          <Text style={textStyle}>{this.props.activeStep === 0 ? '' : this.props.previousBtnText}</Text>
        </TouchableOpacity>
      );
    };
  
    render() {
      const scrollViewProps = this.props.scrollViewProps || {};
      const viewProps = this.props.viewProps || {};
      const isScrollable = this.props.scrollable;
      const buttonRow = this.props.removeBtnRow ? null : (
        <ProgressButtons 
          renderNextButton={this.renderNextButton} 
          renderPreviousButton={this.renderPreviousButton} 
        />
      );
  
      return (
        <View style={{ flex: 1 }}>
          {isScrollable
            ? <ScrollView {...scrollViewProps} ref={ ref => this.scrollRef = ref}>{this.props.children}</ScrollView>
            : <View {...viewProps}>{this.props.children}</View>}
  
          {buttonRow}
        </View>
      );
    }
  }
  
  ProgressStep.propTypes = {
    label: PropTypes.string,
    onNext: PropTypes.func,
    onPrevious: PropTypes.func,
    onSubmit: PropTypes.func,
    setActiveStep: PropTypes.func,
    nextBtnText: PropTypes.string,
    previousBtnText: PropTypes.string,
    finishBtnText: PropTypes.string,
    stepCount: PropTypes.number,
    nextBtnStyle: PropTypes.object,
    nextBtnTextStyle: PropTypes.object,
    nextBtnDisabled: PropTypes.bool,
    previousBtnStyle: PropTypes.object,
    previousBtnTextStyle: PropTypes.object,
    previousBtnDisabled: PropTypes.bool,
    scrollViewProps: PropTypes.object,
    viewProps: PropTypes.object,
    errors: PropTypes.bool,
    removeBtnRow: PropTypes.bool,
    scrollable: PropTypes.bool
  };
  
  ProgressStep.defaultProps = {
    nextBtnText: 'Next',
    previousBtnText: 'Previous',
    finishBtnText: 'Submit',
    nextBtnDisabled: false,
    previousBtnDisabled: false,
    errors: false,
    removeBtnRow: false,
    scrollable: true
  };
  
  export default ProgressStep;
  