feat: languageItemProps for proper prop drilling

Author: WrathChaos

README.md

@@ -89,6 +89,7 @@ const data: ILanguagePicker[] = [
 | itemContainer     |       default       |               default               | change the language item container style                |
 | imageComponent    |       default       | React.ReactNode / React.ReactNode[] | change the language image component                     |
 | checkComponent    |       default       | React.ReactNode / React.ReactNode[] | change the check component                              |
+| languageItemProps |       default       |         ILanguageItemProps          | change the language item props                          |
 
 ## Future Plans
 

example/App.tsx

@@ -42,7 +42,8 @@ const App = () => {
         alignItems: 'center',
         paddingTop: 50,
         backgroundColor: '#EFEFEF',
-      }}>
+      }}
+    >
       <Text
         style={{
           textAlign: 'center',
@@ -51,7 +52,8 @@ const App = () => {
           color: '#454A62',
           marginTop: 32,
           marginBottom: 30,
-        }}>
+        }}
+      >
         Language
       </Text>
       <Text
@@ -62,13 +64,16 @@ const App = () => {
           fontSize: 13,
           color: '#2F3452',
           marginBottom: 40,
-        }}>
+        }}
+      >
         You can choose the language and costumise your application in the
         language you want
       </Text>
       <LanguagePicker
         initialIndex={1}
-        activeBorderColor="red"
+        languageItemProps={{
+          activeBorderColor: 'red',
+        }}
         data={data}
         onSelect={(selectedItem: ILanguagePicker) => {
           console.log(selectedItem);

example/lib/LanguagePicker.style.ts

@@ -0,0 +1,11 @@
+import { Dimensions, StyleSheet } from "react-native";
+
+const windowWidth = Dimensions.get("window").width;
+const windowHeight = Dimensions.get("window").height;
+
+export const _container = (width: number, height: number) => ({
+  width: width,
+  height: height,
+});
+
+export default StyleSheet.create({});

example/lib/LanguagePicker.tsx

@@ -0,0 +1,67 @@
+import React, {useState} from 'react';
+import {Dimensions, FlatList, ViewStyle} from 'react-native';
+/**
+ * ? Local Imports
+ */
+import {_container} from './LanguagePicker.style';
+import LanguageItem, {ILanguageItemProps} from './language-item/LanguageItem';
+
+const windowWidth = Dimensions.get('window').width;
+const windowHeight = Dimensions.get('window').height;
+
+export interface ILanguagePicker {
+  title: string;
+  imageSource: any;
+  language?: string;
+}
+
+export interface ILanguagePickerProps {
+  data: ILanguagePicker[];
+  flatListStyle?: ViewStyle;
+  containerWidth?: number;
+  containerHeight?: number;
+  initialIndex?: number;
+  languageItemProps?: ILanguageItemProps;
+  onSelect?: (selectedItem: ILanguagePicker) => void;
+}
+
+const LanguagePicker: React.FC<ILanguagePickerProps> = ({
+  data,
+  flatListStyle,
+  initialIndex = -1,
+  containerWidth = windowWidth * 0.9,
+  containerHeight = windowHeight * 0.7,
+  onSelect,
+  languageItemProps,
+  ...rest
+}) => {
+  const [selectedItem, setSelectedItem] = useState<ILanguagePicker | undefined>(
+    data[initialIndex],
+  );
+
+  const handleOnSelectItem = (item: ILanguagePicker) => {
+    setSelectedItem(item);
+    onSelect && onSelect(item);
+  };
+
+  const renderItem = (item: ILanguagePicker) => (
+    <LanguageItem
+      {...languageItemProps}
+      onSelect={handleOnSelectItem}
+      isActive={selectedItem === item}
+      item={item}
+    />
+  );
+
+  return (
+    <FlatList
+      {...rest}
+      data={data}
+      style={[_container(containerWidth, containerHeight), flatListStyle]}
+      renderItem={({item}) => renderItem(item)}
+      keyExtractor={item => item.title}
+    />
+  );
+};
+
+export default LanguagePicker;

example/lib/language-item/LanguageItem.style.ts

@@ -0,0 +1,42 @@
+import { StyleSheet, Dimensions, ViewStyle, TextStyle } from "react-native";
+const windowWidth = Dimensions.get("window").width;
+const windowHeight = Dimensions.get("window").height;
+
+export const _itemContainer = (
+  backgroundColor: string,
+  borderColor: string,
+  width: number,
+  height: number,
+): ViewStyle => ({
+  borderColor: borderColor,
+  backgroundColor: backgroundColor,
+  borderWidth: 2,
+  borderRadius: 20,
+  height: height,
+  width: width,
+  marginBottom: 12,
+  flexDirection: "row",
+  alignItems: "center",
+  paddingLeft: 24,
+});
+
+export const _titleStyle = (color: string): TextStyle => ({
+  fontWeight: "600",
+  color: color,
+  fontSize: 16,
+});
+
+export default StyleSheet.create({
+  imageStyle: {
+    width: 40,
+    height: 40,
+    marginRight: 18,
+  },
+  checkImageStyle: {
+    position: "absolute",
+    right: 24,
+    width: 20,
+    height: 20,
+    color: "red",
+  },
+});

example/lib/language-item/LanguageItem.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import {
+  Dimensions,
+  Image,
+  ImageSourcePropType,
+  Text,
+  ViewStyle,
+} from 'react-native';
+import RNBounceable from '@freakycoder/react-native-bounceable';
+/**
+ * ? Local Imports
+ */
+import {ILanguagePicker} from '../LanguagePicker';
+import styles, {_itemContainer, _titleStyle} from './LanguageItem.style';
+
+const windowWidth = Dimensions.get('window').width;
+
+interface ILanguageItemRequiredProps extends ILanguageItemProps {
+  item: ILanguagePicker;
+  isActive: boolean;
+}
+
+export interface ILanguageItemProps {
+  width?: number;
+  height?: number;
+  backgroundColor?: string;
+  activeBorderColor?: string;
+  textColor?: string;
+  itemContainer?: ViewStyle;
+  imageComponent?: React.ReactNode | React.ReactNode[];
+  checkComponent?: React.ReactNode | React.ReactNode[];
+  rightImageSource?: ImageSourcePropType;
+  onSelect?: (selectedItem: ILanguagePicker) => void;
+}
+
+const LanguageItem: React.FC<ILanguageItemRequiredProps> = ({
+  itemContainer,
+  item,
+  width = windowWidth * 0.9,
+  height = 80,
+  isActive,
+  backgroundColor = '#FFFFFF',
+  textColor = '#2F3452',
+  imageComponent,
+  checkComponent,
+  activeBorderColor = '#504ED9',
+  rightImageSource,
+  onSelect,
+}) => {
+  const borderColor = isActive ? activeBorderColor : backgroundColor;
+  return (
+    <RNBounceable
+      style={[
+        _itemContainer(backgroundColor, borderColor, width, height),
+        itemContainer,
+      ]}
+      onPress={() => onSelect && onSelect(item)}
+    >
+      {imageComponent || (
+        <Image source={item.imageSource} style={styles.imageStyle} />
+      )}
+      <Text style={_titleStyle(textColor)}>{item.title}</Text>
+      {isActive &&
+        (checkComponent || (
+          <Image
+            source={rightImageSource || require('../local-assets/check.png')}
+            style={styles.checkImageStyle}
+          />
+        ))}
+    </RNBounceable>
+  );
+};
+
+export default LanguageItem;