Tab switching & state updating causing scroll position issues #198
Description
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!
PROBLEM.1.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.
PROBLEM.2.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;