PedroBern / react-native-collapsible-tab-view

A cross-platform Collapsible Tab View component for React Native
MIT License
827 stars 160 forks source link

Dont scrolling page when scroll on header #314

Open pavlenko-y opened 1 year ago

pavlenko-y commented 1 year ago

I have a question on ios dont scrolling page, when touch on header. I dont know why. Point event box-none dont work. Please help me

` Function UserFeed ({route, navigation}) {

const {t} = useTranslation()

const {user: meUser} = useContext(AuthContext);

const {account, getAccount, subscribeAccount, unsubscribeAccount} = useAccountModel(null);

const MIN_HEADER_HEIGHT = 100;

const tabsList = useMemo(() => ([
    {
        key: UserFeedStateEnum.photos,
        name: t("feed.profile.Photos"),
        icon: LandscapeIcon,
    },
    {
        key: UserFeedStateEnum.favorites,
        name: t("feed.profile.Favorites"),
        icon: HeartIcon,
    },
    {
        key: UserFeedStateEnum.countries,
        name: t("feed.profile.Countries"),
        icon: FlagIcon,
    }
]), [])

useEffect(() => {
    getAccount(route.params?.userLogin || meUser.login)
}, []);

if (!account) {
    return (
        <StatusBarWrapper style={styles.wrapper} barStyle={StatusBarColorEnum.dark}>
            <SafeAreaView>
                <View style={styles.content}>
                    <Text>Loader..</Text>
                </View>
            </SafeAreaView>
        </StatusBarWrapper>
    )
}

return (
    <Tabs.Container
        showsVerticalScrollIndicator={false}
        minHeaderHeight={MIN_HEADER_HEIGHT}
        headerContainerStyle={styles.headerContainer}
        renderHeader={() => (
            <View style={{flex: 1}} pointerEvents={"box-none"}>
                <View style={styles.followersAction} pointerEvents={"box-none"}>
                    {meUser.id !== account.id && (
                        <View style={styles.followersActionBtnWrapper} pointerEvents={"box-none"}>
                            <FollowBtn isFollow={account.is_followed}
                                       userId={account.id}
                                       subscribeHandler={subscribeAccount}
                                       unsubscribeHandler={unsubscribeAccount}/>
                        </View>
                    )}
                    <BaseButton rippleColor={"transparent"} style={{...styles.followersActionBtnWrapper, width: meUser.id === account.id ? "100%" : "48%"}}>
                        <View style={{...styles.followersActionBtn, ...styles.followersActionBtnBorder}}  pointerEvents={"box-none"}>
                            <Text style={{...styles.followersActionBtnText, ...styles.followersActionBtnTextBlack}}>{t("feed.profile.Chat")}</Text>
                        </View>
                    </BaseButton>
                </View>
            </View>
        )}
        renderTabBar={tab => (
            <TabsUI showTabsCount={3} tabPress={tab.onTabPress} tabsList={tabsList}/>
        )}
    >
        <Tabs.Tab name={UserFeedStateEnum.photos}>
            <Photos account={account} minHeightTabs={MIN_HEADER_HEIGHT}/>
        </Tabs.Tab>
        <Tabs.Tab name={UserFeedStateEnum.favorites}>
            <Favorites account={account} minHeightTabs={MIN_HEADER_HEIGHT}/>
        </Tabs.Tab>
        <Tabs.Tab name={UserFeedStateEnum.countries}>
            <Countries account={account} minHeightTabs={MIN_HEADER_HEIGHT}/>
        </Tabs.Tab>
    </Tabs.Container>
)

} `

subhechhu commented 1 year ago

Hi @pavlenko-y, any update on this one? Did you find any workout/solution?

StasEvo commented 1 year ago

Hi @pavlenko-y, any update on this one? Did you find any workout/solution?

Adding ' box-none' in couple childs of header helped me

MensurRasic commented 1 year ago

+1

ushyDev commented 1 year ago

any update on this?

goff-studio commented 6 months ago

Make sure parent components that wrapped around doesn't have any pressable or touchable areas. Those can prevent touch events.