ButtonGroup never renders last button as final button

[J-Cake]

Issue type

I'm submitting a ... (check one with "x")

• bug report
• feature request

Issue description

Current behavior:

I want to use a ButtonGroup like

<ButtonGroup>
    <Button>Btn1</Button>
    <Button>Btn2</Button>
</ButtonGroup>

and I followed the documentation. But I also tried

<ButtonGroup>
    <Button>Btn1</Button>
    <Button>Btn2</Button>
    <Button>Btn3</Button>
</ButtonGroup>

with a third button but same thing. The last button is not rounded and the button group does not take up 100% of the width of the container.

Expected behavior:

The ButtonGroup takes up the full width of the container and rounds the last button.

Steps to reproduce:

Related code:

import {Layout, Text, Input, Button, ButtonGroup, ButtonGroupProps} from 'react-native-ui-kitten'

import styles from './styles/layout';

export default class Auth extends React.Component {
	state = {
		login: '',
		password: '',
	};

	change(text, value) {
		this.setState({
			[value]: text,
		});
	}

	render() {
		return <Layout style={styles.layout}>
			<Text category={"h2"} appearance={"hint"} style={styles.heading}>Sign In</Text>

			<Input onChangeText={text => this.change(text, 'login')} value={this.state.login} label={"Email"}/>
			<Input onChangeText={text => this.change(text, 'password')} value={this.state.password} label={"Password"} secureTextEntry={true}/>

			<Methods/>

			<Button>Log In</Button>
			<Button appearance={"ghost"}>Forgot Password</Button>
		</Layout>;
	}
}

const Methods = props => <ButtonGroup>
	<Button>Google</Button>
	<Button>Facebook</Button>
</ButtonGroup>;

Other information:

OS, device, package version

Android 9.0, Galaxy S8, UI Kitten v4.1.0

[artyorsh]

Thanks for reporting this

[artyorsh]

Can you, please, also share styles object?

[J-Cake]

I never specified such object. I used the default styles.

[artyorsh]

import styles from './styles/layout'

[artyorsh]

Here is an idea of how you can quickly solve this - View it on Snack

<ButtonGroup style={{ width: '100%' }}>
  <Button style={{ flex: 1 }}>L</Button>
  <Button style={{ flex: 1 }}>M</Button>
  <Button style={{ flex: 1 }}>R</Button>
</ButtonGroup>

The code above makes ButtonGroup have a width of a container, also it makes it children to have equal width. So it can render as expected and can be only controlled by width property.

I don't think that by default ButtonGroup should take the full width of a container, but we will work on it to get rid of this workaround. Thanks

[J-Cake]

the ./styles/layout never mentions the ButtonGroup But good news, your solution works. Thank you.

[artyorsh]

However it is used in a container, so it can affect

<Layout style={styles.layout}>

[J-Cake]

ah I see, the styles for the container are

{
    flex: 1,
    padding: 5
}

[artyorsh]

@J-Cake glad to say the fix for your issue is available. Try updating to beta

npm i react-native-ui-kitten@beta @eva-design/eva@beta

[J-Cake]

sweeet, worked to perfection. Thanks everyone!