2

How can I secure TextEntry={true} to dropdown selected items in React native

 const [open, setOpen] = useState(false);
  const [value, setValue] = useState(null);
  const [items, setItems] = useState([
    {label: 'Apple', value: 'apple'},
    {label: 'Banana', value: 'banana'}
  ]);

<DropDownPicker
      open={open}
      value={value}
      items={items}
      setOpen={setOpen}
      setValue={setValue}
      setItems={setItems}
    />
Drew Reese
  • 165,259
  • 14
  • 153
  • 181
  • Can you clarify what you mean by "password protect" a dropdown picker component? What is `TextEntry`? What is the issue and what are you expecting? – Drew Reese Mar 02 '22 at 18:38
  • You could map the `items` array to the array of values you want to render/display, and for the item element value matching the `value` state update its `label` value to be `"*****"`. – Drew Reese Mar 02 '22 at 18:45
  • Correct. That is why you map the unmasked items to an array where you mask the selected value. Though it's not really clear what the use case is. If a person knows the unmasked values before selection then it would be trivial to know the value of the masked values after selection. – Drew Reese Mar 02 '22 at 18:55
  • It would be something like `items={items.map(el => el.value === value ? { ...el, label: el.label.replaceAll(/./g, '*') } : el)}`. – Drew Reese Mar 02 '22 at 19:00
  • Did you tried labelProps as in the answer? – Abhishek Mar 02 '22 at 19:05

2 Answers2

0

Can you try like this using labelProps

labelProps={{
 TextEntry={true} 
}}
Abhishek
  • 281
  • 4
  • 16
0

Map the dropdown items to a new array where the currently selected value is masked.

Example:

export default function App() {
  const [open, setOpen] = React.useState(false);
  const [value, setValue] = React.useState(null);
  const [items, setItems] = React.useState([
    { label: 'Apple', value: 'apple' },
    { label: 'Banana', value: 'banana' },
  ]);

  return (
    <DropDownPicker
      open={open}
      items={items.map((el) =>
        el.value === value
          ? { ...el, label: el.label.replace(/./g, '*') }
          : el
      )}
      setOpen={setOpen}
      setValue={setValue}
      setItems={setItems}
    />
  );
}

Expo Snack Demo

enter image description here enter image description here

Drew Reese
  • 165,259
  • 14
  • 153
  • 181
  • If here you see When person select Apple its change into ****** but I just want to change this Select an item to apple as ***** –  Mar 02 '22 at 19:16
  • Like in simple dropdown when we click on select an item it show us item and replace name select item with that select value in Our case it is Apple so I need to just show that as ***** –  Mar 02 '22 at 19:17
  • @ToxicMani I don't understand what you are saying. Is that not what the code is doing? Changing the selected option from "apple" to "*****" when "apple" is selected? I've even included screen captures. – Drew Reese Mar 02 '22 at 19:18
  • Ok let me try this –  Mar 02 '22 at 19:20