Question 35387 in React native Question posted in
The official React Native documentation can be found here.

Styled-components react native – Text Input onBlur not working

I’m fairly new to styled-components in react native. I’m creating a custom TextInput component. I want to add an event of onBlur to change a piece of state. However onBlur is never triggered.

import React, { useCallback } from 'react'

const TextField = styled.TextField`
    margin-top: 6px;
    font-size: 14px;
    color: '#000';
    padding: 16px 15px;
    border: 0.8px solid;
    background-color: '#fff';
`


const Input = ({
    editable,
    ...rest
  }) => {

    const handleOnFocus = useCallback(() => {
        console.log('focus')
    }, [])

    const handleOnBlur = useCallback(() => {
        console.log('blur')
    }, [])

    return (
        <TextField
            onFocus={handleOnFocus}
            onBlur={handleOnBlur}
            editable={editable}
            {...rest}
        />
    )
}



export default Input
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Found my issue. It's a stupid mistake. Happened to be passing the prop onBlur to the Input component which was overriding the onBlur I was trying to set on the TextField styled-component.


  2. 0

    as per guidelines of Textinput in
    React Native Textinput

    editable should be true to called blur, because if your input is editable is false then you can not focus that element and without focused element onBlur never triggered.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search