Hi,
I am using native base tabs component. But each tab taking height of the maximum tab template. Do any solution to adjust the height of each tab to its content.
My code is as follows:
<Container>
<Content >
<View>
<Carousel
autoplay
autoplayTimeout={5000}
loop
index={0}
pageSize={BannerWidth}
showsPageIndicator={ false }
>
{images.map((image, index) => this.renderPage(image, index))}
</Carousel>
<View style={{position: 'absolute' ,bottom: 50,left:20, zIndex: 444}}>
<Text style={{ color: 'white', fontWeight: 'bold', fontSize: 30, alignItems: 'center' }}>xxx</Text>
</View>
</View>
<Tabs
tabBarUnderlineStyle = {{
backgroundColor: 'orange',
height: 0,
}}
>
<Tab heading="Resturants" >
<List >
<ListItem button onPress={() => this.props.navigation.navigate('RestDetails', {item: 1})}>
<Text >Test 1</Text>
</ListItem>
<ListItem onPress={() => this.props.navigation.navigate('RestDetails', {item: 2})}>
<Text>Test 2</Text>
</ListItem>
<ListItem>
<Text>Test 3</Text>
</ListItem>
<ListItem>
<Text>Test 4</Text>
</ListItem>
<ListItem>
<Text>Test 5</Text>
</ListItem>
<ListItem>
<Text>Test 6</Text>
</ListItem>
<ListItem>
<Text>Test 7</Text>
</ListItem>
<ListItem>
<Text>Test 8</Text>
</ListItem>
<ListItem>
<Text>Test 9</Text>
</ListItem>
<ListItem>
<Text>Test 10</Text>
</List>
</Tab>
<Tab heading="News" >
<Card >
<CardItem header button onPress={() => this.props.navigation.push('NewsDetails')}>
<Image source={require('../../assets/header-image3.jpg')} style={{width: '100%', height: 150}} ></Image>
</CardItem>
<CardItem button onPress={() => this.props.navigation.push('NewsDetails')}>
<Body>
<Text>
News one
</Text>
</Body>
</CardItem>
<CardItem footer button onPress={() => this.props.navigation.push('NewsDetails')}>
<Text>20.Nov.2018</Text>
</CardItem>
</Card>
<Card>
<CardItem header>
<Image source={require('../../assets/header-image3.jpg')} style={{width: '100%', height: 150}}></Image>
</CardItem>
<CardItem>
<Body>
<Text>
News two
</Text>
</Body>
</CardItem>
<CardItem footer>
<Text>15.Nov.2018</Text>
</CardItem>
</Card>
</Tab>
</Tabs>
</Content>
</Container>
The height of second tab("News") is having the scroll height of the first tab("Resturants").
Any solution is appreciable.
Thanks
