[Android] TextInput, ActivityIndicator and Modal make rn SectionList stickySectionHeadersEnabled not work correctly

[giovanni-caiazzo]

Current behaviour

When using TextInput, ActivityIndicator or Modal from react-native-paper instead from react-native, the SectionList component from react-native doesn't work correctly: the prop stickySectionHeadersEnabled doesn't seem to work unless those three components are either removed or imported from react-native instead. This means that the headers do not stick on top of the component.

Expected behaviour

I expect stickySectionHeadersEnabled of SectionList to work correctly regardless of what other component I import in my project.

How to reproduce?

You can run my test repo that I created for this. If you go into MenuScreen and change the imports, the SectionList in MenuHistoryScreen should work correctly.

What have you tried so far?

I tried to remove the three imports or change them to react-native instead of react-native-paper and it works, but I would rather use the imports from react-native-paper.

Your Environment

software	version
react-native	0.74.2
react-native-paper	5.12.3
node	18.20.3
yarn	1.22.22
expo sdk	51.0.14

[seb-zabielski]

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?

[giovanni-caiazzo]

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.

[giovanni-caiazzo]

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.

[seb-zabielski]

@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;

[giovanni-caiazzo]

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

[seb-zabielski]

This seems to be the best option.

[giovanni-caiazzo]

Created the issue! facebook/react-native#45229