Nativebase: Segment overflow with three buttons only.

Created on 22 May 2018 · 2Comments · Source: GeekyAnts/NativeBase

Segments overflowing in parent view with only three buttons.
It looks like as:

simulator screen shot - iphone 6 - 2018-05-22 at 12 23 01

Can not apply the styles also.

bug

Source

dev-pacific22

Most helpful comment

@dev-pacific22 try changing segment button's padding (paddingLeft and paddingRight).
Sample code

import React, { Component } from 'react';
import { StyleSheet } from "react-native";
import { Container, Header, Left, Body, Right, Button, Icon, Title, Segment, Content, Text } from 'native-base';
export default class App extends Component {

  state = { selected: 1 }

  render() {
    return (
      <Container>
        <Header>
          <Left>
            <Button transparent>
              <Icon name="arrow-back" />
            </Button>
          </Left>
          <Body>
            <Title>Forms</Title>
          </Body>
          <Right>
            <Button transparent>
              <Icon name="search" />
            </Button>
          </Right>
        </Header>
        <Segment>
          <Button first active={this.state.selected === 1} style={styles.segmentButton} onPress={() => this.setState({ selected: 1 })}>
            <Text >Get Started</Text>
          </Button>
          <Button active={this.state.selected === 2} style={styles.segmentButton} onPress={() => this.setState({ selected: 2 })}>
            <Text>In Progress</Text>
          </Button>
          <Button last active={this.state.selected === 3} style={styles.segmentButton} onPress={() => this.setState({ selected: 3 })}>
            <Text>Completed</Text>
          </Button>
        </Segment>
        <Content padder>
          <Text>Segment</Text>
        </Content>
      </Container>
    );
  }
}

const styles = StyleSheet.create({
  segmentButton: {
    paddingLeft: 0,
    paddingRight: 0
  }
})

simulator screen shot - iphone 6 - 2018-05-23 at 17 10 32

akhil-geekyants on 23 May 2018

👍2 🎉1

All 2 comments

@dev-pacific22 try changing segment button's padding (paddingLeft and paddingRight).
Sample code

import React, { Component } from 'react';
import { StyleSheet } from "react-native";
import { Container, Header, Left, Body, Right, Button, Icon, Title, Segment, Content, Text } from 'native-base';
export default class App extends Component {

  state = { selected: 1 }

  render() {
    return (
      <Container>
        <Header>
          <Left>
            <Button transparent>
              <Icon name="arrow-back" />
            </Button>
          </Left>
          <Body>
            <Title>Forms</Title>
          </Body>
          <Right>
            <Button transparent>
              <Icon name="search" />
            </Button>
          </Right>
        </Header>
        <Segment>
          <Button first active={this.state.selected === 1} style={styles.segmentButton} onPress={() => this.setState({ selected: 1 })}>
            <Text >Get Started</Text>
          </Button>
          <Button active={this.state.selected === 2} style={styles.segmentButton} onPress={() => this.setState({ selected: 2 })}>
            <Text>In Progress</Text>
          </Button>
          <Button last active={this.state.selected === 3} style={styles.segmentButton} onPress={() => this.setState({ selected: 3 })}>
            <Text>Completed</Text>
          </Button>
        </Segment>
        <Content padder>
          <Text>Segment</Text>
        </Content>
      </Container>
    );
  }
}

const styles = StyleSheet.create({
  segmentButton: {
    paddingLeft: 0,
    paddingRight: 0
  }
})

simulator screen shot - iphone 6 - 2018-05-23 at 17 10 32

akhil-geekyants on 23 May 2018

👍2 🎉1

Released with 2.5.0