Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot get current scroll height from onScroll within FlatList #2150

Open
isekaimaou1109 opened this issue Oct 25, 2021 · 3 comments
Open

Cannot get current scroll height from onScroll within FlatList #2150

isekaimaou1109 opened this issue Oct 25, 2021 · 3 comments
Labels
project:react-native-web Issue associated with react-native-web

Comments

@isekaimaou1109
Copy link

The problem

I cannot get current scroll height from FlatList.

How to reproduce

Simplified test case:

Steps to reproduce:

  1. Create a constant using hooks to maintain the scroll position with initial value zero.
const [scrollPosition,setScrollPosition]=React.useState(0)
  1. Create a method for updating the scroll postion. When the user scrolled.
const handleScroll=(event)=>{
    let yOffset=event.nativeEvent.contentOffset.y / 1;
    setScrollPosition(yOffset)
}
  1. Call the handleScroll() method when the user scrolls the flat list.
return <View style={{ flex: 1, flexGrow: 1 }}>
    <FlatList
      onScroll={(event)=>handleScroll(event)}
      numColumns={2}
      keyExtractor={(item) => item.Id}
      data={data}
      renderItem={(item) => {
        return <View>
          <Text>name is {" " + item.name}</Text>
          <Text>age is {" " + item.age}</Text>
        </View>
      }}
    />
    <Text>{scrollPosition}</Text>
  </View>

Expected behavior

Environment (include versions). Did this work in previous versions?
"firebase": "8.2.3",
"react-is": "^16.8.0",
"expo-font": "~9.2.1",
"expo-status-bar": "~1.0.4",
"styled-components": "^5.3.3",
"@expo/vector-icons": "^12.0.0",
"react-native-screens": "~3.4.0",
"react-native-elements": "^3.4.2",
"react-native-tab-view": "^3.1.1",
"react-native-pager-view": "5.0.12",
"@react-navigation/native": "^6.0.6",
"react-native-toast-message": "^1.6.0",
"react-native-confirm-dialog": "^0.1.0",
"react-native-safe-area-context": "3.2.0",
"@react-native-community/checkbox": "^0.5.8",
"@react-navigation/material-top-tabs": "^6.0.6"

@intergalacticspacehighway
Copy link
Contributor

@isekaimaou1109 this seems to be working for me Try scrolling the list here. Also, sharing a reproducible demo would be helpful to debug it.

@nandorojo
Copy link
Contributor

Updating component state on every scroll is very inefficient. Don't do that in your actual app.

@fershibli
Copy link

@isekaimaou1109 How did you make styled-components work on react-native-web?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
project:react-native-web Issue associated with react-native-web
Projects
None yet
Development

No branches or pull requests

5 participants