[Android] TextInput, ActivityIndicator and Modal make rn SectionList stickySectionHeadersEnabled not work correctly about react-native-paper HOT 7 CLOSED

Hey @giovanni-caiazzo,
I have tried to reproduce the bug using your repository, but without success. Can you provide more details, such as a recording of the issue, or specifying: device, OS version, simulator/emulator/physical device, that might help reproduce the bug?

from react-native-paper.

Hi @seb-zabielski thank you for looking into this. I'm using an Apple Mini with an M1 chip, building on a physical android device, a fairphone 5. I'm surprised that the issue does not appear for you. I will try asap to reproduce it on a different computer using the simulator or another phone and record the issue.

from react-native-paper.

I tried using my Framework with Ubuntu 24.04 but I see the same issue on my device. Here is the recording. Hopefully it helps.

When the screen flashes white I rebundled the android package by pressing A on the terminal where the expo-dev-client is running.
https://github.com/callstack/react-native-paper/assets/52694654/31a211fd-801e-4585-b31b-470e10dbaa53
As shown in the video, at first the sticky header is not working, but when I remove the react native paper imports and reload the app the sticky header is working again.

from react-native-paper.

@giovanni-caiazzo I checked again and actually managed to reproduce the bug. Previously I was running the application using expo go, so the error did not occur (after switching to development build I was able to reproduce it). It turns out that it is not related to react-native-paper, but the new architecture enabled.

I did small test on an empty project and it turns out that Animated with useNativeDriver: true and newArchEnabled=true somehow affects the SectionList. Here is an example. The result is the same as in your case. All the react-native-paper components you listed use Animated, which is why the error appears.

import React from 'react';
import {Animated, SectionList, StyleSheet, Text} from 'react-native';

const TEST_DATA = Array(6).fill({
  title: 'test Title',
  data: Array(15).fill({
    name: 'data name',
  }),
});

function App(): React.JSX.Element {
  const testRef = React.useRef<Animated.Value>(new Animated.Value(0));

  React.useEffect(() => {
    Animated.timing(testRef.current, {
      toValue: 1,
      duration: 150,
      useNativeDriver: true,
    }).start();
  }, []);

  return (
    <SectionList
      sections={TEST_DATA}
      stickySectionHeadersEnabled={true}
      renderItem={() => <Text>item</Text>}
      renderSectionHeader={({section: {title}}) => (
        <Text style={styles.sectionTitle}>{title}</Text>
      )}
    />
  );
}

const styles = StyleSheet.create({
  sectionTitle: {
    fontSize: 20,
    textTransform: 'uppercase',
    paddingLeft: 5,
    backgroundColor: 'yellow',
  },
});

export default App;

from react-native-paper.

Thank you @seb-zabielski for checking that out! What does that mean though, should I go open this ticket in the react-native repo?

from react-native-paper.

This seems to be the best option.

from react-native-paper.

Created the issue! facebook/react-native#45229

from react-native-paper.