We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Library version:
"react-native": "0.72.10", "react-native-sticky-parallax-header": "^1.1.1",
goToPage is undefined
I want to dynamically change the active tab by call goToPage method available in the doc
import React, { useRef, useState } from 'react'; import { View, StyleSheet, Animated, StatusBar, useColorScheme, TouchableOpacity, RefreshControl } from 'react-native'; import { TabbedHeaderPager } from 'react-native-sticky-parallax-header'; import Icon from "react-native-vector-icons/Ionicons"; import LeavesHistory from './leavesHistory'; import PendingLeaves from './pendingLeaves'; import ApprovedLeaves from './approvedLeaves'; import { Layout } from 'constants/constants'; import { RFValue } from 'react-native-responsive-fontsize'; import CollapsibleHeader from './collapsibleHeader'; import CustomText from 'components/uiComponents/text'; import CustomMenu from 'components/uiComponents/customMenu'; import { StackScreenProps } from '@react-navigation/stack'; import { MainStackParamList } from 'types/navigationTypes'; const TABBED_SECTIONS = [ { title: 'History', component: LeavesHistory }, { title: 'Pending', component: PendingLeaves }, { title: 'Approved', component: ApprovedLeaves }, ]; type Props = StackScreenProps<MainStackParamList, 'Example'>; const Example: React.FC<Props> = ({route, navigation}) => { const tabbedHeaderPagerRef = useRef<any>(null); const changeActiveTab = (pageIndex: 0|1|2) => { if (tabbedHeaderPagerRef.current) { tabbedHeaderPagerRef.current?.goToPage(pageIndex) } }; return ( <View style={styles.container}> <TabbedHeaderPager ref={tabbedHeaderPagerRef} initialPage={route.params.initialRouteNumber||0} rememberTabScrollPosition stickyHeaderHiddenOnScroll={true} containerStyle={styles.stretchContainer} backgroundColor={Layout.colors.backgroundColor} tabsContainerHorizontalPadding={0} tabsContainerStyle={styles.tabsContainerStyle} tabTextContainerStyle={styles.tabTextContainerStyle} tabTextContainerActiveStyle={styles.tabTextContainerActiveStyle} tabTextStyle={styles.tabTextStyle} tabWrapperStyle={styles.tabWrapperStyle} tabTextActiveStyle={styles.activeTabTextStyle} showsVerticalScrollIndicator={false} renderHeader={() => <CollapsibleHeader /> } tabs={TABBED_SECTIONS.map((section) => ({ title: section.title, }))} > {TABBED_SECTIONS.map((Section) => ( <View key={Section.title} style={styles.content}> <Section.component onClick={(val: number) => changeActiveTab(val)} /> </View> ))} </TabbedHeaderPager> </View> ); }; const styles = StyleSheet.create({ ........... }); export default Example;
The text was updated successfully, but these errors were encountered:
No branches or pull requests
Environment
Library version:
Affected platforms
Current behavior
goToPage is undefined
Expected behavior
I want to dynamically change the active tab by call goToPage method available in the doc
Reproduction
The text was updated successfully, but these errors were encountered: