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 NewTabelScreen

if anyone can solved my problem it will be a help Thank you very much.

CodePudding user response：

FlatList has large right margin.

<FlatList
  style={{ 
    width: windowWidth, 
    marginRight: heightPercentageToDP(50) // remove it!
  }}
...

if you remove 'marginRight', then it works as expected