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
Lazy loading the components in viewpager #677
Comments
My interpretation of the docs is that I found a workaround by returning an empty view on these items that are further away than x scrolls. function Screen() {
const startIndex = 4;
let [currentIndex, setCurrentIndex] = useState(startIndex);
const renderLimit = 2; // render 2 pages before and after the current page
return (
<PagerView
initialPage={startIndex}
style={{ flex: 1 }}
onPageSelected={(event) => {
setCurrentIndex(event.nativeEvent.position);
}}
>
{Array.from(Array(10).keys()).map((i, index) => {
return (
<View
style={{
alignItems: "center",
backgroundColor: "white",
flex: 1,
justifyContent: "center",
}}
key={i}
>
{Math.abs(currentIndex - index) < renderLimit && (
<Text>{i}</Text>
)}
</View>
);
})}
</PagerView>
);
} https://snack.expo.dev/@ttschnz/lazy-loading-the-components-in-viewpager |
I believe Check this --> #331 |
See the work around in #673 (comment) |
Lazy loading of components
I am unable to understand how do I stop the viewpager from loading all of my components at the same time. I want when the user selects a category and switches to that particular screen thats when it gets loaded. But right now its loading all of the components altogether
The text was updated successfully, but these errors were encountered: