React-native dismiss Keyboard when focus out / clicked somewhere else, outside textfield

Question

I'm new to react-native. I have a textfield(Input). I want to the Keyboard to be dismissed when user clicks somewhere else except input field. I tried several solutions suggested here like TouchableWithoudFeedback, but they did not work. Also, the point which is not clear to me, I can use any function inside onFocus, on the other hand, nothing worked in onBlur or onEndEditing Here is my code of Input component.

<InputGroup borderType='rounded' style={styles.inputGrp}>
                                    <Input placeholder={'Password'} secureTextEntry={true} style={styles.input}
                                           onChangeText={(pin1) => this.setState({pin1: pin1})}
                                           value={this.state.pin1}
                                           maxLength={8}
                                    />

Answer 1

here is the solution to that above question: Hide keyboard in react native

import {Keyboard, TouchableWithoutFeedback} from 'react-native'

wrap your root component with TouchableWithoutFeedback and trigger Keyboard.dismiss at onPress, like following

<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
    <View style={{flex: 1}}>
          ........
          //rest of the component
          ........
    </View>
</TouchableWithoutFeedback>

Answer 2

Solution here is to wrap your form's with <ScrollView keyboardShouldPersistTaps="handled" />. The keyboardShouldPersistTaps is the important part. It can also be "never" for keyboardShouldPersistTaps, but then keyboard might dismiss too easily. This solution was shared at https://stackoverflow.com/a/41429871/1828637