React Native: How to format payment in mm/yy and spaced 16-digit card number in Javascript?
<p>In React Native, I have two <code>&lt;TextInput/&gt;</code>, one which receives MM/YY and the other 16-digit card number.</p>

<p>In the first input for MM/YY, I have:</p>

<pre><code>  &lt;TextInput
    onChangeText={this._handlingCardExpiry.bind(this)}
    placeholder='MM/YY'
    value={cardExpiry}
  /&gt;
</code></pre>

<p>And for the 16-digit card number:</p>

<pre><code>  &lt;TextInput
    onChangeText={this._handlingCardNumber.bind(this)}
    placeholder='0000 0000 0000 0000'
    value={cardNumber}
  /&gt;
</code></pre>

<p>For the expiry, I attempted to split them up and store in the value property as <code>${cardMonth}/${cardYear}</code>, but the text would not even rather, and adding space after every 4 digits to the card number input cause texts to not appear in the input.</p>

<p><strong>What would be the right approach to handling the following with the &lt; TextInput />'s onChangeText and value properties:</strong> </p>

<ol>
<li>When a user starts typing in <code>&lt;TextInput/&gt;</code>, show a <code>/</code> in the middle and inputting first two digits would appear before the <code>/</code> and next two after. </li>
<li>When a user starts typing in 16-digit card number, automatically place space after every 4 digits entered in.</li>
</ol>

<p>Thank you in advance and will vote up/accept the answer.</p>