react-native-tab-view inside ScrollView is not scrollable by selecting TabView Items

[DeepikaSharma5]

I am using react-native-tab-view 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 ty 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.

[DeepikaSharma5]

P.S This happens only in iOS devices. Android is working fine

[DeepikaSharma5]

Anyone?

[km-tr]

Same here

[suryapradana]

same

[PeterGFX]

same

[kyunkakata]

Any updates or idea to fix this problem?