Scrolling between components is smooth in simulator but laggy on real device
See original GitHub issueDescribe the bug I’m using this package to create full page horizontal view scrolling between components. As the title said, the scrolling is smooth when I test it in a simulator (both iOS and Android). However, when I test it on a real device, I notice that it is laggy when I start to do the scrolling.
Is it because this package is suitable for images, but not for full page component? Or how should I optimise my code to make it smoother?
To Reproduce Steps to reproduce the behavior, here is my code:
// import statements
const {height: PAGE_HEIGHT, width: PAGE_WIDTH} = Dimensions.get('window');
const activeOffsetX = {activeOffsetX: [-10, 10]};
const App = () => {
const resultRef = useRef(null);
const [currentSide, setCurrentSide] = useState('M');
const [isVertical] = useState(false);
// other code
// Base options for <Carousel />
const baseOptions = isVertical
? {
vertical: true,
height: PAGE_HEIGHT,
width: PAGE_WIDTH,
}
: {
vertical: false,
height: PAGE_HEIGHT,
width: PAGE_WIDTH,
};
// other code
return (
<SafeAreaView style={styles.container}>
{isLoading && !isLiveStarted ? <FullScreenLoading /> : null}
<AppTitle />
{result.length === 0 ? (
<Carousel
{...baseOptions}
data={c}
defaultIndex={0}
panGestureHandlerProps={activeOffsetX}
ref={blankResultRef}
renderItem={({index}) => {
return (
<BlankResultScreen
key={index}
index={index}
bgColor={c[index].color}
hasLetter={c[index].hasLetter}
isBlackText={c[index].isBlackText}
isGreenText={c[index].isGreenText}
name={c[index].name}
source={c[index].image}
/>
);
}}
/>
) : (
<Carousel
{...baseOptions}
data={c}
defaultIndex={0}
onSnapToItem={index => setCurrentSide(c[index].code)}
pagingEnabled={false}
panGestureHandlerProps={activeOffsetX}
ref={resultRef}
renderItem={({index}) => {
return (
<ResultScreen
key={index}
index={index}
bgColor={c[index].color}
companyCode={c[index].code}
hasLastRow={c[index].hasLastRow}
hasLetter={c[index].hasLetter}
hasLiveVideo={c[index].hasLiveVideo}
isBlackText={c[index].isBlackText}
isGreenText={c[index].isGreenText}
name={c[index].name}
source={c[index].image}
</>
);
}}
/>
)}
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
export default codePush(codePushOptions)(App);
Expected behavior Scrolling between every view should be smooth on real devices.
Screen record https://user-images.githubusercontent.com/105196702/175454414-e4ec3a40-a6ff-4bb9-bf6e-b08710f43220.mp4
Versions (please complete the following information):
- react: v17.0.2
- react-native: v0.68.2
- react-native-reanimated: v2.8.0
- react-native-reanimated-carousel: v3.0.0
- react-native-gesture-handler: v2.4.2
Smartphone (please complete the following information):
- Device: iPhone11
- OS: iOS15.4.1
Issue Analytics
- State:
- Created a year ago
- Comments:5 (2 by maintainers)
Top GitHub Comments
Thanks for share!. yes I notice the same behavior when the swipe gesture is slower there is a noticeable FPS dropping. Let’s me see what’s happening under the hood and see If I can fix it quickly
Hi @oliverloops, thank you for the suggestion! I’ve tried adding the windowSize prop, but the problem still exist.
As for now, when I scroll through the carousel very quickly, the performance is excellent, as you can see in the screen record. But when I do it slower, you can see that it is not as smooth as when the movement is fast.
Do you have any idea why is this happening?
https://user-images.githubusercontent.com/105196702/176452550-7e28beec-52a6-4292-bbaa-e5733687c20a.mp4