I'm using DropDownPicker in react native but onChangeValue event is not triggering. I have used onChange and onChangeItem already. Trying to follow this https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/usage#onchangevalue but its not working. Please help me out.

Below is the code:

import React, { useEffect, useState }  from 'react';
import {View, Text, Button, TextInput, FlatList, ActivityIndicator, StyleSheet, Image} from 'react-native';
import filter from 'lodash.filter';
import DropDownPicker from 'react-native-dropdown-picker';


const CarList = () => {
    const [isLoading, setIsLoading] = useState(false);
    const [data, setData] = useState([]);
    const [error, setError] = useState(null);
    const [query, setQuery] = useState('');
    const [fullData, setFullData] = useState([]);
    const [selected, setSelected] = useState("");
    const [open, setOpen] = useState(false);
    const [childOpen, setChildOpen] = useState(false);
    const [filterOption, setfilteroption] = useState([
        {label: 'Color', value: 'Color'},
        {label: 'Model', value: 'Model'},
        {label: 'Year', value: 'Year'}
      ]);
      const [value, setValue] = useState(null);
      const [childvalue, setChildValue] = useState([]);

    
   
    useEffect(() => {
        setIsLoading(true);  
        fetch(`https://myfakeapi.com/api/cars/?seed=1&page=1&results=20`)
          .then(response => response.json())
          .then(response => {
            setData(response.cars);
            setFullData(response.cars);  
            setIsLoading(false);
          })
          .catch(err => {
            setIsLoading(false);
            setError(err);
          });
      }, []);

      if (isLoading) {
        return (
          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <ActivityIndicator size="large" color="#5500dc" />
          </View>
        );
      }
    
      if (error) {
        return (
          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text style={{ fontSize: 18}}>
              Error fetching data... Check your network connection!
            </Text>
          </View>
        );
      }


    const handleSearch = text => {
        const formattedQuery = text.toLowerCase();
        const filteredData = filter(fullData, user => {
          return contains(user, formattedQuery);
        });
        setData(filteredData);
        setQuery(text);
      };
      
      const contains = ({ car, car_model,car_color }, query) => {  
        if (car.toLowerCase().includes(query) || car_model.toLowerCase().includes(query) || car_color.toLowerCase().includes(query)) {
          return true;
        }
      
        return false;
      };

      const color = [...new Set(data.map((item) => item.car_color))];
      const model = [...new Set(data.map((item) => item.car_model))];
      const year = [...new Set(data.map((item) => item.car_model_year))];

     
//this is not triggering
      const changeSelectOptionHandler = (value) => {
       console.log("hi")
        setSelected(value);
      };

     
     
      if (selected === "Color") {     
        setChildValue(color)
      } else if (selected === "Model") {
        setChildValue(model)
      } else if (selected === "Year") {
        setChildValue(year)
      }
      
     
      function renderHeader() {
        return (        
          <View
            style={{
              backgroundColor: '#fff',
              padding: 10,
              marginVertical: 10,
              borderRadius: 20
            }}
          >
            <TextInput
              autoCapitalize="none"
              autoCorrect={false}
              clearButtonMode="always"
              value={query}
              onChangeText={queryText => handleSearch(queryText)}
              placeholder="Search"
              style={{ backgroundColor: '#fff', paddingHorizontal: 20 }}
            />
            
          
            <DropDownPicker onChangeItem={changeSelectOptionHandler}
     open={open}
     value={value}
     items={filterOption}
     setOpen={setOpen}
     setValue={setValue}
     setItems={setfilteroption}
     dropDownDirection="TOP"
  
     style={{
        padding: 5,
        margin: 5,
        width: 200,
        flexDirection: 'row'
       // borderRadius: 20
      }}
    /> 
               
   
             
               <DropDownPicker
       open={childOpen}
        items={childvalue}
    
        setOpen={setChildOpen}
        setItems={setChildValue}
        dropDownDirection="TOP"
      /> 
         
          </View>
          
        );
      }

 
  
    return (
     
      
        <View style={styles.container}>
      <Text style={styles.text}>Favorite Contacts</Text>
      <FlatList
      keyboardShouldPersistTaps="always"
       ListHeaderComponent={renderHeader}
        data={data}
        keyExtractor={({ id }) => id}
        renderItem={({ item }) => (
          <View style={styles.listItem}>
            <Image
                source={{
                    uri: 'https://picsum.photos/200',
                  }}
              style={styles.coverImage}
            />
            <View style={styles.metaInfo}>
              <Text style={styles.title}>{`${item.car} ${
                item.car_model
              }`}</Text>
               <Text>Color: {`${item.car_color}`}</Text>
               <Text>Price: {`${item.price}`}</Text>
            </View>
          </View>
        )}
      />
    </View>
      
    );

 
}

CodePudding user response：

I needed to use onSelectItem instead of onChangeValue

CodePudding user response：

The latest version of dropdownpicker OnChangeValue is not supported.

use this :

onSelectItem={(item) => {console.log(item.value)}}

Note: I am using "react-native-dropdown-picker": "^5.4.2",