11import { SafeAreaView , ScrollView , StyleSheet , Text , TextInput , TouchableOpacity , View } from 'react-native'
22import React , { useState } from 'react'
3- import BouncyCheckbox from "react-native-bouncy-checkbox" ;
43
4+ import BouncyCheckbox from "react-native-bouncy-checkbox" ;
55
66// Form validation
77import * as Yup from 'yup'
@@ -75,17 +75,16 @@ export default function App() {
7575 }
7676
7777 return (
78- < ScrollView >
78+ < ScrollView keyboardShouldPersistTaps = "handled" >
7979 < SafeAreaView style = { styles . appContainer } >
80- < View style = { styles . formContainer } >
81- < Text style = { styles . title } > Password Generator</ Text >
82- < Formik
80+ < View style = { styles . formContainer } >
81+ < Text style = { styles . title } > Password Generator</ Text >
82+ < Formik
8383 initialValues = { { passwordLength : '' } }
8484 validationSchema = { PasswordSchema }
85- onSubmit = { values => {
86- //console.log(values);
87-
88- generatePasswordString ( + values . passwordLength )
85+ onSubmit = { values => {
86+ console . log ( values ) ;
87+ generatePasswordString ( + values . passwordLength )
8988 } }
9089 >
9190 { ( {
@@ -107,21 +106,22 @@ export default function App() {
107106 { errors . passwordLength }
108107 </ Text >
109108 ) }
109+
110110 </ View >
111111 < TextInput
112- style = { styles . inputStyle }
113- value = { values . passwordLength }
114- onChangeText = { handleChange ( 'passwordLength' ) }
115- placeholder = "EX . 8"
116- keyboardType = 'numeric'
117- />
112+ style = { styles . inputStyle }
113+ value = { values . passwordLength }
114+ onChangeText = { handleChange ( 'passwordLength' ) }
115+ placeholder = "Ex . 8"
116+ keyboardType = 'numeric'
117+ />
118118 </ View >
119119 < View style = { styles . inputWrapper } >
120- < Text style = { styles . heading } > Include lowerCase </ Text >
120+ < Text style = { styles . heading } > Include lowercase </ Text >
121121 < BouncyCheckbox
122122 disableBuiltInState
123123 isChecked = { lowerCase }
124- onPress = { ( ) => setLowerCase ( ! lowerCase ) }
124+ onPress = { ( ) => setLowerCase ( ! lowerCase ) }
125125 fillColor = "#29AB87"
126126 />
127127 </ View >
@@ -152,37 +152,35 @@ export default function App() {
152152 fillColor = "#FC80A5"
153153 />
154154 </ View >
155-
156155 < View style = { styles . formActions } >
157156 < TouchableOpacity
158157 disabled = { ! isValid }
159158 style = { styles . primaryBtn }
160159 onPress = { handleSubmit }
161160 >
162- < Text style = { styles . primaryBtnTxt } > Generate</ Text >
161+ < Text style = { styles . primaryBtnTxt } > Generate Password </ Text >
163162 </ TouchableOpacity >
164163 < TouchableOpacity
165-
166164 style = { styles . secondaryBtn }
167- onPress = { ( ) => {
168- handleReset ( )
165+ onPress = { ( ) => {
166+ handleReset ( ) ;
169167 resetPasswordState ( )
170- } } >
171- < Text style = { styles . secondaryBtnTxt } > Reset </ Text >
172-
168+ } }
169+ >
170+ < Text style = { styles . secondaryBtnTxt } > Reset </ Text >
173171 </ TouchableOpacity >
174172 </ View >
175173 </ >
176174 ) }
177- </ Formik >
178- </ View >
179-
180- { isPassGenerated ? (
181- < View style = { [ styles . card , styles . cardElevated ] } >
182- < Text style = { styles . description } > Result</ Text >
183- < Text selectable = { true } style = { styles . generatedPassword } > { password } </ Text >
175+ </ Formik >
184176 </ View >
185- ) : null }
177+ { isPassGenerated ? (
178+ < View style = { [ styles . card , styles . cardElevated ] } >
179+ < Text style = { styles . subTitle } > Result:</ Text >
180+ < Text style = { styles . description } > Long Press to copy</ Text >
181+ < Text selectable = { true } style = { styles . generatedPassword } > { password } </ Text >
182+ </ View >
183+ ) : null }
186184 </ SafeAreaView >
187185 </ ScrollView >
188186 )
0 commit comments