sticky header

src/components/screens/allCases/AllCases.tsx

@@ -34,13 +34,13 @@ const Item: React.FC<IItem> = (props) => {
     switch (propData.type) {
         case Type.FILTER:
             return (
-                <View style={[GenericStyles.ph16, styles.pv12]}>
+                <View style={[GenericStyles.ph16, styles.pv12, GenericStyles.whiteBackground]}>
                     <TextInput LeftComponent={<SearchIcon />} placeholder='Search by name, address' />
                 </View>
             );
         case Type.CASES_HEADER:
             return (
-                <View style={[GenericStyles.ph16, styles.pv12]}>
+                <View style={[GenericStyles.ph16, styles.pv12, GenericStyles.whiteBackground]}>
                     <Heading dark bold type={'h5'}>
                         Other cases
                     </Heading>
@@ -48,7 +48,7 @@ const Item: React.FC<IItem> = (props) => {
             );
         case Type.TODO_HEADER:
             return (
-                <View style={[GenericStyles.ph16, styles.pv12]}>
+                <View style={[GenericStyles.ph16, styles.pv12, GenericStyles.whiteBackground]}>
                     <Heading dark bold type={'h5'}>
                         Today's to do list
                     </Heading>
@@ -117,6 +117,7 @@ const AllCases = () => {
     return (
         <View>
             <VirtualizedList
+                stickyHeaderIndices={[0]}
                 data={dataForList as Array<Data>}
                 initialNumToRender={4}
                 renderItem={row => (

src/components/screens/allCases/ListItem.tsx

@@ -25,7 +25,13 @@ const ListItem: React.FC<IListItem> = props => {
     return (
         // Todo kunal to add the page switching logic
         <Pressable onPress={onClick}>
-            <View style={[GenericStyles.ph16, styles.pv12, GenericStyles.row]}>
+            <View
+                style={[
+                    GenericStyles.ph16,
+                    styles.pv12,
+                    GenericStyles.row,
+                    GenericStyles.whiteBackground,
+                ]}>
                 <Pressable
                     style={[styles.avatarContainer, styles.alignSelf]}
                     onPress={onAvararPress}>