Unmask the input when pressing a button

[tayguohong]

Hi, thank you for providing this wonderful library. Can I unmask the code input as I mentioned in the title?

[retyui]

So if you use MaskExample

just add a flag to control it

+  const [enableMask, setEnableMask] = useState(true);
  const renderCell = ({index, symbol, isFocused}) => {
    let textChild = null;

    if (symbol) {
-      textChild = (
+      textChild = enableMask ? (
        <MaskSymbol
          mask="❤️"
          delay={500}
          value={symbol}
          isLastIndex={index === value.length - 1}
        />
-      );
+      ) : symbol ;
    } else if (isFocused) {
      textChild = <Cursor />;
    }

    return (
      <Text
        key={index}
        style={[styles.cell, isFocused && styles.focusCell]}
        onLayout={getCellOnLayoutHandler(index)}>
        {textChild}
      </Text>
    );
  };

[tayguohong]

@retyui After added this flag, how can I use this props? I am using this props here but seems not working.

<CustomCodeField value={this.state.codeFieldValue} cellCount={6} keyboardType="number-pad" enableMask={false} onChangeText={this._onFinishCheckingCode} />

[retyui]

That's strange

[tayguohong]

That's strange

Hmm, I am using this library in class component, do I need to add this props in the wrapper component first?

[tayguohong]

@retyui this is my full code. Please take a look as I may missed up something.

import React, { useState } from 'react';
import {
    Text,
    StyleSheet,
    View,
    Platform
} from "react-native";
import {
    CodeField,
    Cursor,
    useBlurOnFulfill,
    useClearByFocusCell,
    MaskSymbol,
    isLastFilledCell,
} from 'react-native-confirmation-code-field';

export const CustomCodeField = ({ value, onChangeText, cellCount, ...rest }) => {
    const ref = useBlurOnFulfill({ value, cellCount });
    const [props, getCellOnLayoutHandler] = useClearByFocusCell({
        value,
        setValue: onChangeText,
    });
    const [enableMask, setEnableMask] = useState(true);
    const renderCell = ({ index, symbol, isFocused }) => {
        let textChild = null;
        if (symbol) {
            textChild = enableMask ? (
                // use special component for masking
                <MaskSymbol
                    isLastFilledCell={isLastFilledCell({ index, value })}
                    maskSymbol="*"
                >
                    {symbol}
                </MaskSymbol>) : symbol;
        } else if (isFocused) {
            textChild = <Cursor cursorSymbol="-"></Cursor>
        }
        return (
            // <View key={index} onLayout={getCellOnLayoutHandler(index)}>
                <Text
                    key={index} onLayout={getCellOnLayoutHandler(index)}
                    style={[styles.cell, isFocused && styles.focusCell]}>
                    {textChild}
                </Text>
            // </View>
        )
    }

    const styles = StyleSheet.create({
        cell: {
            width: 40,
            height: 40,
            lineHeight: Platform.OS == "ios" ? 35 : 35,
            fontSize: 20,
            borderWidth: 2,
            borderRadius: 5,
            borderColor: '#00000030',
            textAlign: 'center',
        },
        focusCell: {
            borderColor: '#000',
        },
    })

    return (
        <CodeField
            ref={ref}
            {...props}
            {...rest}
            value={value}
            onChangeText={onChangeText}
            cellCount={cellCount}
            enableMask={false}
            renderCell={renderCell}
        />
    );
};

[retyui]

Let's try to change the delay value

textChild = enableMask ? (
  // use special component for masking
  <MaskSymbol
+  delay={0}
    isLastFilledCell={isLastFilledCell({index, value})}
    maskSymbol="*">
    {symbol}
  </MaskSymbol>
) : (
  symbol
)

[tayguohong]

@retyui it's still not working, I think because i didn't call this setEnableMask function. But I am not sure where should I call this function. Sorry I am still not familiar with hook.

[retyui]

You can use a Switch component to change this value

return (
  <>
    <CodeField
      ref={ref}
      {...props}
      {...rest}
      value={value}
      onChangeText={onChangeText}
      cellCount={cellCount}
      enableMask={false}
      renderCell={renderCell}
    />
+    <Switch onValueChange={setEnableMask} value={enableMask} />
  </>
);

[tayguohong]

@retyui Thanks, it is working now

[retyui]

I created an example https://github.com/retyui/react-native-confirmation-code-field/tree/master/examples/DemoCodeField/src/UnmaskExample

[liho00]

@retyui Switch component missing?

[retyui]

@liho00 what do you mean?