react-native-week-view: BUG: GOOGLE PIXEL(Android 13) hang on scrolling horizontal.

Describe the bug On Android 13 in all google pixel devices. If I scroll the diary horizontally then after few seconds the app got hanging. if I move to other screens then came back to diary screen it works for few seconds and then hangs again. I face this hanging issue on numberOfDays is set as 7 or 5. If 5 days is set then it hang after 10 seconds but id select it as 7 days then it hangs in 1 or 2 seconds.

Visual demo

https://user-images.githubusercontent.com/49557103/188266950-9a881341-ee3c-4d50-b2b4-7e72c6e78469.mov

Steps To Reproduce

  1. Open the calendar in Google Pixel 6,6a on android 13
  2. Scroll the calendar horizontally in 7 days view then you face the issue.

Expected behaviour I expect it to scroll smother like other devices.

Environment:

  • react-native-week-view: 0.16.0
  • react-native: 0.66.4
  • react:17.0.2
  • OS: android 13 on Google Pixel devices

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Comments: 50 (3 by maintainers)

Most upvoted comments

Hi @greenboots88, sorry for the late reply, I’ve been out of office the last days

I agree this is an urgent issue. I’ll check it out this week

@pdpino Yes, I would be happy to pay you to get this resolved asap please. Message me on wottonearth@gmail.com to arrange a payment

@pdpino thanks for your efforts. If you can find a fix for this I’d be happy to pay you a handsome reward 😃

@pdpino Kindly find the video of your example project. I Have added both option but on scroll after some time app hangs.

https://user-images.githubusercontent.com/49557103/198277168-e6466613-2e93-47fa-ab82-e4487db42f68.mp4

@Jack-Alfie since version >=0.0.17, you can achieve your design using EventComponent prop:

const exampleEvents = [{
  id: 1,
  startDate: new Date(...),
  endDate: new Date(...),
  color: 'red',
  title: 'my title',
  start_time: '12:00', // start_time can be provided here...

const EventComponent = ({event}) => {
  // or can be computed on the fly, e.g.
  const start_time = moment(event.startDate).format('HH:mm')
  return (
    <>
      <Text>{event.title}</Text>
      <Text>{event.start_time}</Text>
      <Text>{event.end_time}</Text>
      <Text>{status}</Text>
    </>
  );
};

// then
<WeekView
  EventComponent={EventComponent}
  eventContainerStyle={moreStyles for the container} // since version v0.0.18
/>

we didn’t use useSharedValue()s but we have the Virtulizedlist in Weekview.js file and we face the same issue in your lates build too but the old build which build without Virtulizedlist is working fine with Scrollview.

🤔 interesting, thanks for the follow-up @Jack-Alfie

  1. Are you using react-native-reanimated at all? reanimated has some similar issues (e.g. ANR : Input dispatching timed out  software-mansion/react-native-reanimated#2812, Large Flatlist with PanGestureHandler and useAnimatedReaction - ANR software-mansion/react-native-reanimated#3397), that’s why I’m suspecting from the useSharedValue()s

    • Can I see the rn-week-view code you are using?
  2. VirtualizedList or FlatList should work better than ScrollView in our case when the user has visited many pages.

    • In their docs: “ScrollView renders all its react child components at once, […] FlatList renders items lazily, when they are about to appear, and removes items that scroll way off screen to save memory and processing time.”
    • I’ll try with ScrollView, and will dig more into this
  1. We didn’t use the react-native-reanimated and useSharedValue() in our live app but the app hangs on android 13 on scroll. In our development app we use your latest code with react-native-reanimated and useSharedValue() and face the same issue
  2. Yes VirtualizedList or FlatList is better than Scrollview. We also using that in our app.

Kindly find the Demo code for your reference. You can test this code by creating the sample project and add this files to that. demo code.zip

@pdpino In our app we need to add some more design in the events and we cant use the description key to show the event name, we use different keys in our api. so we have copied your src and use it in our project and in Event.js, we didn’t use useSharedValue()s but we have the Virtulizedlist in Weekview.js file and we face the same issue in your lates build too but the old build which build without Virtulizedlist is working fine with Scrollview.

@pdpino I have tried your old version of library which build with scrollview and the app works faster I didn’t face hang issue for more than 1000 events. So I think the issue is ViitualizedList which stop scrolling in android 13. This may helps you to find the reason.

@pdpino the behaviour is worse with more events. 10 events has no lag. 100+ starts lagging after 20-30 swipes. 1000+ events starts lagging 8-10 swipes

@pdpino Testing different Pixel models, they both have the same problem. The diary lags and then crashes after 8 swipes. Swiping forwards or backwards has the same problem

Also facing this issue on Androids running OS v13. v12 fine, iOS fine.