I am using react-native-snap-carousel NPM package with NativeBase in a react-native app. I am able to load the page successfully but the carousel is not showing up the children components as expected. Cards in Carousel are rendering very small (very small height, not visible clearly)
If I use the card component in <ListItem> component of NativeBase, the cards come up perfectly fine, but when use the same card component under carousel component, cards are messed up. Most probably it something related to styles of carousel children component.
This is how carousel looks like on Android (not tested on iOS):
Below is the code.
BusinessCarousel.js
import React, { Component } from 'react';
import { Dimensions } from 'react-native';
import { Text, View } from 'native-base';
import Carousel from 'react-native-snap-carousel';
import BusinessCard from './card';
export class BusinessCarousel extends Component {
_renderItem({ item, index }) {
return <BusinessCard business={item} />;
}
render() {
const businesses = [
{
name: 'business 1',
details:
'Business 1 details Business 1 details Business 1 details Business 1 details Business 1 details ',
address: {
fullAddress: 'some address'
}
},
{
name: 'business 2',
details:
'Business 1 details Business 1 details Business 1 details Business 1 details Business 1 details ',
address: {
fullAddress: 'some address'
}
},
{
name: 'business 3',
details:
'Business 1 details Business 1 details Business 1 details Business 1 details Business 1 details ',
address: {
fullAddress: 'some address'
}
}
];
return (
<Carousel
ref={c => {
this._carousel = c;
}}
data={businesses}
renderItem={this._renderItem}
sliderWidth={Dimensions.get('window').width}
itemWidth={Dimensions.get('window').width * 0.8}
containerCustomStyle={{ overflow: 'visible' }}
contentContainerCustomStyle={{ overflow: 'visible' }}
/>
);
}
}
BusinessCard (card.js)
import React, { Component } from 'react';
import {
Card,
CardItem,
Left,
Right,
Thumbnail,
Image,
Text,
View,
Button,
Body,
Icon
} from 'native-base';
export default class BusinessCard extends Component {
_getLogoURL() {
const { business } = this.props;
if (business.logo && business.logo.url) return { uri: business.logo.url };
return require('../../public/no-image-available.png');
}
render() {
const { business } = this.props;
return (
<Card>
<CardItem>
<Left>
<Thumbnail source={this._getLogoURL()} />
<Body>
<Text>{business.name}</Text>
<Text note numberOfLines={1}>
{(business.address && business.address.fullAddress) || ''}
</Text>
</Body>
</Left>
<Right>
<Icon name="create" />
</Right>
</CardItem>
<CardItem>
<Body>
<Text>{business.details}</Text>
</Body>
</CardItem>
</Card>
);
}
}