Loading true and items=[] does not show ActivityIndicator

[sakshambhatt]

Hello, I was unable to see the ActivityIndicator when items was an empty array and loading true while fetching data from API. So, I tried to invoke the component is loading=true and items=[]. It still doesn't show the ActivityIndicator. Could someone please help?

const TzActivityIndication = useCallback(
    ({color, size}: {color: string; size: number}) => (
      <ActivityIndicator color={color} size={size} />
    ),
    [],
  );

return (<DropDownPicker
        open={isOpen}
        setOpen={setIsOpen}
        value={currentTzValue}
        setValue={setCurrentTzValue}
        items={[]}
        loading={true}
        searchable={true}
        listMode="MODAL"
        style={styles.dropdown}
        containerStyle={styles.dropdownContainer}
        itemSeparator={true}
        itemSeparatorStyle={{
          backgroundColor: colors.inputBorderColor,
        }}
        listItemContainerStyle={styles.listItemContainer}
        ActivityIndicatorComponent={TzActivityIndication}
        activityIndicatorColor={colors.secondaryColor}
        activityIndicatorSize={30}
      />)

Screenshot:

Similar issues: Issue 473, Issue 485

[hossein-zare]

Hi, It worked, Start with a simple picker and add additional props one by one.

[sakshambhatt]

Sorry to have missed your comment. Will try this out today, and share my findings with you

[sakshambhatt]

I have created a simple component, where the data is fetched from an API. While the promise is in progress, loading is true. And once the promise is settled, the loading state becomes false. I have added another ActivityIndicator for reference which works fine. Could you please tell me if I am doing something wrong?

Component github link I am attaching a recording of this component below for your reference:

Thanks for your help!

[hossein-zare]

Press the picker (Select an item) while loading is true. You'll see an ActivityIndicator.

// Set the open state to TRUE for testing so you don't need to press the picker
const [open, setOpen] = useState(true);

Important! Your items state MUST be empty. You always see the Select an item message whether loading is true.

[sakshambhatt]

Thank you for clearing it up. Here is how the ActivityIndicator looks