React Native - text input does not lose focus

Question

I put a <TextInput/> to do the search action on my project, but after I click on this <TextInput/>, focus no longer leaves it, no matter where click on the screen, the function onBlur() even runs and presents no error, even if I go to another page and return to the screen that has this <TextInput/>, that bar that keeps blinking when we type, keeps blinking, I’ve tried to look for several examples of <TextInput/> and they all present this same problem, it must be something very silly, but I can not solve it at all. Here’s the code I’m testing now.

import {
  StatusBar,
  View,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  SafeAreaView,
} from 'react-native';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      borderColor: '#fff',
    };
  }

  onFocus() {
    this.setState({
      borderColor: '#000',
    });
  }

  onBlur() {
    this.setState({
      borderColor: '#fff',
    });
  }

  render() {
    return (
      <View
        style={{
          width: '100%',
          height: '100%',
          backgroundColor: '#363A44',
          alignItems: 'center',
        }}>
        <StatusBar
          barStyle="light-content"
          hidden={false}
          backgroundColor="#000"
        />
        <TextInput
          onBlur={() => this.onBlur()}
          onFocus={() => this.onFocus()}
          style={{
            height: 40,
            width: 100,
            borderWidth: 1,
            borderColor: this.state.borderColor,
          }}
        />
      </View>
    );
  }
}

export default App;```

Answer 1

Your problem is recurring in React Native, it happens basically because the View can’t detect the onscreen touches. Alternatively, you can exchange your View master for a Scrollview configured to accept onscreen ringtones.

Baiscamente just change:

<View
    style={{
      width: '100%',
      height: '100%',
      backgroundColor: '#363A44',
      alignItems: 'center',
    }}>
    <StatusBar
      barStyle="light-content"
      hidden={false}
      backgroundColor="#000"
    />
    <TextInput
      onBlur={() => this.onBlur()}
      onFocus={() => this.onFocus()}
      style={{
        height: 40,
        width: 100,
        borderWidth: 1,
        borderColor: this.state.borderColor,
      }}
    />
</View>

For:

<ScrollView
    style={{
      width: '100%',
      height: '100%',
      backgroundColor: '#363A44',
      alignItems: 'center',
    }}
    scrollEnabled={false}
    keyboardShouldPersistTaps='handled'>
    <StatusBar
      barStyle="light-content"
      hidden={false}
      backgroundColor="#000"
    />
    <TextInput
      onBlur={() => this.onBlur()}
      onFocus={() => this.onFocus()}
      style={{
        height: 40,
        width: 100,
        borderWidth: 1,
        borderColor: this.state.borderColor,
      }}
    />
</ScrollView>

scrollEnabled: Leaves the static view without the scroll.

keyboardShouldPersistTaps: Enables the ability to touch the area outside the keyboard.

Working example