I have <TextInput/>
and I would like to get to blur it and toggle the keyboard when tapping outside the <TextInput/>
I have tried this solution but without any luck.
import React, { Component } from 'react'; import { AppRegistry, Dimensions, StyleSheet, Text, TouchableHighlight, View, Image, TextInput, ScrollView, Keyboard, TouchableWithoutFeedback } from 'react-native'; import { Button } from 'react-native-elements'; class CounterextendsComponent {
render() {
return (
<View
style={styles.container}
onPress={this.focusOff}
>
<TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
<View>
<TextInput
ref="numberInput"
id={this.props.id}
style={styles.title}
keyboardType='numeric'
maxLength={2}
value={this.state.keys.toString()}
onChange={(event) => this.updateKeysWithInputHandler(event.nativeEvent.text)}
/>
</View>
</TouchableWithoutFeedback>
</View>
);
}
}
You need to pass your dimensions / flex
of the parent container to the TouchableWithoutFeedback
in order for it work.
Assuming that you have flex: 1
in your styles.container
, add
<TouchableWithoutFeedback style={{flex: 1}} onPress={Keyboard.dismiss} accessible={false}>
to your child component in order for it to inherit the flex .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.