I want to navigate between tabs

[zackmountassir]

• [ ] support request

• Platform
  • [ ] ios
  • [ ] android

I am using Tabbed Header, I want to navigate between tabs programmatically and i want to re render the tab content when i navigate between tabs, i didn't really understand how to achieve this behavior.

[jawang94]

Yeah I also would like to see tabs holding their own state. Right now, if I have an API update for one particular tab, I don't believe it's possible to simply update that tab alone. I have to re-define the tab functions which basically re-renders the entire parallax header and every tab's contents. Super expensive operation.

[mateusz1913]

@zackmountassir @jawang94, in version 1.0.x, TabbedHeaderPager component (new TabbedHeader) have goToPage method exposed by ref. You can use it to programmatically jump between pages.

To use v1.0.x, install release candidate (we will promote it to stable in following weeks)

yarn add react-native-sticky-parallax-header@rc

[pgrepds]

@mateusz1913 Could you elaborate on how to use this for TabbedHeaderPager?

I have tried to use it as follows:

const ref = React.useRef(null);
<TabbedHeaderPager
        ref={ref}
       ....

Then, call it via ref.current.goToPage(2) which throws an undefined error since goToPage is undefined. I have also tried to use the pagerProps as follows:

pagerProps={{
            ref
    }
}

which throws the same error. Thank you in advance.

Used version: "react-native-sticky-parallax-header": "1.0.0-rc.7"

[mateusz1913]

👋 @pgrepds you can start with TabbedHeaderPager docs In case of reference to goToPage method, you can modify the existing example, like so:

const TabbedHeaderPagerExample: React.FC = () => {
  const isDarkTheme = useColorScheme() === 'dark';
+  const pagerRef = React.useRef<PagerMethods>(null) // PagerMethods is a helper type imported from 'react-native-sticky-parallax-header'

  return (
    <>
      <TabbedHeaderPager
        contentContainerStyle={[
          isDarkTheme ? screenStyles.darkBackground : screenStyles.lightBackground,
        ]}
        containerStyle={screenStyles.stretchContainer}
        backgroundColor={colors.primaryGreen}
        foregroundImage={photosPortraitMe}
        rememberTabScrollPosition
        logo={logo}
        title={"Mornin' Mark! \nReady for a quiz?"}
        titleStyle={screenStyles.text}
        tabs={TABBED_SECTIONS.map((section) => ({
          title: section.title,
        }))}
        tabTextStyle={screenStyles.text}
+       pagerProps={{ ref: pagerRef }} // add pagerRef ONLY here and NOT as a regular `TabbedHeaderPager`'s ref
        showsVerticalScrollIndicator={false}>
        <View style={styles.content}>
          {Brandon.cards.map((data, i, arr) => (
-            <QuizCard data={data} num={i} key={data.question} cardsAmount={arr.length} />
+            <>
+              <Button
+                onPress={() => {
+                  console.log({ ref: pagerRef.current }); // should log Object { "ref": Object { "goToPage": [Function goToPage], }, }
+                  pagerRef.current?.goToPage(2);
+                }}
+                title="GoToPage"
+              />
+              <QuizCard data={data} num={i} key={data.question} cardsAmount={arr.length} />
+            </>
          ))}
        </View>
        <View style={styles.content}>
          {Ewa.cards.map((data, i, arr) => (
            <QuizCard data={data} num={i} key={data.question} cardsAmount={arr.length} />
          ))}
        </View>
        <View style={styles.content}>
          {Jennifer.cards.map((data, i, arr) => (
            <QuizCard data={data} num={i} key={data.question} cardsAmount={arr.length} />
          ))}
        </View>
        <View style={styles.content}>
          {Brandon.cards.map((data, i, arr) => (
            <QuizCard data={data} num={i} key={data.question} cardsAmount={arr.length} />
          ))}
        </View>
        <View style={styles.content}>
          {Ewa.cards.map((data, i, arr) => (
            <QuizCard data={data} num={i} key={data.question} cardsAmount={arr.length} />
          ))}
        </View>
        <View style={styles.content}>
          {Jennifer.cards.map((data, i, arr) => (
            <QuizCard data={data} num={i} key={data.question} cardsAmount={arr.length} />
          ))}
        </View>
      </TabbedHeaderPager>
      <StatusBar barStyle="light-content" backgroundColor={colors.primaryGreen} translucent />
    </>
  );
};

[pgrepds]

@mateusz1913 It works perfectly, thank you!

[stianko]

Hi!

When I try following this, I only get ERROR TypeError: Cannot assign to read-only property 'current'