CODEWITHSUNDEEP
react-nativemobiledrop-down-menucomponents
Trung Pham
Trung Pham

Reputation: 21

react-native-dropdown-picker Can't selected item from renderlistitem

I am having trouble that's when I use RenderListItem to customize the list item. I can't click on an item in that list, but I can do it on a normal list (without renderlist).

Can anyone explain why?

This is my code

/// my state
const [openAgency, setOpenAgency] = useState(false);
const [agencyValue, setAgencyValue] = useState<string | null>(null);
const [agency, setAgency] = useState(DATA_AGENCY);

/// render item

const Item = (props: any) => {
    return (
        <View style={[styles.containerItem]} key={props.item}>

            <Text style={styles.agencyName}>
                {props.item.value}
            </Text>
            <Text style={styles.addressName}>
                {props.item.address}
            </Text>
        </View>
    )
}
/// dropdown list
<DropDownPicker
     open={openAgency}
     value={agencyValue}
     items={agency}
     setOpen={setOpenAgency}
     setValue={setAgencyValue}
     setItems={setAgency}
     listMode="SCROLLVIEW"
     style={styles.inputDistrict}
     containerStyle={{
        width: "100%",
     }}
     placeholder="Select an Agency"
     selectedItemContainerStyle={{
        backgroundColor: "#84E5FF",
     }}
     listItemLabelStyle={{
        color: "#00355A"
     }}
     selectedItemLabelStyle={{
        color: "#00355A"
      }}
     dropDownContainerStyle={{
        marginTop: 4,
        borderRadius: 10
     }}
    onSelectItem={(item) => {
        console.log(item);
    }}
    renderListItem={(props) => <Item {...props}  />}
    zIndex={100}
   />

Upvotes: 2

Views: 2621

Answers (3)

Saheel Sapovadia
Saheel Sapovadia

Reputation: 3403

The props have some methods, can check this RenderListItem

DropDownPicker -

renderListItem={props => <Item {...props} />}

Custom item component -

const Item = props => {
  return (
    <TouchableOpacity onPress={() => props.onPress(props)} activeOpacity={0.5}>
      <View style={styles.ItemContainer}>
        <Text style={styles.ItemItem}>{props.item.label}</Text>
      </View>
    </TouchableOpacity>
  );
};

Upvotes: 2

Stan
Stan

Reputation: 3699

I fixed this issue by adding a TouchableOpacity in the custom item as such:

function handleListItemPress(props){
    props.onPress(props);
}

return (
    <DropDownPicker
        renderListItem={(props) => {
            return(<TouchableOpacity onPress={() => {handleListItemPress(props)}}><Text>{props.value}</Text></TouchableOpacity>);
        }}
    />
);

Add an onPress to the TouchableOpacity and manually call the DropDownPicker's onPress function in your own method. It should now add your custom rendered item to the list!

Upvotes: 0

Amir Doreh
Amir Doreh

Reputation: 1439

make sure react-native-gesture-handler is installed and use this fork , check whether it is working or not :

https://github.com/AmirDoreh/react-native-dropdown-picker

Upvotes: 1

Related Questions