Tab switching & state updating causing scroll position issues

[harrisontaee]

Hi there, hope you're all well. Love the library but I'm experiencing two problems at the moment, the latter of which is the most concerning. Would really appreciate the help!

PROBLEM 1

When navigating between tabs, the scroll position of the inactive tab should persist however this only works if I don't interact with the active tab. When interacting with the active tab, the inactive tab's scroll position returns to 0. This may be expected behaviour, and if so, I'd really appreciate some suggestions!

https://user-images.githubusercontent.com/74291167/131118051-16a17ac9-6f15-4123-8cdb-566e2e481ad4.mp4

PROBLEM 2

When there's a state change, the inactive tab's scroll position matches the current scroll position of the active tab. Very strange occurrence.

https://user-images.githubusercontent.com/74291167/131118066-3d424b3f-6295-4e45-ab49-80fc2531abae.mp4

CODE

import { Button, StyleSheet, View } from "react-native";
import React, { useState } from "react";

import { Tabs } from "react-native-collapsible-tab-view";

const CollapsibleTabs = () => {
  const [count, setCount] = useState(0);

  return (
    <View style={styles.container}>
      <View style={styles.button}>
        <Button
          title={`Update State: ${count}`}
          onPress={() => setCount(count + 1)}
        />
      </View>
      <Tabs.Container renderHeader={Header} >
        <Tabs.Tab name="One">
          <Tabs.ScrollView>
            <Page />
          </Tabs.ScrollView>
        </Tabs.Tab>
        <Tabs.Tab name="Two">
          <Tabs.ScrollView>
            <Page />
          </Tabs.ScrollView>
        </Tabs.Tab>
      </Tabs.Container>
    </View>
  );
};

const Header = (props) => {
  return <View {...props} style={styles.header} />
}

const Page = () => {
  return (
    <View style={styles.page}>
      <View style={{ width: 50, height: 50, backgroundColor: "green" }} />
      <View style={{ width: 50, height: 50, backgroundColor: "blue" }} />
      <View style={{ width: 50, height: 50, backgroundColor: "purple" }} />
      <View style={{ width: 50, height: 50, backgroundColor: "violet" }} />
      <View style={{ width: 50, height: 50, backgroundColor: "pink" }} />
      <View style={{ width: 50, height: 50, backgroundColor: "red" }} />
      <View style={{ width: 50, height: 50, backgroundColor: "orange" }} />
      <View style={{ width: 50, height: 50, backgroundColor: "yellow" }} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  button: {
    position: "absolute",
    bottom: 30,
    right: 30,
    zIndex: 1
  },
  background: {
    position: "absolute",
    top: 0,
    width: 390,
    height: 390,
  },
  page: {
    width: 390,
    height: 830 * 2,
    backgroundColor: "black",
  },
  header: {
    width: 390,
    height: 390,
    backgroundColor: "pink",
  },
});

export default CollapsibleTabs;

[darrychen92]

Got the same issue

[andreialecu]

Opened a PR at #205 to fix this. I also published it to npm as 4.3.1-rc.0.

Please help test it and provide some feedback. Some internals needed to be changed and the library is pretty picky already, so hopefully nothing else broke.

[alexco2]

Tested it with expo go on a S21 and S7 (https://expo.io/@pedrobern/react-native-collapsible-tab-view-demos?release-channel=pr-205) Could not find any bugs/ problems. If necessary I can also test with an IPhone 8.

[andreialecu]

@alexco2 check out https://github.com/PedroBern/react-native-collapsible-tab-view/pull/205#issuecomment-941756895

Let's continue this discussion there.