Sporadic vertical shift glitch on Android

[joaqo]

Hi! This works flawlessly except for a sporadic vertical shift glitch on Android. Sporadically the whole screen shifts up and down for a few milliseconds. I think it gets more triggered when I interact with any react navigation component. Could be caused by safe areas, as I think the vertical shift corresponds with the size of the top safe area.

The diagnosis was quite simple, if I install this library the glitch happens on some Android devices (Pixel 6a for example), if I uninstall it the issue is resolved. I think it only happens on some Android devices because on the other devices (older ones) the package doesn't even get installed as the android sdk version requirements are too new.

Attaching my current package.json and a video of the glitch.
package.json

WhatsApp.Video.2024-11-13.at.13.22.43.mp4

[marandaneto]

hello @joaqo thanks for the issue.
Can you try to disable for example maskAllTextInputs and maskAllImages and see if it helps? So we can narrow down the masking feature.
The other test is to increase the androidDebouncerDelayMs from 1000 to eg 3000 and see if it helps.
Read more about the configs here.
Does it happen on other screens without a listview?

[joaqo]

Hi, thanks for the help!

I already had those settings disabled, tried increasing androidDebouncerDelayMs to 3000 (had it at 500) and it improved considerably in how often it happens, but its still present.

Does it happen on other screens without a listview?

I am not sure, as most of my views have lists and the glitch is sporadic, but its very possible that it doesn't.

These are my current posthog settings:

 { host: "https://us.i.posthog.com",
  // disabled: __DEV__,
  enableSessionReplay: Platform.OS === "ios",  // I turned this on an android for the tests ofcourse
  sessionReplayConfig: {
    // Whether text inputs are masked. Default is true.
    // Password inputs are always masked regardless
    maskAllTextInputs: false,
    // Whether images are masked. Default is true.
    maskAllImages: false,
    // Capture logs automatically. Default is true.
    // Android only (Native Logcat only)
    captureLog: true,
    // Whether network requests are captured in recordings. Default is true
    // Only metric-like data like speed, size, and response code are captured.
    // No data is captured from the request or response body.
    // iOS only
    captureNetworkTelemetry: true,
    // Deboucer delay used to reduce the number of snapshots captured and reduce performance impact. Default is 500ms
    androidDebouncerDelayMs: 500,
    // Deboucer delay used to reduce the number of snapshots captured and reduce performance impact. Default is 1000ms
    iOSdebouncerDelayMs: 1000,
  },

[marandaneto]

@joaqo which version of the SDK? androidDebouncerDelayMs is 1000 by default now to avoid the performance hit.
there were a few improvements in the latest versions, so maybe try using the latest version?

[joaqo]

I'm was using

    "posthog-react-native": "^3.3.6",
    "posthog-react-native-session-replay": "^0.1.5",

Just updated to 0.1.6 and set the debounce to 1000ms. It improved quite a bit, but the issue is still present although more sporadically.

[marandaneto]

@joaqo can you provide a MRE? I have a sample app with list views but I don't notice it, either your app does way more things on the listview or it depends on the tested device/emulator.
I'm using the default values for androidDebouncerDelayMs (1s), latest version.

[joaqo]

Regrettably I don't have a MRE. I might be able to extract one in January when things slow down for us a bit. But the component this happens in is not really too complex, just a react navigation tab-view with a react navigation native top tab bar inside it which is what you see in the video is scrolling. Inside it a scrollview populated by react-native-firebase. It happens in real world devices in prod, not just in simulators. Turning off react-native-session-replay completely fixes it.

Don't think I'm being too helpful unfortunately, but still please don't hesitate to ask anything, I'll do my best to help.

[marandaneto]

hey @joaqo since I cannot reproduce this issue, mind running a test for us?
There was this issue on iOS and I wonder if this is affecting Android as well.
Apparently the Android code does something similar, also here.

What I'd like you to do is to add an accessibilityLabel in your components (all if possible), which can be anything such as test, and try to reproduce the performance hit again.

That will likely make the method to return early instead of looping all the children in the view tree, maybe this is the very same issue as on iOS.

Let me know if that improves anything, thanks.

[joaqo]

Hey @marandaneto , that sounds like something I can do!

Just to confirm though, you want me to add something like accessibilityLabel="test" to every component in my app? As in, every View, Text, Image, etc? Cause we're probably talking thousands of components here, isn't there any way I could focus on a certain subset and still be effective?

[marandaneto]

Only the screen you are experiencing the issue, the one with list view.

[joaqo]

Just tried it, it does seem to help quite a bit, but doesn't completely fix it.

Before applying this I could scroll up and down on the scrollview continuously and I got the glitch once every 20 seconds or so (it used to be much more often before I increased the debouncer time as originally suggested), after applying your suggestion I can only get the glitch once after about 30 seconds from first app cold start, and then never again basically.

Hope this helps.

[marandaneto]

That is good info, step by step, I will look into it, thanks

[marandaneto]

@joaqo sorry for the late reply, the code paths I shared aren't even triggered when using a FlatList for example.
Please extract an MRE so I can reproduce the issue, otherwise, I feel like it runs pretty smooth for these use cases with or without the accessibilityLabel, and thanks for debugging this with me.

[joaqo]

Hi @marandaneto. Got it. We are using ScrollView, not flat list though, not sure if that changes anything. Also, we're using it inside one of these: https://reactnavigation.org/docs/material-top-tab-navigator/ with a custom tab header.

I'll maybe be able to extract an MRE early 2025, regrettably I wont be able to enable session recording on Android for the time being.

Thank you for your help,
Joaquín