ButtonGroup never renders last button as final button

[J-Cake]

Issue type

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

• [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!