CODEWITHSUNDEEP
react-native
Nika Roffy
Nika Roffy

Reputation: 941

React-native textInput onFocus is not working

I'm trying to make onFocus style for TextInput but no matter what I try it does not work,

Here is my current code


import React from 'react';
import { TextInput } from 'react-native';
import { styles } from './styles';

const Input = (props) => {
  const [focused, setFocused] = React.useState(false);
  return (
    <TextInput
      onFocus={() => setFocused(true)}
      onBlur={() => setFocused(false)}
      style={focused ? styles.inputFocused : styles.input}
      {...props}
    />
  );
};

export default Input;

I also tried to wrap it around TouchableOpacity and pass it setFocused function onPress, but it did not work either

Any suggestions, please?

Upvotes: 2

Views: 2692

Answers (1)

Anhdevit
Anhdevit

Reputation: 2104

If your props override onFocus function just bring it on the head like this

import React from 'react';
import { TextInput } from 'react-native';
import { styles } from './styles';

const Input = (props) => {
  const [focused, setFocused] = React.useState(false);
  return (
    <TextInput
      {...props}
      onFocus={() => setFocused(true)}
      onBlur={() => setFocused(false)}
      style={focused ? styles.inputFocused : styles.input}
    />
  );
};

export default Input;

Upvotes: 4

Related Questions