I've encountered an issue with my scrollView that allows for infinite scrolling until the banner or container disappears. What I'm aiming for is to restrict scrolling once you reach the last section, like number 3, to prevent the name part from moving, allowing only the chart to be scrolled.
You can experience this in Expo-Snack by clicking on the following link:
Here's an excerpt of the code:
NewTableScree.tsx:
const dataDummy = [
{
key: 1,
name: "Tommy",
chart: "10",
char2: "20",
chart3: "30",
number: "100",
number2: "2000",
number3: "2000",
},
{
key: 2,
name: "William",
chart: "10",
char2: "20",
chart3: "30",
number: "100",
number2: "2000",
number3: "2000",
},
{
key: 3,
name: "Robert",
chart: "10",
char2: "20",
chart3: "30",
number: "100",
number2: "2000",
number3: "2000",
}
]
const renderChart = ({ item }) => (
<>
<Div
py={14}
bg="white"
row
borderBottomWidth={1}
borderColor="#c4c4c4"
rounded={0}
>
{/*
<Div flex={3}>
<Text fontWeight="normal" textAlign="center" >
{item.name}
</Text>
</Div> */}
<Div flex={3}>
<Text fontWeight="normal" textAlign="center">
{item.chart}
</Text>
</Div>
<Div flex={3}>
<Text fontWeight="normal" textAlign="center">
{item.char2}
</Text>
</Div>
<Div flex={3}>
<Text fontWeight="normal" textAlign="center">
{item.chart3}
</Text>
</Div>
<Div flex={3}>
<Text fontWeight="normal" textAlign="center">
{item.number}
</Text>
</Div>
<Div flex={3}>
<Text fontWeight="normal" textAlign="center">
{item.number2}
</Text>
</Div>
<Div flex={3}>
<Text fontWeight="normal" textAlign="center">
{item.number3}
</Text>
</Div>
</Div>
</>
)
const renderSingle = ({ item }) => (
<>
<Div
py={14}
bg="white"
row
borderBottomWidth={1}
borderColor="#c4c4c4"
rounded={0}
>
<Div flex={3}>
<Text fontWeight="normal" textAlign="center" >
{item.name}
</Text>
</Div>
</Div>
</>
)
// More code here...
export default NewTabelScreen
If anyone has a solution to my problem, it would be greatly appreciated. Thank you very much!