diff --git a/assets/logo.png b/assets/logo.png index 21c7af0..dd84184 100644 Binary files a/assets/logo.png and b/assets/logo.png differ diff --git a/example/lib/LanguagePicker.style.ts b/example/lib/LanguagePicker.style.ts deleted file mode 100644 index 63bedc9..0000000 --- a/example/lib/LanguagePicker.style.ts +++ /dev/null @@ -1,11 +0,0 @@ -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({}); diff --git a/example/lib/LanguagePicker.tsx b/example/lib/LanguagePicker.tsx deleted file mode 100644 index 0db6986..0000000 --- a/example/lib/LanguagePicker.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import React, {useState} from 'react'; -import {Dimensions, FlatList, ViewStyle} from 'react-native'; -/** - * ? Local Imports - */ -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; - language?: string; -} - -interface ILanguagePickerProps { - data: ILanguagePicker[]; - flatListStyle?: ViewStyle; - containerWidth?: number; - containerHeight?: number; - initialIndex?: number; - onSelect?: (selectedItem: ILanguagePicker) => void; -} - -const LanguagePicker: React.FC = ({ - data, - flatListStyle, - initialIndex = -1, - containerWidth = windowWidth * 0.9, - containerHeight = windowHeight * 0.7, - onSelect, - ...rest -}) => { - const [selectedItem, setSelectedItem] = useState( - data[initialIndex], - ); - - const handleOnSelectItem = (item: ILanguagePicker) => { - setSelectedItem(item); - onSelect && onSelect(item); - }; - - const renderItem = (item: ILanguagePicker) => ( - - ); - - return ( - renderItem(item)} - keyExtractor={item => item.title} - /> - ); -}; - -export default LanguagePicker; diff --git a/example/lib/language-item/LanguageItem.style.ts b/example/lib/language-item/LanguageItem.style.ts deleted file mode 100644 index 50b3e3b..0000000 --- a/example/lib/language-item/LanguageItem.style.ts +++ /dev/null @@ -1,41 +0,0 @@ -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, - }, -}); diff --git a/example/lib/language-item/LanguageItem.tsx b/example/lib/language-item/LanguageItem.tsx deleted file mode 100644 index 344f504..0000000 --- a/example/lib/language-item/LanguageItem.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import RNBounceable from '@freakycoder/react-native-bounceable'; -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; -interface ILanguageItem { - item: ILanguagePicker; - width?: number; - height?: number; - isActive: boolean; - backgroundColor?: string; - activeBorderColor?: string; - textColor?: string; - itemContainer?: ViewStyle; - imageComponent?: React.ReactNode | React.ReactNode[]; - checkComponent?: React.ReactNode | React.ReactNode[]; - onSelect?: (selectedItem: ILanguagePicker) => void; -} - -const LanguageItem: React.FC = ({ - itemContainer, - item, - width = windowWidth * 0.9, - height = 80, - isActive, - backgroundColor = '#FFFFFF', - textColor = '#2F3452', - imageComponent, - checkComponent, - activeBorderColor = '#504ED9', - onSelect, - ...rest -}) => { - const borderColor = isActive ? activeBorderColor : backgroundColor; - return ( - onSelect && onSelect(item)} - > - {imageComponent || ( - - )} - - {item.title} - - {isActive && - (checkComponent || ( - - ))} - - ); -}; - -export default LanguageItem; diff --git a/example/lib/local-assets/america.png b/example/lib/local-assets/america.png deleted file mode 100644 index a064228..0000000 Binary files a/example/lib/local-assets/america.png and /dev/null differ diff --git a/example/lib/local-assets/check.png b/example/lib/local-assets/check.png deleted file mode 100644 index cda239b..0000000 Binary files a/example/lib/local-assets/check.png and /dev/null differ diff --git a/example/lib/local-assets/germany.png b/example/lib/local-assets/germany.png deleted file mode 100644 index 73e4764..0000000 Binary files a/example/lib/local-assets/germany.png and /dev/null differ diff --git a/example/lib/local-assets/italy.png b/example/lib/local-assets/italy.png deleted file mode 100644 index ee8c5ad..0000000 Binary files a/example/lib/local-assets/italy.png and /dev/null differ diff --git a/example/lib/local-assets/japan.png b/example/lib/local-assets/japan.png deleted file mode 100644 index b8b7f75..0000000 Binary files a/example/lib/local-assets/japan.png and /dev/null differ diff --git a/example/lib/local-assets/sweden.png b/example/lib/local-assets/sweden.png deleted file mode 100644 index 45d7a69..0000000 Binary files a/example/lib/local-assets/sweden.png and /dev/null differ diff --git a/example/lib/local-assets/turkey.png b/example/lib/local-assets/turkey.png deleted file mode 100644 index 7374b46..0000000 Binary files a/example/lib/local-assets/turkey.png and /dev/null differ diff --git a/lib/LanguagePicker.tsx b/lib/LanguagePicker.tsx index 509f6c8..3b0e77a 100644 --- a/lib/LanguagePicker.tsx +++ b/lib/LanguagePicker.tsx @@ -47,12 +47,12 @@ const LanguagePicker: React.FC = ({ onSelect={handleOnSelectItem} isActive={selectedItem === item} item={item} - {...rest} /> ); return ( renderItem(item)} diff --git a/lib/language-item/LanguageItem.style.ts b/lib/language-item/LanguageItem.style.ts index 393f2bb..b23d0be 100644 --- a/lib/language-item/LanguageItem.style.ts +++ b/lib/language-item/LanguageItem.style.ts @@ -37,5 +37,6 @@ export default StyleSheet.create({ right: 24, width: 20, height: 20, + color: "red", }, }); diff --git a/lib/language-item/LanguageItem.tsx b/lib/language-item/LanguageItem.tsx index 9703829..03095ff 100644 --- a/lib/language-item/LanguageItem.tsx +++ b/lib/language-item/LanguageItem.tsx @@ -1,10 +1,16 @@ -import RNBounceable from "@freakycoder/react-native-bounceable"; import React from "react"; -import { Dimensions, Image, Text, ViewStyle } from "react-native"; -import { ILanguagePicker } from "../LanguagePicker"; +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; @@ -19,6 +25,7 @@ interface ILanguageItem { itemContainer?: ViewStyle; imageComponent?: React.ReactNode | React.ReactNode[]; checkComponent?: React.ReactNode | React.ReactNode[]; + rightImageSource?: ImageSourcePropType; onSelect?: (selectedItem: ILanguagePicker) => void; } @@ -33,13 +40,12 @@ const LanguageItem: React.FC = ({ imageComponent, checkComponent, activeBorderColor = "#504ED9", + rightImageSource, onSelect, - ...rest }) => { const borderColor = isActive ? activeBorderColor : backgroundColor; return ( = ({ onPress={() => onSelect && onSelect(item)} > {imageComponent || ( - + )} - - {item.title} - + {item.title} {isActive && (checkComponent || ( ))} diff --git a/package.json b/package.json index d1e9644..d746659 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-language-select", - "version": "0.0.8", + "version": "0.0.9", "description": "Useful and customizable language picker", "main": "./build/dist/LanguagePicker.js", "repository": "git@github.com:sevvaleygul0/react-native-language-picker.git",