How can I use clear() method of Select component in UI-kitten? - react-native

Question

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.).

Answer 1

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.

Answer 2

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