title: React native typescript : adding automatic hyphen and mask
body: <p>I’m doing project in React Native.</p>
  <ol>
  <li><p>How can i add hyphen automatically while typing the social security numbers like <code>123456789</code> to <code>123-45-6789</code>.</p>
  </li>
  <li><p>How can i mask the specific number into any symbol from left or right like <code>123456789</code> to <code>xxx-45-6789</code> or <code>123-45-xxxx</code>.</p>
  </li>
  </ol>
  <p>My code :</p>
  <pre><code>import React, {useEffect, useRef} from 'react';
  
  import { StyleProp, ViewStyle } from 'react-native';
  
  import { Controller } from 'react-hook-form';
  
  import { useSelector } from 'react-redux';
  
  import { Layout, Input, Icon } from '_atoms';
  
  import { fillColor } from '_utils';
  
  import { Label } from '_organisms';
  
  import { style } from '../style';
  
  
  
  let Mask = ({ attribute, data, formOptions, disable }: any) =&gt; {
  
  
  
  const { name, required, title, info, placeHolder, validationRegEx, defaultValue, canUpdate,
  
          unique, splitBy, pattern, numOfSplits, position, mask, length, maskBy,
  
          ...others } = attribute;
  
  
  
      const { control }: any = formOptions || {};
  
  
  
      let regEx = /^(?!(000|666|9))\d{3}-?(?!(00))\d{2}-?(?!(0000))\d{4}$/
  
  
  
      const { theme } = useSelector((state: any) =&gt; state.app);
  
  
  
      let color = fillColor(disable, theme);
  
  
  
      
  
      return (
  
          &lt;Layout style={style.container as StyleProp&lt;ViewStyle&gt;}&gt;
  
              &lt;&gt;
  
                  &lt;Label isRequired={required} title={title} description={info} /&gt;
  
              &lt;/&gt;
  
              &lt;Controller
  
                  control={control}
  
                  render={({ field, fieldState }: any) =&gt; {
  
                      let { onChange, value } = field || {};
  
                      let { error } = fieldState || {};
  
                      let { message } = error || {};
  
  
  
                      return (
  
                          &lt;Input
  
                              placeholder={placeHolder}
  
                              testID={name}
  
                              disabled={disable}
  
                              onChangeText={(value: any) =&gt; { onChange(value); }}
  
                              value={value ? value : ''}
  
                              status={error ? 'danger' : 'primary'}
  
                              caption={error ? message || 'Required' : ''}
  
                              accessoryRight={(props: any) =&gt; {
  
                                  if (value) {
  
                                      return (
  
                                          &lt;Icon
  
                                              {...props}
  
                                              fill={color}
  
                                              name={'close'}
  
                                              disabled={disable}
  
                                              onPress={() =&gt; onChange('')}
  
                                          /&gt;
  
                                      );
  
                                  } else return &lt;&gt;&lt;/&gt;;
  
                              }}
  
                          /&gt;
  
                      )
  
  
  
                  }}
  
                  name={name}
  
                  rules={{
  
                      required: required,
  
                      pattern: {
  
                          value: validationRegEx || regEx,
  
                          message: 'Enter a valid SSN',
  
                      },
  
                      maxLength: {
  
                          value: 11,
  
                          message: &quot;SSN length should be &lt; 9&quot;,
  
                        },
  
                  }}
  
                  defaultValue={data || defaultValue || ''}
  
              /&gt;
  
          &lt;/Layout&gt;
  
      );
  
  };
  
  
  
  export default Mask;
  
  
  </code></pre>