@manatsa/react-native-formik-yup-wizard

��# I n t r o d u c t i o n I s e a r c h e d a n d s e a r c h e d b u t c o u l d n o t f i n d i t . . ! ! I w a s b u s y l o o k i n g f o r a r e a c t n a t i v e p a c k a g e t h a t c o u l d h e l p w i t h c r e a t i n g a m u l t i - s t e p f o r m i k a n d y u p f o r m s b u t i c o u l d n o t f i n d o n e . O n c e i w a s c o n v i n c e d i c o u l d n o t f i n d o n e , i s o u g h t t o c r e a t e i t a n d m a k e i t a v a i l a b l e t o o t h e r s s o t h a t o t h e r s a f t e r m e c o u l d h a v e t h e i r l i v e s e a s i e r . S o i c r e a t e d t h i s l i b r a r y o u t o f n e e d , s h o u l d y o u f i n d i t u s e f u l , t h a t w i l l p u t a s m i l e o n m y f a c e . . . # I n s t a l l a t i o n ` n p m i @ m a n a / r e a c t - n a t i v e - f o r m i k - y u p - w i z a r d - - s a v e ` # U s a g e T h e p a c k a g e u s e s i t s o w n i n p u t c o m p o n e n t s , a l s o i n c l u d e d i n t h e p a c k a g e . T h e a v a i l e d i n p u t c o m p o n e n t s a r e : t h e c o m p r e h e n s i v e l i s t o f a v a i l a b l e i n p u t c o m p o n e n t s a r e l i s t e d b e l o w : - * * A p p F o r m * * - t h e f o r m c o m p o n e n t t h a t w r a p s a l l o t h e r i n p u t c o m p o n e n t s P r o p s a r e : 1 . _ i n i t i a l V a l u e s _ - t h e i n i t i a l v a l u e s o f t h e f o r m , p a s s e d i n t e r n a l l y b y t h e F o r m i k S t e p p e r c o m p o n e n t . 2 . _ v a l i d a t i o n S c h e m a _ - Y u p v a l i d a t i o n S c h e m a p a s s e d i n t e r n a l l y b y t h e F o r m i k S t e p p e r C o m p o n e n t . 3 . _ o n S u b m i t _ - T h e f u n c t i o n t o e x e c u t e w h e n n e x t / s a v e b u t t o n i s c l i c k e d , s u p p l i e d i n t e r n a l l y b y t h e F o r m i k S t e p p e r c o m p o n e n t . - * * A p p F o r m P i c k e r * * - s i n g l e s e l e c t p i c k e r c o m p o n e n t . I t s p r o p s a r e : 1 . _ n a m e _ \ * - t h e n a m e o f t h e v a r i a b l e t h a t h o l d s s e l e c t e d o p t i o n , e x a c t l y a s i s i n i n i t i a l V a l u e s a r r a y . 2 . _ l a b e l _ \ * - t h e p r o m p t d e s c r i b i n g w h a t t h e u s e r i s e x p e d t o d o . 3 . _ i t e m s _ \ * - t h e i t e m s t o d i s p l a y o n t h e p i c k e r . s h o u l d b e i n t h e f o r m a t ` { l a b e l : x , v a l u e : y } ` w h e r e l a b e l i s t h e d a t a s h o w n t o u s e r a n d v a l u e i s t h e d a t a r e t u r n o n s e l e c t i o n . 4 . _ i c o n _ - t h e n a m e o f t h e i c o n t o s h o w n e x t t o t h e p i c k e r _ ( o p t i o n a l , u s e s M a t e r i a l I c o n s f r o m r e a c t - n a t i v e - v e c t o r - i c o n s ) _ . 5 . _ c a l l b a c k _ - a c a l l b a c k t o g e t t h e v a l u e o f s e l e c t e d o p t i o n f o r u s e l i k e t o s h o w o r h i d e o t h e r c o m p o n e n t s _ ( o p t i o n a l ) _ - * * A p p F o r m N u m b e r I n p u t * * - n u m b e r i n p u t c o m p o n e n t . I t s p r o p s a r e : 1 . _ n a m e _ \ * - t h e n a m e o f t h e v a r i a b l e t h a t h o l d s s e l e c t e d o p t i o n , e x a c t l y a s i s i n i n i t i a l V a l u e s a r r a y . 2 . _ l a b e l _ \ * - t h e p r o m p t d e s c r i b i n g w h a t t h e u s e r i s e x p e d t o d o . - * * A p p F o r m F i e l d * * - s i m p l e t e x t i n p u t c o m p o n e n t , w r a p s a r o u n d r e a c t n a t i v e ' s ` T e x t I n p u t ` c o m p o n e n t . A l l t h e p r o p s f o r ` T e x t I n p u t ` c o m p o n e n t c a n b e p a s s e d t o i t . S p e c i f i c p r o p s r e q u i r e d a r e : 1 . _ n a m e _ \ * - t h e n a m e o f t h e v a r i a b l e t h a t h o l d s t y p e d d a t a , e x a c t l y a s i s i n i n i t i a l V a l u e s a r r a y . 1 . _ l a b e l _ \ * - t h e p r o m p t d e s c r i b i n g w h a t t h e u s e r i s e x p e d t o d o . - * * A p p S u b m i t B u t t o n S m a l l * * - a s m a l l s u b m i t b u t t o n c o m p o n e n t u s e d t o m o v e t o t h e n e x t s t e p o r s u b m i t t h e w h o l e f o r m . I t s p r o p s a r e : 1 . _ t i t l e _ - t h e t i t l e o f t h e b u t t o n 2 . _ b a c k g r o u n d C o l o r _ - s t r i n g r e p r e s e n t i n g a b a c k g r o u n d c o l o r e g . ' # e e e ' o r ' g r e e n ' _ ( o p t i o n a l ) _ . 3 . _ t e x t C o l o r _ - t e x t c o l o r s t r i n g _ ( o p t i o n a l ) _ . 4 . _ t e x t S i z e _ - t e x t s i z e a s a n u m b e r _ ( o p t i o n a l ) _ ; - * * A p p F o r m C h e c k B o x e s * * - c o m p o n e n t f o r m u l t i - s e l e c t c h e c k b o x e s . I t s p r o p s a r e : 1 . _ n a m e _ \ * - t h e n a m e o f t h e v a r i a b l e t h a t h o l d s s e l e c t e d o p t i o n s , e x a c t l y a s i s i n i n i t i a l V a l u e s a r r a y . 2 . _ l a b e l _ \ * - t h e p r o m p t d e s c r i b i n g w h a t t h e u s e r i s e x p e d t o d o . 3 . _ i t e m s _ \ * - t h e i t e m s t o d i s p l a y o n t h e p i c k e r . s h o u l d b e i n t h e f o r m a t ` { l a b e l : x , v a l u e : y } ` w h e r e l a b e l i s t h e d a t a s h o w n t o u s e r a n d v a l u e i s t h e d a t a r e t u r n o n s e l e c t i o n . 4 . _ b o x C o l o r _ - c o l o r f o r t h e b o x o n e a c h c h e c k b o x _ ( o p t i o n a l ) _ 5 . _ c h e c k e d C o l o r _ - c o l o r s t r i n g f o r t h e c h e c k m a r k w h e n c h e c k b o x i s s e l e c t e d . _ ( o p t i o n a l ) _ 6 . _ u n C h e c k e d C o l o r _ - c o l o r s t r i n g f o r w h e n t h e c h e c k b o x i s n o t s e l e c t e d . _ ( o p t i o n a l ) _ 7 . _ b o x S i z e _ - t h e s i z e o f e a c h s i z e o f t h e c h e c k b o x b o x , d e f a u l t i s 3 0 d e n s i t y p i x e l s . _ ( o p t i o n a l ) _ 8 . _ l a b e l P o s i t i o n _ - d e t e r m i n e s w h e t h e r t o p l a c e l a b e l b e f o r e o r a f t e r e a c h c h e c k b o x b o x . I t s s h o u l d b e e i t h e r ` s t a r t ` o r ` e n d ` . - * * A p p F o r m R a d i o * * - c o m p o n e n t f o r r a d i o b u t t o n s . I t s p r o p s a r e : 1 . _ n a m e _ \ * - t h e n a m e o f t h e v a r i a b l e t h a t h o l d s s e l e c t e d o p t i o n , e x a c t l y a s i s i n i n i t i a l V a l u e s a r r a y . 2 . _ l a b e l _ \ * - t h e p r o m p t d e s c r i b i n g w h a t t h e u s e r i s e x p e d t o d o . 3 . _ i t e m s _ \ * - t h e i t e m s t o d i s p l a y o n t h e p i c k e r . s h o u l d b e i n t h e f o r m a t ` { l a b e l : x , v a l u e : y } ` w h e r e l a b e l i s t h e d a t a s h o w n t o u s e r a n d v a l u e i s t h e d a t a r e t u r n o n s e l e c t i o n . - * * A p p F o r m S w i t c h * * - t h e w r a p p e r c o m p o n e n t f o r a c u s t o m m a d e s w i t c h . I t s p r o p s a r e : 1 . _ n a m e _ \ * - t h e n a m e o f t h e v a r i a b l e t h a t h o l d s s e l e c t e d o p t i o n s , e x a c t l y a s i s i n i n i t i a l V a l u e s a r r a y . 2 . _ l a b e l _ \ * - t h e p r o m p t d e s c r i b i n g w h a t t h e u s e r i s e x p e d t o d o . - * * A p p S u b m i t B u t t o n * * - A s u b m i t b u t t o n c o m p o n e n t t h a t t a k e s 1 0 0 % w i d t h . i t s p r o p s a r e t h e s a m e a s t h e * * A p p S u b m i t B u t t o n S m a l l . * * - * * A p p F o r m S i n g l e C h e c k B o x * * - t h e c u s t o m c h e c k b o x c o m p o n e n t w r a p p e r . I t s p r o p s a r e : 1 . _ n a m e _ \ * - t h e n a m e o f t h e v a r i a b l e t h a t h o l d s t h e v a l u e , e x a c t l y a s i s i n i n i t i a l V a l u e s a r r a y . 2 . _ l a b e l _ \ * - t h e p r o m p t d e s c r i b i n g w h a t t h e u s e r i s e x p e d t o d o . 3 . A l l o t h e r p r o p s o n * * A p p F o r m C h e c k B o x e s * * # # S t e p s t o t a k e - b e l o w i s a n e x a m p l e 1 . C r e a t e a p a r e n t c o m p o n e n t t h a t w i l l h o l d t h e d a t a c o l l e c t e d f r o m t h e f o r m . T h e c o m p o n e n t s h o u l d a l s o h a v e a s t a t e v a r i a b l e e g . ` m e r g e d V a l u e s ` a n d i t s s e t t e r f u n c t i o n , s a y , ` s e t M e r g e d V a l u e s ` . 2 . C r e a t e a n i n i t a l V a l u e s a r r a y o f o b j e c t s , e a c h a r r a y e l e m e n t r e p r e s e n t i n g i n i t i a l V a l u e s o f a c o r r e s p o n d i n g s t e p . 3 . C r e a t e a n a r r a y o f v a l i d a t i o n S c h e m a o b j e c t s , e a c h e l e m e n t r e p r e s e n t i n g v a l i d a t i o n s c h e m a f o r a c o r r e s p o n d i n g s t e p . 4 . C r e a t e t h e s t e p s c o m p o n e n t s , t h e o n e s t h a t w i l l b e e x e c u t e d f o r e a c h s t e p i n t h e m u l t i - s t e p f o r m . 5 . C r e a t e a n o b j e c t w i t h k e y s 0 . . . n w h e r e n i s ` n u m b e r - o f - s t e p s - 1 ` , a n d v a l u e s w h i c h a r e R e a c t N o d e r e f e r e n c e s f o r e a c h s t e p . 6 . C r e a t e a n a r r a y o f s t r i n g s o f d i s c r i p t i o n s / l a b e l s o f e a c h s t e p ( t h e s e d e s c r i p t i o n s a r e l i k e l a b e l s t o e a c h s t e p ) . T h e n u m b e r o f l a b e l s s h o u l d t a l l y w i t h t h e n u m b e r o f s t e p s . 7 . c r e a t e a n o n S u b m i t m e t h o d t h a t r e c e i v e s t h e f i n a l v a l u e s a s a n o b j e c t . # # E x a m p l e - c r e a t e p a r e n t c o m p o n e n t a n d c r e a t e a s t a t e v a r i a b l e a n d i t s s e t t e r . ` ` ` j s e x p o r t d e f a u l t f u n c t i o n E x a m p l e ( ) { c o n s t [ m e r g e d V a l u e s , s e t M e r g e d V a l u e s ] = u s e S t a t e ( { } ) ; . . . } ` ` ` - C r e a t e a n i n i t a l V a l u e s a r r a y o f o b j e c t s a n d v a l i d a t i o n S c h e m a a r r a y : ` ` ` j s c o n s t i n i t i a l V a l u e s = [ { f u l l N a m e : " " , / / t e x t f i e l d g e n d e r : " " , / / p i c k e r c o m p o n e n t c a t e g o r y : 0 , / / N u m b e r i n p u t c o m p o n e n t i s I t T r u e : f a l s e , / / s w i t c h c o m p o n e n t } , { p r o g L a n g : [ ] , / / m u l t i s e l e c t c h e c k b o x e s h o b b y : " " , / / r a d i o } , ] ; c o n s t v a l i d a t i o n S c h e m a = [ y u p . o b j e c t ( ) . s h a p e ( { f u l l N a m e : y u p . s t r i n g ( ) . r e q u i r e d ( " r e q u i r e d " ) . t e s t ( " " , " p l e a s e e n t e r f u l l n a m e " , ( n a m e : a n y ) = > n a m e &