Add letterListContainerStyle prop (#27)

Author: aytajj

README.md

@@ -100,6 +100,7 @@ render() {
 | `getItemHeight` (optional) | For [`sectionListGetItemLayout`](https://www.npmjs.com/package/react-native-section-list-get-item-layout). This may be necessary if each item has a dynamic height. This allows for smooth scrolling and accurate positioning when scrolling to a section.  | `func` | `{ sectionIndex: number, rowIndex: number } : number`  | |
 | `sectionHeaderHeight` (optional) | The height of the section header. | `number` | | `40` |
 | `listHeaderHeight` (optional) | The height of the list header. | `number` | | `0` |
+| `letterListContainerStyle` (optional) | Override the style of the letter list container.  | `object` | | `undefined` |
 | `indexContainerStyle` (optional) | Override the style of the list index container.  | `object` | | `undefined` |
 | `indexLetterStyle` (optional) | Override the style of the list letter index text.  | `object` | | `undefined` |
 | `indexLetterContainerStyle` (optional) | Override the style of the list letter index container.  | `object` | | `undefined` |

src/components/AlphabetList/index.tsx

@@ -17,6 +17,7 @@ export const AlphabetList: React.FC<AlphabetListProps> = (props) => {
     indexContainerStyle,
     indexLetterStyle,
     indexLetterContainerStyle,
+    letterListContainerStyle,
     getItemHeight: onGetItemHeight = () => sizes.itemHeight,
     sectionHeaderHeight = sizes.itemHeight,
     listHeaderHeight = sizes.listHeaderHeight,
@@ -96,6 +97,7 @@ export const AlphabetList: React.FC<AlphabetListProps> = (props) => {
         indexContainerStyle={indexContainerStyle}
         indexLetterStyle={indexLetterStyle}
         indexLetterContainerStyle={indexLetterContainerStyle}
+        letterListContainerStyle={letterListContainerStyle}
         renderCustomIndexLetter={renderCustomIndexLetter}
       />
     </View>

src/components/AlphabetList/types.ts

@@ -23,6 +23,7 @@ export interface AlphabetListProps extends Partial<SectionListProps<IData>> {
   indexLetterStyle?: TextStyle,
   indexLetterContainerStyle?: ViewStyle,
   indexContainerStyle?: ViewStyle,
+  letterListContainerStyle?: ViewStyle,
   renderCustomItem?: (item: IData) => JSX.Element;
   renderCustomSectionHeader?: (section: SectionListData<IData>) => JSX.Element;
   renderCustomListHeader?: () => JSX.Element;

src/components/ListLetterIndex/index.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ListLetterIndex } from "."
 import { render, fireEvent } from '@testing-library/react-native';
-import { View, Text } from "react-native"
+import { View, Text, ViewStyle } from "react-native"
 
 describe('ListLetterIndex', () => {
     const mockPressLetterFn = jest.fn()
@@ -154,5 +154,35 @@ describe('ListLetterIndex', () => {
         expect(indexItemLabelElements[0].props.style).toEqual(expectedStyle)
     })
 
+    it('letterListContainerStyle > should apply custom style', () => {
+        // Arrange.
+        const letterListContainerStyle : ViewStyle = {
+            alignItems: "flex-start",
+        }
+
+        const expectedStyle = [
+            {
+                alignItems: "center",
+                justifyContent: "center",
+                height: "100%",
+            },
+            {
+                alignItems: "flex-start"
+            }
+        ]
+
+        const { getAllByTestId } = render(
+            <ListLetterIndex
+                sectionData={sectionData}
+                onPressLetter={mockPressLetterFn}
+                letterListContainerStyle={letterListContainerStyle}
+            />
+        )
+
+        const flatList = getAllByTestId("flatList");
+
+        // Assert.
+        expect(flatList[0].props.contentContainerStyle).toEqual(expectedStyle)
+    })
 
-})
+})

src/components/ListLetterIndex/index.tsx

@@ -10,7 +10,8 @@ export const ListLetterIndex: React.FC<ListLetterIndexProps> = ({
   indexContainerStyle,
   indexLetterStyle,
   indexLetterContainerStyle,
-  renderCustomIndexLetter
+  renderCustomIndexLetter,
+  letterListContainerStyle
 }) => {
   const onRenderCustomIndexLetter = ({ item, index }: { item: ISectionData, index: number }) => {
     const onPress = () => onPressLetter(index)
@@ -35,11 +36,12 @@ export const ListLetterIndex: React.FC<ListLetterIndexProps> = ({
   return (
     <View style={[styles.letterIndexContainer, indexContainerStyle]}>
       <FlatList
-        contentContainerStyle={styles.letterIndexList}
+        testID="flatList"
+        contentContainerStyle={[styles.letterIndexList, letterListContainerStyle]}
         data={sectionData}
         keyExtractor={(i) => i.title}
         renderItem={onRenderCustomIndexLetter}
       />
     </View>
   )
-}
+}

src/components/ListLetterIndex/types.ts

@@ -7,4 +7,5 @@ export interface ListLetterIndexProps {
     indexLetterStyle?: AlphabetListProps["indexLetterStyle"],
     indexLetterContainerStyle?: AlphabetListProps["indexLetterContainerStyle"],
     renderCustomIndexLetter?: AlphabetListProps["renderCustomIndexLetter"],
+    letterListContainerStyle?: AlphabetListProps["letterListContainerStyle"]
 }