react native - Reset a selectpicker by clicking on a button

Question

I created a functional component and I'm trying to reset or unselect a select picker by clicking on a button, I tried to use forceUpdate() but it didn't work.

I'm using a library called react-native-picker-select

My code:

import React, {useState} from 'react';
import { Text, View, StyleSheet, TouchableOpacity} from 'react-native';
import RNPickerSelect from 'react-native-picker-select';

export default function App() {
  const clean = () => {
    //reset picker
  }

  return (
    <View>
      <RNPickerSelect
            onValueChange={(value) => console.log("value")}
            placeholder={{
              label: 'Select'
            }}
            useNativeAndroidPickerStyle={false}
            items={[
                { label: 'Option 1', value: '1' },
                { label: 'Option 2', value: '2' },
                { label: 'Option 3', value: '3' },
            ]}
          />
          <TouchableOpacity
              onPress={clean}>
              <Text>Clean</Text>
          </TouchableOpacity>
    </View>
  );
}

Code running:

https://snack.expo.io/@rubend151/reset-picker

question from:https://stackoverflow.com/questions/65872929/reset-a-selectpicker-by-clicking-on-a-button

Answer 1

You can make the control a controlled control by handling the onValueChange and setting the value.

According to a github issue, setting the value to null should reset the selection, but unfortunately that doesn't seem to work. I set the placeholder item value to be 0 so we can rest it correctly.

export default function App() {
  const [value, setValue] = React.useState(0);
  const clean = () => {
    //reset picker
    setValue(0) // <-- reset by setting the placeholder value.
  }

  return (
    <View>
      <RNPickerSelect
            onValueChange={(value) => setValue(value)} // <-- set  state manually.
            placeholder={{
              label: 'Select',
              value: 0
            }}
            useNativeAndroidPickerStyle={false}
            items={[
                { label: 'Option 1', value: '1' },
                { label: 'Option 2', value: '2' },
                { label: 'Option 3', value: '3' },
            ]}
            value={value} // <-- use the value from state
          />
          <TouchableOpacity
              onPress={clean}>
              <Text>Clean</Text>
          </TouchableOpacity>
    </View>
  );
}

https://snack.expo.io/_SweQ21QA