homielab / react-native-auto-scroll

A performance auto horizontal scrolling component for react-native
https://www.npmjs.com/package/@homielab/react-native-auto-scroll
218 stars 23 forks source link

Scrolling jumps at end of loop #16

Open SteveWatson75 opened 3 years ago

SteveWatson75 commented 3 years ago

I am using this package for a vertical auto scroll and it is doing everything I need (thanks!) except at the end of the loop it jumps and I can't figure out why.

https://user-images.githubusercontent.com/88657039/133750937-5a85d142-0db7-4f75-9cb1-bf0a16e14790.mov

        <View
          style={{
            transform: [{ rotate: '90deg' }],
            width: layout.height * 0.6,
            height: layout.width - theme.baseline * 3,
            borderRadius: 15,
            alignSelf: 'center',
            justifyContent: 'center'
          }}
        >
          <AutoScrolling duration={20000} endPaddingWidth={50} isLTR={true}>
            <FastImage
              source={Images.LoginAnimation}
              style={{
                width: (layout.width - theme.baseline * 2) * 4,
                height: layout.width - theme.baseline * 2
              }}
            />
          </AutoScrolling>
        </View>
minhtc commented 3 years ago

Please disable the "isLTR" prop, enable the "isVertical" prop instead of rotate view.

SteveWatson75 commented 3 years ago

I tried using the isVertical prop and it made no difference in the orientation

SteveWatson75 commented 2 years ago

Sorry, I realise that wasn't clear. Initially I enabled the 'isVertical' prop but it didn't affect the orientation of the scroll, that is when I chose to rotate the view an d enable the 'isLTR' prop to get it to work. Is there a usual reason for why the 'isVertical' prop would not work? Is it dependant on the orientation of the image?

minhtc commented 2 years ago

@Steven-lunchCo I confirmed that there is an issue with the "vertical" option. I will check it when I have time, thank you for your report.

zachcowell commented 5 months ago

@SteveWatson75 did you find a solution to the jumping? I am currently experiencing the same. It only happens when I apply a vertical transform in the same way through transform: [{ rotate: '90deg' }] . the isVertical and vertical options don't do anything either

Edit: i was able to get vertical scrolling to work (without jumps) by removing the transform. I used the version found in the pull request to add vertical scrolling, found at this commit:

https://github.com/ledmago/react-native-auto-scrolling/blob/57cc77f106695776a9ef63b28b7c9fcfe03942c8/src/index.tsx

I manually added the index.tsx to my project and gave it a vertical={true} and everything is working smoothly. isLTR also works and I can reverse the direction of the vertical scroll 👍