Comments (4)
I had the same issue, I fixed it by setting getItemLayout
. By the way the documentation of FlatList
explicitely specify that initialScrollIndex
requires getItemLayout
(https://reactnative.dev/docs/flatlist#initialscrollindex), and the index
prop of SwiperFlatList
is passed through initialScrollIndex
prop of FlatList
.
Here is my piece of code (note that I use a useEffect
to keep index when orientation changes) :
const ref = useRef<SwiperFlatList>(null);
const { width } = useWindowDimensions();
useEffect(() => ref.current?.scrollToIndex({ index: ref.current.getCurrentIndex() }), [width]);
return (
<SwiperFlatList
ref={ref}
index={initialIndex}
getItemLayout={(__data, ItemIndex: number) => ({
length: width,
offset: width * ItemIndex,
index: ItemIndex,
})}
data={data}
renderItem={({ item }) => (
// ...
)}
keyExtractor={(item): string => item}
useReactNativeGestureHandler
windowSize={5}
keyboardShouldPersistTaps="handled"
/>
);
from react-native-swiper-flatlist.
It should be fixed in
3.2.0
, could you test it? @felixliu226 @Keylekan
Thanks! just tried with 3.2.2 and it works.
from react-native-swiper-flatlist.
I had the same issue, I fixed it by setting
getItemLayout
. By the way the documentation ofFlatList
explicitely specify thatinitialScrollIndex
requiresgetItemLayout
(https://reactnative.dev/docs/flatlist#initialscrollindex), and theindex
prop ofSwiperFlatList
is passed throughinitialScrollIndex
prop ofFlatList
.Here is my piece of code (note that I use a
useEffect
to keep index when orientation changes) :const ref = useRef<SwiperFlatList>(null); const { width } = useWindowDimensions(); useEffect(() => ref.current?.scrollToIndex({ index: ref.current.getCurrentIndex() }), [width]); return ( <SwiperFlatList ref={ref} index={initialIndex} getItemLayout={(__data, ItemIndex: number) => ({ length: width, offset: width * ItemIndex, index: ItemIndex, })} data={data} renderItem={({ item }) => ( // ... )} keyExtractor={(item): string => item} useReactNativeGestureHandler windowSize={5} keyboardShouldPersistTaps="handled" /> );
Thanks, it works!
from react-native-swiper-flatlist.
It should be fixed in 3.2.0
, could you test it? @felixliu226 @Keylekan
from react-native-swiper-flatlist.
Related Issues (20)
- On scroll to index image is shown with part of next image (Only when data length is bigger than 2) HOT 1
- Error: Requiring unknown module "undefined" HOT 3
- While given scroll to index it is not scroll to 11 it only scroll to 10 when there is 15 data or more HOT 2
- Can't make spacing between 2 sliders HOT 1
- Can't change sliding animation HOT 1
- Nested Swiper Flatlists layout bug HOT 2
- Changing the distance between the dots on Pagination HOT 1
- ScrollToIndex should be used in conjunction with getItemLayout or onScrollToIndexFailed HOT 1
- onChangeIndex called repeatedly when setState in it. HOT 3
- Issue with @types/react 18.2.22 HOT 1
- Setting children width causes glitchy behavior HOT 1
- Getting warning error on swipe left or right HOT 1
- Scrolling disrupted after the 12th item in vertical SwiperFlatList HOT 6
- How to use a Slider Component Within the Swiper? HOT 1
- Different item Height to the cause Item stretching HOT 1
- onchangeindex is not workig while mannulay swipe while in autoplay it is workimg i am in urgence please looks this HOT 1
- onChangeIndex not triggered on web HOT 3
- Completely broken on RN 0.74 HOT 2
- Question: How do I manually change the index? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-swiper-flatlist.