Nativebase: Card item's alignment is off

Created on 24 Feb 2017 · 3Comments · Source: GeekyAnts/NativeBase

Hi,
I'm using Card and CardItem components for a screen. I followed the doc closely, but couldn't get the items align in the center. I'm using native base 2.0.7, react native 0.41.2.

Here's the code and screen shot:

  render() {
    const course = this.props.currentCourse
    const { section } = this.props.navigation.state.params
    return(
      <Container>
        <Header>
          <Left>
            <Button transparent
              onPress={ () => this.props.navigation.goBack(null) }>
              <Icon name='ios-close' />
            </Button>
          </Left>
        </Header>
        <Content>
          <Card>
            <CardItem>
              <Left>
                <Thumbnail source={require('../assets/mock_thumbnail.jpg')} />
                <Body>
                  <Text>{section.title}</Text>
                  <Text note>{course.teacher}</Text>
                </Body>
              </Left>
            </CardItem>
            <CardItem >
              <Body>
                <Image style={{ resizeMode: 'contain', height: 300, width: 300  }}  source={require('../assets/mock_cover.png')} />
              </Body>
            </CardItem>
            <CardItem>
              <Left>
                <Button transparent >
                  <Icon name='ios-rewind'
                    style={{ fontSize: 40 }}/>
                </Button>
              </Left>
              <Body >
                <Button transparent
                  onPress = { () => this.props.playFile(this.props.files[section.section_id]) }>
                  <Icon name='ios-play'
                    style={{ fontSize: 50 }}/>
                </Button>
              </Body>
              <Right>
                <Button transparent >
                  <Icon name='ios-fastforward'
                    style={{ fontSize: 40 }}/>
                </Button>
              </Right>
            </CardItem>
          </Card>
        </Content>
      </Container>
    )
  }

screenshot 2017-02-24 16 18 18
I want the main picture to be aligned at the center of the screen, and the three buttons below to be aligned left, center, and right. Any insight on why the desired result is not happening would be much appreciated. Thanks!

Source

natashache

👍1

Most helpful comment

@cyclops24 I nested something like this under the card component

            <Grid  >
              <Col
                size={2} style={{height: 70, marginTop: 5}}>
                <Button transparent
                  onPress = {() => this.props.setCurrentProgress(currentProgress - 30)} >
                    <MaterialIcons name='replay-30'
                    style={{ fontSize: 40, textAlign: 'center', color: '#FFA000' }}/>
                </Button>
              </Col>
              <Col
                size={2}
                style={{height: 70, marginTop: 5, flexDirection: 'row', justifyContent: 'center'}}>
                  { this.playOrPause() }
              </Col>
              <Col size={2} style={{height: 70, marginTop: 5, marginRight: 0, flexDirection: 'row', justifyContent: 'flex-end'}}>
                <Button transparent
                  onPress = {() => this.props.setCurrentProgress(currentProgress + 30) }
                  style={{marginRight: 0}}>
                    <MaterialIcons name='forward-30'
                    style={{ fontSize: 40, textAlign: 'center', color: '#FFA000' }}/>
                </Button>
              </Col>
          </Grid>

natashache on 7 May 2017

👍3

All 3 comments

I used Grid along side with Card. Somehow it worked.

natashache on 26 Feb 2017

@natashache How you fix it by mix Grid and Card?

cyclops24 on 6 May 2017

@cyclops24 I nested something like this under the card component

            <Grid  >
              <Col
                size={2} style={{height: 70, marginTop: 5}}>
                <Button transparent
                  onPress = {() => this.props.setCurrentProgress(currentProgress - 30)} >
                    <MaterialIcons name='replay-30'
                    style={{ fontSize: 40, textAlign: 'center', color: '#FFA000' }}/>
                </Button>
              </Col>
              <Col
                size={2}
                style={{height: 70, marginTop: 5, flexDirection: 'row', justifyContent: 'center'}}>
                  { this.playOrPause() }
              </Col>
              <Col size={2} style={{height: 70, marginTop: 5, marginRight: 0, flexDirection: 'row', justifyContent: 'flex-end'}}>
                <Button transparent
                  onPress = {() => this.props.setCurrentProgress(currentProgress + 30) }
                  style={{marginRight: 0}}>
                    <MaterialIcons name='forward-30'
                    style={{ fontSize: 40, textAlign: 'center', color: '#FFA000' }}/>
                </Button>
              </Col>
          </Grid>

natashache on 7 May 2017

👍3

Was this page helpful?

0 / 5 - 0 ratings