12. Exploring Formik Package in React-Native.
Why Formik?
When building a form using basic Text & input, etc., it becomes important to keep track of when the form was changed or submitted. However, React Native lacks such built-in functionality. Therefore, we are required to manually keep track of each event. Formik addresses this issue by directly exposing those methods to you. By utilizing Formik, all the submit event handling and more within the form are passed on to you through Formik as a state. Through this state, we effectively manage the form.
KeyboardShouldPersistTaps:
When you click on an input field, the keyboard pops up. But what happens after that? How do you dismiss the keyboard from the screen?
We utilize this property with three values:
Always: The keyboard will never dismiss, regardless of where you click on the screen , unless you press the return button, done button, or close arrow provided by the keyboard.
Never: The keyboard can be dismissed by clicking on any other part of the screen, including buttons.
Handled: This option allows the inner child component to decide. If an interactive area, such as a submit button, is clicked, it will simultaneously dismiss the keyboard and submit the form. However, if a non-interactive area, such as a view without an onPress() event specified, is clicked, it will not dismiss the keyboard.
Therefore, when using the handled value, the behavior depends on which child component is used within the ScrollView.
TypeCasting:
Converting a string into a number in TypeScript can be achieved using different methods. Two common approaches are:
Using the Number() function: The Number() function is used for typecasting a string into a number. In the context of converting the "values.passwordLength" string variable to a number, you can use "Number(values.passwordLength)".
Using the unary plus operator: Another way to convert a string to a number is by using the unary plus operator (+). In this case, you can utilize "+values.passwordLength" to perform the typecasting.
Both methods achieve the same result of converting a string to a number in TypeScript, and you can choose the one that best suits your coding style and preferences.
Empty renderer:
When we want to wrap multiple components inside a component, but don't want a parent component to be added in the DOM styling.
Code :
const MyComponent = () => { return ( <> <Text>Hello</Text> <Text>World</Text> </> ); };In the above code, the empty renderer <></> acts as a parent container for the components. It allows you to return multiple elements without introducing an unnecessary wrapping element like a . The resulting output will only include the components without any additional DOM node.
Using an empty renderer can help keep your code concise and avoid unnecessary DOM nodes in the rendered output. It's a handy syntax when you need to group elements together without impacting the structure or styling of your components.
Note that the empty renderer is a feature of JSX and can be used in both React and React Native applications.
How the passwordlength value is getting into the password length field, and how password length field value is going into the password length value.
Here's the code responsible for it:
value={values.passwordLength}onChangeText={handleChange('passwordLength')}Here's the work:
value={values.passwordLength}: This line sets the current value of the component to the passwordLength field from the Formik values object. It ensures that the input field displays the correct value from the state.
onChangeText={handleChange('passwordLength')}: This line sets up an event handler for the component. When the user types or modifies the text in the input field, the handleChange function is called with the field name as an argument ('passwordLength'). The handleChange function is provided by Formik and it automatically updates the value of the corresponding field in the Formik values object. So, in this case, when the user types or modifies the text in the, it triggers the handleChange function, which then updates the passwordLength field in the Formik state.
How to print errors given by formik:
Code :
{touched.passwordLength && errors.passwordLength && ( <Text style={styles.errorText}> {errors.passwordLength} </Text> )}Here we are checking if password.Length is touched also is there any error in passwordLength given by Yup schema which is given to ValidationSchema, if both are true then print the errors.passwordLength.
How to put a bouncy check box beside a text :
Code :
<BouncyCheckbox disableBuiltInState isChecked={lowerCase} onPress={() => setLowerCase(!lowerCase)} fillColor="#29AB87" />Here, disableBuiltInState disables all the default property to the checkbox isChecked makes the checkbox , checked or unchecked based on the whether the lowerCase value is true or not.
So how to make lowercase as true/false at the same time update the checkbox checkmark, there we use , onPress, which sets the lowercase state to true, hence making lowercase true and getting ischecked as mark.
How does isChecked get's updated after the onPress function is called?
When we press the checkbox, the onPress event is triggered which set the setLowerCase state to false [default is true] , hence the setLowerCase UseState is the one who re-renders the components and the new value of lowercase makes the isChecked is false.
Why we don't call the Actual method for generating Password and use formik's handleSubmit :
CODE:
<TouchableOpacity disabled={!isValid} style={styles.primaryBtn} onPress={handleSubmit} > <Text style={styles.primaryBtnTxt}>Generate Password</Text> </TouchableOpacity>here, disabled = {!isValid}, here if passwordLength is valid then isValid is set to True, therefore by {!True} i.e. false, we are disabling the disabled property, and we can click on it and perform further operation.
OR ELSE here if passwordLength is invalid due to wrong type of input/ out of range nubmer then isValid is set to False, therefore by {!False}, i.e. True, we are enabling the disabled property, and we cannot click on it and perform further operation.
Next, onPress={handleSubmit} call the onSubmit property defined the parent componenet i.e. which then calls the generatePassword(passwordLength) fucntion. We could have done it directly by calling the function on onPress{}, but formik manages all the function inside the object, which is easily accessible when our button or operations are more than 1.
Why did we called resetPasswordState(), if we already called handleReset()?
The reason for calling both handleReset() and resetPasswordState() within the onPress event handler of the TouchableOpacity component is that they serve different purposes.
handleReset() is a function provided by the Formik library. It is responsible for resetting the form to its initial state. It clears the form values, errors, and any other form-related state. By calling handleReset(), you ensure that the form is reset and ready for the user to enter new data.
On the other hand, resetPasswordState() seems to be a custom function specific to your code or application. While I cannot see the implementation of resetPasswordState() in the provided code snippet, I can assume that it is responsible for resetting any additional state or variables related to the password generation or password-related functionality.
By calling both handleReset() and resetPasswordState() together, you ensure that both the form state managed by Formik and any additional state specific to password-related functionality are properly reset, providing a clean slate for the user to generate a new password or perform any other relevant actions.
How to make TEXT component selectable?
using property inside Text
<Text selectable={True}>