Masking inputs dynamically

[LudinaReema]

The earlier way of masking inputs dynamically doesn't seem to work with latest version. Should i try and send symbol props through render cell function ? Not sure as to how this can be done.

These were the props i passed to CodeField component in earlier version : maskSymbol={props.mask ? '*' : null} maskSymbolProps={{style: {fontSize: 20}, delay: 1500}}

[retyui]

@LudinaReema Yes, in the new version we lost this functionality. I will add this soon

[retyui]

Added 5.1.0

import React, {useState} from 'react';
import {SafeAreaView, Text, StyleSheet} from 'react-native';

import {
  CodeField,
  Cursor,
  useBlurOnFulfill,
  useClearByFocusCell,
  MaskSymbol,
  isLastFilledCell,
} from 'react-native-confirmation-code-field';

const styles = StyleSheet.create({
  root: {flex: 1, padding: 20},
  title: {textAlign: 'center', fontSize: 30},
  codeFiledRoot: {marginTop: 20},
  cell: {
    width: 40,
    height: 40,
    lineHeight: 38,
    fontSize: 24,
    borderWidth: 2,
    borderColor: '#00000030',
    textAlign: 'center',
  },
  focusCell: {
    borderColor: '#000',
  },
});

const CELL_COUNT = 6;

const App = () => {
  const [value, setValue] = useState('');
  const ref = useBlurOnFulfill({value, cellCount: CELL_COUNT});
  const [props, getCellOnLayoutHandler] = useClearByFocusCell({
    value,
    setValue,
  });

  return (
    <SafeAreaView style={styles.root}>
      <Text style={styles.title}>Verification</Text>
      <CodeField
        ref={ref}
        {...props}
        value={value}
        onChangeText={setValue}
        cellCount={CELL_COUNT}
        rootStyle={styles.codeFiledRoot}
        keyboardType="number-pad"
        renderCell={({index, symbol, isFocused}) => (
          <Text
            key={index}
            style={[styles.cell, isFocused && styles.focusCell]}
            onLayout={getCellOnLayoutHandler(index)}>
            {symbol ? (
              // use special component for masking
              <MaskSymbol
                isLastFilledCell={isLastFilledCell({index, value})}
                maskSymbol="*">
                {symbol}
              </MaskSymbol>
            ) : (
              isFocused && <Cursor />
            )}
          </Text>
        )}
      />
    </SafeAreaView>
  );
};

export default App;

[zihandev]

The latest version is throwing a build error. (5.0.3) events.js:183 throw er; // Unhandled 'error' event ^

Error: listen EADDRINUSE :::8081 at Server.setupListenHandle [as _listen2] (net.js:1360:14) at listenInCluster (net.js:1401:12) at Server.listen (net.js:1485:7) //.. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! LICHousing@0.0.1 start: npx react-native start

[retyui]

i don't see any related to this module errors

[zihandev]

Yeah fixed it....and this was the way i dynamically masked based on users choice. Just wanted your feedback if this was the right way or is there a better way ?

 renderCell={({index, symbol, isFocused}) => (
        <Text
          key={index}
          style={[styles.cell, isFocused && styles.focusCell]}
          onLayout={getCellOnLayoutHandler(index)}>
          {symbol ? (
            // use special component for masking
            <MaskSymbol
              isLastFilledCell={isLastFilledCell({index, value})}
              maskSymbol={props.mask ? '*' : value[index]}>
              {symbol}
            </MaskSymbol>
          ) : (
            isFocused && <Cursor />
          )}

Regards, Zihan