CODEWITHSUNDEEP
androidreact-nativenative-base
Hasangi
Hasangi

Reputation: 320

Vertical Scroll is not working with Card in native-base for Android

I have used Content to achieve the vertical scrolling and tried using ScrollView as well. But nothing works with Card component in native-base. This behavior was shown when testing in an Android emulator.

Following is my working,

render() {
    return (
        <Container>
            <Header style={{backgroundColor: Colors.headerBackground, justifyContent: 'center', marginTop: '4%'}}>
                <Left>
                    <Button transparent onPress={this.handleBackButtonClick} small={true}>
                        <Icon name='arrow-back' size={30} color={Colors.textWhite}/>
                    </Button>
                </Left>
                <Body>
                <Title style={{
                    fontSize: 20,
                    fontWeight: '200'
                }}>Events</Title>
                </Body>
            </Header>
                <Content>
                    { (this.state.events).map(event => { return (
                    <Card key={event.title} style={{ marginTop:'2%', marginLeft:'2%', marginRight:'2%', marginBottom:'2%'}}>
                        <CardItem>
                            <Image source={{uri:event.uri}}
                                   style={{height:200, width: null, flex:1}}/>
                        </CardItem>
                        <CardItem>
                            <Left>
                                <View style={{height: '50%'}}>
                                    <Text style={{color: Colors.calenderMonth, fontSize: 15}}>Jun</Text>
                                    <Text style={{fontSize: 15}}>15</Text>
                                </View>
                            </Left>
                            <Body style={{alignSelf: 'flex-start', marginLeft: '-50%'}}>
                            <Text style={{fontSize: 20, fontWeight: 'bold'}}>{event.title}</Text>
                            <Text note>{event.desc}</Text>
                            </Body>
                        </CardItem>
                    </Card>
                    ) } ) }
                </Content>
        </Container>
    );
}

Any ideas? Thanks

Upvotes: 2

Views: 6173

Answers (4)

Ville Miekk-oja
Ville Miekk-oja

Reputation: 20965

Set flexGrow: 1 to contentContainerStyle prop of the Content component:

<Content contentContainerStyle={{ flexGrow: 1 }}>

This worked for me after many hours of struggling with the issue.

Upvotes: 4

Odane B
Odane B

Reputation: 31

I had the same issue with one of my project. I realize that the <Card> wasn't scrolling even after i place it in a <ScrollView> because it was within the <Container>. I solved it by creating a separate Component with the <Card> within the <ScrollView> and import it.

Example:

    render() {
    return (
        <ScrollView>
          <Card>
            <CardItem>
            </CardItem>
          </Card>
        </ScrollView>
    );
  }

Import it:

 render() {
    return (
        <Container>
          <Content>

            <ScrollingCardExample />

          </Content>
        </Container>
    );
  }

Upvotes: 3

akhil xavier
akhil xavier

Reputation: 1847

tried your code with some data. Working fine for me.

import React, { Component } from 'react';
import { Image } from "react-native";
import { Container, Header, Left, Body, Button, Icon, Title, Content, Card, CardItem, View, Text } from 'native-base';

export default class App extends Component {

  state = { events: [1, 2, 3, 4, 5] }

  render() {
    return (
      <Container>
        <Header style={{ justifyContent: 'center', marginTop: '4%' }}>
          <Left>
            <Button transparent onPress={this.handleBackButtonClick} small={true}>
              <Icon name='arrow-back' size={30} color="white" />
            </Button>
          </Left>
          <Body>
            <Title style={{
              fontSize: 20,
              fontWeight: '200'
            }}>Events</Title>
          </Body>
        </Header>
        <Content>
          {(this.state.events).map(event => {
            return (
              <Card key={event} style={{ marginTop: '2%', marginLeft: '2%', marginRight: '2%', marginBottom: '2%' }}>
                <CardItem>
                  <Image source={{ uri: "https://nativebase.io/assets/img/front-page-icon.png" }}
                    style={{ height: 200, width: null, flex: 1 }} />
                </CardItem>
                <CardItem>
                  <Left>
                    <View style={{ height: '50%' }}>
                      <Text style={{ fontSize: 15 }}>Jun</Text>
                      <Text style={{ fontSize: 15 }}>15</Text>
                    </View>
                  </Left>
                  <Body style={{ alignSelf: 'flex-start', marginLeft: '-50%' }}>
                    <Text style={{ fontSize: 20, fontWeight: 'bold' }}>Title</Text>
                    <Text note>Description</Text>
                  </Body>
                </CardItem>
              </Card>
            )
          })}
        </Content>
      </Container>
    );
  }
}

Gif

enter image description here

Upvotes: 0

Praz Solver
Praz Solver

Reputation: 543

Use <ScrollView> instead of <Content> and make sure u have enough contents to test scrolling.

Upvotes: 2

Related Questions