I am using react-native-elements ButtonGroup with 3 buttons. I need to disable all buttons when the application starts, when conditions are met, I need to enable specific buttons.
Ive disabled all buttons using the false flag but I'm not sure how to enable specific buttons with a conditional statement and state.
Any help would be appreciated.
<ButtonGroup
onPress={this.updateIndex}
selectedIndex={selectedIndex}
buttons={buttons}
containerStyle={{ height: 100 }}
//disabled={[0, 1, 2]}
disabled={true}
/>
ADD_DETAILS(index) {
if (index === 0) {
console.log("clicked 0");
this.requestDetails();
}
}
You can store your disabled buttons in your state
for example:
this.state = {
selectedIndex: 2,
disabled:[], // you store your disabled buttons here
}
<ButtonGroup
onPress={this.updateIndex}
selectedIndex={selectedIndex}
buttons={buttons}
containerStyle={{height: 100}}
disabled={this.state.disabled}
/>
if you have ButtonGroup like this, you can disable buttons (for example first and third on button click ) like this:
<Button
title={"disable first and third buttons"}
onPress={()=>{
this.setState({disabled:[0,2]}); // here you update which buttons you want to disable
}}/>
As said by the docs, disable:
Controls if buttons are disabled. Setting true makes all of them disabled, while using an array only makes those indices disabled.
So creating a stucture like:
disabled={[1,2]}
would enable only the first button
To update it you should use a state variable and update it based off what you need, for example:
this.state={
disabled=[0]
}
then the disabled prop would look like:
disabled={this.state.disabled}
And in your onPress function you should remove/add your buttons they way you need:
onPress={this.buttonGroupOnPress}
This will send to the function the index of the clicked button as a parameter:
buttonGroupOnPress = (index) =>{
//your logic
this.setState({ disabled: /* the new array of disabled buttons indexes */ })
}
Source: https://react-native-training.github.io/react-native-elements/docs/button_group.html#disabled
Related
Using DefaultButton currently. This remains selected when clicked, which property can be used to revoke selection once clicked.
Alternatively, is there any styling that needs to be done for selection?
You can use DefaultButton checked property for that scenario and control it with onClick event:
const [isButtonChecked, setIsButtonChecked] = React.useState(false);
<DefaultButton
checked={isButtonChecked}
onClick={() => {
setIsButtonChecked(!isButtonChecked);
}}
styles={{
rootChecked: {
backgroundColor: '#f00',
color: '#fff',
}
}}
>
Default Button
</DefaultButton>
Use styles property to modify button styles when button state is checked: rootChecked, rootCheckedHovered etc.
Codepen example.
The react-native-paper docs suggest you can set the color of a disabled button using a theme, but this code does not work:
export const buttonTheme = {
colors: {
primary: COL_BASE_YELLOW,
disabled: COL_DARK_HIGHLIGHT,
},
}
<Button
loading={submittedPhoneNumber ? true : false}
mode="contained"
onPress={() => handleSubmitPhoneNumber(phoneNumber)}
theme={buttonTheme}
disabled={phoneNumber.length < 5 ? true : false}>
Continue
</Button>
The primary color works however.
How do I change the color of the button when it is disabled?
Don't use disabled props, it will always make your button grey, if you want to use your desired colour for disabled mode, do it like this :
<Button
loading={submittedPhoneNumber ? true : false}
mode="contained"
onPress={phoneNumber.length < 5 ? () => {} : () => handleSubmitPhoneNumber(phoneNumber)}
color={phoneNumber.length < 5 ? 'darkerColor' : 'fadedColor'}>
Continue
</Button>
From this Github issue:
The text if the contained button depends on the background color of
the button, which is automatically determined based on of the
background color is light it dark. Wherever theme is dark or not
doesn't affect it.
This is the desired behavior. We don't want to show white text on a
light background because you have a dark theme, otherwise the text
won't have enough contrast and will be illegible.
Changing the theme to dark changes the disabled button color, as I tested. Apart from this, I don't think its possible if you use react-native-paper. The author has decided to automatically set the color & background color of the button based on something, but his language is unclear.
However, you can give a labelStyle prop the button directly, and you could have a conditional in that style.
<Button labelStyle={{ color: phoneNumber.length < 5 ? 'red' : 'green' }}>
or,
[buttonDisabled, setButtonDisabled] = useState(false); // put this outside the render function.
<Button disabled={disabled} labelStyle={{ color: disabled ? 'red' : 'green' }}>
I'm may be late but here's my solution:
<Button
id="save-phonenumber"
color="darkColor">
onClick={doSomething}
disabled={phoneNumber.length < 5 ? true : false}>
<Button/>
In you Css file you can add
Button#save-phonenumber[disabled] {
background: "fadedColor"
}
Benefit of using this approach is that you don't additionally need to disable the clicking effect when the button is disabled.
If you're caring about light and dark themes at the moment, then you can achieve your goal like this -
I would suggest creating your own Button Component on the top of Paper Button.
// extending default Paper Button Component
<PaperButton style={[ props.disabled && { backgroundColor: 'cccccc' } ]}>
{children}
</PaperButton>
// Using component...
<MyButton disabled={disabled}>
Click Me!
</MyButton>
How can I replace the circle checkbox of a DetailsList in office-ui-fabric-react with a normal square CheckBox component? I see onRenderCheckbox so I try something like this:
onRenderCheckbox={(props) => (<Checkbox checked={props.checked} />)}
or
onRenderCheckbox={(props) => (<Checkbox {...props} />)}
I can see the square checkbox but I can't select it.
What it the proper way to do this?
Thanks in advance...
When you render the Checkbox component, it handles the click itself (and thus it won't percolate up to the row so it can toggle selection accordingly), so you need to prevent it with the pointer-events: none style.
onRenderCheckbox(props) {
return (
<div style={{ pointerEvents: 'none' }}>
<Checkbox checked={props.checked} />
</div>
);
}
Check it out here: https://codepen.io/anon/pen/zQXEPr
I am creating a custom dropdown component in React Native. I want to close it contents, when user presses screen outside of the component on any other part of the application.
However, I cannot know if user pressed outside the component. Is there a global OnPress event that can accessed or some other way, kindly let me know.
Edited:
add a logic when you click dropdown it should create a transparent view covering wholescreen in a absolute position.
Do it Like this:
// inside render
<Fragment>
<Nested>
<DropDown/>
</Nested>
{isDrop &&
<View style={styles.container} // height:'100%', width:'100%', backgroundColor:transparent , position: 'absolute'
//Trigger for pressing outside DropDown
onResponderStart={() => { condition for dropdown}}
//Required to start interacting with touches
onStartShouldSetResponder={(e) => {return true}}/>}
</Fragment>
DropDown component and view with touch must be the same level
I'm using react-native-keyboard-spacer.
I want to implement the feature of automatically popping up the keyboard.
The documentation says onToggle method is called when when keyboard toggles. Two parameters passed through, keyboardState (boolean, true if keyboard shown) and keyboardSpace (height occupied by keyboard)
Can anyone show me an example of how to accomplish this?
onToggle() is only called after the keyboard is toggled. To achieve the functionality you desire, just use the built in method in TextInput to focus an input when a component finishes mounting:
componentDidMount() {
this._myTextInput.focus();
}
render() {
return (
<TextInput
style={{height: 40}}
ref={component => this._myTextInput = component}
/>
);
}
onToggle get's called when the keyboard is either shown or hidden. If you want to pop up the keyboard without the user clicking anything, then you would need to focus() on a textInput.
handleOnToggle(keyboardState, keyboardSpace) {
// Do whatever you want with keyboardState
}
render() {
return <View>
<KeyboardSpacer onToggle={this.handleOnToggle} />
</View>
}