I have a problem react-select dropdown opens inside modal
Below is my coding:
<Select
styles={{
menu: provided => ({ ...provided, zIndex: 9999 })
}}
options={optionsHour}
value={{ label: durationHour, value: durationHour }}
onChange={(e) => { setDurationHour(e.value) }}
>
</Select>
This one is the current result, it cannot show react_select dropdown over modal.
I tried the below code with using menuPortalTarget, but it also cannot work.
<Select
styles={{
menu: provided => ({ ...provided, zIndex: 9999 })
}}
menuPortalTarget={document.body}
options={optionsHour}
value={{ label: durationHour, value: durationHour }}
onChange={(e) => { setDurationHour(e.value) }}
>
</Select>
Below result is what I've tried:
Actually, I want the result like below the picture:
Hope someone can guide me on how to solve it. Thanks.
Related
i have a Picker and i have 3 items in an array where i receve tham. I need to put the first item from the array in the picker by default. This is mine picker who receves all items and when i press the dropdown it shows all my drivers but it needs by default to show the first item from the array.
<View style={{width: '50%', paddingRight: 5}}>
<RNPickerSelect
style={{
inputAndroid: styles.dropdownAndroid,
inputIOS: styles.dropdownIOS,
placeholder: styles.dropdownPlaceholder,
iconContainer: styles.dropwownIcon
}}
disabled={this.state.vendorDriverSelectDisabled}
placeholder={{ label: this.props.mainProps.language.selectDriver }}
onValueChange={(value) => this.setState({...this.state, selectedVendorDriver: value})}
value={this.state.selectedVendorDriver}
items={this.state.vendorDrivers}
useNativeAndroidPickerStyle={false}
Icon={() => {
return <EvilIcons name="chevron-down" size={37} color="#333" />
}}
/>
</View>
When you set data for vendorDrivers state, use the code like this?
this.setState({ vendorDrivers: someData })
So, just set selectedVendorDriver state to the first element of the someData
And the code will become
this.setState({ vendorDrivers: someData, selectedVendorDriver: someData[0] })
I am using react material UI for building my components. I am using react multi-select to get multiple values from the user.
<FormControl className={clsx(classes.formControl, classes.noLabel)}>
<Select
multiple
value={personName}
onChange={handleChange}
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
}}
input={<Input />}
renderValue={(selected) => {
if (selected.length === 0) {
return <em>Placeholder</em>;
}
return selected.join(", ");
}}
MenuProps={MenuProps}
inputProps={{ "aria-label": "Without label" }}
>
<MenuItem disabled value="">
<em>Placeholder</em>
</MenuItem>
{names.map((name) => (
<MenuItem
key={name}
value={name}
style={getStyles(name, personName, theme)}
>
{name}
</MenuItem>
))}
</Select>
</FormControl>
It's working fine. But I need to close the dropdown when the user selects the value. But now it's closed only when the blur event triggers.
Is there any option to close the dropdown when the user selects any values?
Thanks in advance
Probably you can solve this by using the useRef hook.
Add the reference to the select and in the change handler you can try to close it by using ref.current.close().
import React , {useRef} from 'react';
const ref = useRef()
<FormControl className={clsx(classes.formControl, classes.noLabel)}>
<Select
multiple
value={personName}
onChange={handleChange}
ref={ref}
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
}}
input={<Input />}
renderValue={(selected) => {
if (selected.length === 0) {
return <em>Placeholder</em>;
}
return selected.join(", ");
}}
MenuProps={MenuProps}
inputProps={{ "aria-label": "Without label" }}
>
<MenuItem disabled value="">
<em>Placeholder</em>
</MenuItem>
{names.map((name) => (
<MenuItem
key={name}
value={name}
style={getStyles(name, personName, theme)}
>
{name}
</MenuItem>
))}
</Select>
</FormControl>
const handleChange = (event) =>{
....
ref.current.close();
}
I created a modal using react-native-modal-selector, but there is not any props or method defined to add the Images or Icons in the react-native-modal-selector document. Is there any other way to add the Images or Icon in the react-native-modal-selector?
You can try this as per docs :
[{
key: 5,
label: 'Red Apples',
component: <View style={{backgroundColor: 'red'}}><Text style={{color: 'white'}}>Red Apples custom component ☺</Text></View>
}]
Like have a field named component and add your data
The docs are not as straightforward for this point, but after playing around a bit, this worked for me:
let data = categories.map((category, index) => (
{
key: category.id,
label: category.name,
component: <View style={styles.row}><Image style={styles.image} source={{ uri: category.icon }} /><Text>{category.name}</Text></View>,
accessibilityLabel: category.name
}))
Using component, can I specify a separate onClick handler for a decoration icon?
The code below is not working:
<TextField
{...passwordTextFieldProps}
iconProps={{ iconName: 'RedEye', onClick: () => this.setState({ some new state }) }}
/>
Two years after the author of this post I had the same question and found a better solution.
The onClick event is available on the icon but is disable by default (pointerEvents is set to none).
With some styling it works (also I added a cursor shape so the icon looks "clickable" but it's optional).
<TextField iconProps={{ iconName: 'RedEye', style: { pointerEvents: "auto", cursor: "pointer" }, onClick: () => { ... } }} />
One option to consider would be to render an icon separately:
<div style={{display:'flex', alignItems: 'center'}}>
<TextField />
<Icon iconName="RedEye" style={{left:'-25px',position:'relative'}} onClick={()=> console.log("Clicked")} />
</div>
Demo
I'm using react-native-icons in my and I can't seem to add styles to it. Adding styles to or results in styles being applied to elements above the bar and not inside the TabBar.
For example,
I'd like to add 5px right below the icon text.
Add a opaque backgroundColor around the icon when it's active
Change the text color
Here's what I have, the styles have missed my target and styled the items above my icons:
<TabBarIOS selectedTab={this.state.selectedTab}
style={{backgroundColor: 'red', padding: 30}}>
<Icon.TabBarItem
style={{backgroundColor: 'blue', padding: 20}}
title="Icon Text"
selected={this.state.selectedTab === 'myTab'}
iconName="navicon"
iconSize={20}
selectedIconName="navicon">
</Icon.TabBarItem>
What should I be targeting to achieve the styles I want on the TabBarItem icons?
You should specify style to TabBarIOS. for example:
<TabBarIOS
tintColor="yellow"
barTintColor="red">
<Icon.TabBarItem
title="Home"
iconName="ios-home-outline"
selectedIconName="ios-home"
selected={this.state.selectedTab === 'home'}
onPress={() => {
this.setState({
selectedTab: 'home',
});
}}
>
<YourComponent />
</Icon.TabBarItem>
</TabBarIOS>
check tintColor and barTintColor props.
here is screenshot:
You can follow the example in react-native-icons git repository
var { TabBarIOS, } = require('react-native-icons');
var TabBarItemIOS = TabBarIOS.Item;
<TabBarItemIOS
name="home"
iconName={'ion|ios-home-outline'}
selectedIconName={'ion|ios-home'}
title={''}
iconSize={32}
style = {styles.icon} /* Add styles here*/
accessibilityLabel="Home Tab"
selected={this.state.selectedTab === 'home'}
onPress={() => {
this.setState({
selectedTab: 'home',
});
}}>
I Tried something like this-
<TabBarIOS selectedTab={this.state.selectedTab}
barTintColor='#dcdcdc'
tintColor='#E41B17'>
<TabBarIOS.Item
title="Summary"
selected={this.state.selectedTab === 'summary'}//here is the part which keepit as selected and you can apply property watever you want
icon={{uri:base64Icon, scale: 2}}
onPress={() => {
this.setState({
selectedTab: 'summary',
});
}}>
Similarly for another tab
<TabBarIOS.Item
title="details"
selected={this.state.selectedTab === 'detail'}
icon={{uri:base64Icon1, scale: 2}}
onPress={() => {
this.setState({
selectedTab: 'detail',
});
}}>
Hope this might help