Open Angelk90 opened 6 years ago
Angelk90
commented
6 years ago @GeekyAnts, @akhil-geekyants: After some attempts I realized if I put: Tabs inside a ScrollView from this problem, changing the length of the tabs, taking the maximum one. Any suggestions? Ex:
<Container>
<ScrollView>
<Tabs initialPage={0} tabBarUnderlineStyle={{
height: 2,
backgroundColor: "#FFC107"
}}>
.........
.......
SupriyaKalghatgi
commented
6 years ago @Angelk90 Issue 1470 says
No Scrolls of the elements found in the tabs.
And Issue 1501 says
Tabs not fixed under the toolbar. Tabs that take the maximum size of the "rendered" tab.
So is 1470 solved for you?
akhil-ga
commented
6 years ago @Angelk90 getting error. Error importing CollapsingToolbar.
Angelk90
commented
6 years ago @akhil-geekyants: You have opened the Expo link, it works for me. However the lib to be installed is called, with that name "npm i react-native-collapsingtoolbar". Let me know if it does not work.
Angelk90
commented
6 years ago @akhil-geekyants: It was put in local, if you notice, I'm talking about the Expo link. When I wrote here forgot to change with its npm route.
normdoow
commented
6 years ago I am having this same issue when my tabs are inside a ScrollView
cbaker
commented
6 years ago Same issue here. Any word?
LasithaPrabodha
commented
6 years ago Same issue no solution yet
Angelk90
commented
6 years ago @normdoow , @lumlnous , @LasithaPrabodha :
I have not yet been able to solve it, try asking: @GeekyAnts, @akhil-geekyants, @SupriyaKalghatgi. if there is a solution.
cbaker
commented
6 years ago @LasithaPrabodha Height of every tab appears to have the height of the tallest tab regardless of what you do to each tab.
I'm going to snoop around the actual components and mess around with those in a bit, I'll respond afterwards.
LasithaPrabodha
commented
6 years ago @Angelk90 @lumlnous
I figured out that if you write the code like this, the height will be different according to their content.
<Container>
<Header hasTabs />
<Tabs>
<Tab heading="Tab1">
<TabOne />
</Tab>
<Tab heading="Tab2">
<TabTwo />
</Tab>
<Tab heading="Tab3">
<TabThree />
</Tab>
</Tabs>
</Container>But this won't
<Container>
<Header hasTabs />
<Content>
<View><Text>Hi</Text></View>
<Tabs>
<Tab heading="Tab1">
<TabOne />
</Tab>
<Tab heading="Tab2">
<TabTwo />
</Tab>
<Tab heading="Tab3">
<TabThree />
</Tab>
</Tabs>
</Content>
</Container>Problem I had with your findings is, if I put my tabs in a
akhil-ga
commented
6 years ago @lumlnous tried placing tabs inside a component. I was able to scroll the tab content. Attaching a gif.
Angelk90
commented
6 years ago @akhil-geekyants : Can you check this code and tell me what's wrong? Link: https://snack.expo.io/HJrZ9jXEf
To reply to: https://github.com/GeekyAnts/NativeBase/issues/1501#issuecomment-356865189
On the left there is a folder called lib, inside which there are two files.
If you can not, you'll post the whole code, so you can try it:
App:
import React, { Component } from 'react';
import {
View,
Text,
Image,
Dimensions,
ListView,
PixelRatio,
StyleSheet
} from 'react-native'
var {width} = Dimensions.get('window');
import CollapsingToolbar from './lib/index';
import { Container, Tabs, Tab as Tabn } from "native-base";
// 2.3.6
import "@expo/vector-icons";
// 6.2.2
const Description = "Amy Lou Adams was born in Vicenza, Veneto, Italy, to American parents Kathryn (Hicken) and Richard Kent Adams, while her father was a U.S. serviceman. She was raised in a Mormon family of seven children in Castle Rock, Colorado, and has English, as well as smaller amounts of Danish, Swiss-German, and Norwegian, ancestry.";
const Movie = [{
id: 640,
poster_path: "/MywWCQGJNUr5kivAQ7eseCG7rm.jpg",
title: "Catch Me If You Can"
},{
id: 1444,
poster_path: "/asC6UOPrR6OlNMiyXbeXWu08SOG.jpg",
title: "Junebug"
},{
id: 10490,
poster_path: "/lWCooTiA6sSLdCA4hzToHKKWBZb.jpg",
title: "Drop Dead Gorgeous"
},{
id: 4523,
poster_path: "/8KCNzCArLlvLdQoHx6npua2VSVc.jpg",
title: "Enchanted"
},{
id: 5458,
poster_path: "/cehmfvz2fJtBa1M6a3saRRsj5CD.jpg",
title: "Cruel Intentions 2"
},{
id: 21801,
poster_path: "/l39vqAh57UjA0c5vBJUUPyuqz32.jpg",
title: "The Slaughter Rule"
},{
id: 6538,
poster_path: "/uN9tN0ZDyol7VsTlugDZhGc11xQ.jpg",
title: "Charlie Wilson's War"
},{
id: 24803,
poster_path: "/4BFGuCcdV7y8mFYzBhgj00d3b1z.jpg",
title: "Julie & Julia"
},{
id: 25195,
poster_path: "/9UWKpkQvZaPqpb85Or4e0PghJft.jpg",
title: "Leap Year"
},{
id: 12178,
poster_path: "/8upvDaxMou1RGU0EqbQYjAxri4p.jpg",
title: "Miss Pettigrew Lives for a Day"
},{
id: 12771,
poster_path: "/cgLqjuKp5AT1o9xvWhriToS2mHr.jpg",
title: "Serving Sara"
},{
id: 9718,
poster_path: "/hi8whfL7t6cL2LITLJjzJ7UWuZA.jpg",
title: "Talladega Nights: The Ballad of Ricky Bobby"
},{
id: 13090,
poster_path: "/9JkxUbOFiomw2Ci8ayTfAT69s0k.jpg",
title: "Sunshine Cleaning"
},{
id: 6961,
poster_path: "/A2m90ko1FCnJqEkpbHwMq3BDgx6.jpg",
title: "The Wedding Date"
},{
id: 9971,
poster_path: "/8oY0tWU2HlYhOLki1QvsaU0BdPU.jpg",
title: "The Last Run"
},{
id: 27723,
poster_path: "/25a4lSkU43K2npb4g1XOJqmgtNb.jpg",
title: "Psycho Beach Party"
},{
id: 28025,
poster_path: "/7ZAJS9ILCeh7dF61UPdlV8M8fap.jpg",
title: "Moonlight Serenade"
},{
id: 14167,
poster_path: "/r5a8l1fz6WjLvOmELY0tTfoCXTf.jpg",
title: "Standing Still"
},{
id: 14359,
poster_path: "/eoxF1LlYvJeVJcEmptfV8PLtpBK.jpg",
title: "Doubt"
},{
id: 45317,
poster_path: "/ytGIpdxYyvXwch5QILfquSTMA9f.jpg",
title: "The Fighter"
},{
id: 64328,
poster_path: "/Ai7JRZFEXXOX7rhgfeL861zZtWv.jpg",
title: "The Muppets"
},{
id: 18360,
poster_path: "/qbU6AxmO69bBwu6Tw8HtcRoltAA.jpg",
title: "Night at the Museum: Battle of the Smithsonian"
},{
id: 48798,
poster_path: "/it22C6LNuwd4ktP8oDJECdJxxS3.jpg",
title: "Love and Distrust"
},{
id: 49521,
poster_path: "/xWlaTLnD8NJMTT9PGOD9z5re1SL.jpg",
title: "Man of Steel"
},{
id: 68722,
poster_path: "/rUSjbyvYWN9H4az8xt0tDtU7I6v.jpg",
title: "The Master"
},{
id: 83770,
poster_path: "/uORuwLgdDFkA4BuU9b9nuhTkuy.jpg",
title: "On the Road"
},{
id: 87093,
poster_path: "/tkxE7BLschoqNzTikrGvZN7IL7K.jpg",
title: "Big Eyes"
},{
id: 87825,
poster_path: "/vNWFhlTseaTupYmpnXxJLoShJe3.jpg",
title: "Trouble with the Curve"
},{
id: 121555,
poster_path: "/zRh6R3fBT6cVWGG5PvTnVmmwAEn.jpg",
title: "Stephen Tobolowsky's Birthday Party"
},{
id: 152601,
poster_path: "/fsoTLnUXEUTNuVCBxAJMY0HPPd.jpg",
title: "Her"
},{
id: 168672,
poster_path: "/mhB7C62lSMpGO2HYNaW6d7W3TVH.jpg",
title: "American Hustle"
},{
id: 209112,
poster_path: "/cGOPbv9wA5gEejkUN892JrveARt.jpg",
title: "Batman v Superman: Dawn of Justice"
},{
id: 219611,
poster_path: "/mGVmFhYkmJqqad3e4qvFypLlTBK.jpg",
title: "Back Beyond"
},{
id: 141052,
poster_path: "/9rtrRGeRnL0JKtu9IMBWsmlmmZz.jpg",
title: "Justice League"
},{
id: 261768,
poster_path: "/qBnNHTLc6GIgEWOtKA0Q3HuGmfE.jpg",
title: "Lullaby"
},{
id: 329865,
poster_path: "/hLudzvGfpi6JlwUnsNhXwKKg4j.jpg",
title: "Arrival"
},{
id: 378674,
poster_path: "/xfEZBeUwZGdUQXZ7m8e353r8MqX.jpg",
title: "DC Films Presents Dawn of the Justice League"
},{
id: 447687,
poster_path: "/yLlmNeZViC68yXztrMzgbJFO9yA.jpg",
title: "Secret Ingredients: Creating Julie & Julia"
},{
id: 340666,
poster_path: "/9Moizj8qxcZK6DqEE1MTO3pQAEw.jpg",
title: "Nocturnal Animals"
},{
id: 2179,
poster_path: "/gQThU8AftVJEBug4ToHUbQ3Lg7M.jpg",
title: "Tenacious D in The Pick of Destiny"
},{
id: 9719,
poster_path: "/jI7tL4uvgUPu6BkyZJ3591rbz44.jpg",
title: "Pumpkin"
},{
id: 13171,
poster_path: "/shqcS4NosGPBZhWETEufJhP4bCO.jpg",
title: "The Ex"
},{
id: 414031,
poster_path: "/z9h3gCVrNvdVfbXZ1eWRq9efFlm.jpg",
title: "The Chromium Hook"
},{
id: 416648,
poster_path: "/gw8CIsFJST4dBkHsuBbToSvGczE.jpg",
title: "Man of Steel 2"
},{
id: 6589,
poster_path: "/aczrdq26BPu7GDIhEVrzRgwsjpl.jpg",
title: "Underdog"
},{
id: 338958,
poster_path: null,
title: "Disenchanted"
},{
id: 429197,
poster_path: null,
title: "Backseat"
}];
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
export default class Sced extends Component {
constructor() {
super();
this.state = {
info: Description,
dataSourceMovie: ds.cloneWithRows(Movie),
};
}
renderRow(r){
return (
<View style={{ width: Math.round(width * PixelRatio.get())/15, elevation: 2, borderRadius: 4, overflow: 'hidden', backgroundColor: "#fff", marginTop: 5, marginLeft: 8 }}>
<Image style={{ borderTopLeftRadius: 4, borderTopRightRadius: 4, height: (Math.round(width * PixelRatio.get())/8), width: Math.round(width * PixelRatio.get())/15}} source={{uri: (r.poster_path == null) ? 'https://techreport.com/forums/styles/canvas/theme/images/no_avatar.jpg' : 'https://image.tmdb.org/t/p/w185/'+r.poster_path}} />
<View style={{ flexDirection: 'column', paddingTop: 4, paddingHorizontal: 8 }}>
<Text style={{ textAlign: 'center', fontSize: 10 }}>{r.title}</Text>
</View>
</View>
);
}
render() {
return (
<Container>
<CollapsingToolbar
toolbarColor='#2196f3'
title='Amy Adams'
src={{uri:"https://image.tmdb.org/t/p/original/5lYjMXl7xhG4gUu1XYqh6Dsni2K.jpg"}}>
<Tabs initialPage={0} tabBarUnderlineStyle={{
height: 2,
backgroundColor: "#FFC107"
}}>
<Tabn heading={"Info"} tabStyle={{ backgroundColor: "#205cb2" }} activeTabStyle={{ backgroundColor: "#205cb2" }}textStyle={{
fontSize: 12,
fontWeight: 'bold'
}}
activeTextStyle={{
fontSize: 12
}}>
<Text>{this.state.info}</Text>
</Tabn>
<Tabn heading={"Movie("+this.state.dataSourceMovie._dataBlob.s1.length+")"} tabStyle={{ backgroundColor: "#205cb2" }} activeTabStyle={{ backgroundColor: "#205cb2" }}textStyle={{
fontSize: 12,
fontWeight: 'bold'
}}
activeTextStyle={{
fontSize: 12
}}>
<ListView horizontal={false} initialListSize={this.state.dataSourceMovie._dataBlob.s1.length} contentContainerStyle={styles.list} dataSource={this.state.dataSourceMovie} renderRow={this.renderRow.bind(this)} enableEmptySections={true} />
</Tabn>
</Tabs>
</CollapsingToolbar>
</Container>
);
}
}
const styles = StyleSheet.create({
list:{
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'space-between',
marginRight: 8, paddingBottom:65,
},
})lib/index.js
import React, { Component } from 'react';
import PropTypes from 'prop-types'; // Supported builtin module
import {
Animated,
StatusBar,
Text,
View,
TouchableOpacity
} from 'react-native';
import styles from "./styles";
const propTypes = {
children: PropTypes.node.isRequired,
src: PropTypes.oneOfType([
PropTypes.object,
PropTypes.number,
]).isRequired,
title: PropTypes.string,
titleColor: PropTypes.string,
leftItem: PropTypes.element,
leftItemPress: PropTypes.func,
rightItem: PropTypes.element,
rightItemPress: PropTypes.func,
toolbarColor: PropTypes.string,
toolbarMaxHeight: PropTypes.number,
toolbarMinHeight: PropTypes.number,
}
const defaultProps = {
leftItem: null,
leftItemPress: null,
rightItem: null,
rightItemPress: null,
title: 'Home',
titleColor: '#fff',
toolbarColor: '#e91e63',
toolbarMaxHeight: 300,
toolbarMinHeight: 55,
};
class CollapsingToolbar extends Component {
constructor(props) {
super(props);
this.state = {
scrollY: new Animated.Value(0),
};
}
render() {
const { children,src,leftItem,leftItemPress,rightItem,rightItemPress,title,titleColor,toolbarColor,toolbarMaxHeight,toolbarMinHeight } = this.props;
const scrollDistance = toolbarMaxHeight - toolbarMinHeight;
const headerTranslate = this.state.scrollY.interpolate({
inputRange: [0, scrollDistance],
outputRange: [0, -scrollDistance],
extrapolate: 'clamp',
});
const imageOpacity = this.state.scrollY.interpolate({
inputRange: [0, scrollDistance / 2, scrollDistance],
outputRange: [1, 1, 0],
extrapolate: 'clamp', });
const imageTranslate = this.state.scrollY.interpolate({
inputRange: [0, scrollDistance],
outputRange: [0, 100],
extrapolate: 'clamp',
});
const titleScale = this.state.scrollY.interpolate({
inputRange: [0, scrollDistance / 2, scrollDistance],
outputRange: [1, 1, 0.8],
extrapolate: 'clamp',
});
/*
const titleTranslate = this.state.scrollY.interpolate({
inputRange: [0, scrollDistance / 2, scrollDistance],
outputRange: [0, 0, -8],
extrapolate: 'clamp',
});*/
return (
<View style={styles.fill}>
<StatusBar
backgroundColor={"transparent"}
translucent
/>
<Animated.ScrollView
style={styles.fill}
scrollEventThrottle={1}
onScroll={Animated.event(
[{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],
{ useNativeDriver: true },
)}>
<View style={{marginTop: toolbarMaxHeight, minHeight: 700}}>
{children}
</View>
</Animated.ScrollView>
<Animated.View
style={[
styles.header,
{
backgroundColor: toolbarColor,
height: toolbarMaxHeight,
transform: [{ translateY: headerTranslate }]
},
]}
>
<Animated.Image
style={[
styles.backgroundImage,
{
height: toolbarMaxHeight,
opacity: imageOpacity,
transform: [{ translateY: imageTranslate }],
},
]}
source={src}
/>
<Animated.View
style={[
styles.action,
{
backgroundColor: 'transparent',
transform: [
{ scale: titleScale },
],
},
]}
>
<Text style={[styles.title,{color: titleColor}]}>{title}</Text>
</Animated.View>
</Animated.View>
<Animated.View style={styles.bar}>
<TouchableOpacity onPress={leftItemPress}>
<View style={styles.left}>{leftItem}</View>
</TouchableOpacity>
<TouchableOpacity onPress={rightItemPress}>
<View style={styles.right}>{rightItem}</View>
</TouchableOpacity>
</Animated.View>
</View>
);
}
}
CollapsingToolbar.propTypes = propTypes;
CollapsingToolbar.defaultProps = defaultProps;
export default CollapsingToolbar;
lib/styles.js
const React = require('react-native');
const { StyleSheet } = React;
const styles = StyleSheet.create({
fill: {
flex: 1,
},
content: {
flex: 1,
},
header: {
top: 0,
left: 0,
right: 0,
overflow: 'hidden',
position: 'absolute',
},
backgroundImage: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
width: null,
resizeMode: 'cover',
},
action: {
left: 0,
right: 0,
bottom: 0,
height: 60,
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 40,
position: 'absolute',
},
bar: {
top: 0,
left: 0,
right: 0,
height: 56,
position: 'absolute',
flexDirection: "row",
justifyContent: 'space-between',
backgroundColor: 'transparent',
},
left: {
top: 0,
left: 0,
width: 50,
height: 56,
alignItems: 'center',
justifyContent: 'center',
},
right: {
top: 0,
right: 0,
height: 56,
minWidth: 56,
alignItems: 'center',
justifyContent: 'center',
},
title: {
fontFamily: 'Roboto_medium',
fontSize: 25,
},
scrollViewContent: {
paddingTop: 30,
},
row: {
height: 40,
margin: 16,
backgroundColor: '#D3D3D3',
alignItems: 'center',
justifyContent: 'center',
},
});
export default styles;
@Angelk90 not sure why this is happening. Removing CollapsingToolbar gives the normal behaviour.
Angelk90
commented
6 years ago @akhil-geekyants : The problem seems to be when everything is put inside, Animated.ScrollView:
<Animated.ScrollView
style={styles.fill}
scrollEventThrottle={1}
onScroll={Animated.event(
[{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],
{ useNativeDriver: true },
)}>
.....
</Animated.ScrollView>So my solution to this & maintaining proper keyboard avoiding inputs etc was to.
<Container>
<Header/>
<Tabs>
<Tab><Content><MyComponent /></Content></Tab>
<Tab><Content><OtherComponent /></Content></Tab>
</Tabs>
</Container>@lumlnous : Can you give me a hand with my problem?
cbaker
commented
6 years ago @Angelk90 Have you tried not wrapping <Tabs> in the <CollapsingToolbar>?
I know the way I just posted earlier works flawlessly.
Angelk90
commented
6 years ago @lumlnous : In what sense, do you know how to use snack.expo.io?
Angelk90
commented
6 years ago @akhil-geekyants : Are there any news?
andrew-luchkevych
commented
6 years ago have the same problem
Angelk90
commented
6 years ago @gector378 : I'm trying to solve it for some time but nothing is waiting for @akhil-geekyants , tell us something.
flashimxd
commented
6 years ago I've been facing the same problem, Let me know if anyone figure out how to skip that..
Angelk90
commented
6 years ago @gector378 : What do you mean? You say it's a problem of NativeBase container styles?
andrew-luchkevych
commented
6 years ago @Angelk90 I'm not sure, but I think so
shekharskamble
commented
6 years ago @Angelk90 - did you resolve this issue? my Tabs are wrapped inside Animated.ScrollView and am having this infinite scroll behavior :(
Angelk90
commented
6 years ago @shekharskamble : There is no solution, I can not find it. Ask the developers if there are any news.
lucie-macikova
commented
5 years ago @akhil-geekyants are there any news on this one, please?
I can't make the tabs behave, whatever I try. When using the code from the documentation the tabs do not scroll:
<Container>
<Header hasTabs />
<Tabs>
<Tab heading="Tab1">
<Tab1 />
</Tab>
<Tab heading="Tab2">
<Tab2 />
</Tab>
<Tab heading="Tab3">
<Tab3 />
</Tab>
</Tabs>
</Container>When Adding <Content> into each of the tabs, the content disappears. When Wrapping tabs with <Content> all the tabs have the height of the longest one. There is really no right way to make it work.
amaljosea
commented
5 years ago I am also facing this issue. Does anyone have an idea to solve this?
tarun29061990
commented
5 years ago Anyone has some success with this?? I am rendering dynamic content on tab click but all tabs are taking the maximum height
harishlalwani
commented
5 years ago Facing same issue. Everything is inside Animated.scrollview.
Angelk90
commented
5 years ago @lucie-macikova, @howareyouami, @normdoow, @lumlnous, @LasithaPrabodha, @gector378, @flashimxd, @shekharskamble, @tarun29061990, @harrie006:
I still could not solve the problem, it seems that the problem is Animated.scrollview.
I believe you should contact them: @GeekyAnts, @akhil-geekyants, @SupriyaKalghatgi
To find out if there are any news and if the problem is resolvable.
shekharskamble
commented
5 years ago @Angelk90 thanks, yeah the problem is Animated.scrollview hopefully they will resolve soon
harishlalwani
commented
5 years ago I implemented parallax scroll using this link. https://codeburst.io/react-native-parallax-scroll-with-tabs-721feec463c5
I faced issue for tabs heights. Heights of all tabs used to increase to maximum. I had my work around with calculating height for each tab on tab switch with onContentSizeChange for scrollview and updating parent height. This resolved the issue for now.
<Animated.ScrollView
bounces={false}
alwaysBounceVertical={false}
scrollEventThrottle={1}
showsVerticalScrollIndicator={false}
onScroll={Animated.event([{nativeEvent: {contentOffset: {y: this.nScroll}}}],
{useNativeDriver: true,
listener: event => {
if (isCloseToBottom(event.nativeEvent) ) {
if(venuepage.state.activeTab == 2)
{
venuepage.setState({
updateReviews: this.state.updateReviews + 1 ,
});
}
if(venuepage.state.activeTab == 0)
{
venuepage.setState({
updateWall: this.state.updateWall + 1
});
}
}
},
})}
style={{zIndex:0}}>
<Animated.View style={{
transform: [{translateY: Animated.multiply(this.nScroll, 0.65)}, {scale: this.imgScale}],
backgroundColor: "#FFFFFF"
}}>
<View style={{height:IMAGE_HEIGHT}}>
<View style={{height:140, flex: 1, flexDirection: 'row'}}>
<View>
<ImageBackground style={{height: IMAGE_HEIGHT-180, width: width/3, backgroundColor:'rgb(0,238,231)'}}>
<Animated.Image
source={{uri: venuepage.state.venueImages[0] }}
style={{height: IMAGE_HEIGHT-180, width: width/3, }}>
{/*gradient*/}
</Animated.Image>
</ImageBackground>
</View>
<View style={{paddingLeft:"1%"}}>
<ImageBackground style={{height: IMAGE_HEIGHT-180, width: width/3, backgroundColor:'rgb(0,238,231)' }}>
<Animated.Image
source={{uri: venuepage.state.venueImages[1] }}
style={{height: IMAGE_HEIGHT-180, width: width/3, }}>
{/*gradient*/}
</Animated.Image>
</ImageBackground>
</View>
<View style={{paddingLeft:"1%"}}>
<ImageBackground style={{height: IMAGE_HEIGHT-180, width: width/3, backgroundColor:'rgb(0,238,231)'}}>
<Animated.Image
source={{uri: venuepage.state.venueImages[2] }}
style={{height: IMAGE_HEIGHT-180, width: width/3, }}>
{/*gradient*/}
</Animated.Image>
</ImageBackground>
</View>
</View>
<View style={{height:160, width:'100%', justifyContent: 'center', alignItems: 'center',}}><View style={{ width:"80%"}}>
<Text numberOfLines={3} style={styles.limitedHeader}>{venuepage.state.headerText}</Text>
</View>
<View style={{ marginTop:"2%", width:"80%", marginBottom:"2%"}}>
<Text numberOfLines={3} style={styles.textBelowHeader}>
{venuepage.state.venueCatgoryName} in {venuepage.state.location_address}
</Text>
</View>
</View>
<View style={{height:20,backgroundColor:'#D9D9D9'}}></View>
</View>
</Animated.View>
{ venuepage.state.is_restaurant==1 ?
<Tabs
prerenderingSiblingsNumber={Infinity}
/*prerenderingSiblingsNumber={4}*/
onChangeTab={({i}) => {
if(i==0){
this.setState({visibleFabButton:true})
}
else{
this.setState({visibleFabButton:false})
}
this.setState({height: this.heights[i], activeTab: i})
}}
renderTabBar={(props) => <Animated.View
style={{transform: [{translateY: this.tabY}], zIndex: 1, width: "100%", backgroundColor: "white"}}>
<ScrollableTab {...props}
renderTab={(name, page, active, onPress, onLayout) => (
<TouchableOpacity key={page}
onPress={() => onPress(page)}
onLayout={onLayout}
activeOpacity={0.4}>
<Animated.View
style={{
flex: 1,
height: 100,
backgroundColor: "#FFFFFF",
}}>
<TabHeading scrollable
style={{
backgroundColor: "transparent",
width: SCREEN_WIDTH / 4,
paddingLeft:3,
}}
active={active}>
<Animated.Text style={{
fontWeight: "bold",
fontSize: Platform.OS === 'ios' ? 50/3.82 : 60/3.82,
fontFamily: 'ArialMT',
color: active ? "#00CDBE" : "#A6A6A6",
marginTop:"15%",
}}>
{name}
</Animated.Text>
</TabHeading>
</Animated.View>
</TouchableOpacity>
)}
underlineStyle={{backgroundColor: "#00CDBE"}}/>
</Animated.View>
}>
<Tab heading="Wall">
{this.tabContentWall(10,0)}
</Tab>
<Tab heading="Info">
{this.tabContentInfo(10,1)}
</Tab>
<Tab heading="Reviews">
{this.tabContentReview(10,2)}
</Tab>
<Tab heading="Menu">
{this.tabContentMenu(10,3)}
</Tab>
</Tabs>
:
<Tabs
prerenderingSiblingsNumber={3}
onChangeTab={({i}) => {
this.setState({height: this.heights[i], activeTab: i})
}}
renderTabBar={(props) => <Animated.View
style={{transform: [{translateY: this.tabY}], zIndex: 1, width: "100%", backgroundColor: "white"}}>
<ScrollableTab {...props}
renderTab={(name, page, active, onPress, onLayout) => (
<TouchableOpacity key={page}
onPress={() => onPress(page)}
onLayout={onLayout}
activeOpacity={0.4}>
<Animated.View
style={{
flex: 1,
height: 100,
backgroundColor: "#FFFFFF"
}}>
<TabHeading scrollable
style={{
backgroundColor: "transparent",
width: SCREEN_WIDTH / 3,
}}
active={active}>
<Animated.Text style={{
fontWeight: "bold",
fontSize: Platform.OS === 'ios' ? 50/3.82 : 60/3.82,
fontFamily: 'ArialMT',
color: active ? "#00CDBE" : "#A6A6A6",
marginTop:"15%",
}}>
{name}
</Animated.Text>
</TabHeading>
</Animated.View>
</TouchableOpacity>
)}
underlineStyle={{backgroundColor: "#00CDBE"}}/>
</Animated.View>
}>
<Tab heading="Wall">
{this.tabContentWall(5,0)}
</Tab>
<Tab heading="Info">
{this.tabContentInfo(5,1)}
</Tab>
<Tab heading="Tools">
{this.tabContentTools(5,2)}
</Tab>
</Tabs>
}
</Animated.ScrollView>tabContentReview = (datalist,i) => <View style={[{flex:1, height: this.state.height, minHeight: MIN_HEIGHT}]} {...this.state.panResponder.panHandlers} >
<ScrollView
bounces={false}
style={{ height: 'auto', flex: 0 }}
alwaysBounceVertical={false}
scrollEnabled={false}
onContentSizeChange={(contentWidth, contentHeight) => {
this.heights[i] = contentHeight;
height = contentHeight > MIN_HEIGHT ? contentHeight : MIN_HEIGHT;
if (this.state.activeTab == i) {this.setState({height}) }
}} {...this.state.panResponder.panHandlers}>
<MealReviews location_id = {venuepage.state.location_id} menuEnable = {venuepage.state.menuEnable} {...this.props} calcHeight={this.calcHeight.bind(this)} updateReviews={this.state.updateReviews} contentheight={this.state.height}/>
</ScrollView>
</View>;
tabContentMenu = (datalist,i) => <View style={[{flex:1, height: this.state.height, minHeight: MIN_HEIGHT}]} {...this.state.panResponder.panHandlers}>
<ScrollView
bounces={false}
alwaysBounceVertical={false}
style={{flex: 1}}
onContentSizeChange={(contentWidth, contentHeight) => {
this.heights[i] = contentHeight;
height = contentHeight ;
if (this.state.activeTab == i) {this.setState({height}) }
}} {...this.state.panResponder.panHandlers}>
<CategoryLinks location_id = {venuepage.state.location_id} location_status = {venuepage.state.menuEnable} {...this.props} calcHeight={this.calcHeight.bind(this)} />
</ScrollView>
</View>;
Johncy1997
commented
5 years ago i am trying to get the same effect on IOS as i am getting on android.
But, the effect is not working while scrolling orders list on IOS. I need to scroll on tabs.
I dont understand what i am doing wrong in this page.
const SCREEN_WIDTH = windowWidth;
const IMAGE_HEIGHT = heightPercentageToDP('22%')+50;
const SCROLL_HEIGHT = IMAGE_HEIGHT;
class Landing extends Component{
nScroll = new Animated.Value(0);
scroll = new Animated.Value(0);
tabY = this.nScroll.interpolate({
inputRange: [0, SCROLL_HEIGHT, SCROLL_HEIGHT + 1],
outputRange: [0, 0,1]
});
textColor = this.scroll.interpolate({
inputRange: [0, SCROLL_HEIGHT / 5, SCROLL_HEIGHT],
outputRange: [textColors.black, textColors.grey, textColors.white],
extrapolate: "clamp"
});
tabBg = this.scroll.interpolate({
inputRange: [0, SCROLL_HEIGHT],
outputRange: [textColors.white, commonColors.themeColor],
extrapolate: "clamp"
});
underlineBg = this.scroll.interpolate({
inputRange: [0, SCROLL_HEIGHT],
outputRange: [commonColors.themeColor, textColors.white],
extrapolate: "clamp"
});
imgScale = this.nScroll.interpolate({
inputRange: [-25, 0],
outputRange: [1.1, 1],
extrapolateRight: "clamp"
});
imgOpacity = this.nScroll.interpolate({
inputRange: [0, SCROLL_HEIGHT],
outputRange: [1, 0],
});
constructor(props){
super(props);
this.nScroll.addListener(Animated.event([{value: this.scroll}], {useNativeDriver: false}));
this.state={
isScrollEnabled:false,
activeTab:0,
newOrders:[],
processedOrders:[],
errorObject:null,
}
}
render(){
var refreshControl = <RefreshControl refreshing = { false } onRefresh = {() => this.refreshCall() } />;
return(<BaseContainer
error={this.state.errorObject}
refreshCallBack={this.refreshData.bind(this)}
isLoading={this.props.order.isLoading}
>
<Animated.ScrollView
refreshControl = { refreshControl }
ref='_scrollView'
scrollEnabled={this.state.isScrollEnabled}
scrollEventThrottle={1}
showsVerticalScrollIndicator={false}
onScroll={Animated.event([{nativeEvent: {contentOffset: {y: this.nScroll}}}], {useNativeDriver: true})}
style={{zIndex: 0}}>
<Animated.View style={{
transform: [{translateY: Animated.multiply(this.nScroll, 0.65)}, {scale: this.imgScale}]
}}>
<Animated.View
style={{height: IMAGE_HEIGHT, width: "100%", opacity: this.imgOpacity}}>
<View style={{justifyContent:'center',alignItems:'center',backgroundColor:commonColors.themeColor,height:heightPercentageToDP('22%')}}>
<Text style={[{color:textColors.white,fontSize:22},commonFonts.bold,commonStyles.padBot10]}>{i18n.t("Landing.newOrder")}</Text>
<Text style={[{color:textColors.white,fontSize:14},commonFonts.reg_font,commonStyles.padBot10]}>{i18n.t("Landing.uploadPrescription")}</Text>
<TouchableOpacity
onPress={()=>{
if(this.props.auth.userDetails.myprofile){
this.props.navigation.navigate(routeNames.HomeStack.newPrescription)
}else{
//this.props.navigation.navigate(routeNames.HomeStack.newPrescription)
this.showDialog();
}
}}
// onPress={()=>this.setState({
// errorObject:{errorType:1,
// errorMessage:"No data found",
// errorCode:101}
// })}
style={{height:70,width:70,bottom:-20,borderRadius:35,backgroundColor:commonColors.themeColor,position:'absolute',alignItems:'center',justifyContent:'center'}}>
<Text style={{fontFamily:IconFont.fontName,color:textColors.white,fontSize:50,textAlign:'center',}}>{IconFont.IconNames.filledPlus}</Text>
</TouchableOpacity>
</View>
<View style={[{paddingTop:20,height:50},commonStyles.LRMargin]}>
<Text style={[commonFonts.bold,{fontSize:16,color:textColors.black},]}>{i18n.t("Landing.recentOrders")}</Text>
</View>
</Animated.View>
</Animated.View>
<Tabs
//prerenderingSiblingsNumber={3}
onChangeTab={({i})=>{this.setState({
activeTab:i,
isScrollEnabled:i==0?this.state.newOrders.length==0?false:true:this.state.processedOrders.length==0?false:true,
},()=>{
this.refs._scrollView.getNode().scrollTo({x: 0, y: 0})
})}}
locked={true}
renderTabBar={(props) => <Animated.View
style={{transform: [{translateY: this.tabY}], zIndex: 1, width: SCREEN_WIDTH}}>
{/* remove the transform */}
<ScrollableTab {...props}
style={{ borderWidth: 0}}
renderTab={(name, page, active, onPress, onLayout) => (
<TouchableOpacity key={page}
onPress={() => onPress(page)}
onLayout={onLayout}
activeOpacity={0.4}>
<Animated.View
style={{
flex: 1,
height: 100,
backgroundColor: this.tabBg,
justifyContent:'center'
}}>
<TabHeading scrollable
style={{
backgroundColor: "transparent",
width: SCREEN_WIDTH / 2
}}
active={active}>
<Animated.Text
style={[
active?commonFonts.semi_bold:commonFonts.reg_font,
{
color: this.textColor,
fontSize: 14
}]}>
{name}
</Animated.Text>
</TabHeading>
</Animated.View>
</TouchableOpacity>
)}
underlineStyle={{backgroundColor:this.underlineBg,height:2}}/>
</Animated.View>
}>
<Tab heading={i18n.t("Landing.newOrder")}>
<NewOrders newOrders={this.state.newOrders} navigation={this.props.navigation} />
</Tab>
<Tab heading={i18n.t("Landing.processedOrders")}>
<ProcessedOrders processedOrders={this.state.processedOrders} navigation={this.props.navigation}/>
</Tab>
</Tabs>
</Animated.ScrollView>
</BaseContainer>
)
}
}
**NewOrders.js/ProcessedOrders.js**
class NewOrders extends Component{
static navigationOptions = () => ({
tabBarLabel : i18n.t("Landing.newOrders")
})
constructor(props){
super(props);
}
render(){
return(
<View>
{
this.props.newOrders.length===0?<View style={{backgroundColor:commonColors.borderUnderline,justifyContent:'center',alignItems:'center',height:(windowHeight-(heightPercentageToDP('22%')+150+headerHeight))}}>
<Text style={[commonFonts.reg_font,{color:textColors.grey,fontSize:14}]}>{i18n.t("Landing.noOrders")}</Text>
<Text style={[commonFonts.reg_font,{color:textColors.grey,fontSize:14}]}>{i18n.t("Landing.noRecentOrderQuery")}</Text>
<Image
source={require('../../assets/icons/BitmapCopy.png')}
style={{height:100,width:100,resizeMode:'contain'}}
/>
</View>
:
<FlatList
style={{backgroundColor:commonColors.borderUnderline,paddingTop:5}}
data={this.props.newOrders}
showsVerticalScrollIndicator={false}
renderItem={({item,index})=>{
return(
<NewOrderCard item={item} navigation={this.props.navigation} from="home"/>
)
}}
>
</FlatList>
}
</View>
)
}
}Currently i am not able to get this on IOS while scrolling on orders list.
Angelk90
commented
5 years ago @Johncy1997 : It seems to be a bug, but nobody knows how to fix it.
Donhv
commented
5 years ago any update?
Johncy1997
commented
5 years ago @Donhv I had changed the whole file.I achieved the same thing using react-native SectionList with stickySectionHeadersEnabled={true} stickyHeaderIndices={[1]}. I am not able to figure out the bus on IOS.
AbanoubNassem
commented
5 years ago same issue , can't solve it!
maartenvandillen
commented
5 years ago I thought the proposed solutions to wrap the Tabs component in a Container component solved my problem of all tabs having the same height as the tallest tab, but it turns out now all tabs have the same height as the smallest tab, or stop rendering at the height of the smallest tab. Looking forward to any solution.
Angelk90
commented
5 years ago @GeekyAnts, @akhil-geekyants, @SupriyaKalghatgi: Is there a way to solve this problem?
girginsoft
commented
5 years ago Same issue here
girginsoft
commented
5 years ago I solve this problem like the following,
<Tab style={{height: Dimensions.get('window').height - 100 }}>
<View>
<ScrollView>
<ListView>
...
</ListView>
</ScrollView>
</View>
</Tab>
victorsousadev
commented
5 years ago I have the same problem here :(
gauravroy1995
commented
5 years ago is this issue solved? like one tab becomes scrollable and extra space is rendered below that tab?
Angelk90
commented
5 years ago @GeekyAnts, @akhil-geekyants, @SupriyaKalghatgi: Are there any news for this problem that nobody can solve?
fxbayuanggara
commented
5 years ago I have this problem too when I wrap the Tabs in ScrollView component.
Cookizza
commented
5 years ago This is crazy we still face this problem. If your tabs are of varying heights you end up with a huge amount of blank space. This component is unusable :(
fxbayuanggara
commented
5 years ago Yeah, it is so sad that the component is not working properly if it not placed on the top of the screen.
@GeekyAnts, @akhil-geekyants: Link Video: https://drive.google.com/file/d/1ifx1orms0PHYb3LLhf5lcwrVFyjPVk1j/view
Hi, I'm using tab. As you can see from the video, native base in this case behaves very strangely, as if it were broken.
First problem: The tabs are not fixed under the toolbar, as they normally should.
Second problem: I am in the first "TAB1" (Info), I scroll, no problem except for the fact that the "TABS" should be fixed. I click on the "TAB2" (Movie), the elements are rendered. I do not even need to scroll the elements, if I click on the "TAB1" (Info) already, it will take the same height as the "TAB2" (Movie), that is the maximum height rendered.
Instead, as usual, each TAB should have its own height.
react-native, react and native-base version
"native-base": "^2.3.3", "react": "16.1.1", "react-native": "0.50.4"
Expected behaviour
Actual behaviour
Steps to reproduce (code snippet or screenshot)
Link expo to try it: https://snack.expo.io/HJrZ9jXEf
Code:
Screenshot of emulator/device
Link Video: https://drive.google.com/file/d/1ifx1orms0PHYb3LLhf5lcwrVFyjPVk1j/view
Is the bug present in both ios and android or in any one of them?
Yes, the problem is present on both.