README.md updated && IOS library updated

Author: talut

README.md

@@ -18,6 +18,7 @@ Using `react-native-modal` and `@react-native-community/picker` component for IO
 - disabled & enabled IOS confirm button styles added.
 - Now we can set object array for items or array.
 - IOS part start using hooks
+- confirmButtonStyle & cancelButtonStyle & contentContainerStyle added
 - and a lot of upgrade...
 
 
@@ -57,6 +58,9 @@ react-native link react-native-picker-module
 |items        |array / object array |-                                  |**Yes**    |Android, IOS|
 |title        |string|-                                                 |**No**        |Android, IOS|
 |titleStyle   |object|{}                                                |**No**        |IOS         |
+|confirmButtonStyle   |object|{}                                                |**No**        |IOS         |
+|cancelButtonStyle   |object|{}                                                |**No**        |IOS         |
+|contentContainerStyle   |object|{}                                                |**No**        |IOS         |
 |itemStyle    |object|{}                                                |**No**        |IOS         |
 |cancelButtonTextStyle |object| {}                                      |**No**        |IOS         |
 |confirmButtonEnabledTextStyle|object| {}                               |**No**        |IOS         |
@@ -119,13 +123,22 @@ const App = () => {
         pickerRef={pickerRef}
         value={value}
         title={"Select a language"}
-        items={dataset_2}
-        titleStyle={{ color: "red" }}
-        itemStyle={{ color: "red" }}
+        items={dataset_1}
+        titleStyle={{ color: "white" }}
+        itemStyle={{ color: "white" }}
         selectedColor="#FC0"
-        confirmButtonEnabledTextStyle={{ color: "red" }}
+        confirmButtonEnabledTextStyle={{ color: "white" }}
         confirmButtonDisabledTextStyle={{ color: "grey" }}
-        cancelButtonTextStyle={{ color: "red" }}
+        cancelButtonTextStyle={{ color: "white" }}
+        confirmButtonStyle={{
+          backgroundColor: "rgba(0,0,0,1)",
+        }}
+        cancelButtonStyle={{
+          backgroundColor: "rgba(0,0,0,1)",
+        }}
+        contentContainerStyle={{
+          backgroundColor: "rgba(0,0,0,1)",
+        }}
         onCancel={() => {
           console.log("Cancelled")
         }}

lib/index.ios.js

@@ -12,6 +12,7 @@ const ReactNativePickerModule = ({
   cancelButton,
   confirmButton,
   onCancel,
+  contentContainerStyle,
   titleStyle,
   itemStyle,
   useNativeDriver,
@@ -21,6 +22,8 @@ const ReactNativePickerModule = ({
   backdropColor,
   backdropOpacity,
   selectedColor,
+  confirmButtonStyle,
+  cancelButtonStyle,
 }) => {
   const dismissPress = () => {
     setIsVisible(false)
@@ -46,7 +49,7 @@ const ReactNativePickerModule = ({
       isVisible={isVisible}
       style={{ justifyContent: "flex-end" }}
       hideModalContentWhileAnimating={true}>
-      <View style={styles.content}>
+      <View style={[styles.content, contentContainerStyle]}>
         <View style={styles.titleView}>
           <Text style={[styles.titleText, titleStyle]}>{title}</Text>
         </View>
@@ -61,17 +64,17 @@ const ReactNativePickerModule = ({
                 <Picker.Item
                   color={value === item.value ? selectedColor : undefined}
                   key={"item-" + index}
-                  label={item.label}
-                  value={item.value}
+                  label={item.label.toString()}
+                  value={item.value.toString()}
                 />
               )
             } else {
               return (
                 <Picker.Item
                   color={value === item ? selectedColor : undefined}
                   key={"item-" + index}
-                  label={item}
-                  value={item}
+                  label={item.toString()}
+                  value={item.toString()}
                 />
               )
             }
@@ -84,7 +87,7 @@ const ReactNativePickerModule = ({
             onValueChange(selectedValue)
             setIsVisible(false)
           }}
-          style={styles.confirmButtonView}>
+          style={[styles.confirmButtonView, confirmButtonStyle]}>
           <Text
             style={[
               styles.confirmButtonText,
@@ -95,7 +98,10 @@ const ReactNativePickerModule = ({
         </TouchableOpacity>
       </View>
       <View style={styles.cancelButton}>
-        <TouchableOpacity activeOpacity={0.9} style={styles.cancelButtonView} onPress={dismissPress}>
+        <TouchableOpacity
+          activeOpacity={0.9}
+          style={[styles.cancelButtonView, cancelButtonStyle]}
+          onPress={dismissPress}>
           <Text style={[styles.cancelButtonText, cancelButtonTextStyle]}>{cancelButton}</Text>
         </TouchableOpacity>
       </View>

react-native-picker-module.d.ts

@@ -6,23 +6,26 @@
 import React from "react"
 
 export interface ReactNativePickerModuleProps {
-  value?: string,
+  value?: string
   items: string[]
   title?: string
   pickerRef: any[]
   onValueChange: (value: string) => void
   onCancel?: () => void
   cancelButton?: string
   confirmButton?: string
+  contentContainerStyle?: object
+  confirmButtonStyle?: object
+  cancelButtonStyle?: object
   titleStyle?: object
   itemStyle?: object
   useNativeDriver?: boolean
   confirmButtonDisabledTextStyle?: object
   confirmButtonEnabledTextStyle?: object
-  cancelButtonTextStyle?: object,
-  backdropColor?: string,
-  backdropOpacity?: number,
-  selectedColor?: string,
+  cancelButtonTextStyle?: object
+  backdropColor?: string
+  backdropOpacity?: number
+  selectedColor?: string
 }
 
 export default class ReactNativePickerModule extends React.Component<ReactNativePickerModuleProps> {