Dont scrolling page when scroll on header
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>
)
} `
Hi @pavlenko-y, any update on this one? Did you find any workout/solution?
Hi @pavlenko-y, any update on this one? Did you find any workout/solution?
Adding ' box-none' in couple childs of header helped me
+1
any update on this?
Make sure parent components that wrapped around <Tabs.Container/> doesn't have any pressable or touchable areas. Those can prevent touch events.