react-native-dropdown-picker onChange 处理程序

Question

I am developing an app in React Native Expo which is supposed to work both on mobile devices and on the web. I have a problem with abovementioned library

How should I trigger an action on change of selection in react-native-dropdown-picker? There are only props like

  open,
  setOpen,
  value,
  setValue,
  items,
  setItems,

open/setOpen is a boolean only to track open state, items/setItems is an array of objects of expected by dropdown shape, so only setValue seem to be the one that can do the job. Value however is a function with always empty name field and I don't know how and if I can use it to handle any actions, only useEffect react to the change of value state variable. The thing is that it should not be happening in useEffect I think, but in event handler, and I have issues on mobile devices (both on web and in the mobile app). This compoennt is for React Native, but strangely it works on dektops like a charm and not in mobile apps and on mobile devices. Clearly I am doing something wrong, I just don't know what. This is the component code

import React from "react";
import { Platform, StyleSheet, View } from "react-native";
import DropDownPicker from "react-native-dropdown-picker";
import { FONTS, COLORS } from "../../constants/ui";

interface Props {
  open: boolean;
  value: string;
  items: any[];
  setOpen: React.Dispatch<any>;
  setValue: React.Dispatch<any>;
  setItems: React.Dispatch<any>;
}

export const PlatformDropdown: React.FC<Props> = ({
  open,
  setOpen,
  value,
  setValue,
  items,
  setItems,
}) => {
  return Platform.OS === "android" ? (
    <View style={[open && styles.dropdownCanvas]}>
      <DropDownPicker
        open={open}
        value={value}
        items={items}
        setOpen={setOpen}
        setValue={setValue}
        setItems={setItems}
        placeholder={`Rating`}
        showTickIcon={false}
        style={styles.dropdown}
        containerStyle={styles.dropdownContainerStyle}
        placeholderStyle={styles.dropdownPlaceholderStyle}
        dropDownContainerStyle={styles.dropDownContainerStyle}
        listItemLabelStyle={styles.dropdownListItemLabelStyle}
        selectedItemContainerStyle={styles.dropdownSelectedItemContainerStyle}
        zIndex={30}
      />
    </View>
  ) : (
    <DropDownPicker
      open={open}
      value={value}
      items={items}
      setOpen={setOpen}
      setValue={setValue}
      setItems={setItems}
      placeholder={`Rating`}
      showTickIcon={false}
      style={styles.dropdown}
      containerStyle={styles.dropdownContainerStyle}
      placeholderStyle={styles.dropdownPlaceholderStyle}
      dropDownContainerStyle={styles.dropDownContainerStyle}
      listItemLabelStyle={styles.dropdownListItemLabelStyle}
      selectedItemContainerStyle={styles.dropdownSelectedItemContainerStyle}
      zIndex={30}
    />
  );
};

const styles = StyleSheet.create({
  dropdown: {
    flexDirection: "row",
    padding: 10,
    maxWidth: "100%",
    backgroundColor: COLORS.greys["gray-300"],
    borderRadius: 7,
    marginVertical: 7,
  },
  dropdownContainerStyle: { borderColor: COLORS.greys["gray-400"] },
  dropdownPlaceholderStyle: {
    color: COLORS.FONT_COLOR,
    fontWeight: "bold",
  },
  dropDownContainerStyle: {
    backgroundColor: COLORS.greys["gray-100"],
    padding: 5,
    borderColor: COLORS.greys["gray-400"],
  },
  dropdownListItemLabelStyle: {
    color: COLORS.FONT_COLOR,
    padding: 10,
    fontFamily: FONTS.text,
  },
  dropdownSelectedItemContainerStyle: {
    backgroundColor: COLORS.greys["gray-300"],
    borderRadius: 3,
  },
  dropdownCanvas: { minHeight: 190 },
});

and this is useEffect responsible for managing actions on dropdown selection

  useEffect(() => {
    setLabs([]);
    switch (value) {
      case "rating":
        sortBy("rating", "desc");
        break;
      case "price":
        console.log(labs);
        const byPrice = labs.sort((a, b) => {
          const testIdx = a.tests.findIndex(({ title }) => title === testName);
          return a.tests[testIdx].price - b.tests[testIdx].price;
        });
        sortTimeoutRef = setTimeout(() => setLabs([...byPrice]), 200);
        break;
      case "distance":
        sortByDistance();
        break;
      default:
        sortBy("rating", "desc");
        break;
    }
    return () => {
      clearTimeout(sortTimeoutRef);
    };
  }, [value]);

Thanks a lot for any advice.

Answer 1

There are more props than you have listed.

The prop that provides what you need, is probably onChangeValue .

For the complete list of props, that are available, you can check out the documentation