#ReactNative - ScrollView (FlatList / SectionList), TextInput and Keyboard in one view

When you have a TextInput, ScrollView and Keyboard, how do you make them work together smoothly?

React Native textInput scrollView keyboard

Issues that I faced:

1. Tap once to select
2. Tap elsewhere to close keyboard
3. Search result scrollable and close keyboard when scrolling 

Solutions:

1. Set ScrollView's prop keyboardShouldPersistTaps to always so that onPress can be captured by
   children components.
2. Use TouchableWithoutFeedback component to listen to onPress event and close the Keyboard. 
3. Don't set height to ScrollView's parent container. If height is set, it is not scrollable when keyboard is up. Use ...StyleSheet.absoluteFillObject instead.
   
   Result:
   
   <TouchableWithoutFeedback onPress={Keyboard.dismiss}>

     <KeyboardAvoidingView style={styles.keyboardView}>

       <View style={styles.container}>

         <FlatList

           keyboardShouldPersistTaps='always'

           data={this.props._blogArticles}

           renderItem={this._renderItem}

           keyExtractor={this._keyExtractor}

           ItemSeparatorComponent={() => <SeparatorComponent/>}

         />

       </View>

     </KeyboardAvoidingView>

   </TouchableWithoutFeedback>

Thank you for reading!

Jun