I am using react-native-tab-view (doc) in my react native project. These are the versions I use.
"react-native-tab-view": "^4.0.5",
"react-native-pager-view": "^6.6.1",
"react-native": "0.75.4",
In my home page, I have a scroll view and inside that I have different components as contents. When I try to scroll from any other component, it is working fine and scrollable. But when I try to scroll from component, it is not scrolling. I tried changing the styles, adding flex:1, height and a lot. But nothing is working.I don’t understand what I am doing wrong here. If anyoue can help my by suggesting some methods or ideas it will be really helpful.
This is my ScrollView from Home page. In here when I rey to scroll form any component other than HomePageTabContent is working fine.
<ScrollView
ref={this.scroll}
refreshControl={
<RefreshControl
refreshing={this.state.refresh}
onRefresh={this._onRefresh}
/>
}
style={[MyStyles.container]}
scrollEventThrottle={1}
bouncesZoom={true}
onScroll={Animated.event(
[
{
nativeEvent: {
contentOffset: {y: this.state.scrollY},
},
},
],
{useNativeDriver: false},
)}
stickyHeaderIndices={[1]}
showsVerticalScrollIndicator={false}>
<HomePageCarouselSlide pagination={true} colors={colors} />
<HomePageTabView
data={tabSlides}
boxShadow={boxShadowTab}
translateY={translateY}
/>
<HomePageTabContent data={tabSlides} />
</ScrollView>
This is my HomePageTabContent. In here I am able to scroll if I longpress from the . But is not scrollable.
import React from 'react';
import {
ActivityIndicator,
Animated,
Dimensions,
Platform,
Text,
View,
} from 'react-native';
import {Route, SceneMap, TabView} from 'react-native-tab-view';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import HomePageContentTab from '../homePageContentTab/HomePageContentTab';
import {deviceHeight} from '../../../helper';
import {screenHeight} from '../../../constants/styles/Variable';
interface ITabBottomNavProps {
id: string;
fields: {
tabColorPallet: {
id: string;
url: string;
fields: {
tabColors: {
id: string;
fields: {colorCode: {value: string}};
opacityPercent: {value?: string};
}[];
};
};
title: {value: string};
textAndButtonColor: {
id: string;
url: string;
fields: {
colorCoode: {
value: string;
};
};
};
};
}
interface IHomePageTabProps {
data?: ITabBottomNavProps[];
activeTabIndex: number;
}
const HomePageTabContent = (props: IHomePageTabProps) => {
const {data, activeTabIndex} = props;
const anim = new Animated.Value(0.1);
Animated.timing(anim, {
toValue: 0.5,
duration: 1000,
useNativeDriver: true,
}).start();
if (data && data.length > 0) {
const routes: Route[] = data?.map((item: any, index: number): Route => {
return {key: String(index), title: item.fields.title.value};
});
const arr = data?.map(_ => {
return {name: HomePageContentTab};
});
const screenMap: any = {};
arr.forEach((val: {name: any}, index: number) => {
screenMap[index] = val.name;
});
const tabView = {
index: activeTabIndex,
routes,
};
return (
<View
style={{
marginTop: Platform.OS == 'ios' ? 30 : -30,
minHeight: tabView.index === 2 ? deviceHeight / 2 : deviceHeight,
}}>
<TabView
navigationState={tabView}
onIndexChange={index => {}}
renderScene={SceneMap(screenMap)}
renderTabBar={props => <View style={[{width: '100%'}]} />}
swipeEnabled={false}
initialLayout={{width: Dimensions.get('window').width}}
style={{height: 100}}
/>
<Text style={{fontSize: 70}}>Hiiii</Text>
<Text style={{fontSize: 70}}>Hiiii</Text>
<Text style={{fontSize: 70}}>Hiiii</Text>
</View>
);
}
return (
<View
style={{
height: screenHeight,
width: '100%',
position: 'absolute',
left: 0,
justifyContent: 'center',
zIndex: 999,
}}>
<ActivityIndicator size="large" color="#e31b23" />
</View>
);
};
const mapStateToProps = (state: any) => {
return {
activeTabIndex: state.homePageReducer.homeReducer.activeTabIndex,
};
};
const mapDispatchToProps = (dispatch: any) => bindActionCreators({}, dispatch);
export default connect(mapStateToProps, mapDispatchToProps)(HomePageTabContent);
This is my HomePageContentTab.
render() {
return (
<View>
<Text style={{fontSize: 30}}>Tab component</Text>
</View>
);
}
Please don’t suggest me to change the coding structure as I have shared you the minimalistic code, but this works fine other than the scroll issue. It would be really helpful if you can share some ideas to overcome this issue.
Thank you in advance.
