Add props to change default section header colors (#991)

Author: YoussefHenna

packages/core/src/components/SectionList/SectionHeader.tsx

@@ -15,15 +15,17 @@ const SectionHeader: React.FC<React.PropsWithChildren<SectionHeaderProps>> = ({
 interface DefaultSectionHeaderProps {
   title: string;
   theme: ReadTheme;
+  backgroundColor?: string;
+  textColor?: string;
 }
 export const DefaultSectionHeader = withTheme(
-  ({ title, theme }: DefaultSectionHeaderProps) => {
+  ({ title, theme, backgroundColor, textColor }: DefaultSectionHeaderProps) => {
     return (
       <Text
         testID="default-section-header"
         style={{
-          color: theme.colors.background.base,
-          backgroundColor: theme.colors.branding.primary,
+          color: textColor ?? theme.colors.background.base,
+          backgroundColor: backgroundColor ?? theme.colors.branding.primary,
           fontSize: 16,
           padding: 10,
         }}

packages/core/src/components/SectionList/SectionList.tsx

@@ -21,6 +21,8 @@ interface AdditionalSectionListProps<T> {
   }) => JSX.Element;
   keyExtractor?: (item: T, index: number) => string;
   listComponent?: ListComponentType;
+  sectionHeaderBackgroundColor?: string;
+  sectionHeaderTextColor?: string;
 }
 
 export type FlatListSectionListProps<T> = Omit<FlatListProps<T>, "renderItem"> &
@@ -55,6 +57,8 @@ const SectionList = React.forwardRef(
       data: dataProp,
       renderItem: renderItemProp,
       keyExtractor: keyExtractorProp,
+      sectionHeaderBackgroundColor,
+      sectionHeaderTextColor,
       ...rest
     }: FlatListSectionListProps<T> | FlashListSectionListProps<T>,
     ref: React.Ref<FlatListComponent | FlashList<any>>
@@ -164,7 +168,11 @@ const SectionList = React.forwardRef(
           });
           return (
             extractSectionHeader(renderedItem) || (
-              <DefaultSectionHeader title={item.title} />
+              <DefaultSectionHeader
+                title={item.title}
+                backgroundColor={sectionHeaderBackgroundColor}
+                textColor={sectionHeaderTextColor}
+              />
             )
           );
         }