The item in renderCustomizedButtonChild is always null when fetching data

[lucyanddarlin]

The item in renderCustomizedButtonChild is always null when fetching data

 renderCustomizedButtonChild={(item, index) => {
        // the item is always null
        return <View><Text>{JSON.stringify(item)}</Text></View>
      }}

Here is the link: https://snack.expo.dev/FcADoBbVx

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import SelectDropdown from 'react-native-select-dropdown';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import Ionicons from 'react-native-vector-icons/Ionicons';

const countriesWithFlags = [
  { title: 'Egypt' },
  { title: 'Canada' },
  { title: 'Australia' },
  { title: 'Ireland' },
  { title: 'Brazil' },
  { title: 'England' },
  { title: 'Dubai' },
];

export default function App() {
  const [list, setList] = React.useState([])
  React.useEffect(() => {
    async function fetchList() {
      return new Promise(res => {
        setTimeout(() => {
          setList(countriesWithFlags)
        }, 1000)
      })
    }

    fetchList()
  }, [])
  return (
    <SelectDropdown
      buttonStyle={styles.dropdown3BtnStyle}
      data={list}
      defaultValueByIndex={0}
      onSelect={(selectedItem, index) => {
        console.log(selectedItem, index);
      }}
      renderCustomizedButtonChild={(item, index) => {
        // the item is always null
        return <View><Text>{JSON.stringify(item)}</Text></View>
      }}
      rowTextForSelection={(item, index) => {
        // text represented for each item in dropdown
        // if data array is an array of objects then return item.property to represent item in dropdown
        return item.title;
      }}
    />
  );
}

const styles = StyleSheet.create({
  dropdown3BtnStyle: {
    marginTop: 50,
    width: undefined,
    height: 50,
    backgroundColor: '#FFF',
    paddingHorizontal: 0,
    borderWidth: 1,
    borderRadius: 8,
    borderColor: '#444',
    justifyContent: 'center',
    flexShrink: 0
  },
});

[lucyanddarlin]

I found the solution: In useSelectDropdown.js, data should be used as a dependency of useEffect:

  // default value by index added or changed
  useEffect(() => {
    // defaultValueByIndex may be equals zero
    if (isExist(defaultValueByIndex)) {
      if (data && isExist(data[defaultValueByIndex])) {
        selectItem(defaultValueByIndex);
      }
    }
  }, [JSON.stringify(defaultValueByIndex), data]); // data should be used as a dependency of useEffect
  // default value added or changed
  useEffect(() => {
    // defaultValue may be equals zero
    if (isExist(defaultValue)) {
      if (data && findIndexInArr(defaultValue, data) >= 0) {
        selectItem(findIndexInArr(defaultValue, data));
      }
    }
  }, [JSON.stringify(defaultValue), data]); // data should be used as a dependency of useEffect

[AdelRedaa97]

A lot of changes were made in v4.0, take a look here https://github.com/AdelRedaa97/react-native-select-dropdown?tab=readme-ov-file#-major-changes

Feel free to open the issue again if it still exists