Conversation does not continue after custom component

[DivTheDev]

Description

After creating a step with a custom component (id 3) and then display a message after it (id 4), the trigger for this step with the message is not triggering, which is currently set to five. I have tried changing the trigger and still getting the same issue.

import React, {Component} from 'react';
import ChatBot from 'react-native-chatbot';
import MedicalCondition from './medical_condition';

const DOCTOR_NAME = 'Dr Costa';
export default class SymptomsBot extends Component {
  constructor(props) {
    super(props);

    let steps = [
      {
        id: '0',
        message: `Hello, ${DOCTOR_NAME} here, what seems to be the problem?`,
        trigger: '1',
      },
      {
        id: '1',
        user: true,
        inputAttributes: {
          keyboardType: 'default',
        },
        trigger: '2',
        validator: value => {
          if (!value) return 'Please try again!';
          else {
            return true;
          }
        },
      },
      {
        id: '2',
        trigger: '3',
        message: `Thanks, let me take a look for you...`,
      },
      {
        id: '3',
        component: <MedicalCondition stepIndex={1} />,
        replace: true,
        waitAction: true,
        asMessage: true,
        trigger: '4'
      },
      {
        id: '4',
        message: ({steps}) =>
        `It seems like you may have ${steps[3].value}. Would like to inform your doctor?`,
        trigger: '5',
      },
      {
        id: '5',
        options: [
          {value: 1, label: 'Yes', trigger: '6'},
          {value: 2, label: 'No', trigger: '6'},
          {value: 3, label: 'Try again', trigger: '6'},
        ],
      },
      {
        id: '6',
        message: `Thanks, let me take a look for you...`,
        end: true
      },
    ];

    this.state = {
      steps: steps,
    };
  }

  render() {
    return <ChatBot steps={this.state.steps} />;
  }
}

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {getSymptom} from '_services';

export default class MedicalCondition extends Component {
  constructor(props) {
    super(props);

    this.state = {
      stepIndex: this.props.stepIndex,
      loading: true,
      value: '',
      trigger: false,
      steps: this.props.steps,
      waitAction: this.props.step.waitAction
    };

  }

  componentDidMount() {
    getSymptom(this.props.steps[this.state.stepIndex].value)
      .then(response => {
        this.setState({loading: false, value: response.data.condition, trigger: this.props.step.trigger}, () => {
          this.props.triggerNextStep(this.state);
        });
      })
      .catch(err => {
        this.setState({
          loading: false,
          value: 'We seems to be experiencing an issue.',
        });
        console.log(err);
      });
  }

  render() {
    return null;
  }
}

MedicalCondition.propTypes = {
  steps: PropTypes.object,
  triggerNextStep: PropTypes.func,
  step: PropTypes.object,
  previousStep: PropTypes.object,
}

MedicalCondition.defaultProps = {
  steps: undefined,
  triggerNextStep: undefined,
  step: undefined,
  previousStep: undefined,
}

Screenshots

[edogbosunny]

hello @divyesh26 looking at this issue, the next component would not be called because the trigger props is set to boolean in your state. ie in the medical condition component. try passing in the next step you want to be called and that should resolve your issue. ie

  constructor(props) {
    super(props);

    this.state = {
      stepIndex: this.props.stepIndex,
      loading: true,
      value: '',
       trigger:'2',
      steps: this.props.steps,
      waitAction: this.props.step.waitAction
    };

  }

note that the trigger was changed from 'boolean' to '2' which is a string. hope this helps