Hi, would be nice if you could pass the selected data to get an indicator on which element is selected

Hello ,I mean I want to change replace position between icon and title(select items or list) how?

Hi there,

i'll try to explain the issue i'm facing at the moment.
I'm using the Select list in this way:

<SelectList data={dropDownBuyableGiftCards} setSelected={(id: string) => selectGiftCardAmountHandler(id)} placeholder="Scegli il valore" search={false} boxStyles={styles.dropdown} inputStyles={styles.dropdownText} dropdownStyles={styles.dropdownItemsContainer} dropdownTextStyles={styles.dropdownText} defaultOption={{ key: null, value: null }} />

where selectGiftCardAmountHandler it's a function that dispatch a action to a reducer:

const selectGiftCardAmountHandler = (id: string) => { const giftCardToBuy = buyableGiftCards.find((buyableGiftCard) => buyableGiftCard.id === id); dispatch(addGiftCardAmountToBuy({ id: giftCardToBuy.id, amount: giftCardToBuy.voucher.gift.amount })); };

Everything looks good, after the purchase of the gift card mentioned in my code i will go back to my home page and then if i go back to the gift card section the previous values are still selected BUT if i go back again and enter the gift card again the values will reset.

Looks like needs 2 re render to reset. I also have a:
useEffect(() => { (async () => { const buyableGiftCards = await getBuyableGiftCards(); dispatch(addBuyableGiftCards(buyableGiftCards)); })(); dispatch(resetGiftCardToBuy()); }, [giftcardToBuy]);

where resetGiftCardToBuy reset all my data selected but i don't think this will help.

Anyone could help please

There is no prop for the search placeholder. I have added that support for the package. Please accept my pull request

Hello,

I think is simple add a disable option, that will be so interesting to much cases.

Reciving a "editable" parameter and passing that to the TextInput, how would be in a normal TextInput, and making it impossible the "onPress" on TouchableOpacity in this cases.

I got no execute the project in my machine to try this feature, but a realy think will be simple change.

Sorry for speculation, but a realy liked this project, success!

Tell me if you will want any help. I don't know a lot, but I would love to help!

Is it a way to show the Default value or the previously selected value when I open the drop list?
For example I made a year picker from 2002 - 2072 and I set defaultOption={current_year}. The current year shows properly by default, but when I open the drop list it shows year 2002 first (the beginning of my list). Is it possible to show my default year?

this does not allow automation to happen

suspect it may be due to the TouchableOpacity that group the element together
see screenshot

I have some other components on the screen that will need to react to the dropdown opening. Is there a function that can be run when the dropdown opens or something similar?

Without supplying a substitute icon is it possible to change the color of the default arrow?

When conducting a search, either the list will be filtered to contain less results are no results at all. When the 'x' is pressed it closes the dropdown and clears the search term but does not reset the list items being shown. This could be quite confusing to a user.
A user has to start typing again and backspace all the characters to see all the list items again.

I'm using your excellent dropdown select (thank you!) as part of a wider form and would love it if I were able to dismiss the open keyboard on pressing the dropdown.

For example, if I've just entered something in a TextInput on the form and then want to select from this element, upon the dropdown opening the keyboard remains open and the first time I try and select an option from the dropdown, that dismisses the keyboard and doesn't actually select the option, I then have to select it again.

I tried to circumvent the need to add it to this repo by wrapping the element with a Touchable that has an onPress of Keyboard.dismiss() but that isn't working. It also doesn't work when wrapping the entire element in a pre-defined HideKeyboard function as suggested here, though this does close the keyboard if you tap anywhere else except the component.

Unless there's another way to do it?

I'm using React-Native with Expo and currently seeing this behaviour on Android. I don't have the means to test it on iPhone at the moment.

I hacked together a little work around by modifying the index.tsx file:

Importing Keyboard on line 2
Adding Keyboard.dismiss() to the onPress function on line 215

Happy to submit this as a PR if you think always automatically closing the keyboard is of value, but the alternative is I thought you might want to add it as a customisable boolean option and my skills aren't at that level yet!

How to access close dropdown option. Is there any props for that.

Hi
The list is locked until I click on an item in the list. Shouldn't the drop-down menu just close again if I click on a part of the screen?

Thanks

Please provide any function to dismiss dropdown without selecting any value in dropdown list item.

Example : like chevron up icon shown instead chevron down icon on right side of the container to dismiss the dropdown after dropdown list toggle.

In dark mode, the list items are not showing.

Is there a prop that lets me manage the color of the list items on Android?

Any suggestions?

Hi there,

when I installed the package, it seemed the defaultOptions feature was mandatory, unlike what is used in the docs/readme.

I went ahead and edited it myself in my code, but just to make sure if it should be optional or not in your package?

I have two select-lists. The second is populated depending on the selection in the first.

How do I clear the selection of the second list when the selection of the first list is changed? Setting defaultOption to undefined does not clear the selection.

I wanted to have same background color for the box and the options, however the little block at top and bottom of options is not going well with design. This can be avoided if I get rid of

Thank you.

There is this error in this line of code of package.

and the error is :

The documentation says that the defaultOption prop is applicable for the MultiSelectList component, but nothing doesn't show up when I set it.

Resetting the "selected" to an empty string doesn't do the trick. Maybe I missed something.

inputStyles property of react-native-dropdown-select-list is of ViewStyle type and there is no way we can change the color of text. Can this behaviour be updated please. Many thanks.

If user need to disable click on dropdown then ?

in item it is working but what if user need to disable dropdown click for a while or use a state to disable or not.

None of these files exist:

• search.png
• node_modules\react-native-dropdown-select-list\assets\images\search.png\index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
  180 | ?
  181 | <Image

182 | source={require('./assets/images/search.png')}
| ^
183 | resizeMode='contain'
184 | style={{width:20,height:20,marginRight:7}}
185 | />

I can't seem to close dropdown after search is set to true without selecting an object

Currently you can provide custom JSX elements for the search icon and the dropdown arrow icon, it would be great if you could also provide a custom element for the close icon that shows when the dropdown is open.

Hi. This is my code

<SelectList 
     search = {false}
     setSelected={(value) => {setSelected(value);}} 
   data={[
                      {
                        key: '1',
                        value: StringsOfLanguages.male,
                      },
                      {
                        key: '2',
                        value: StringsOfLanguages.female,
                      },
                      {
                        key: '3',
                        value: StringsOfLanguages.unspecified,
                      },]
      } 
    // save="value"
    defaultOption = {{key:'1',value:StringsOfLanguages.male}}
/>

I have given defaultOption. But still the item which was selected when the view was previously loaded is showing be default.

Hello! Can I ask how can I capture both the key and value? Thank you! 🙏

Hi,

I have been having some troubles implementing the setSelected method to save the selected key. All I can manage to do is save the value.

My data array looks like the following:

[{ key: "1", value: "name"}, { key: "2", value: "name2"}]

<SelectList
          setSelected={(key) => {
            console.log(key);
            setSelectedBoatId(key);
          }}
          data={data}
          save="value"
          defaultOption={data[0]}
        />

Here I want the setSelectedBoatId to take in the number held in the object key but all I seem to be able to get is the value. If anyone can help out would be greatly appreciated! 🚀

hello, i am using multiselectlist in my app, when i pass defaultOption , the
defaultOptions are not working, There is some issue in library for defaultOption

This is important to have for the SelectList component, especially if state is being managed. We need the ability to allow the currently selected option to persist between renders.

maxHeight prop doesn't seem to work. I need to increase the height to make dropdown consistent with other dropdowns on screen.

Hi,

looks like that a ViewStyle Props is assigned to text props like inputStyles, dropdownStyles.
Text styles cannot be applied to View Styles so for example fontSize is not accessible, won't do anything and return typescript error

Hi,

I can't seem to get defaultOption to work when using useEffect and useState. I've created a minimal reproduction case.
https://snack.expo.dev/4fVbyCLjCe

Hi!
how can i reset selected value?

thanks

defaultOption prop is not working. The value is not getting selected by default using this option. https://snack.expo.dev/U81BJIcrW

scroll not working in position absolute

I was trying to render this in Formik but was recieving the same error, then I tried to create a separate Formarea but still getting the same error and lastly I removed all the code from screen and the page still shows the error but works when SelecList is commented out. Please chek this error.

**Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got:
undefined. You likely forgot to export your
component from the file it's defined in, or
you might have mixed up default and named imports.

Check the render method of Signup.**

@danish1658

import React, { useState } from "react"
import { StatusBar } from 'expo-status-bar';
import { SelectList } from "react-native-dropdown-select-list";
import KeyboardAvoidingWrapper from "../components/KeyboardAvoidingWrapper.js";
import { StyledContainer, InnerContainer, PageTitle, StyledFormArea } from "../components/styles.js"
const Signup = ({ navigation }) => {
    const [selected, setSelected] = useState("");
    const data = [
        { key: '1', value: 'My First Item' }
    ];
    return (
        <KeyboardAvoidingWrapper>
            <StyledContainer>
                <StatusBar style="dark" />
                <InnerContainer>
                    <PageTitle>Testing React Native Dropdown Select List</PageTitle>
                    <StyledFormArea>
                        {/* <SelectList data={data} setSelected={setSelected} /> */}
                    </StyledFormArea>
                </InnerContainer>
            </StyledContainer>
        </KeyboardAvoidingWrapper>
    )
}

export default Signup 

When I am trying to search something, I am getting the following error.

undefined is not an object (evaluating 'item.value.toLowerCase')

Is there a way to have the SelectList display over content? When the SelectList is closed, the content below it is correctly placed. But when I select the SelectBox, the content below it scrolls down. Is there a way to display to dropdown over content, rather than moving it? I've tried setting the zIndex of the View container, using the style attribute, the dropdownStyles attribute etc. but not luck.

<SelectList 
  placeholder="Select a Category"
  setSelected={(val) => setCurrentCategoryId(val)} 
  data={gearCategories} 
  save="key"
  search={false}
  maxHeight="175"
  dropdownStyles={{ zIndex: 5}}
/>

Hello there,

When this component is initially mounted the setSelected function is executed. Is this how it is supposed to behave?

I believe the setSelected function should only execute whenever the user selects a new option from the dropdown since this function is currently the only way to get the selected value. Having it run on mount leads to some nasty bugs.

Thank you!

Is there a way to set the color of the text on disabled rows? I would love to change the color of the text and the background of that row as well if possible.

Hi there,

i'm trying to use this library in a react native expo project with typescript but when i use it everything its working fine but i'll get this "warning" on the SelectList component "JSX element type 'SelectList' does not have any construct or call signatures."

Then i notice that when i use the setSelected function only the key object will pass.

I have checked the node modules and looks there is something wrong:

• on line 1 on index.tsx JSXElementConstructor is never used
• on line 195 on index.ts item.value does not exist.

i hope you guys could fix this annoying issues