Open giovanni-caiazzo opened 1 week ago
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?
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.
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.
@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;
Thank you @seb-zabielski for checking that out! What does that mean though, should I go open this ticket in the react-native
repo?
Current behaviour
When using
TextInput
,ActivityIndicator
orModal
fromreact-native-paper
instead fromreact-native
, theSectionList
component fromreact-native
doesn't work correctly: the propstickySectionHeadersEnabled
doesn't seem to work unless those three components are either removed or imported fromreact-native
instead. This means that the headers do not stick on top of the component.Expected behaviour
I expect
stickySectionHeadersEnabled
ofSectionList
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, theSectionList
inMenuHistoryScreen
should work correctly.What have you tried so far?
I tried to remove the three imports or change them to
react-native
instead ofreact-native-paper
and it works, but I would rather use the imports fromreact-native-paper
.Your Environment