leecade / leecade/react-native-swiper
scrollBy to location 0 not working as expected
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 10.5k
- Forks
- 2.3k
- PR merge metrics
- No merged PRs in 30d
Description
Which OS?
ANDROID
Version
1.6.0
- react-native-swiper v1.6.0
- react-native v0.67.2
Expected behavior
When using scrollBy with value 0 to go to the first panel.
The transition should be done smoothly
Actual behavior
On Android, the photo flickers when moving back to 0
Aditional info.
on IOS the transition is smooth.
HOWEVER, When passing the second parameter animated as true
IOS + ANDROID: Will does not scroll to location 0at all
How to reproduce it>
var [photos, setPhotos] = useState([]);
useEffect(function() {
var photos = [];
for(var i = 0 ; i < props.profile.photos.length ; i++) {
photos.push(
<Pressable onPress={onPhotoClick.bind(this, i)} style={styles.slide} key={props.profile.photos[i]} onStartShouldSetResponder={() => true}>
<ImageLoading style={styles.photo} resizeMode='contain' source={{uri: props.profile.photos[i]}}>{renderProgress()}</ImageLoading>
</Pressable>
);
}
setPhotos(photos);
}, [props.profile]);
setPhotos(photos);
function onPhotoClick(i) {
if (swiperRef.current) {
swiperRef.current.scrollBy(i < photos.length ? i+1 : 0);
}
}
....
<Swiper ref={swiperRef}
showsPagination={true}
horizontal={false}
showsButtons={false}
onIndexChanged={onPhotoVisited}
dotColor={constants.COLOR_GREY_30}
activeDotColor={isCompleted ? constants.COLOR_GOLD : constants.COLOR_WHITE}>
{photos}
</Swiper>
Steps to reproduce
Run this code and click the photo
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start at the scrollBy entry point used through swiperRef and reproduce the supplied example with React Native 0.67.2 and react-native-swiper 1.6.0. Compare scrolling to index 0 with and without the animated argument on Android and iOS. Done means scrolling back to 0 works without flickering and the transition is smooth on both platforms.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react-native
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100