CODEWITHSUNDEEP
react-nativenative-base
Bijendra
Bijendra

Reputation: 1

How to use Native base Deck swiper for android

I am not able to use the native base deck swiper every time I try to run the program using the code given in the official website of native base I get a blank white screen.My code is:-

  <DeckSwiper
        dataSource={cards}
        renderItem={item =>
          <Card style={{ elevation: 3 }}>
            <CardItem>
              <Left>
                <Thumbnail source={item.image} />
                <Body>
                  <Text>{item.text}</Text>
                  <Text note>NativeBase</Text>
                </Body>
              </Left>
            </CardItem>
            <CardItem cardBody>
              <Image style={{ height: 300, flex: 1 }} source={item.image} />
            </CardItem>
            <CardItem>
              <Icon name="heart" style={{ color: '#ED4A6A' }} />
              <Text>{item.name}</Text>
            </CardItem>
          </Card>
        }
      />

no error is displayed but the only thing I got is a white blank screen

Upvotes: 0

Views: 1700

Answers (2)

omer.ersoy
omer.ersoy

Reputation: 334

Whoever searching an answer about this issue remember that the example in native-base docs using internal resources for images. So if you're using external resources for your Image components (like an image url) please use

<Image style={{ height: 300, flex: 1 }} source={{uri:item.image}} />

instead. It's basic as hell but can be overlooked easily.

Upvotes: 2

Emmalex6250
Emmalex6250

Reputation: 76

Put your Deckswiper inside the view and give height to that view. it should work

    <View style={{height:400}}>
    <DeckSwiper
    dataSource={cards}
    renderItem={item =>
      <Card style={{ elevation: 3 }}>
        <CardItem>
          <Left>
            <Thumbnail source={item.image} />
            <Body>
              <Text>{item.text}</Text>
              <Text note>NativeBase</Text>
            </Body>
          </Left>
        </CardItem>
        <CardItem cardBody>
          <Image style={{ height: 300, flex: 1 }} source={item.image} />
        </CardItem>
        <CardItem>
          <Icon name="heart" style={{ color: '#ED4A6A' }} />
          <Text>{item.name}</Text>
        </CardItem>
      </Card>
    }
  />
  </View>

Upvotes: 3

Related Questions