refactor: props

.commitlintrc.json

@@ -1,6 +1,6 @@
 {
   "extends": ["@commitlint/config-conventional"],
-  "rules": { 
+  "rules": {
     "header-max-length": [0, "always", 150],
     "subject-case": [0, "always", "sentence-case"],
     "type-enum": [

.husky/commit-msg

@@ -2,4 +2,3 @@
 . "$(dirname "$0")/_/husky.sh"
 
 npx --no-install commitlint --edit
-npx --no-install commitlint --edit

.husky/pre-commit

@@ -1,5 +1,5 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
 
 npm run prettier
 npm run lint

example/.watchmanconfig

@@ -1 +1 @@
-{}
+{}

example/App.tsx

@@ -1,32 +1,33 @@
 import React from 'react';
-import {Text, View} from 'react-native';
-import LanguageItem from './lib/language-item/LanguageItem';
+import {View} from 'react-native';
 import LanguagePicker, {ILanguagePicker} from './lib/LanguagePicker';
 
-const data = [
+const data: ILanguagePicker[] = [
   {
     title: 'English',
-    imageSource: require('./lib/assets/america.png'),
-  },
-  {
-    title: 'Turkish',
-    imageSource: require('./lib/assets/turkey.png'),
+    imageSource: require('./lib/local-assets/america.png'),
+    language: 'en',
   },
   {
     title: 'Italian',
-    imageSource: require('./lib/assets/italy.png'),
+    imageSource: require('./lib/local-assets/italy.png'),
   },
   {
     title: 'German',
-    imageSource: require('./lib/assets/germany.png'),
+    imageSource: require('./lib/local-assets/germany.png'),
+  },
+  {
+    title: 'Turkish',
+    imageSource: require('./lib/local-assets/turkey.png'),
+    language: 'tr',
   },
   {
     title: 'Swedish',
-    imageSource: require('./lib/assets/sweden.png'),
+    imageSource: require('./lib/local-assets/sweden.png'),
   },
   {
     title: 'Japanese',
-    imageSource: require('./lib/assets/japan.png'),
+    imageSource: require('./lib/local-assets/japan.png'),
   },
 ];
 
@@ -39,8 +40,10 @@ const App = () => {
         alignItems: 'center',
         paddingTop: 200,
         backgroundColor: '#F3F3F3',
-      }}>
+      }}
+    >
       <LanguagePicker
+        initialIndex={1}
         data={data}
         onSelect={(selectedItem: ILanguagePicker) => {
           console.log(selectedItem);

example/app.json

@@ -1,4 +1,4 @@
 {
   "name": "example",
   "displayName": "example"
-}
+}

example/ios/example/Images.xcassets/AppIcon.appiconset/Contents.json

@@ -1,53 +1,53 @@
 {
-  "images" : [
+  "images": [
     {
-      "idiom" : "iphone",
-      "scale" : "2x",
-      "size" : "20x20"
+      "idiom": "iphone",
+      "scale": "2x",
+      "size": "20x20"
     },
     {
-      "idiom" : "iphone",
-      "scale" : "3x",
-      "size" : "20x20"
+      "idiom": "iphone",
+      "scale": "3x",
+      "size": "20x20"
     },
     {
-      "idiom" : "iphone",
-      "scale" : "2x",
-      "size" : "29x29"
+      "idiom": "iphone",
+      "scale": "2x",
+      "size": "29x29"
     },
     {
-      "idiom" : "iphone",
-      "scale" : "3x",
-      "size" : "29x29"
+      "idiom": "iphone",
+      "scale": "3x",
+      "size": "29x29"
     },
     {
-      "idiom" : "iphone",
-      "scale" : "2x",
-      "size" : "40x40"
+      "idiom": "iphone",
+      "scale": "2x",
+      "size": "40x40"
     },
     {
-      "idiom" : "iphone",
-      "scale" : "3x",
-      "size" : "40x40"
+      "idiom": "iphone",
+      "scale": "3x",
+      "size": "40x40"
     },
     {
-      "idiom" : "iphone",
-      "scale" : "2x",
-      "size" : "60x60"
+      "idiom": "iphone",
+      "scale": "2x",
+      "size": "60x60"
     },
     {
-      "idiom" : "iphone",
-      "scale" : "3x",
-      "size" : "60x60"
+      "idiom": "iphone",
+      "scale": "3x",
+      "size": "60x60"
     },
     {
-      "idiom" : "ios-marketing",
-      "scale" : "1x",
-      "size" : "1024x1024"
+      "idiom": "ios-marketing",
+      "scale": "1x",
+      "size": "1024x1024"
     }
   ],
-  "info" : {
-    "author" : "xcode",
-    "version" : 1
+  "info": {
+    "author": "xcode",
+    "version": 1
   }
 }

example/ios/example/Images.xcassets/Contents.json

@@ -1,6 +1,6 @@
 {
-  "info" : {
-    "version" : 1,
-    "author" : "xcode"
+  "info": {
+    "version": 1,
+    "author": "xcode"
   }
 }

example/lib/LanguagePicker.tsx

@@ -1,43 +1,37 @@
-import RNBounceable from '@freakycoder/react-native-bounceable';
 import React, {useState} from 'react';
-import {
-  Dimensions,
-  FlatList,
-  SafeAreaView,
-  View,
-  ViewStyle,
-} from 'react-native';
-import LanguageItem from './language-item/LanguageItem';
+import {Dimensions, FlatList, ViewStyle} from 'react-native';
 /**
  * ? Local Imports
  */
-import styles, {_container} from './LanguagePicker.style';
+import {_container} from './LanguagePicker.style';
+import LanguageItem from './language-item/LanguageItem';
 
 const windowWidth = Dimensions.get('window').width;
 const windowHeight = Dimensions.get('window').height;
 
 export interface ILanguagePicker {
   title: string;
   imageSource: any;
-  initialIndex?: number;
+  language?: string;
 }
 
 interface ILanguagePickerProps {
   data: ILanguagePicker[];
-  container?: ViewStyle;
+  flatListStyle?: ViewStyle;
   containerWidth?: number;
   containerHeight?: number;
   initialIndex?: number;
-  onSelect: (selectedItem: ILanguagePicker) => void;
+  onSelect?: (selectedItem: ILanguagePicker) => void;
 }
 
 const LanguagePicker: React.FC<ILanguagePickerProps> = ({
   data,
-  container,
+  flatListStyle,
   initialIndex = -1,
   containerWidth = windowWidth * 0.9,
   containerHeight = windowHeight * 0.7,
   onSelect,
+  ...rest
 }) => {
   const [selectedItem, setSelectedItem] = useState<ILanguagePicker | undefined>(
     data[initialIndex],
@@ -53,13 +47,14 @@ const LanguagePicker: React.FC<ILanguagePickerProps> = ({
       onSelect={handleOnSelectItem}
       isActive={selectedItem === item}
       item={item}
+      {...rest}
     />
   );
 
   return (
     <FlatList
       data={data}
-      style={[_container(containerWidth, containerHeight), container]}
+      style={[_container(containerWidth, containerHeight), flatListStyle]}
       renderItem={({item}) => renderItem(item)}
       keyExtractor={item => item.title}
     />

example/lib/language-item/LanguageItem.tsx

@@ -1,30 +1,20 @@
 import RNBounceable from '@freakycoder/react-native-bounceable';
-import React, {useState} from 'react';
-import {
-  Dimensions,
-  Image,
-  StyleProp,
-  Text,
-  View,
-  ViewStyle,
-} from 'react-native';
+import React from 'react';
+import {Dimensions, Image, Text, ViewStyle} from 'react-native';
 import {ILanguagePicker} from '../LanguagePicker';
 /**
  * ? Local Imports
  */
 import styles, {_itemContainer, _titleStyle} from './LanguageItem.style';
 
 const windowWidth = Dimensions.get('window').width;
-const windowHeight = Dimensions.get('window').height;
-
-type CustomStyleProp = StyleProp<ViewStyle> | Array<StyleProp<ViewStyle>>;
-
 interface ILanguageItem {
   item: ILanguagePicker;
   width?: number;
   height?: number;
   isActive: boolean;
   backgroundColor?: string;
+  activeBorderColor?: string;
   textColor?: string;
   itemContainer?: ViewStyle;
   imageComponent?: React.ReactNode | React.ReactNode[];
@@ -42,25 +32,31 @@ const LanguageItem: React.FC<ILanguageItem> = ({
   textColor = '#2F3452',
   imageComponent,
   checkComponent,
+  activeBorderColor = '#504ED9',
   onSelect,
+  ...rest
 }) => {
-  const borderColor = isActive ? '#504ED9' : '#FFFFFF';
-
+  const borderColor = isActive ? activeBorderColor : backgroundColor;
   return (
     <RNBounceable
+      {...rest}
       style={[
         _itemContainer(backgroundColor, borderColor, width, height),
         itemContainer,
       ]}
-      onPress={() => onSelect && onSelect(item)}>
+      onPress={() => onSelect && onSelect(item)}
+    >
       {imageComponent || (
-        <Image source={item.imageSource} style={styles.imageStyle} />
+        <Image {...rest} source={item.imageSource} style={styles.imageStyle} />
       )}
-      <Text style={_titleStyle(textColor)}>{item.title}</Text>
+      <Text {...rest} style={_titleStyle(textColor)}>
+        {item.title}
+      </Text>
       {isActive &&
         (checkComponent || (
           <Image
-            source={require('../assets/check.png')}
+            {...rest}
+            source={require('../local-assets/check.png')}
             style={styles.checkImageStyle}
           />
         ))}