Merge pull request #23 from SimformSolutionsPvtLtd/develop

Release v0.0.3

Author: mukesh-simform

README.md

@@ -2,7 +2,7 @@
 
 # react-native-country-code-select
 
-[![npm version](https://img.shields.io/badge/npm%20package-0.0.2-orange)](https://www.npmjs.org/package/react-native-country-code-select) [![Android](https://img.shields.io/badge/Platform-Android-green?logo=android)](https://www.android.com) [![iOS](https://img.shields.io/badge/Platform-iOS-green?logo=apple)](https://developer.apple.com/ios) [![MIT](https://img.shields.io/badge/License-MIT-green)](https://opensource.org/licenses/MIT)
+[![npm version](https://img.shields.io/badge/npm%20package-0.0.3-orange)](https://www.npmjs.org/package/react-native-country-code-select) [![Android](https://img.shields.io/badge/Platform-Android-green?logo=android)](https://www.android.com) [![iOS](https://img.shields.io/badge/Platform-iOS-green?logo=apple)](https://developer.apple.com/ios) [![MIT](https://img.shields.io/badge/License-MIT-green)](https://opensource.org/licenses/MIT)
 
 ---
 
@@ -71,6 +71,14 @@ export default const App = () => {
 
 ---
 
+## Compatibility
+
+---
+
+Only supports `react-native` `0.62+`
+
+---
+
 ## CountryPicker
 
 #### 🎬 Preview
@@ -210,6 +218,8 @@ const styles = StyleSheet.create({
 > | renderCustomEmptyComponent    |                   -                   | function            | Render custom component when there's no search result found |
 > | customCloseButton             |                   -                   | function            | Render custom modal close button                            |
 > | renderSearchInputClear        |                   -                   | function            | Render custom cancel image in search input                  |
+> | handleStyle                   |                  {}                   | ViewStyle           | View style to be applied to the handle bar component        |
+> | handleComponent               |                   -                   | function            | Render custom handle bar component                          |
 
 ---
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-country-code-select",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "React Native component to select a country code",
   "homepage": "https://github.com/SimformSolutionsPvtLtd/react-native-country-code-select#readme",
   "main": "lib/index.js",

src/components/CountryList/styles.ts

@@ -14,8 +14,8 @@ export default StyleSheet.create({
   },
   emptyContainer: {
     flex: 1,
-    justifyContent: 'center',
     alignItems: 'center',
+    marginTop: verticalScale(90),
   },
   emptyText: {
     fontSize: moderateScale(18),

src/components/CountryPickerModal/CountryPickerModal.tsx

@@ -39,6 +39,8 @@ export const CountryPickerModal = ({
   renderCustomEmptyComponent,
   customCloseButton,
   renderSearchInputClear,
+  handleStyle = {},
+  handleComponent,
 }: CountryPickerModalProps) => {
   const [countries, setCountries] = useState<Country[]>([]);
   const [filterString, setFilterString] = useState<string>('');
@@ -60,9 +62,10 @@ export const CountryPickerModal = ({
       setFilterString('');
     }
   }, [isVisible]);
-
   return (
-    <CustomModal {...{ onClose, modalContainerStyle }}>
+    <CustomModal
+      {...{ onClose, modalContainerStyle, handleStyle, handleComponent }}
+    >
       <SafeAreaView style={[styles.container, modalContentStyle]}>
         <Header
           onClose={onClose}

src/components/CountryPickerModal/types.ts

@@ -36,6 +36,8 @@ export interface CountryPickerModalAdditionalProps {
   renderCustomEmptyComponent?: () => JSX.Element;
   customCloseButton?: () => JSX.Element;
   renderSearchInputClear?: ({ setFilterString }: FunctionProps) => JSX.Element;
+  handleStyle?: StyleProp<ViewStyle>;
+  handleComponent?: () => JSX.Element;
 }
 
 export interface CountryPickerModalProps

src/components/CustomModal/CustomModal.tsx

@@ -12,6 +12,8 @@ const CustomModal = ({
   children,
   onClose,
   modalContainerStyle,
+  handleStyle,
+  handleComponent,
 }: CustomModalProps) => {
   const { gestureHandler, animatedBottomStyle, toggleModal } = useCustomModal({
     onClose,
@@ -32,8 +34,9 @@ const CustomModal = ({
 
   return (
     <GestureDetector gesture={gestureHandler}>
-      <Animated.View style={[topViewStyles, animatedBottomStyle]}>
-        <View style={styles.line} />
+      <Animated.View style={[animatedBottomStyle, topViewStyles]}>
+        {handleComponent && handleComponent()}
+        {!handleComponent && <View style={[styles.line, handleStyle]} />}
         {children}
       </Animated.View>
     </GestureDetector>

src/components/CustomModal/types.ts

@@ -7,6 +7,8 @@ export interface onCloseModalProps {
 export interface CustomModalProps extends onCloseModalProps {
   children: React.ReactNode;
   modalContainerStyle?: StyleProp<ViewStyle>;
+  handleStyle?: StyleProp<ViewStyle>;
+  handleComponent?: () => JSX.Element;
 }
 export interface CustomModalRefProps {
   toggleModal: (isVisible: boolean) => void;

src/components/Header/styles.ts

@@ -10,7 +10,6 @@ export default StyleSheet.create({
   },
   headerContainer: {
     flexDirection: 'row',
-    height: verticalScale(55),
   },
   headerTitleContainer: {
     flex: 1,