Dismiss(Hide) keyboard on tap outside of TextInput(React Native)

Creating form and handling user interaction can be gracefully handled in iOS and Android using Gesture Handlers or using a Library like IQKeyboardManager, But in the world of React Native its little different, As we don’t have such library there and we also dont have InBuilt functionality for that.
But we can handle this gracefully..🤗

When i used to develop an iOS app in Swift, i always used IQKeyboardManager library to handle the keyboard events, we get done button in AccessoryView to dismiss the keyboard but when i started developing app in React Native i came to know that to have the same functionality in React Native we have to do some extra code, and i thought it will be help for others to have this, thats the whole purpose of writing this article.
So lets get started..🤘😎🤘
and finish the implementation in 3 little steps..😎

Step 1: Get Keyboard, TouchableWithoutFeedback from ‘react-native’;

import { View, TextInput, StyleSheet, Keyboard,  TouchableWithoutFeedback } from 'react-native';

Step 2: Create an arrow function to write dismiss keyboard code

const DismissKeyboard = ({ children }) => (
<TouchableWithoutFeedback 
onPress={() => Keyboard.dismiss()}> {children}
</TouchableWithoutFeedback>
);

Step 3: Wrap all TextInput inside <DismissKeyboard> </DismissKeyboard>

//Example
<DismissKeyboard>
  <View style={styles.container}>
   <TextInput style={styles.input} placeholder="email" />
   <TextInput style={styles.input} placeholder="password" />
  </View>
</DismissKeyboard>

Thats it..🤗
Thanks for reading..🙏