react-native-collapsible-tabview
react-native-collapsible-tabview copied to clipboard
JungHsuan
item.value.scrollToOffset not working for me
ScrollOffset does not sync fo each route, below is my code
import React, {useState, useEffect, useRef} from 'react';
import {
SafeAreaView,
StyleSheet,
View,
Text,
Dimensions,
Animated,
Image,
StatusBar
} from 'react-native';
import {TabView, TabBar, SceneMap} from 'react-native-tab-view';
import Icon from 'react-native-vector-icons/FontAwesome';
import IconF from 'react-native-vector-icons/Feather';
import ProfileFlatList from '../components/ProfileFlatList.js';
import { Thumbnail, Button, Tab, Tabs, TabHeading } from 'native-base';
const DATA = [
{image:require('../../assets/4.jpg'),isDraft:true,draftCount:'24',draftIcon:'inbox'},
{image:require('../../assets/3.jpg'),view:'205k',heart:'110k', heartIcon:'heart',viewIcon:'play',iconColor:'rgba(255,255,255,0.95)',textColor:'rgba(255,255,255,0.95)',isDraft:false},
{image:require('../../assets/2.jpg'),view:'205k',heart:'110k', heartIcon:'heart',viewIcon:'play',iconColor:'rgba(255,255,255,0.95)',textColor:'rgba(255,255,255,0.95)',isDraft:false},
{image:require('../../assets/1.png'),view:'205k',heart:'110k', heartIcon:'heart',viewIcon:'play',iconColor:'rgba(255,255,255,0.95)',textColor:'rgba(255,255,255,0.95)',isDraft:false},
{image:require('../../assets/1.png'),view:'205k',heart:'110k', heartIcon:'heart',viewIcon:'play',iconColor:'rgba(255,255,255,0.95)',textColor:'rgba(255,255,255,0.95)',isDraft:false},
{image:require('../../assets/2.jpg'),view:'205k',heart:'110k', heartIcon:'heart',viewIcon:'play',iconColor:'rgba(255,255,255,0.95)',textColor:'rgba(255,255,255,0.95)',isDraft:false},
{image:require('../../assets/3.jpg'),view:'205k',heart:'110k', heartIcon:'heart',viewIcon:'play',iconColor:'rgba(255,255,255,0.95)',textColor:'rgba(255,255,255,0.95)',isDraft:false},
{image:require('../../assets/3.jpg'),view:'205k',heart:'110k', heartIcon:'heart',viewIcon:'play',iconColor:'rgba(255,255,255,0.95)',textColor:'rgba(255,255,255,0.95)',isDraft:false},
{image:require('../../assets/3.jpg'),view:'205k',heart:'110k', heartIcon:'heart',viewIcon:'play',iconColor:'rgba(255,255,255,0.95)',textColor:'rgba(255,255,255,0.95)',isDraft:false},
{image:require('../../assets/3.jpg'),view:'205k',heart:'110k', heartIcon:'heart',viewIcon:'play',iconColor:'rgba(255,255,255,0.95)',textColor:'rgba(255,255,255,0.95)',isDraft:false},
{image:require('../../assets/3.jpg'),view:'205k',heart:'110k', heartIcon:'heart',viewIcon:'play',iconColor:'rgba(255,255,255,0.95)',textColor:'rgba(255,255,255,0.95)',isDraft:false},
{image:require('../../assets/3.jpg'),view:'205k',heart:'110k', heartIcon:'heart',viewIcon:'play',iconColor:'rgba(255,255,255,0.95)',textColor:'rgba(255,255,255,0.95)',isDraft:false},
{image:require('../../assets/3.jpg'),view:'205k',heart:'110k', heartIcon:'heart',viewIcon:'play',iconColor:'rgba(255,255,255,0.95)',textColor:'rgba(255,255,255,0.95)',isDraft:false},
{image:require('../../assets/3.jpg'),view:'205k',heart:'110k', heartIcon:'heart',viewIcon:'play',iconColor:'rgba(255,255,255,0.95)',textColor:'rgba(255,255,255,0.95)',isDraft:false},
{image:require('../../assets/3.jpg'),view:'205k',heart:'110k', heartIcon:'heart',viewIcon:'play',iconColor:'rgba(255,255,255,0.95)',textColor:'rgba(255,255,255,0.95)',isDraft:false},
{image:require('../../assets/3.jpg'),view:'205k',heart:'110k', heartIcon:'heart',viewIcon:'play',iconColor:'rgba(255,255,255,0.95)',textColor:'rgba(255,255,255,0.95)',isDraft:false},
{image:require('../../assets/3.jpg'),view:'205k',heart:'110k', heartIcon:'heart',viewIcon:'play',iconColor:'rgba(255,255,255,0.95)',textColor:'rgba(255,255,255,0.95)',isDraft:false},
{image:require('../../assets/3.jpg'),view:'205k',heart:'110k', heartIcon:'heart',viewIcon:'play',iconColor:'rgba(255,255,255,0.95)',textColor:'rgba(255,255,255,0.95)',isDraft:false},
{image:require('../../assets/3.jpg'),view:'205k',heart:'110k', heartIcon:'heart',viewIcon:'play',iconColor:'rgba(255,255,255,0.95)',textColor:'rgba(255,255,255,0.95)',isDraft:false},
{image:require('../../assets/3.jpg'),view:'205k',heart:'110k', heartIcon:'heart',viewIcon:'play',iconColor:'rgba(255,255,255,0.95)',textColor:'rgba(255,255,255,0.95)',isDraft:false},
{image:require('../../assets/3.jpg'),view:'205k',heart:'110k', heartIcon:'heart',viewIcon:'play',iconColor:'rgba(255,255,255,0.95)',textColor:'rgba(255,255,255,0.95)',isDraft:false},
{image:require('../../assets/3.jpg'),view:'205k',heart:'110k', heartIcon:'heart',viewIcon:'play',iconColor:'rgba(255,255,255,0.95)',textColor:'rgba(255,255,255,0.95)',isDraft:false},
{image:require('../../assets/3.jpg'),view:'205k',heart:'110k', heartIcon:'heart',viewIcon:'play',iconColor:'rgba(255,255,255,0.95)',textColor:'rgba(255,255,255,0.95)',isDraft:false},
{image:require('../../assets/3.jpg'),view:'205k',heart:'110k', heartIcon:'heart',viewIcon:'play',iconColor:'rgba(255,255,255,0.95)',textColor:'rgba(255,255,255,0.95)',isDraft:false},
{image:require('../../assets/3.jpg'),view:'205k',heart:'110k', heartIcon:'heart',viewIcon:'play',iconColor:'rgba(255,255,255,0.95)',textColor:'rgba(255,255,255,0.95)',isDraft:false},
{image:require('../../assets/3.jpg'),view:'205k',heart:'110k', heartIcon:'heart',viewIcon:'play',iconColor:'rgba(255,255,255,0.95)',textColor:'rgba(255,255,255,0.95)',isDraft:false},
{image:require('../../assets/3.jpg'),view:'205k',heart:'110k', heartIcon:'heart',viewIcon:'play',iconColor:'rgba(255,255,255,0.95)',textColor:'rgba(255,255,255,0.95)',isDraft:false},
{image:require('../../assets/3.jpg'),view:'205k',heart:'110k', heartIcon:'heart',viewIcon:'play',iconColor:'rgba(255,255,255,0.95)',textColor:'rgba(255,255,255,0.95)',isDraft:false},
{image:require('../../assets/3.jpg'),view:'205k',heart:'110k', heartIcon:'heart',viewIcon:'play',iconColor:'rgba(255,255,255,0.95)',textColor:'rgba(255,255,255,0.95)',isDraft:false}
];
const DATA1 = [
{image:require('../../assets/4.jpg'),isDraft:true,draftCount:'24',draftIcon:'inbox'},
{image:require('../../assets/3.jpg'),view:'205k',heart:'110k', heartIcon:'heart',viewIcon:'play',iconColor:'rgba(255,255,255,0.95)',textColor:'rgba(255,255,255,0.95)',isDraft:false},
{image:require('../../assets/2.jpg'),view:'205k',heart:'110k', heartIcon:'heart',viewIcon:'play',iconColor:'rgba(255,255,255,0.95)',textColor:'rgba(255,255,255,0.95)',isDraft:false},
{image:require('../../assets/1.png'),view:'205k',heart:'110k', heartIcon:'heart',viewIcon:'play',iconColor:'rgba(255,255,255,0.95)',textColor:'rgba(255,255,255,0.95)',isDraft:false},
{image:require('../../assets/1.png'),view:'205k',heart:'110k', heartIcon:'heart',viewIcon:'play',iconColor:'rgba(255,255,255,0.95)',textColor:'rgba(255,255,255,0.95)',isDraft:false},
{image:require('../../assets/2.jpg'),view:'205k',heart:'110k', heartIcon:'heart',viewIcon:'play',iconColor:'rgba(255,255,255,0.95)',textColor:'rgba(255,255,255,0.95)',isDraft:false}
];
const TabBarHeight = 48;
const HeaderHeight = 390;
const tab1ItemSize = (Dimensions.get('window').width - 30) / 3;
class TabScene extends React.Component {
render = () => {
const windowHeight = Dimensions.get('window').height;
const {
numCols,
data,
renderItem,
onGetRef,
scrollY,
onScrollEndDrag,
onMomentumScrollEnd,
onMomentumScrollBegin,
} = this.props;
return (
<Animated.FlatList
scrollToOverflowEnabled={true}
numColumns={numCols}
ref={onGetRef}
scrollEventThrottle={16}
onScroll={Animated.event(
[{nativeEvent: {contentOffset: {y: scrollY}}}],
{useNativeDriver: true},
)}
onMomentumScrollBegin={onMomentumScrollBegin}
onScrollEndDrag={onScrollEndDrag}
onMomentumScrollEnd={onMomentumScrollEnd}
ItemSeparatorComponent={() => <View style={{height: 10}} />}
ListHeaderComponent={() => <View style={{height: 10}} />}
contentContainerStyle={{
paddingTop: HeaderHeight + TabBarHeight,
paddingHorizontal: 10,
minHeight: windowHeight - TabBarHeight,
}}
showsHorizontalScrollIndicator={false}
data={data}
renderItem={renderItem}
showsVerticalScrollIndicator={false}
keyExtractor={(item, index) => index.toString()}
/>
);
};
}
const Profile = () => {
const [tabIndex, setIndex] = useState(0);
const [routes] = useState([
{key: 'tab1', title: 'Tab1'},
{key: 'tab2', title: 'Tab2'},
]);
const scrollY = useRef(new Animated.Value(0)).current;
let listRefArr = useRef([]);
let listOffset = useRef({});
let isListGliding = useRef(false);
useEffect(() => {
scrollY.addListener(({value}) => {
const curRoute = routes[tabIndex].key;
listOffset.current[curRoute] = value;
});
return () => {
scrollY.removeAllListeners();
};
}, [routes, tabIndex]);
const syncScrollOffset = () => {
const curRouteKey = routes[tabIndex].key;
listRefArr.current.forEach((item) => {
// sync value except current route
if (item.key !== curRouteKey) {
// if header has not yet been collapsed, scroll to current offset
if (scrollY._value < HeaderHeight && scrollY._value >= 0) {
if (item.value) {
item.value.scrollToOffset({
offset: scrollY._value,
animated: false,
});
// we should also update the offset here
listOffset.current[item.key] = scrollY._value;
}
// if header has been collapsed, scroll to HeaderHeight
} else if (scrollY._value >= HeaderHeight) {
if (listOffset.current[item.key] < HeaderHeight ||
listOffset.current[item.key] == null) {
if (item.value) {
item.value.scrollToOffset({
offset: HeaderHeight,
animated: false,
});
listOffset.current[item.key] = HeaderHeight;
}
}
}
}
});
};
const onMomentumScrollBegin = () => {
isListGliding.current = true;
};
const onMomentumScrollEnd = () => {
isListGliding.current = false;
syncScrollOffset();
};
const onScrollEndDrag = () => {
syncScrollOffset();
};
const renderHeader = () => {
const y = scrollY.interpolate({
inputRange: [0, HeaderHeight],
outputRange: [0, -HeaderHeight],
extrapolateRight: 'clamp',
});
return (
<Animated.View style={[styles.header, {transform: [{translateY: y}]}]}>
<View style={{width: "100%",}}>
<View style={{height:250,backgroundColor:'red'}}>
<Image source={require('../../assets/2.jpg')} style={styles.topBG}></Image>
<View style={styles.overlay} ></View>
</View>
<View style={{height:220, borderTopLeftRadius:30,borderTopRightRadius:30, marginTop:-40,backgroundColor:'#fff'}}>
<View style={{flex:0.3,flexDirection:'row',}}>
<View style={{marginTop:-40,marginLeft:50,
marginBottom:15,
shadowColor: '#000',
borderRadius:600,
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.2,
shadowRadius: 1.50,
elevation:10}}>
<Thumbnail large source={require('../../assets/4.jpg')} style={{borderWidth:3,borderColor:'white',}}/>
</View>
<View style={{marginLeft:15, marginTop:10}}>
<Text>@itsandysworld</Text>
<Text style={{color:'#c6c6c6'}}>ID: MT1989861</Text>
</View>
</View>
<View style={{flex:1,justifyContent:'space-around'}}>
<View style={{flexDirection:'row',justifyContent:'space-evenly',paddingHorizontal:40,marginTop:20}}>
<View style={{marginHorizontal:15,alignItems:'center',}}>
<Text>504</Text>
<Text style={{color:'#898b90'}}>Following</Text>
</View>
<View style={{borderRightColor:'#f1f1f1',borderRightWidth:2,height:20,marginTop:10}}></View>
<View style={{marginHorizontal:15,alignItems:'center',}}>
<Text>210.8K</Text>
<Text style={{color:'#898b90'}}>Fans</Text>
</View>
<View style={{borderRightColor:'#f1f1f1',borderRightWidth:2,height:20,marginTop:10}}></View>
<View style={{marginHorizontal:15,alignItems:'center',}}>
<Text>2.8m</Text>
<Text style={{color:'#898b90'}}>Hearts</Text>
</View>
</View>
<View style={{flexDirection:'row',justifyContent:'space-evenly',marginTop:5,paddingHorizontal:40, marginTop:40}}>
<Button bordered style={{width:130},styles.outlineBtn}>
<Text style={styles.outlineText}>Message</Text>
</Button>
<Button bordered style={styles.outlineBtn}>
<IconF name="user-check" color="#000"></IconF>
</Button>
<Button bordered style={styles.outlineBtn}>
<IconF name="video" color="#000"></IconF>
</Button>
</View>
<View style={{padding:10,alignItems:'center', marginTop:30, marginBottom:5}}>
<Text style={{color:'#969498'}}>#AndyFam</Text>
<Text style={{color:'#969498'}}>What's up AndyFam <Icon name='heart' color='#969498'></Icon> Don't forget to</Text>
<Text style={{color:'#969498'}}>subscribe to my YouTube</Text>
</View>
<View style={{borderTopColor:'#efefef',borderTopWidth:1,width:'90%',marginTop:25, marginLeft:20,}}></View>
</View>
</View>
</View>
</Animated.View>
);
};
const rednerTab1Item = ({item, index}) => {
return (
<View style={{ flex: 1,
marginLeft: index % 3 === 0 ? 0 : 10,
width: tab1ItemSize,
height: tab1ItemSize,
}}>
<Image style={{justifyContent: 'center',
alignItems: 'center',
width: '100%',
height: '100%',
borderRadius:8,
resizeMode: 'cover',}}
source={item.image } />
{item.isDraft &&
<View style={{
...StyleSheet.absoluteFillObject,
backgroundColor: 'rgba(0,0,0,0.6)',
borderRadius:8,
justifyContent: 'center',
alignItems: 'center',
}} >
<IconF name={item.draftIcon} color='#fff' size={20} style={{marginTop:35}}></IconF>
<Text style={{color:'#fff',marginTop:5,fontSize:12}}>Draft</Text>
<Text style={{color:'#fff',fontSize:12}}>{item.draftCount}</Text>
</View>
}
<View style={styles.bottomIcon}>
<View style={styles.bottomIconRow} >
<Text style={{color:item.textColor,fontSize:12}}><Icon name={item.viewIcon} color={item.iconColor} size={8}></Icon> {item.view}</Text>
<Text style={{color:item.textColor,fontSize:12}}><Icon name={item.heartIcon} color={item.iconColor} size={8}></Icon> {item.heart}</Text>
</View>
</View>
</View>
);
};
const renderLabel = ({route, focused}) => {
return (
<>
{route.key == 'tab1' &&
<Image height={20} width={20} style={{tintColor:focused ?"#fd0d3a" :"#c3c3c3"}} source={require('../../assets/profile_list_icon.png')}/>
}
{route.key == 'tab2' &&
<IconF size={20} name="heart" color={focused ?"#fd0d3a" :"#c3c3c3"} />
}
</>
);
};
const renderScene = ({route}) => {
const focused = route.key === routes[tabIndex].key;
let numCols;
let data;
let renderItem;
switch (route.key) {
case 'tab1':
numCols = 3;
data = DATA;
renderItem = rednerTab1Item;
break;
case 'tab2':
numCols = 3;
data = DATA1;
renderItem = rednerTab1Item;
break;
default:
return null;
}
return (
<TabScene
numCols={numCols}
data={data}
renderItem={renderItem}
scrollY={scrollY}
onMomentumScrollBegin={onMomentumScrollBegin}
onScrollEndDrag={onScrollEndDrag}
onMomentumScrollEnd={onMomentumScrollEnd}
onGetRef={(ref) => {
if (ref) {
const found = listRefArr.current.find((e) => e.key === route.key);
if (!found) {
listRefArr.current.push({
key: route.key,
value: ref,
});
}
}
}}
/>
);
};
const renderTabBar = (props) => {
const y = scrollY.interpolate({
inputRange: [0, HeaderHeight],
outputRange: [HeaderHeight, 0],
extrapolateRight: 'clamp',
});
return (
<Animated.View
style={{
top: 0,
zIndex: 1,
position: 'absolute',
transform: [{translateY: y}],
width: '100%',
}}>
<TabBar
{...props}
onTabPress={({route, preventDefault}) => {
if (isListGliding.current) {
preventDefault();
}
}}
style={styles.tab}
renderLabel={renderLabel}
indicatorStyle={styles.indicator}
/>
</Animated.View>
);
};
const renderTabView = () => {
return (
<TabView
onIndexChange={(index) => setIndex(index)}
navigationState={{index: tabIndex, routes}}
renderScene={renderScene}
renderTabBar={renderTabBar}
initialLayout={{
height: 0,
width: Dimensions.get('window').width,
}}
/>
);
};
return (
<>
<StatusBar
backgroundColor = "#fff"
barStyle = "light-content"
/>
<SafeAreaView style={{flex: 1, backgroundColor:'#fff'}}>
<View style={{flex: 1}}>
{renderTabView()}
{renderHeader()}
</View>
</SafeAreaView>
</>
);
};
const styles = StyleSheet.create({
header: {
top: 0,
height: 300,
width: '100%',
backgroundColor: '#40C4FF',
alignItems: 'center',
justifyContent: 'center',
position: 'absolute',
},
tab: {elevation: 0, shadowOpacity: 0, backgroundColor: '#fff'},
indicator: {backgroundColor: '#fd0d3a'},
container: {
flex: 1,
flexDirection: "column",
backgroundColor:'#fff'
},
row:{
flexDirection:"column",
margin:30,
},
overlay: {
...StyleSheet.absoluteFillObject,
backgroundColor: 'rgba(0,0,0,0.4)',
},
topBG:{
// flex: 1,
width:'100%',
resizeMode: 'cover',
},
outlineBtn:{
borderColor:'#c3c3c3',
paddingHorizontal:15,
borderRadius: 3,
alignItems:'center',
height:45,
// width:130
},
outlineText:{
color:'#000',
fontSize: 15,
textAlign: 'center',
padding:10,
alignSelf:'center',
backgroundColor: 'transparent'
},
tabBarUnderlineStyle:{
backgroundColor:'#fff',
height:2.5,
},
imageThumbnail: {
justifyContent: 'center',
alignItems: 'center',
height: 100,
},
bottomIconRow:{
flex:1,
flexDirection:'row',
justifyContent: 'space-evenly',
paddingHorizontal:0,
},
bottomIcon:{
//backgroundColor:'green',
position:'absolute',
bottom:0,
width:'100%',
marginBottom:8
}
});
export default Profile;
hi @Pankti16 , what's your react-native version?
if your version is below 0.62 please either using ref.getNode() in
listRefArr.current.push({
key: route.key,
value: ref, // replace to ref.getNode()
});
or
changing item.value.scrollToOffset to item.value.getNode().scrollToOffset instead.
@Pankti16 OK, I see. Your problem is that offsets between tabs are not synced correctly, right? I will try to run your code later.
@Pankti16 hi, Here is my recording of your code running on iOS simulator. I removed all images and icon since I don't have the sources. I think that is what you expect, right?
hi @Pankti16 , what's your react-native version? if your version is below 0.62 please either using
ref.getNode()inlistRefArr.current.push({ key: route.key, value: ref, // replace to ref.getNode() });or changing
item.value.scrollToOffsettoitem.value.getNode().scrollToOffsetinstead.
work for me! Thank u 👍
I have same problem, any solution ? item.value.scrollToOffset not scroll
"react-native": "0.63.2", my version
@thanhdevapp
Hi, did you mean that the position of tab is not properly synced?
I just update a new version, please check the file headerScrollableDemo.js.
@thanhdevapp Hi, did you mean that the position of tab is not properly synced? I just update a new version, please check the file
headerScrollableDemo.js.
New update not working for me. I'm getting ExceptionsManager.js:86 item.value.scrollToOffset is not a function error.
@JungHsuan
hi @Pankti16 , what's your react-native version? if your version is below 0.62 please either using
ref.getNode()inlistRefArr.current.push({ key: route.key, value: ref, // replace to ref.getNode() });or changing
item.value.scrollToOffsettoitem.value.getNode().scrollToOffsetinstead.work for me! Thank u 👍
What's your react-native version?
hi @Pankti16 , what's your react-native version? if your version is below 0.62 please either using
ref.getNode()inlistRefArr.current.push({ key: route.key, value: ref, // replace to ref.getNode() });or changing
item.value.scrollToOffsettoitem.value.getNode().scrollToOffsetinstead.work for me! Thank u 👍
What's your react-native version?
My RN version is 60.6. I added item.value.getNode().scrollToOffset but i got same error ExceptionsManager.js:86 item.value.getNode is not a function. Please help me.
@JungHsuan
I think my problem is that in the view of tab 1 in tabview there is Animated.ScrollView inside so it causes this error.
If I have 2 tabs as 2 flastlist like example then it works normally. I don't know how to fix it.
I have found a solution. Because ScrollView has no scrollToOffset function but only scrollTo function, it is necessary to check the current component type run time if it is ScrollView.
when i scroll-up 1st tab header goes up and when i am clicling on sconed tab it's showing me space between header and list.and I am using AnimatedKeyboardawarescrollview for me scrollTooffset is not working. please HELP . Thanks in Adavnce.
item.value.getNode().scrollToOffset and item.value.scrollToOffset not working for me. please suggest what should i use in pleace of that using AnimatedKeyboardawarescrollview.
React native version 0.64
@JungHsuan @doanbh
Hi @aroravinay4 Are you using this https://github.com/APSL/react-native-keyboard-aware-scroll-view ?
Could you try item.value._component.scrollToOffset({ offset: 0, animated: false });
Thanks!
Hi @JungHsuan
i am using react-native-keyboard-aware-scroll-view and converted into
const AnimatedKeyboardAwareScrollView = Animated.createAnimatedComponent(
KeyboardAwareScrollView,
); for the tab animation and when i use as suggested above code snippet i got attached errror.
Same error occuer when i use item.value.scrollToOffse.
Hi @JungHsuan
i am using react-native-keyboard-aware-scroll-view and converted into const AnimatedKeyboardAwareScrollView = Animated.createAnimatedComponent( KeyboardAwareScrollView, ); for the tab animation and when i use as suggested above code snippet i got attached errror.
Same error occuer when i use item.value.scrollToOffse.
Hi @aroravinay4
Could you call scrollToOffset by getting the ref of AnimatedKeyboardAwareScrollView?
const scrollViewRef = useRef(null);
<AnimatedKeyboardAwareScrollView
ref={ref => scrollViewRef.current = ref }
/>
and try: scrollViewRef.current.scrollToOffset()
scrollToOffset is a props of VirtualizedList
Maybe you should try scrollTo for react-native-keyboard-aware-scroll-view