react-native modal-dropdown issues with object array datasource

Question

i finally found a dropdown menu that seems suitable to my needs, but i've got some issues with that tool..

my dropdata is an array ob objects, with label and value pairs in it.. when i try to use this as source for my dropdown i have to use the renderRow prop from ModalDropdown to correctly display my labels.. with reading the official documentation i found a solution like this, and it seems to work fine except this one issue: the items in my dropdown list are not complete after initial render, and the amount of options change if the user selects one of these options in the list.. very strange behaviour in my opinion, and i can't really tell why this is happening or what to do about it.. if i switch the datasource to a simple string array(data2), with no renderRow processing, everything works fine, and the complete list gets rendered with no issues what so ever... so maybe the issue lays within the renderDropDownList function, but as this seems very simple as well, i see no issue there. another idea is that maybe the default value / index could help? but no success yet.. maybe somebody could help me find a solution for this, i would greatly appreciate it :)

import ModalDropdown from 'react-native-modal-dropdown';
import { Card } from 'react-native-elements';
import  React, { useState } from 'react';


function Home() {

  const [open, setOpen] = useState(false);
  const [value, setValue] = useState(null);
  
  let data = [{label: 'Choose', value: '0'}, {label: '1 foo', value: '1'}, {label: '2 foo', value: '2'}, {label: '3 foos', value: '3'}, {label: '4 foos', value: '4'}, {label: '5 foos', value: '5'}, {label: '6 foos', value: '6'}, {label: '7 foos', value: '7'}, {label: '8 foos', value: '8'}, {label: '9 foos', value: '9'}, {label: '10 foos', value: '10'}, {label: '11 foos', value: '11'}, {label: '12 foos', value: '12'}, {label: '13 foos', value: '13'}, {label: '14 foos', value: '14'}, {label: '15 foos', value: '15'}, {label: '16 foos', value: '16'}, {label: '17 foos', value: '17'}, {label: '18 foos', value: '18'}, {label: '19 foos', value: '19'}, {label: '20 foos', value: '20'}];
  let data2 = ['1','2','3','4','5','6','7','8','9','10','11',]

  const setItem = value => {
    console.log("you touched option: " + value.value);
  }

  const renderDropDownList = (rowData) => {
    return (
      <View style={{backgroundColor: colors.cardBackgroundColor, alignItems: 'flex-end', marginLeft: 0}}>
        <Text style={{color: colors.textSubtitleColor, fontSize: 12}}>{rowData.label}</Text> 
      </View>
    );
  }

    const renderButtonText = (rowData) => {
      const {label, value} = rowData;
      return `${label}`;
    };


  return (
    <Card containerStyle={{height:200, backgroundColor: 'gray'}}>

        <ModalDropdown 
            options={data}
            renderRow={(rowData) => renderDropDownList(rowData)}
            renderButtonText={(rowData) => renderButtonText(rowData)}
            style={{backgroundColor:'transparent', borderColor: 'gray'}}
            dropdownStyle={{backgroundColor:'white', borderColor: 'gray', marginBottom: 2}}
            onSelect={(idx, value) => setItem(value)}
            />
     

     // ...
    </Card>

  );
};

export default Home;

Answer 1

i've found the solution for the issue i had here

configuring the style of each item can only be done on one place, i had it twice, once in the render function, and once as a prop "dropdownStyle". as it turned out those two were bothering each other :D

see my working code below:

 import React, { useState } from 'react';
 import {StyleSheet, View, Text, TouchableHighlight} from 'react-native';
 import { Icon} from 'native-base';
 import { useTheme} from '@react-navigation/native';
 import ModalDropdown from 'react-native-modal-dropdown';
 
 function myPicker() {
 
    const { colors } = useTheme(); // works
    
    const renderDropDownList = (rowData, rowID, highlighted) => {
        return  <Text style={{color: colors.textSubtitleColor, fontSize: 11, fontWeight:"300", padding: 2}}>{rowData.label}</Text>
    }

    const renderButtonText = (rowData) => {
        const {label, value} = rowData;
        return <View><Text style={{fontSize: 11,fontWeight: "500", color: colors.textSubtitleColor}}>{label}</Text></View>;
    }

    const renderSeparator = (sectionID, rowID, adjacentRowHighlighted) => {
        if (rowID == items.length - 1) return;
        return <View style={{height: 1, width: 0, backgroundColor: 'gray'}}/>
        
    }

    const dropdown_adjustFrame = (style) => {
        // console.log(`frameStyle={width:${style.width}, height:${style.height}, top:${style.top}, left:${style.left}, right:${style.right}}`);
        style.width = 100;
        style.top += 4;
        style.left -= 49;
        return style;
    }
      
    return (
          <View style={{flex: 5}}>
               <ModalDropdown 
                  options={items}
                  defaultValue="Choose"
                  textStyle={{color: colors.textSubtitleColor, fontSize: 10}}
                  renderRow={(rowData, rowID) => renderDropDownList(rowData, rowID)}
                  renderButtonText={(rowData) => renderButtonText(rowData)}
                  renderSeparator={(rowID) => renderSeparator(rowID)}
                  adjustFrame={style => dropdown_adjustFrame(style)}
                  style={{backgroundColor:'transparent', borderColor: 'gray', paddingRight: 10, alignItems: 'flex-end'}}
                  dropdownStyle={{backgroundColor:colors.frameBackground, 
                                  paddingRight: 10, 
                                  paddingLeft: 10, 
                                  paddingRight: 5, 
                                  alignItems: 'flex-end', 
                                  borderWidth: 2,
                                  borderColor: colors.borderColor,
                                  borderRadius: 5,}}
                  // dropdownTextStyle={{color: colors.textSubtitleColor, fontSize: 5, fontWeight:"100"}}
                  onSelect={(idx, value) => setItem(value)}
              />
        </View>
    );
 
 
 }

Answer 2

I meet the same problem, but now I fixed it already.

1. press 'ctrl' and click the <ModalDropdown>, go to the original code file
2. search 'saveScrollPosition', and you will find code like below: 1

initialScrollIndex={saveScrollPosition ? selectedIndex : -1}

3. replace the 'selectedIndex' to 0 (recommend, if you want to show all your items in the drop-down list), like below: 2

initialScrollIndex={saveScrollPosition ? 0 : -1}

4. save it, and try you code again, you may find the changes.

PS: 'selectedIndex' means the index that you selected, and the list will load from that index once you have a selected item. And change it to 0 means load the items from the first one, you can try other changes depends on your demands. : )