Merge pull request #20 from AbdullahQureshi1080/component/form-dropdo…

…wn-picker Component/form-dropdown-picker
AbdullahQureshi1080 · Apr 9, 2023 · 8a3170f · 8a3170f
2 parents b41e4aa + b4e9bbc
commit 8a3170f
Show file tree

Hide file tree

Showing 17 changed files with 353 additions and 25 deletions.
diff --git a/Readme.md b/Readme.md
@@ -51,7 +51,7 @@ npm i react-native-date-picker
 npm i react-native-image-picker
 ``````
 
-Note: To use  ```<FormDateSelector/>``` or ```<FormImageSelector/>``` you must have to install either of the dependent libraries, you can skip it if you do not need the image picker or the date picker, but it would be great to install these so that you do not run into issues later. 
+Note: To use  ```<FormDate/>``` or ```<FormImage/>``` you must have to install either of the dependent libraries, you can skip it if you do not need the image picker or the date picker, but it would be great to install these so that you do not run into issues later. 
 
 
 <br/>
@@ -171,7 +171,7 @@ export default App;
     <br/>
 
 
-* ### **FormDateSelector**
+* ### **FormDate**
 
 
   | Property | Type | Description | Required 
@@ -185,7 +185,7 @@ export default App;
  
 <br/>
 
-* ### **FormImageSelector**
+* ### **FormImage**
 
 
   | Property | Type | Description | Required 
@@ -197,6 +197,22 @@ export default App;
 
  
  
+<br/>
+
+
+* ### **FormDropdown**
+
+
+  | Property | Type | Description | Required 
+  | ----------- | :----: |:-------------- | :------------|
+  | name  | ```String```  |  The name of the form field, it could be any string value.             | Yes
+  | items  | ```Array```  |  The items for the dropdown picker          | Yes
+  
+
+  ``` More <FormDropdown/> ``` [props](docs/components.md)
+
+ 
+ 
 <br/>
 
 * ### **Submit Button**

diff --git a/docs/components.md b/docs/components.md
@@ -28,7 +28,7 @@
 
 <br/>
 
-## **Form Date Selector**
+## **Form Date**
 | Property | Type | Description | Required 
 | ----------- | :----: |:-------------- | :------------|
 | name  | ```String```  | The name of the form field, it could be any string value.            | Yes
@@ -39,7 +39,7 @@
 
 <br/>
 
-## **Form Image Selector**
+## **Form Image**
 | Property | Type | Description | Required 
 | ----------- | :----: |:-------------- | :------------|
 | name  | ```String```  | The name of the form field, it could be any string value.            | Yes
@@ -54,6 +54,23 @@
 **Note:** All the [image picker properties](https://github.com/react-native-image-picker/react-native-image-picker) are also supported such as maxWidth, maxHeight, quality etc, 
 
 
+<br/>
+
+
+## **FormDropdown**
+
+
+| Property | Type | Description | Required 
+| ----------- | :----: |:-------------- | :------------|
+| name  | ```String```  |  The name of the form field, it could be any string value.             | Yes
+| items  | ```Array```  |  The items for the dropdown picker          | Yes
+| onChange  | ```callback function```  | This function can retrive the value from the dropdown picker whenever there is a new value | No
+| onSelect  | ```callback function```  | This function can retrive the value from the dropdown picker whenever there is a new value, this is used internally for updating form-state | No
+| dropDownContainerStyle  | ```Object```  | The styles object for dropdown container  | No
+| listItemContainerStyle  | ```Object```  | The styles object for list item container  | No
+| style  | ```Object```  | The styles object for dropdown style  | No
+| dropDownPickerProps  | ```Object```  | The dropdown [props](https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/usage) availble for the picker from the picker library | No
+
 <br/>
 
 ## **Submit Button**

diff --git a/example/App.tsx b/example/App.tsx
@@ -32,6 +32,7 @@ import {
   ImagePickerEnums,
   FormDate,
   FormImage,
+  FormDropdown,
 } from '@superforms/superforms-rn';
 
 const validationSchema = Yup.object().shape({
@@ -46,6 +47,7 @@ const validationSchema = Yup.object().shape({
     .label('Birthdate')
     .nullable(),
   imagepicker: Yup.string().required(),
+  dropdown: Yup.object().nullable().required(),
 });
 
 const App = () => {
@@ -60,6 +62,7 @@ const App = () => {
 
   useEffect(() => {
     const valuesFromAPI = {
+      dropdown: {},
       email: 'tonyAlveraz@gmail.com',
       fullName: 'Tony Alveraz',
       password: 'Test12345@',
@@ -75,9 +78,17 @@ const App = () => {
   return (
     <SafeAreaView style={{backgroundColor: '#f8f8f8', flex: 1}}>
       <StatusBar />
-      <ScrollView contentInsetAdjustmentBehavior="automatic">
+      <ScrollView
+        contentInsetAdjustmentBehavior="automatic"
+        style={{height: 600}}>
         <Text style={{color: '#000'}}>renders:{renders}</Text>
-        <View style={{marginTop: 20, marginBottom: 20}}>
+        <View
+          style={{
+            flex: 1,
+            marginTop: 20,
+            marginBottom: 20,
+            // height: 600,
+          }}>
           <Form
             initialValues={values}
             validationSchema={validationSchema}
@@ -101,6 +112,26 @@ const App = () => {
               // placeholderImageStyles={{tintColor: 'red'}}
               imageUri={values.imagepicker}
             />
+            <FormDropdown
+              name="dropdown"
+              label="Dropdown"
+              items={[
+                {label: 'Apple', value: 'apple'},
+                {label: 'Banana', value: 'banana'},
+                {label: 'Orange', value: 'orange'},
+                {label: 'Carrot', value: 'carrot'},
+                {label: 'Dates', value: 'dates'},
+                {label: 'Strawberry', value: 'strawberry'},
+                {label: 'fd', value: 'ds'},
+                {label: 'sada', value: 'sad'},
+                {label: 'ads', value: 'ads'},
+                {label: 'dad', value: 'dsffdsf'},
+                {label: 'asd', value: 'asd'},
+                {label: 'ad', value: 'dsf'},
+              ]}
+              style={{width: '100%'}}
+
+            />
             <SubmitButton name="Login" />
           </Form>
         </View>

diff --git a/example/package-lock.json b/example/package-lock.json
diff --git a/example/package.json b/example/package.json
@@ -30,6 +30,7 @@
     "jest": "^26.6.3",
     "metro-react-native-babel-preset": "0.72.3",
     "react-native-date-picker": "^4.2.5",
+    "react-native-dropdown-picker": "^5.4.6",
     "react-native-image-picker": "^4.10.0",
     "react-test-renderer": "18.1.0",
     "typescript": "^4.8.3"

diff --git a/example/yarn.lock b/example/yarn.lock
@@ -1626,10 +1626,11 @@
 "@superforms/superforms-rn@file:../superforms-superforms-rn-0.0.0-development.tgz":
   version "0.0.0-development"
   resolved "file:../superforms-superforms-rn-0.0.0-development.tgz"
-  integrity sha512-ZcQiPJTqvhog2yxc/QsV0aRXw1KJQLy+UN0F4DUkKkX3/KDTBTeG0ikPL0Xv//xnvXIWyXNoR9dBK+b7mcgg2w==
+  integrity sha512-DTcNX0slaJfpjCIIFwAWMbd9NdMNlqEQCOQuupzCzHYGi6eAf89VAYiOvfQ+BKigNSgAlniOGQDddg+Cc29h7w==
   dependencies:
     formik "^2.2.9"
     moment "^2.29.4"
+    react-native-dropdown-picker ">=5.4.4"
     yup "^0.32.11"
 
 "@tootallnate/once@1":
@@ -3632,11 +3633,6 @@ fs.realpath@^1.0.0:
   resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
-fsevents@^2.1.2:
-  version "2.3.2"
-  resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz"
-  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
-
 function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"
@@ -6129,6 +6125,11 @@ react-native-date-picker@^4.2.5, react-native-date-picker@>=4.2.5:
   dependencies:
     prop-types "^15.8.1"
 
+react-native-dropdown-picker@^5.4.6, react-native-dropdown-picker@>=5.4.4:
+  version "5.4.6"
+  resolved "https://registry.npmjs.org/react-native-dropdown-picker/-/react-native-dropdown-picker-5.4.6.tgz"
+  integrity sha512-T1XBHbE++M6aRU3wFYw3MvcOuabhWZ29RK/Ivdls2r1ZkZ62iEBZknLUPeVLMX3x6iUxj4Zgr3X2DGlEGXeHsA==
+
 react-native-gradle-plugin@^0.70.3:
   version "0.70.3"
   resolved "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.70.3.tgz"

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,7 +16,8 @@
   "dependencies": {
     "formik": "^2.2.9",
     "moment": "^2.29.4",
-    "yup": "^0.32.11"
+    "yup": "^0.32.11",
+    "react-native-dropdown-picker": ">=5.4.4"
   },
   "peerDependencies": {
     "react": ">=16.13.1",