CODEWITHSUNDEEP
androidreactjsreact-native
Nawaz Mohamed
Nawaz Mohamed

Reputation: 155

Keyboard dismisses on every character typed in text input in react native

Can I know why my keyboard automatically dismisses on every character typing on the text input field. I do a state change on character input, but why it dismisses the keyboard, I don't see any problem with the code. I'm having this issue on android emulator, I haven't done on a real device or IOS/web, any help would be appreciated.

Here is the code

import React from 'react';
import {View, TextInput, TouchableOpacity, Text} from 'react-native';

const App = () => {
  // components
  const FormInput = ({placeholder, ...rest}) => (
    <View style={{padding: 10, margin: 5, borderWidth: 1, borderColor: '#000'}}>
      <TextInput
        {...rest}
        placeholder={placeholder}
        style={{width: 150, height: 30}}
      />
    </View>
  );

  const FormBtn = ({title}) => (
    <View
      style={{
        backgroundColor: '#e264e5',
        padding: 10,
        width: 170,
        height: 50,
        alignItems: 'center',
        justifyContent: 'center',
        margin: 5,
      }}>
      <TouchableOpacity>
        <Text style={{color: '#fff', fontWeight: 'bold'}}>{title}</Text>
      </TouchableOpacity>
    </View>
  );

  // states
  const [mail, setMail] = React.useState();
  const [pwd, setPwd] = React.useState();

  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
        <FormInput
          placeholder="Email"
          onChangeText={txt => setMail(txt)}
          value={mail}
        />
        <FormInput
          placeholder="Password"
          onChangeText={txt => setPwd(txt)}
          value={pwd}
        />
      </View>
      <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
        <FormBtn title="Register" />
        <FormBtn title="Login" />
      </View>
      <Text>{mail}</Text>
      <Text>{pwd}</Text>
    </View>
  );
};

export default App;

Upvotes: 1

Views: 2033

Answers (1)

moloud ayat
moloud ayat

Reputation: 740

you suppose to bring your inline ui functions (FormInput and FormBtn) outside of your component and consider them as indipendent functional components. the following code represents my words:

import React from 'react';
import {View, TextInput, TouchableOpacity, Text} from 'react-native';

const FormInput = ({placeholder, ...rest}) => (
  <View style={{padding: 10, margin: 5, borderWidth: 1, borderColor: '#000'}}>
    <TextInput
      {...rest}
      placeholder={placeholder}
      style={{width: 150, height: 30}}
    />
  </View>
);

const FormBtn = ({title}) => (
  <View
    style={{
      backgroundColor: '#e264e5',
      padding: 10,
      width: 170,
      height: 50,
      alignItems: 'center',
      justifyContent: 'center',
      margin: 5,
    }}>
    <TouchableOpacity>
      <Text style={{color: '#fff', fontWeight: 'bold'}}>{title}</Text>
    </TouchableOpacity>
  </View>
);

const App = () => {
  // states
  const [mail, setMail] = React.useState();
  const [pwd, setPwd] = React.useState();

  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
        <FormInput
          placeholder="Email"
          onChangeText={txt => setMail(txt)}
          value={mail}
        />
        <FormInput
          placeholder="Password"
          onChangeText={txt => setPwd(txt)}
          value={pwd}
        />
      </View>
      <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
        <FormBtn title="Register" />
        <FormBtn title="Login" />
      </View>
      <Text>{mail}</Text>
      <Text>{pwd}</Text>
    </View>
  );
};


export default App;

the reason that keyboard disappear every time you enter a new character is that by entering every character, states will update and your App component create new FormInput and FormBtn functions so that this action caused performance issues like this. you can see the number of functions added in your component by adding a Set:

import React from 'react';
import {View, TextInput, TouchableOpacity, Text} from 'react-native';

const functionsCounter = new Set();

const App = () => {
  // states
  const [mail, setMail] = React.useState();
  const [pwd, setPwd] = React.useState();

  const FormInput = ({placeholder, ...rest}) => (
    <View style={{padding: 10, margin: 5, borderWidth: 1, borderColor: '#000'}}>
      <TextInput
        {...rest}
        placeholder={placeholder}
        style={{width: 150, height: 30}}
      />
    </View>
  );

  const FormBtn = ({title}) => (
    <View
      style={{
        backgroundColor: '#e264e5',
        padding: 10,
        width: 170,
        height: 50,
        alignItems: 'center',
        justifyContent: 'center',
        margin: 5,
      }}>
      <TouchableOpacity>
        <Text style={{color: '#fff', fontWeight: 'bold'}}>{title}</Text>
      </TouchableOpacity>
    </View>
  );

  functionsCounter.add(FormInput);
  functionsCounter.add(FormBtn);

  console.log('functionCounter', functionsCounter.size);
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
        <FormInput
          placeholder="Email"
          onChangeText={txt => setMail(txt)}
          value={mail}
        />
        <FormInput
          placeholder="Password"
          onChangeText={txt => setPwd(txt)}
          value={pwd}
        />
      </View>
      <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
        <FormBtn title="Register" />
        <FormBtn title="Login" />
      </View>
      <Text>{mail}</Text>
      <Text>{pwd}</Text>
    </View>
  );
};

export default App;

Upvotes: 2

Related Questions