2

In a react app I am using ui-kitten components, specifically a Select component:

<Select
  placeholder="Selecciona el departamento"
  data={departmentOptions}
  selectedOption={props.dept}
  onSelect={(newDepartment) => {
    props.setDepartment(newDepartment);
    props.setDepartmentValidation(validationSuccess);
    setDept(null);
    // props.department = newDepartment;
  }}
  textStyle={textStyle.label}
  controlStyle={styles.input}
  style={{ marginBottom: 16 }}
  labelStyle={textStyle.label}
  icon={renderIcon}
/>

I would like to reset the Select component on the placeholder after every re-render, not the previous selected option. I know that that method clear() is available as is described in the official documentation: ui-kitten docs but I don't know how to use those methods. Any idea on how to use these methods (e.g clear(), blur(), show(), hide(), etc.).

Andres Felipe Mejia Moreno
  • 21
  • 2

2 Answers2

3

I was wondering the exact same question too, and the docs weren't really clear about using methods. However, I found that the section on the Icons component has an example of how to use methods to animate the icons on the press of a button.

You need this at the start of your function body:

const select = React.useRef()

Then in your select component, have something like this:

<Select ref={select}>{...}</Select>

Finally, just do select.clear() when needed to clear the select component.

Let me know if this helps.

Nick Turtle
  • 71
  • 7
0

This one helped me const select = React.useRef(). I've shared a small snippet of code that you can refer to and the GitHub link that helped me.

const [clear, setClear] = useState(false);

// Create a ref
const select = React.useRef();

//useEffect to check when the clear value has changed

useEffect(() => {
  //clear the ref when the clear value has changed
  select.current.clear();
}, [clear]);

// Here is your select component 

  <Select
    ref = {select} // ref we created before
    selectedIndex = {selectedIndex}
    onSelect = {(index) => setSelectedIndex(index)} >
    <SelectItem title = "Option 1" / >
    <SelectItem title = "Option 2" / >
    <SelectItem title = "Option 3" / >
  </Select>

Check out this issue on the UI-Kitten GitHub repo.

Here is the link to the comment that helped me. https://github.com/akveo/react-native-ui-kitten/issues/1001#issuecomment-612070876

Mistico
  • 231
  • 3
  • 4