Native Base Fab onpress не работает в Animated.View - PullRequest
Новая
       97

Native Base Fab onpress не работает в Animated.View

0 голосов
/ 09 июля 2020

Я использую собственный базовый Fab, обернутый Animated.View, но я не могу заставить работать Fab onpress. Я использую Animated.view для того, чтобы скрыть Fab при прокрутке вниз и показать его снова при прокрутке вверх.

Анимация работает правильно, но если она запускается хотя бы один раз, onprees Fab перестают работать . Если я выхожу на экран и не перемещаю прокрутку, нажатие Fab работает отлично. Если я изменю Fab для кнопки или Text, то соответствующее нажатие всегда будет работать.

Я также пробовал использовать Animated.createAnimatedComponent (Fab), но тогда анимация не работает.

Что я могу сделать для того, чтобы Fab onpress работал, когда он упакован в Animated.View? 

import React from 'react'
import { Animated, StyleSheet } from 'react-native'
import { 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(!props.showBtn) fadeOut()
        else fadeIn()
    }, [props.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 }}>
                <Fab
                    containerStyle={{}}
                    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,
    },
});
...