I need to limit the number of visible options displayed in the react-select dropdown panel.
At the moment it shows around 9 items but I need that limited to 5. I'm not sure how to go about making changes to the dropdown.
I figured this out by overriding core component styles. It was just a case of finding which component rendered the styles I was interested in.
In this case it was the menuList component that controlled the visible items in the dropdown. To override the component styles this is what I used:
const selectStyles = {
menuList: styles => {
console.log('menuList:', styles);
return {
...styles,
maxHeight: 136
};
}
};
return (
<Select
value={selectVal}
onChange={updateVal}
options={options}
styles={selectStyles}
/>
);
I found it very useful to console.log out the component styles to see what styles are available for a particular component as well as the default values used.
Do you use this react-dropdown library https://www.npmjs.com/package/react-dropdown-select?
This library has options attributes. Which are the options the user can select. For this answer. You can put 5 items in options like follow.
const options = [
{key: '1', value: 'first'},
{key: '2', value: 'two'},
{key: '3', value: 'three'},
{key: '4', value: 'four'},
{key: '5', value: 'five'}
];
<react-dropdown-selecte options={options} />
Related
I cannot find a way to change the style the IconButton of the status: 'error' Toast component in native base v3, which under the hood is using an IconButton component.
Here is the link to the main Toast functions such as useToast and their props
The simplified code to render a toast looks like the following:
import { useToast } from 'native-base';
...
const Toast = useToast():
...
Toast.show({
title: 'title',
status: 'error',
style: { backgroundColor: 'blue.200' },
})
But how would I increase the padding of the close icon button for example? It would be nice to do something like
I understand I can use the render prop to render a custom component, but I would prefer to use the default styling from native base and my extended theme - instead of having to style and render a component that looks exactly the same as the current Toast. This poses an issue if there are default style changes from native base or the app's extended theme, as changes would have to be hardcoded and changed in this render fn as well. Which is not practical!
Toast.show({
style: {
_icon: {
padding: 10,
},
}
// or
iconButtonStyle: { padding: 10 },
})
I can extend the theme and set a default style for IconButton component like so, but this would change every single IconButton in the app - which is not practical.
const myTheme = extendTheme({
components: {
IconButton: {
baseStyle: {
rounded: 'full',
padding: 10,
},
},
...
Is it possible to change the base styles like so?
const myTheme = extendTheme({
components: {
Toast: {
baseStyle: {
_icon: {
padding: 10,
},
},
},
...
It would be great to know how to change the styling of either:
the icon button of one specific Toast component (like in toast.show() above)
or the default styling for the close icon button of all Toast's, but not other IconButtons
Thanks!
I am making a minesweeper app in react native as a personal project to try and learn the concepts. The problem I am having is trying to update multiple children objects at the same time. I'm not sure if this is the best practice.
I have 3 components Game > Grid > cell. The Game component takes care of the logic of the game such as timer/win condition/lose condition. The grid is a collection of cells and determines what each cell should be.
Game component:
render() {
return (
<Grid
action={this.props.action}
firstClick={this.state.firstClick}
/>
);
}
I pass the state firstClick to the grid component which is equal to true. meaning when I tap the first cell I want it to reveal all surrounding neighbors while first click is equal to true.
Grid Component:
_renderItem = ({ item }) => (
<Cell
item={item}
neighbours={this.state.neighbours[item.key.substring(0,1)][item.key.substring(1,2)]}
firstClick={this.props.firstClick}
/>
);
render() {
return (
<FlatList
data={this.state.flatGrid}
renderItem={this._renderItem}
keyExtractor={this._keyExtractor}
numColumns={10}
/>
);
}
The grid is a flatlist of cells and the grid knows the neighboring cells of each cell when its tapped. The problem I am having is I'm not sure where I should update the state of the tapped cell and its neighboring cells. I would like the isHidden state to be set to false for the cell plus all of its neighbors.
Should it be handled in the grid component or cells component? I'm not sure how to tackle this without breaking encapsulation.
These are the states in my cell Component
constructor(props) {
super(props);
this.state = {
isFlagged: false,
isHidden: true,
value: '',
id: ''
};
Thanks in advance!
Here is something which can make life easier for you.
First of all, your cell should be a PureComponent and you should never store the state in your cell. The sole reason being the cell will be reused at some point and your entire screen might start behaving randomly. You can store the state of each cell model in the data source.
Finally, you should pass a callback function as props to your cell. When the cell is tapped, then calculate the neighboring cells in your Grid component. When this is calculated, then change the appropriate cell models accordingly.
Example
class Grid extends React.Component {
state = {
dataSource: [{
isFlagged: false,
isHidden: true,
value: '1',
id: '1',
}, {
isFlagged: false,
isHidden: true,
value: '2',
id: '2',
}],
};
onCellClicked = (item) => {
// Find neighbouring items and replace the modified items in the state in this function
}
_renderItem = (item) => {
return <Cell onClick={() => this.onCellClicked(item)} item={item}>;
}
render() {
return (
<FlatList data={this.state.dataSource} renderItem={this._renderItem}/>
);
}
}
Is there a way to know when a multiselect dropdown is collapsed? I have a multiselect dropdown as show here:
On unselecting all options, the dropdown still remains expanded as shown in the above image. On clicking somewhere else in the screen outside dropdown, it collapses. I need to perform some actions (for example, display a message) when dropdown collapses. Is there a way to know when a multiselect dropdown is collapsed?
I was able to use onBlur instead. But, I need to click outside Dropdown twice in order to print the message.
<Dropdown
options={[
{ key: 'A', text: 'Option a' },
{ key: 'B', text: 'Option b' },
{ key: 'C', text: 'Option c' }
]}
multiSelect={true}
onBlur={this.onFilterDropDownDismiss}
/>
private onFilterDropDownDismiss = (): void => {
console.log("Dismissed");
}
But, I need to display the message on one click outside. Please let me know if there are any suggestions to fix this.
IDropdownProps.onDismiss event could be utilized for that matter:
Callback issues when the options callout is dismissed
<Dropdown
options={[
{ key: 'A', text: 'Option a' },
{ key: 'B', text: 'Option b' },
{ key: 'C', text: 'Option c' }
]}
multiSelect={true}
onDismiss={this.onFilterDropDownDismiss}
/>
private onFilterDropDownDismiss = (): void => {
console.log("Dismissed");
}
Here is a demo for your reference
So I have two components
<TouchableInput
onPress={() => this.interestedInPicker.togglePicker()}
/>
<RNPickerSelect
placeholder={{}}
items={[
{
label: 'text',
value: 'value`,
},
{
label: 'text'
value: 'value',
},
{
label: 'text',
value: 'value',
},
]}
onValueChange={restInput.onChange}
style={styles.interestedInPicker}
value={restInput.value}
ref={ref => (this.interestedInPicker = ref)}
/>
RNPickerSelect has height of 0 so it is hidden.
When I press on the TouchableInput I want the function togglePicker to trigger. This works on iOS but logs undefined on Android. When I console.log this.interestedInPicker I can see the method I need but when I log the whole expression it is undefined. Any idea what is going on ?
I opened this as an issue for library RNPickerSelect about a month ago.
It is a known problem. The issue is that they need a way to trigger the picker programatically. You might be able to find a temporary solution HERE
Background
I am using xotahal/react-native-material-ui material design in my React-Native application. I have implemented the ActionButton with multiple buttons in it. I can not find anywhere in the docs that is explains how to use this. I was able to find the component in the git repo and managed getting the buttons to render but I can't get them to fire of onClick().
Example
The buttons appear when the main blue button is clicked.
Question
What is the proper way to pass functions to these buttons, or where in the documentation is this explained?
Code
<ActionButton
actions={[
{ icon: 'note-add', label: 'Add', onPress: () => this.toggleSearch() },
{ icon: 'save', label: 'Save', onPress: () => this.handleOnSave() },]}
/>
toggleSearch() {
console.log('################## HEY SEARCH WORKS ##########################');
}
Problem with this is that no functions are fired when I click the button.
I would be grateful if someone knows where this is explained in the documentation.
ActionButton actions prop expects an object with the shape of {icon, label, name}. If you want to handle onPress you need to define it as a prop to the component and not to the actions object.
Example
<ActionButton
actions={[
{ icon: 'note-add', label: 'Add' },
{ icon: 'save', label: 'Save'}]}
onPress={(text) => this.onPress(text)}
/>
// ...
onPress(text) {
switch(text) {
case:
// do something on this case
break;
case:
// do another thing on this case
break;
}
}