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>
    );
  }
}

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>
    );
  }
}

• javascript
• reactjs
• react-native

1 Answer 1

You need to pass your dimensions / flex of the parent container to the TouchableWithoutFeedbackin 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 ponent in order for it to inherit the flex.