title: How can i validate two hours with Yup?
body: <p>I have a validation schema for my Formik Form on React Native using <code>Yup</code>. There are two fields (<code>start_time</code> and <code>end_time</code>) and i want to compare if <code>start_time</code> is after <code>end_time</code> and thrown a message to user.</p>
  
  <p>I read about <a href="https://github.com/jquense/yup#mixedwhenkeys-string--arraystring-builder-object--value-schema-schema-schema" rel="nofollow noreferrer"><code>mixed.when</code></a> and tried to figure out a solution with that, but i'm blocked with it.</p>
  
  <pre class="lang-js prettyprint-override"><code>const isSameOrAfterTime = (startTime, endTime) =&gt;
    moment(startTime, HOUR_MINUTE_SECONDS_MASK).isSameOrAfter(endTime);
  
  // example - data
  // start_time: 08:00:25
  // end_time: 10:23:42
  
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>start_time: Yup.string().when(['start_time', 'end_time'], {
      is: (startTime, endTime) =&gt; isSameOrAfterTime(startTime, endTime),
      then: Yup.string() // ???
      otherwise: // ????
    }),
  </code></pre>
  
  <p>I want to thrown a message when the start_time is after end_time</p>
  
  <p><a href="https://codesandbox.io/s/rough-currying-t9n88?fontsize=14" rel="nofollow noreferrer"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="Edit rough-currying-t9n88"></a></p>