Fab onpress don't work wrapped in Animated.View

[ashigaruconyary]

I'm using native base Fab wrapped with an Animated.View, but I can't make the Fab's onpress works. I'm using the Animated.view for hiding the Fab when scroll down and show it again when scroll up.

The animation is working properly, but if it trigger at least one time, then the Fab's onprees stops working. If I enter to the screen, and don't move the scroll, the onpress of the Fab works perfect. If I change the Fab for a button or a Text then the correspondingly onpress always works.

I also tried using Animated.createAnimatedComponent(Fab), but then the animations don't work.

What can I do for making the Fab onpress works when is wrapped in Animated.View ?

import React from 'react'
import { Animated, StyleSheet, Text } from 'react-native'
import { Button, Fab, Icon } from 'native-base'
import colors from '../../styles/colors'


type Props = {
    mode: 'CREATE' | 'SAVE' | 'CLONE'
    showBtn?: boolean

    // callback
    onBtnClick (): void
}

const MakeFab: React.FC<Props> = (props: Props): JSX.Element => {
    const { mode, showBtn, onBtnClick } = props

    const [val] = React.useState(new Animated.Value(1))

    const fadeOut = () => {
        Animated.timing(val, {
            toValue : 0,
            duration: 250,
            useNativeDriver: true
        }).start()

    }
    const fadeIn = () => {
        Animated.timing(val, {
            toValue : 1,
            duration: 250,
            useNativeDriver: true
        }).start()
    }

    React.useLayoutEffect(() => {
        if (!showBtn) fadeOut()
        else fadeIn()
    }, [showBtn])

    const renderIcon = () => {
        switch (mode) {
            case 'CREATE':
                return <Icon name='add' />
            case 'SAVE':
                return <Icon name='ios-save' />
            case 'CLONE':
                return <Icon type={'FontAwesome'} name='clone'/>
            default:
                return <Icon name='add' />
        }
    }

    return (
        showBtn !== undefined ?
            <Animated.View style={{opacity: val, height: 4 }} >
                <Fab
                    style={styles.FabBtnPrimary}
                    position="bottomRight"
                    // onPress={onBtnClick}>
                    onPress={() => {console.log('clicked')}}>
                    {renderIcon()}
                </Fab>
            </Animated.View>
            :
            <Fab
                containerStyle={{}}
                style={styles.FabBtnPrimary}
                position="bottomRight"
                // onPress={onBtnClick}>
                onPress={() => {console.log('clicked')}}>
                {renderIcon()}
            </Fab>
    )
}

export default MakeFab

const styles = StyleSheet.create({
    FabBtnPrimary: {
        backgroundColor: colors.PRIMARY,
    },
});