feat: added example for other form elements

example/storybook/stories/communityIntegration/ReactHookForm/NumberInput.tsx

@@ -0,0 +1,54 @@
+import {
+  VStack,
+  Button,
+  FormControl,
+  FormLabel,
+  FormErrorMessage,
+  NumberInput,
+  NumberInputField,
+  NumberInputStepper,
+  NumberIncrementStepper,
+  NumberDecrementStepper,
+} from 'native-base';
+import React from 'react';
+import { useForm, Controller } from 'react-hook-form';
+
+interface IFormInput {
+  version: boolean;
+}
+
+export default function () {
+  const { control, handleSubmit, errors } = useForm<IFormInput>();
+  const onSubmit = (data: IFormInput) => {
+    console.log('submiting with ', data);
+  };
+  return (
+    <VStack width="80%" space={4}>
+      <FormControl isRequired isInvalid={'version' in errors}>
+        <FormLabel>Current Native Base Version:</FormLabel>
+        <Controller
+          control={control}
+          render={({ onChange, value }) => (
+            <NumberInput
+              onChange={(value: any) => onChange(value)}
+              defaultValue={value}
+            >
+              <NumberInputField />
+              <NumberInputStepper>
+                <NumberIncrementStepper />
+                <NumberDecrementStepper />
+              </NumberInputStepper>
+            </NumberInput>
+          )}
+          name="version"
+          rules={{ required: 'Field is required' }}
+          defaultValue={3}
+        />
+        <FormErrorMessage>{errors.version?.message}</FormErrorMessage>
+      </FormControl>
+      <Button onPress={handleSubmit(onSubmit)} colorScheme="pink">
+        Submit
+      </Button>
+    </VStack>
+  );
+}

example/storybook/stories/communityIntegration/ReactHookForm/PinInput.tsx

@@ -0,0 +1,46 @@
+import {
+  VStack,
+  Button,
+  FormControl,
+  FormLabel,
+  FormErrorMessage,
+  PinInput,
+  PinInputField,
+} from 'native-base';
+import React from 'react';
+import { useForm, Controller } from 'react-hook-form';
+
+interface IFormInput {
+  otp: string;
+}
+
+export default function () {
+  const { control, handleSubmit, errors } = useForm<IFormInput>();
+  const onSubmit = (data: IFormInput) => {
+    console.log('submiting with ', data);
+  };
+  return (
+    <VStack width="80%" space={4}>
+      <FormControl isRequired isInvalid={'otp' in errors}>
+        <FormLabel>OTP:</FormLabel>
+        <Controller
+          control={control}
+          render={({ onChange, value }) => (
+            <PinInput onChange={(value: any) => onChange(value)} value={value}>
+              <PinInputField />
+              <PinInputField />
+              <PinInputField />
+              <PinInputField />
+            </PinInput>
+          )}
+          name="otp"
+          rules={{ required: 'Field is required', minLength: 4, maxLength: 4 }}
+        />
+        <FormErrorMessage>{errors.otp?.message}</FormErrorMessage>
+      </FormControl>
+      <Button onPress={handleSubmit(onSubmit)} colorScheme="pink">
+        Submit
+      </Button>
+    </VStack>
+  );
+}

example/storybook/stories/communityIntegration/ReactHookForm/WithRadioAndCheckbox.tsx → example/storybook/stories/communityIntegration/ReactHookForm/RadioAndCheckbox.tsx

@@ -1,6 +1,5 @@
 import {
   VStack,
-  Input,
   Button,
   FormControl,
   FormLabel,
@@ -16,7 +15,6 @@ import React from 'react';
 import { useForm, Controller } from 'react-hook-form';
 
 interface IFormInput {
-  name: string;
   hobbies: string;
   gender: number;
 }
@@ -28,24 +26,6 @@ export default function () {
   };
   return (
     <VStack width="80%" space={4}>
-      <FormControl isRequired isInvalid={'name' in errors}>
-        <FormLabel>Name</FormLabel>
-        <Controller
-          control={control}
-          render={({ onChange, onBlur, value }) => (
-            <Input
-              onBlur={onBlur}
-              placeholder="John"
-              onChangeText={(value) => onChange(value)}
-              value={value}
-            />
-          )}
-          name="name"
-          rules={{ required: 'Field is required', minLength: 3 }}
-          defaultValue=""
-        />
-        <FormErrorMessage>{errors.name?.message}</FormErrorMessage>
-      </FormControl>
       <FormControl isRequired isInvalid={'hobbies' in errors}>
         <FormLabel>Hobbies</FormLabel>
         <Controller
@@ -103,11 +83,7 @@ export default function () {
             <RadioGroup
               name="gender"
               flexDirection="row"
-              onChange={(value) => {
-                console.log('gender = ', value);
-
-                onChange(value);
-              }}
+              onChange={(value) => onChange(value)}
             >
               <Radio value="male" colorScheme="blue">
                 <Text mx={2}>Male</Text>

example/storybook/stories/communityIntegration/ReactHookForm/Select.tsx

@@ -0,0 +1,60 @@
+import {
+  VStack,
+  Button,
+  FormControl,
+  FormLabel,
+  FormErrorMessage,
+  Select,
+  Icon,
+} from 'native-base';
+import React from 'react';
+import { useForm, Controller } from 'react-hook-form';
+
+interface IFormInput {
+  language: number;
+}
+
+export default function () {
+  const { control, handleSubmit, errors } = useForm<IFormInput>();
+  const onSubmit = (data: IFormInput) => {
+    console.log('submiting with ', data);
+  };
+  return (
+    <VStack width="80%" space={4}>
+      <FormControl isRequired isInvalid={'language' in errors}>
+        <FormLabel>Fav language:</FormLabel>
+        <Controller
+          control={control}
+          render={({ onChange, value }) => (
+            <Select
+              placeholder="Pick language"
+              selectedValue={value}
+              width={150}
+              onValueChange={(itemValue: string) => {
+                onChange(itemValue);
+              }}
+              selectedItemBg={'teal.400'}
+              dropdownOpenIcon={
+                <Icon name="arrow-drop-up" type="MaterialIcons" size={6} />
+              }
+              dropdownCloseIcon={
+                <Icon name="arrow-drop-down" type="MaterialIcons" size={6} />
+              }
+            >
+              <Select.Item label="JavaScript" value="js" />
+              <Select.Item label="TypeScript" value="ts" />
+              <Select.Item label="Java" value="java" />
+            </Select>
+          )}
+          name="language"
+          rules={{ required: 'Field is required' }}
+          defaultValue="js"
+        />
+        <FormErrorMessage>{errors.language?.message}</FormErrorMessage>
+      </FormControl>
+      <Button onPress={handleSubmit(onSubmit)} colorScheme="pink">
+        Submit
+      </Button>
+    </VStack>
+  );
+}

example/storybook/stories/communityIntegration/ReactHookForm/Slider.tsx

@@ -0,0 +1,49 @@
+import {
+  VStack,
+  Button,
+  FormControl,
+  FormLabel,
+  FormErrorMessage,
+  Slider,
+  SliderTrack,
+  SliderFilledTrack,
+  SliderThumb,
+} from 'native-base';
+import React from 'react';
+import { useForm, Controller } from 'react-hook-form';
+
+interface IFormInput {
+  like: number;
+}
+
+export default function () {
+  const { control, handleSubmit, errors } = useForm<IFormInput>();
+  const onSubmit = (data: IFormInput) => {
+    console.log('submiting with ', data);
+  };
+  return (
+    <VStack width="80%" space={4}>
+      <FormControl isRequired isInvalid={'like' in errors}>
+        <FormLabel>Amount you like NativeBase</FormLabel>
+        <Controller
+          control={control}
+          render={({ onChange, value }) => (
+            <Slider onChange={(value) => onChange(value)} defaultValue={value}>
+              <SliderTrack>
+                <SliderFilledTrack />
+              </SliderTrack>
+              <SliderThumb />
+            </Slider>
+          )}
+          name="like"
+          rules={{ required: 'Field is required', minLength: 3 }}
+          defaultValue={100}
+        />
+        <FormErrorMessage>{errors.like?.message}</FormErrorMessage>
+      </FormControl>
+      <Button onPress={handleSubmit(onSubmit)} colorScheme="pink">
+        Submit
+      </Button>
+    </VStack>
+  );
+}

example/storybook/stories/communityIntegration/ReactHookForm/Switch.tsx

@@ -0,0 +1,43 @@
+import {
+  VStack,
+  Button,
+  FormControl,
+  FormLabel,
+  FormErrorMessage,
+  Switch,
+} from 'native-base';
+import React from 'react';
+import { useForm, Controller } from 'react-hook-form';
+
+interface IFormInput {
+  rememberMe: boolean;
+}
+
+export default function () {
+  const { control, handleSubmit, errors } = useForm<IFormInput>();
+  const onSubmit = (data: IFormInput) => {
+    console.log('submiting with ', data);
+  };
+  return (
+    <VStack width="80%" space={4}>
+      <FormControl isInvalid={'rememberMe' in errors}>
+        <FormLabel>Remenber me:</FormLabel>
+        <Controller
+          control={control}
+          render={({ onChange, value }) => (
+            <Switch
+              onToggle={(value: boolean) => onChange(value)}
+              isChecked={value}
+            />
+          )}
+          name="rememberMe"
+          defaultValue={true}
+        />
+        <FormErrorMessage>{errors.rememberMe?.message}</FormErrorMessage>
+      </FormControl>
+      <Button onPress={handleSubmit(onSubmit)} colorScheme="pink">
+        Submit
+      </Button>
+    </VStack>
+  );
+}

example/storybook/stories/communityIntegration/ReactHookForm/Textarea.tsx

@@ -0,0 +1,45 @@
+import {
+  VStack,
+  Button,
+  FormControl,
+  FormLabel,
+  FormErrorMessage,
+  TextArea,
+} from 'native-base';
+import React from 'react';
+import { useForm, Controller } from 'react-hook-form';
+
+interface IFormInput {
+  thought: string;
+}
+
+export default function () {
+  const { control, handleSubmit, errors } = useForm<IFormInput>();
+  const onSubmit = (data: IFormInput) => {
+    console.log('submiting with ', data);
+  };
+  return (
+    <VStack width="80%" space={4}>
+      <FormControl isRequired isInvalid={'thought' in errors}>
+        <FormLabel>What do you think?</FormLabel>
+        <Controller
+          control={control}
+          render={({ onChange, value }) => (
+            <TextArea
+              placeholder="TextArea"
+              onChangeText={(value) => onChange(value)}
+              defaultValue={value}
+            />
+          )}
+          name="thought"
+          rules={{ required: 'Field is required', minLength: 3 }}
+          defaultValue="I love Nativebase."
+        />
+        <FormErrorMessage>{errors.thought?.message}</FormErrorMessage>
+      </FormControl>
+      <Button onPress={handleSubmit(onSubmit)} colorScheme="pink">
+        Submit
+      </Button>
+    </VStack>
+  );
+}

example/storybook/stories/communityIntegration/ReactHookForm/Basic.tsx → example/storybook/stories/communityIntegration/ReactHookForm/Usage.tsx

@@ -35,7 +35,7 @@ export default function () {
             />
           )}
           name="firstName"
-          rules={{ required: 'Field is required' }}
+          rules={{ required: 'Field is required', minLength: 3 }}
           defaultValue=""
         />
         <FormErrorMessage>{errors.firstName?.message}</FormErrorMessage>

example/storybook/stories/communityIntegration/ReactHookForm/index.tsx

@@ -2,11 +2,23 @@ import React from 'react';
 import { storiesOf } from '@storybook/react-native';
 import { withKnobs } from '@storybook/addon-knobs';
 import Wrapper from './../../components/Wrapper';
-import WithRadioAndCheckbox from './WithRadioAndCheckbox';
-import Basic from './Basic';
+import RadioAndCheckbox from './RadioAndCheckbox';
+import PinInput from './PinInput';
+import Textarea from './Textarea';
+import Select from './Select';
+import NumberInput from './NumberInput';
+import Switch from './Switch';
+import Slider from './Slider';
+import Usage from './Usage';
 
 storiesOf('ReactHookForm', module)
   .addDecorator(withKnobs)
   .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)
-  .add('Basic', () => <Basic />)
-  .add('With Radio And Checkbox', () => <WithRadioAndCheckbox />);
+  .add('Usage', () => <Usage />)
+  .add('Radio And Checkbox', () => <RadioAndCheckbox />)
+  .add('Select', () => <Select />)
+  .add('Slider', () => <Slider />)
+  .add('Textarea', () => <Textarea />)
+  .add('Switch', () => <Switch />)
+  .add('NumberInput', () => <NumberInput />)
+  .add('PinInput', () => <PinInput />);