Here issue is in headerComponet touchable-opacity or other click not working.

[Tushar321321]

Current behavior

headerComponet top side touchable-opacity it's only not working in react-native-tab-view otherwise it's work, i have try import {TouchableOpacity} from 'react-native' also import { TouchableOpacity } from 'react-native-gesture-handler' but it can't work here is the some details and code. And in screen-shot touchable-opacity area marked as a red border.

### Code import React, {useState, useEffect, useRef, useCallback} from 'react'; import {View, Text, Dimensions, Animated} from 'react-native'; import {TabView, TabBar} from 'react-native-tab-view'; import Posts from '../Posts'; import Prices from '../Prices/Prices'; import Reviews from '../Reviews'; import styles from './styles'; import {Engagement} from '@nflunence/authorised/screens'; import SafeAreaView from 'react-native-safe-area-view'; import {defaultImageLibraryOptions} from '@nflunence/defaults'; import * as ImagePicker from 'react-native-image-picker'; import awsImageUpload from '@nflunence/common/awsImageUpload'; import { useGetInfluencerDetailsLazyQuery, useGetSignedUrlMutation, } from '@nflunence/app/graphql/generated/graphql'; import {isDeviceWidth} from '@nflunence/helpers'; import {useFocusEffect} from '@react-navigation/native'; import {globalUser} from '@nflunence/app/graphql/cache'; import {useReactiveVar} from '@apollo/client'; console.log('isDeviceWidth:::', isDeviceWidth);

const TabBarHeight = 50; const HeaderHeight = 400;

const TabScene = ({ numCols, data, renderItem, onGetRef, scrollY, onScrollEndDrag, onMomentumScrollEnd, onMomentumScrollBegin, }) => { // const windowHeight = Dimensions.get('window').height; // console.log('scrollY--->', onMomentumScrollEnd); 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: isDeviceWidth - TabBarHeight,

  }}
  showsHorizontalScrollIndicator={false}
  data={data}
  renderItem={renderItem}
  showsVerticalScrollIndicator={false}
  keyExtractor={(item, index) => index.toString()}
/>

); };

interface Props { // navigation: StackNavigationProp< // ProfileInfluencerStackRoutesAndParams, // ProfileInfluencerRoutes.INFLUENCER_PROFILE // >; userData?: any; routes?: any; // headerComponet?: any; headerComponet; } const CollapsibleTabView = ({ routes, headerComponet, userData, }: // navigation, Props) => { const [tabIndex, setIndex] = useState(0); const [tab1Data] = useState(userData?.influencer_price); const [tab3Data] = useState(Array(1).fill(0)); const [tab4Data] = useState(userData?.influencer_review); const scrollY: any = useRef(new Animated.Value(0)).current; let listRefArr = useRef([]); let listOffset = useRef({}); let isListGliding = useRef(false); const sheetReff = useRef(null); const [profilePhotoURL, setProfilePhotoURL] = useState(''); const globleUsers = useReactiveVar(globalUser);

const [getInfluncerDetails, {data: dataInfluncer, error: erroInfluncer}] = useGetInfluencerDetailsLazyQuery({ fetchPolicy: 'network-only', onCompleted: (dataInfluncerData: any) => { // console.log('userData::main', dataInfluncerData); globalUser(dataInfluncerData?.getInfluencerDetails); }, });

const callInfluncerDetails = async () => { const response = getInfluncerDetails({ variables: { influencer_id: Number(globleUsers?.user_id), }, }); };

useFocusEffect( useCallback(() => { callInfluncerDetails(); }, []), );

const cameraClick = () => { // console.log('camera photo', photo); // navigation.navigate(ProfileInfluencerRoutes.EDIT_PROFILE_TAKE_APHOTO); sheetReff?.current?.close(); }; const libarylick = () => { // console.log('click::****'); ImagePicker.launchImageLibrary( defaultImageLibraryOptions, async response => { // console.log('response::****', response?.assets[0].fileName); if (response?.assets) { if (response?.assets.length > 0) { // setLoading(true); sheetReff?.current?.close(); uploadDocumentOnAws( response?.assets[0]?.base64, // response?.assets[0]?.fileName, ); } } }, ); };

//for get photo read/write awsurl const [fileuploadMutation, {data, error}] = useGetSignedUrlMutation();

// upload image to s3 bucket const uploadDocumentOnAws = async (base64: string) => { const response: any = await fileuploadMutation();

if (response?.data?.getSignedUrl) {
  const {writeSignedUrl, readSignedUrl} =
    response?.data?.getSignedUrl?.data;
  if (writeSignedUrl) {
    try {
      const buffer = await Buffer.from(base64, 'base64');
      const {isError, loadingState}: any = await awsImageUpload(
        writeSignedUrl,
        buffer,
      );
      if (isError == false && loadingState == false) {
        if (readSignedUrl) {
          //if photo upload success then call this
          setProfilePhotoURL(readSignedUrl);
          // await getBrandsDetails();
          // console.log('readSignedUrl::', readSignedUrl);
        }
      }
    } catch (error) {
      console.log('sendDocumentsOnS3', error);
    }
  } else {
    // dispatch(showUnHandledAPIErrorAlert());
    console.log('else sendDocumentsOnS3');
  }
}

};

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 => { if (item.key !== curRouteKey) { if (scrollY._value < HeaderHeight && scrollY._value >= 0) { if (item.value) { item.value.scrollToOffset({ offset: scrollY._value, animated: false, }); listOffset.current[item.key] = scrollY._value; } } 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}]}]}>
    {headerComponet}
  </Animated.View>
);

};

// const rednerItem = () => { // return routes[tabIndex].pageName; // }; const rednerTab1Item = ({item, index}) => { return ; };

const rednerTab2Item = ({item, index}) => { return ; }; const rednerTab3Item = ({item, index}) => { return ; }; const rednerTab4Item = ({item, index}) => { return ; }; const renderLabel = ({route, focused}) => { return ( <Text style={[styles.label, {opacity: focused ? 1 : 0.5}]}> {route.title} ); };

const renderScene = ({route}) => { let numCols; let data; let renderItem; switch (route.key) { case 'tab1': numCols = 2; data = tab1Data; renderItem = rednerTab1Item; break; case 'tab2': numCols = 3; data = tab1Data; renderItem = rednerTab2Item; break; case 'tab3': numCols = 1; data = tab3Data; renderItem = rednerTab3Item; break; case 'tab4': numCols = 1; data = tab1Data; renderItem = rednerTab4Item; break; default: return null; } return ( <TabScene numCols={numCols} data={route.key == 'tab3' ? tab3Data : tab1Data} 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>
);

};

return ( <SafeAreaView forceInset={{top: 'always', bottom: 'always'}} style={{flex: 1}}> <View style={{flex: 1}}> {renderHeader()} <TabView onIndexChange={index => setIndex(index)} navigationState={{index: tabIndex, routes}} renderScene={renderScene} renderTabBar={renderTabBar} // swipeEnabled={false} initialLayout={{ // height: Dimensions.get('window').height, height: 0, width: Dimensions.get('window').width, }}
/> ); };

export default CollapsibleTabView;

![Uploading Simulator Screen Shot - iPhone 13 - 2022-05-23 at 11.04.39.png…]()

Expected behavior

Just work touchable opacity properly

Reproduction

https://github.com/FaridSafi/react-native-gifted-chat

Platform

• [X] Android
• [X] iOS
• [ ] Web
• [ ] Windows
• [ ] MacOS

Environment

package	version
react-native-tab-view	^3.1.1
react-native-pager-view	^5.4.11
react-native	^0.66.15
expo	-
node	v16.14.2
npm or yarn	8.5.2

[github-actions[bot]]

Hey! Thanks for opening the issue. The issue doesn't seem to contain a link to a repro (a snack.expo.dev link or link to a GitHub repo under your username).

Can you provide a minimal repro which demonstrates the issue? A repro will help us debug the issue faster. Please try to keep the repro as small as possible and make sure that we can run it without additional setup.

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native-pager-view (found: 5.4.11, latest: 5.4.22)
• react-native (found: 0.66.15, latest: 0.68.2)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[MohamedShaw]

any solution ?

[Tushar321321]

any solution ?

not yet @MohamedShaw

[github-actions[bot]]

Hello 👋, this issue has been open for more than a month without a repro or any activity. If the issue is still present in the latest version, please provide a repro or leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution or workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix it.