adelredaa97 / react-native-select-dropdown Goto Github PK

How can i make the dropdown box ocuppies full width??

I'm having issues finding a way to get text to wrap for a row, when using a long string as input. Is there away to set dynamic row height based on a given input in a set?

I have tried adjusting height, width, flex, flexWrap, etc... any advice would be appreciated?

How do I to add shadow on buttonStyle?

I try to apply using coding below, but had no effect.

buttonStyle: {
    width: '100%',
    padding: 20,
    marginTop: 5,
    height: 40,
    paddingLeft: 10,
    paddingRight: 10,
    color: '#666666',
    borderBottomColor: '#fff',
    borderWidth: 1,
    backgroundColor: '#fff',
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.18,
    shadowRadius: 2.62,
    elevation: 4,
  },

Is there a way to access these states through e.g. focus and blur methods?

Very good complement, thank you very much

Adding the disabled property does not have any impact on the button, it continues to work normally, I force pass true and false values and in both cases it does nothing

In addition to this, it would also be useful to be able to define styles for the button and text when it's disabled, something like:
disabledButtonStyle and disabledButtonTextStyle, to match the rest of the property names used in the component

or just a parameter to add a color and opacity value when disabled

Thank you very much for this component.

Note: I only tested on android

Hi there. The documentation doesn't show how to add a blank item as first option of the select dropdown. Is it possible ?

Fire a method when press on the select an option placeholder

How to ask permission when accessing the contacts in ios?

I am using "react-native-select-dropdown": "^1.11.0", when i clicked on drop down item it freeze/hang for some time then select item . i am attaching gif of behavior

Version info

package version: 1.6.0
simulator: iPhone 13 (the issue also occurs in device)

Description

When the user opens the SelectDropdown for the first time, the user will see a temporary flash on the top left position.

Code for repro:

export default function App() {
  const countries = ['Egypt', 'Canada', 'Australia', 'Ireland'];

  return (
    <View
      style={{
        flex: 1,
        backgroundColor: 'orange',
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      <SelectDropdown
        data={countries}
        onSelect={(selectedItem, index) => {
          console.log(selectedItem, index);
        }}
        buttonTextAfterSelection={(selectedItem, index) => {
          // text represented after item is selected
          // if data array is an array of objects then return selectedItem.property to render after item is selected
          return selectedItem;
        }}
        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;
        }}
        dropdownStyle={{ paddingHorizontal: 50 }}
      />
    </View>
  );
}

Video reference

Hi @AdelRedaa97, thanks for this great repo.

I have an issue on Android where the Dropdown displays a gap between the button and the dropdown items. I copy/pasted the exact code provided in the demo1.js file on a reproducible snack: link

iOS does not have this issue. Any help on this? Thanks.

Hi
I want to show dropdown in full width and height. How can i do this?

Thanks

• platform : iOS
• react-native-select-dropdown version : 1.4.0

1. SelectDropdown button click
2. Click anything.
3. SelectDropdown button click retry is fail

testcode
<View style={{ flex: 1, backgroundColor: '#000' }}> <�Text>TestScreen</Text> <View style={{ flex: 1, width }}> <ScrollView showsVerticalScrollIndicator={false} alwaysBounceVertical={false} contentContainerStyle={{ flexGrow: 1, justifyContent: 'space-between', alignItems: 'center', paddingVertical: '10%', }} > <SelectDropdown data={countries} defaultValueByIndex={1} // use default value by index or default value defaultValue={'Canada'} // use default value by index or default value onSelect={(selectedItem, index) => { console.log(selectedItem, index); }} buttonTextAfterSelection={(selectedItem, index) => { return selectedItem; }} rowTextForSelection={(item, index) => { return item; }} /> </ScrollView> </View> </View>

Im trying to make a dropdown that support Multilanguage so I try to change the data array value by:
var viewBy = [i18n.t("all"), i18n.t("branch"), i18n.t("corporate"), i18n.t("favorite"), i18n.t("online")]
and my SelectDropDowm:

<SelectDropdown
                        ref={this.fitlerDropDown}
                        data={viewBy}
                        onSelect={(selectedItem, index) => {
                            this.updateFilterValue(selectedItem)
                        }}
                        buttonTextAfterSelection={(selectedItem, index) => {
                            return selectedItem
                        }}
                        rowTextForSelection={(item, index) => {
                            return item
                        }}
                        buttonStyle={workspaceStyle.dropdownButtonStyle}
                        buttonTextStyle={workspaceStyle.dropdownButtonTextStyle}
                        renderDropdownIcon={() => <DropDownIconSVG />}
                        defaultValueByIndex={0}
                        rowStyle={workspaceStyle.dropdownRowStyle}
                        rowTextStyle={workspaceStyle.dropdownRowTextStyle}
                    />

and after change language and back to this screen, I will force update for all screen by:

componentDidMount() {
        this._unsubscribe = this.props.navigation.addListener('focus', () => {
            viewBy = [i18n.t("all"), i18n.t("branch"), i18n.t("corporate"), i18n.t("favorite"), i18n.t("online")]
            this.forceUpdate()
        });
    }

    componentWillUnmount() {
        this._unsubscribe();
    }

Every other thing are fine but the selectedItem text in SelectDropDown didn't update (the dropdown list was updated)
Could you help me for this please?

hi, is there any way to customize the placeholder so that it doesn't have the same style as the selected option?

When I try to use it in landscape orientation on IOS devices, the screen change to portrait and the menu doesn't appear on the screen.

There are no typescript declarations for this library. It would be great if there were. I might add some myself and PR if it's not a priority, but in 2021, it really should be.

Thanks

Hello developer friends,
I noticed a small problem with the library when the button is on the right, the dropdown is displayed partly outside the screen.
I made a fix for this if it is possible to have the authorization to create a pr that would be great. thank you in advance

How to set ICON

If the dropdown only has 2 options, an empty 3rd option is always shown. If the dropdown has 4 or more options, it still only shows 3. Exactly 3 is the only thing you get apparently

How can I change the icon when the component is open?

I want to change Touchable opacity when selected items. i can not figure out how to do this

Hihi! Im unable to set the first value in the array in data props if the first value is 0.

Eg. [0, 5, 10], i cant set defaultValue={0} nor defaultValueByIndex={0} to let default value be the value '0'
Doing this will revert the box value to the placeholder instead of '0'

tia

1.Selected a value and clicked out
2.Opened the dropdown again
3.It gets autoscrolled to this previous selected value

It makes sense for large list, but not with 12-15 items.Please provide an option to turn this autoscroll off.
Thanks and Regards.

is there a way to remove the white line or that bottom border in between option as shown on image?

it has no effect changing the border color on dropdownStyle.

Thank you for this awesome package, but I have a requirement that requires defaultButtonText to be an empty string, but right now, it return 'Select an option.' if null or empty string is passed to defaultButtonText

Is it possible to customize the dropdownOverlay backgroundColor property to adjust the opacity or even the color ?

Good afternoon, colleagues.

I want to use a react-native-select-dropdown with a large list (about 2000 items). But Already got a warning:
VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc.

I tried to replace the FlatList with a VirtualizedList in the SelectedDropdown.js file, but nothing happened.

How to replace FlatList with VirtualizedList and will it help? Or is it better to look for another component for large list?

Hi @AdelRedaa97, Why is the dropdown not displaying well on androind?

The width of the component is not taking the width of the content present in the button ,the content I provided there is less than the half of the widow width so it the view is not wrapping the content

I am getting this issue when I click on button to open drop down and app crash , even add keyExtractor={item => item.toString()} .
How can I solve this.

Warning: Failed child context type: Invalid child context virtualizedCell.cellKey of type number supplied to CellRenderer, expected string.
at node_modules\react-native\Libraries\LogBox\LogBox.js:173:8 in registerError
at node_modules\react-native\Libraries\LogBox\LogBox.js:59:8 in errorImpl
at node_modules\react-native\Libraries\LogBox\LogBox.js:33:4 in console.error
at node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:106:4 in printWarning
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:75:16 in error
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:4380:15 in checkPropTypes
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5052:20 in processChildContext
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5095:45 in invalidateContextProvider
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:12510:29 in finishClassComponent
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:12403:43 in updateClassComponent
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19181:22 in beginWork$1
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18085:22 in performUnitOfWork
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18013:38 in workLoopSync
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17977:18 in renderRootSync
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17674:33 in performSyncWorkOnRoot
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5321:31 in runWithPriority$argument_1
at node_modules\scheduler\cjs\scheduler.development.js:653:23 in unstable_runWithPriority
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5316:21 in flushSyncCallbackQueueImpl
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5304:28 in flushSyncCallbackQueue
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17718:28 in batchedUpdates$1
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:2492:29 in batchedUpdates
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:2638:16 in _receiveRootNodeIDEvent
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:2767:27 in receiveTouches
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:416:4 in __callFunction
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:109:6 in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:108:4 in callFunctionReturnFlushedQueue

We are using react-native-web which keeps web and native in one code base using a shared folder. All code is native first.

Can this library be used for web as well?

Hi, thanks for this great repo. I need a prop like "defaultValueByIndex" to allows me to pass a object instead of a index. I created the following code that allow me to do that (this is working in my project):

useEffect(() => {
      if (defaultValue && data) {
        let isValid = false;
        data.map((item, index) => {
          if (defaultValue == item) {
            isValid = true;
          }
        });

        if (isValid) {
          setSelectedItem(defaultValue);
        }
      }
    }, [defaultValue]);

How to disable onSelect option for particular option in dropdown ex: READY_FOR_PICK.

also how to show only clickable options in blue color and all other as light grey color

i want to highlight/clickable options like (order_placed, accepted) and remaining all other as not clickable.

Please let me know if there is any solution

I reinstall but version don't update and have some bug:

• buttonStyle don't allow use array [], only allow object {}
• defaultValueByIndex = 0 not working

Steps to reproduce

Assign textAlign: "left" to buttonTextStyle.

Hi, is it possible to set a custom dropdown width (see attached screenshot)?
Tried to find it in docs or examples, but was unsuccessful.
It would be a great feature to have such an opportunity.

Hi
I am trying to add this component in react form hook plugin but this is not working. Can you please help me

Thanks

First of all congratulations for the excellent work. When I put more than 3 items, the following error occurs. Thanks for listening

Hi,
Could you add a prop to remove the magin when rendering a custom buttom element ?
When inspecting, I see a marginHorizontal: 8

I'm wondering if I can have the list of items appear above the initial button that opens the list. Is this possible? If so, how do I approach it?