so i got a problem where my scrollView can infinite scroll until the banner or the container is gone, what i want is when you hit the lest section like number3 you can't scroll anymore, because i want so the name part doesn't move the only thing that move is only the chart - end
This is the Expo-Snack if you want to try it live:https://snack.expo.dev/@mikess/excel-list
example 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></> )const header = (title: string, title1: string, title2:string, title3: string, title4: string,title5: string) => { return (<Div py={18} row bg="red" style={{ borderTopRightRadius: 10 }}> {/* <Div flex={3}><Text color="white" fontWeight="bold" textAlign="center"> Name</Text></Div> */}<Div flex={3}><Text color="white" fontWeight="bold" textAlign="center"> {title}</Text></Div><Div flex={3}><Text color="white" fontWeight="bold" textAlign="center"> {title1}</Text></Div><Div flex={3}><Text color="white" fontWeight="bold" textAlign="center"> {title2}</Text></Div><Div flex={3}><Text color="white" fontWeight="bold" textAlign="center"> {title3}</Text></Div><Div flex={3}><Text color="white" fontWeight="bold" textAlign="center"> {title4}</Text></Div><Div flex={3}><Text color="white" fontWeight="bold" textAlign="center"> {title5}</Text></Div></Div> ) }const singleHeader = (title: string, title1: string, title2:string) => { return (<Div py={18} row bg="red" style={{ borderTopLeftRadius: 10}}><Div flex={3}><Text color="white" fontWeight="bold" textAlign="center"> Name</Text></Div></Div> ) } const NewTabelScreen = () => { const windowWidth = Dimensions.get("window").width const [index, setIndex] = React.useState(0) const onScrollEnd = (e: any) => { let contentOffset = e.nativeEvent.contentOffset let viewSize = e.nativeEvent.layoutMeasurement let pageNum = contentOffset.x / viewSize.width setIndex(pageNum) } return (<Div bg='#979797' row flex={1} p={10}><FlatList style={{width: widthPercentageToDP(30) }} data={dataDummy} renderItem={renderSingle} keyExtractor={(_, idx: number) => idx.toString()} ListHeaderComponent={singleHeader} /><ScrollView style={{backgroundColor: "#979797"}} horizontal showsHorizontalScrollIndicator={false} scrollEventThrottle={16} bounces={false}><FlatList style={{ width: windowWidth, marginRight: heightPercentageToDP(50) }} data={dataDummy} renderItem={renderChart} keyExtractor={(_, idx: number) => idx.toString()} ListHeaderComponent={header("chart", "chart2", "chart3", "number", "number2", "number3")} /> </ScrollView></Div> )}export default NewTabelScreenif anyone can solved my problem it will be a help Thank you very much.