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

CodePudding user response：

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.

CodePudding user response：

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.