React Native Expo Inverted FlatList with snack header transparent

index.tsx

import { View, FlatList, Text, StyleSheet } from 'react-native';
import { Stack } from 'expo-router';
import { StatusBar } from 'expo-status-bar';

const dummyData = Array.from({ length: 100 }, (_, i) => ({
  id: String(i + 1),
  text: `This is line ${i + 1} of dummy text content`,
}));

export default function HomeScreen() {
  return (
    <>
      <Stack.Screen
        options={{
          headerShown: true,
          headerTransparent: true,
          headerTitle: 'Messages',
          headerLargeTitle: true,
          headerBlurEffect: 'regular',
        }}
      />
      <View style={styles.container}>
        <FlatList
          data={dummyData}
          keyExtractor={(item) => item.id}
          inverted
          contentContainerStyle={styles.listContent}
          renderItem={({ item }) => (
            <View style={styles.messageItem}>
              <Text style={styles.messageText}>{item.text}</Text>
            </View>
          )}
        />
        <StatusBar style="dark" />
      </View>
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  listContent: {
    paddingTop: 110,
    paddingHorizontal: 16,
    paddingBottom: 20,
  },
  messageItem: {
    backgroundColor: '#fff',
    padding: 16,
    marginVertical: 6,
    borderRadius: 12,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 2,
    elevation: 2,
  },
  messageText: {
    fontSize: 16,
    color: '#333',
    lineHeight: 22,
  },
});