hossein-zare / react-native-dropdown-picker

A single / multiple, categorizable, customizable, localizable and searchable item picker (drop-down) component for react native which supports both Android & iOS.
https://hossein-zare.github.io/react-native-dropdown-picker-website/
MIT License
969 stars 294 forks source link

Dropdown inside TextInput from React Native Paper #417

Open LGZ04 opened 2 years ago

LGZ04 commented 2 years ago

Someone know why I can't select an item when I wrap the Dropdown inside a the React Native Paper, TextInput. The dropdown open correctly and I can see all the items, but when im trying to select one I can't, its untouchable. Here is what im trying to do.

Thanks for the help.

setOpenCurrencyDropdown = (openCurrencyDropdown) => {
    this.setState({
        openCurrencyDropdown,
    });
}
<View style={{
    margin: 10,
    padding: 10,
}} >
    <TextInput
        returnKeyType={"next"}
        label="Currency Code"
        style={{
            marginTop: 7,
            backgroundColor:"white",
            height: hp("10%")
        }}
        mode='flat'
        underlineColor={'white'}
        value={this.state.currencyCode}
        render={props =>
            <DropDownPicker
                {...props}
                open={this.state.openCurrencyDropdown}
                setOpen={this.setOpenCurrencyDropdown}
                defaultValue={this.state.currencyCode}
                items={[
                           { label: "CRC", value: "CRC" },
                           { label: "USD", value: "USD"},
                           { label: "GTQ", value: "GTQ"},
                 ]}
                containerStyle={{ marginVertical: 5, marginTop: 25 }}
                style={{
                    backgroundColor: "white",
                    borderRadius: 4,
                    borderWidth: 0,
                    width: wp("88%"),
                    marginLeft: 3
                }}
                itemStyle={{
                    justifyContent: "flex-start"
                }}
                dropDownStyle={{
                    backgroundColor: "white",
                }}
                setValue={(callback) => {
                    this.setState(state => ({
                        currencyCode: callback(state.label)
                    }));
                }}

            />
        }
    />
</View>
mikehardy commented 2 years ago

probably something to do with zIndexes #376 or perhaps one of the rules is violated https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/rules - I won't have time to help troubleshoot it though, sorry, perhaps someone else will

LGZ04 commented 2 years ago

probably something to do with zIndexes #376 or perhaps one of the rules is violated https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/rules - I won't have time to help troubleshoot it though, sorry, perhaps someone else will

Thanks for your answer. I already tried that, however I have not been able to solve the problem. I hope someone else can help me.

dacapoo commented 2 years ago

@LGZ04 your parent component has a background and border property apparently. when you have one of these two properties, the Picker seems to break from my experience