Add alphabetTextStyle prop ref #85

README.md

@@ -155,7 +155,8 @@ export default class Main extends React.Component<{}, { selectedItem: {} }> {
 | **disabled**                      | `boolean`  | Disable Select box                                     |                                             |
 | **requireSelection**              | `boolean`  | Require at least one list item is selected             | `"false"`                                   |
 | **backButtonDisabled**            | `boolean`  | Hide to back button             						  | `"false"`                                   |
-| **renderSearch**            | `Function`  | Render custom search input             						  | ``                                   |
+| **renderSearch**            | `Function`  | Render custom search input              						  | `"false"`                                   |
+| **alphabetTextStyle**            | `object`  | Render custom text for the alphabetical index          						  | `{}`                                   |
 
 # Core Props of React Native
 <br/>

dist/Interfaces/IAlphabetsInDto.d.ts

@@ -1,6 +1,8 @@
+import { TextStyle } from "react-native";
 export interface IAlphabetsInDto {
     alphabets: string[];
     showAlphabeticalIndex: boolean;
     selectedAlpha?: string;
+    alphabetTextStyle?: TextStyle;
     setAlphabet: (alphabet: string) => void;
 }

dist/Interfaces/IModalProps.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { FlatListProps, TextInputProps, ModalBaseProps, ModalPropsIOS, ModalPropsAndroid } from 'react-native';
+import { FlatListProps, TextInputProps, ModalBaseProps, ModalPropsIOS, ModalPropsAndroid, TextStyle } from 'react-native';
 import { AnimationTypeEnum } from '../Enum';
 import { IModalListInDto } from './';
 declare type ModalProps = ModalBaseProps | ModalPropsIOS | ModalPropsAndroid;
@@ -32,6 +32,7 @@ export interface IModalProps {
     renderSelectView?: (disabled: boolean, selected: IModalListInDto, showModal: () => void) => React.ReactElement;
     backButtonDisabled?: boolean;
     renderSearch?: (onClose: () => void, onBack: () => void) => JSX.Element;
+    alphabetTextStyle?: TextStyle;
 }
 export interface IModalState {
     modalVisible: boolean;

src/Components/Alphabet.tsx

@@ -14,7 +14,7 @@ export class AlphabetComponent extends React.PureComponent<IAlphabetsInDto, {}>
 	};
 
 	public render(): JSX.Element {
-		const { alphabets, setAlphabet, selectedAlpha, showAlphabeticalIndex } = this.props;
+		const { alphabets, setAlphabet, selectedAlpha, showAlphabeticalIndex, alphabetTextStyle = {} } = this.props;
 
 		if (showAlphabeticalIndex) {
 			return (
@@ -27,7 +27,7 @@ export class AlphabetComponent extends React.PureComponent<IAlphabetsInDto, {}>
 								<TouchableOpacity onPress={() => setAlphabet(a)} key={index}
 									style={AlphabetStyle.alphabetButton}>
 									<Text
-										style={[AlphabetStyle.alphabetText, selectedAlpha === a && AlphabetStyle.selected]}
+										style={[AlphabetStyle.alphabetText, selectedAlpha === a && AlphabetStyle.selected, alphabetTextStyle]}
 									>
 										{a}
 									</Text>

src/Components/Modal.tsx

@@ -72,7 +72,7 @@ export class ModalComponent extends React.PureComponent<IModalProps, IModalState
 	}
 
 	public render(): JSX.Element {
-		const { autoSort, modalAnimationType, onClosed, showAlphabeticalIndex, searchInputTextColor, keyExtractor, showToTopButton, onEndReached, removeClippedSubviews, FlatListProps, selectPlaceholderText, searchPlaceholderText, SearchInputProps, selected, disabled, items, requireSelection, renderSelectView, ModalProps, backButtonDisabled, renderSearch } = this.props;
+		const { autoSort, modalAnimationType, onClosed, showAlphabeticalIndex, searchInputTextColor, keyExtractor, showToTopButton, onEndReached, removeClippedSubviews, FlatListProps, selectPlaceholderText, searchPlaceholderText, SearchInputProps, selected, disabled, items, requireSelection, renderSelectView, ModalProps, backButtonDisabled, renderSearch, alphabetTextStyle = {} } = this.props;
 
 		const { modalVisible, alphabeticalIndexChars, stickyBottomButton, selectedAlpha, selectedObject, searchText } = this.state;
 
@@ -95,7 +95,7 @@ export class ModalComponent extends React.PureComponent<IModalProps, IModalState
 					<SafeAreaView style={ModalStyles.container}>
 						{
 							renderSearch ? renderSearch(
-									this.onClose.bind(this), 
+									this.onClose.bind(this),
 									this.onBackRequest.bind(this)
 								) : (
 								<SearchComponent
@@ -142,6 +142,7 @@ export class ModalComponent extends React.PureComponent<IModalProps, IModalState
 									setAlphabet={(alphabet: string) => this.setAlphabet(alphabet)}
 									alphabets={alphabeticalIndexChars}
 									selectedAlpha={selectedAlpha}
+									alphabetTextStyle={alphabetTextStyle}
 								/>
 							</View>
 						</KeyboardAvoidingView>

src/Interfaces/IAlphabetsInDto.ts

@@ -1,7 +1,10 @@
+import {TextStyle} from "react-native";
+
 export interface IAlphabetsInDto {
 	alphabets: string[];
 	showAlphabeticalIndex: boolean;
 	selectedAlpha?: string;
+	alphabetTextStyle?: TextStyle;
 
 	setAlphabet: (alphabet: string) => void;
 }

src/Interfaces/IModalProps.ts

@@ -5,6 +5,7 @@ import {
 	ModalBaseProps,
 	ModalPropsIOS,
 	ModalPropsAndroid,
+	TextStyle,
 } from 'react-native';
 
 // Local Imports
@@ -43,6 +44,7 @@ export interface IModalProps {
 	renderSelectView?: (disabled: boolean, selected: IModalListInDto, showModal: () => void) => React.ReactElement
 	backButtonDisabled?: boolean,
 	renderSearch?: (onClose: () => void, onBack: () => void ) =>  JSX.Element,
+	alphabetTextStyle?: TextStyle,
 }
 
 export interface IModalState {