CODEWITHSUNDEEP
react-nativetextinputonbluronfocusreact-native-paper
Code
Code

Reputation: 1

How to change TextInput style and dismiss keyboard with onblur using react-native-paper

I use react-native paper and I need help... I would like to know how to reject the keyboard and also how to deactivate OnFocus when onblur is active

    import { View, StyleSheet } from 'react-native';
    import { TextInput } from 'react-native-paper';
    const Input = () => {
          return (
            <TextInput
              style={styles.inputField}
              label='Email'
              mode='outlined'
            />
        );
    };
    
    const styles = StyleSheet.create({
      inputField: {
        width: '100%',
      }
    })
    
    export default Input;

Upvotes: 0

Views: 131

Answers (1)

Shaikh Faizan
Shaikh Faizan

Reputation: 86

You can use the help of useState to achieve this below code is for reference:

const [emailError, setEmailError] = useState('');
const [passwordError, setPasswordError] = useState('');
const [focusedInput, setFocusedInput] = useState('');
    <TextInput
        style={[
          styles.input,
          focusedInput === 'email' && styles.inputFocused,
          emailError && styles.inputError,
          {
            backgroundColor: isDarkTheme
              ? secondaryDarkColor
              : secondaryLightColor,
            marginVertical: 20,
            color: isDarkTheme ? 'white' : 'black',
          },
        ]}
        placeholder="Email"
        keyboardType="email-address"
        placeholderTextColor={secondaryTextColor}
        value={email}
        onFocus={() => setFocusedInput('email')}
        onBlur={() => setFocusedInput('')}
        onChangeText={text => {
          setEmail(text);
          setEmailError('');
        }}
      />

Upvotes: 0

Related Questions