Styled-components react native - Text Input onBlur not working

Question

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

Answer 1

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.