Nativebase: button auto full width

[kin-for-test]

expect

but the view in android vm like

code

import React, { Component } from 'react';
import { Container, Header, Content, Button, Text } from 'native-base';
export default class ButtonThemeExample extends Component {
  render() {
    return (
      <Container>
        <Header />
        <Content>
          <Button light><Text> Light </Text></Button>
          <Button primary><Text> Primary </Text></Button>
          <Button success><Text> Success </Text></Button>
          <Button info><Text> Info </Text></Button>
          <Button warning><Text> Warning </Text></Button>
          <Button danger><Text> Danger </Text></Button>
          <Button dark><Text> Dark </Text></Button>
        </Content>
      </Container>
    );
  }
}

i try full={false} but still not work

[Mohammad-Khalid23]

full={false} will not work, because when you pass full = {true} then it will apply full button style , other wise in default, button will get full width of the parent container because it is using flex for button style.

you have to give width to the buttons.

[kin-for-test]

OH! i see , i thought the button have a default width , because the button show in docs is not full width

[matecserven]

This should be mentioned in the docs, it is quite misleading.

[gsouf]

I actually found the doc to be terrible, lot of actual examples do not match the result ;(

[mkamyszek]

What is the solution to get it to look like the docs?

[ahmadsyamim]

<Content>
<View style={{
flex:0
}}>

should be fine i think.

import React, { Component } from 'react';
import { Container, Header, Content, View, Button, Text } from 'native-base';
export default class ButtonThemeExample extends Component {
  render() {
    return (
      <Container>
        <Header />
        <Content>
            <View style={{flex:0}}>
                <Button light><Text> Light </Text></Button>
                <Button primary><Text> Primary </Text></Button>
                <Button success><Text> Success </Text></Button>
                <Button info><Text> Info </Text></Button>
                <Button warning><Text> Warning </Text></Button>
                <Button danger><Text> Danger </Text></Button>
                <Button dark><Text> Dark </Text></Button>
            </View>
        </Content>
      </Container>
    );
  }
}

[cleybertandre]

I've solved it adding a 'alignSelf' style property on the Button:

<Button primary style={{alignSelf: 'flex-start'}}><Text> Primary </Text></Button>

[wobsoriano]

I've solved it adding a 'alignSelf' style property on the Button:

<Button primary style={{alignSelf: 'flex-start'}}><Text> Primary </Text></Button>

applying this won't let you use block and full properties

[hanykumar]

Hi @sorxrob, Button doesn't lose any styles using
<Button primary style={{alignSelf: 'flex-start'}}><Text> Primary </Text></Button>.
Block or full still works absolutely fine.

Hi @kin-for-test, you can definitly use the solution provided by @cleybertandre for adjusting width.

[hanykumar]

Hi @kin-for-test , we have fixed this issue. Changes are done on master branch.

latest version of Native base has been released.
Native Base 2.13.12

[kin-for-test]

@hanykumar
thank you very much!

[jassonxian]

@hanykumar
thank you very much!

I've upgraded the version, but it doesn't seem to be working yet
Did you take care of that

[hanykumar]

Hi @jassonxian , this issue is not fixed in the latest version. But it will be fixed in next version. You will need to import NativeBase from master branch for its working.

[jmlavoier]

Hi @hanykumar, is this fix not merged yet?

[bigwhoop]

Still seeing this issue today as well. Last release was over 2 months ago. This seems like a rather big issue that should have received a fix by now, not? As someone that hasn't used native base and wanted to give it a go for the first time, this makes me quite hesitant to move forward. 😟