FAB.Group onPress not working

Current behaviour

When I Press the FAB.Group onPress event not working.

Expected behaviour

When I press the FAB.Group it should display the log and should change this.state.open so that I can toggle this.state.open on Press.

Code sample

import React, { Component } from 'react';
import {
    View,
} from 'react-native';
import {
    FAB, Provider, Portal
} from 'react-native-paper'

export default class ProductDetail extends Component {
    constructor() {
        super()
        this.state = {
            open: true,
        }
    }
    render() {
        return (
            <View style={styles.homeView}>
                <FAB.Group
                    onStateChange={() => {
                        console.log("State changes")
                    }}
                    onPress={() => {
                        console.log("Pressed")
                        this.setState((prevState) => ({
                            open: !prevState.open
                        }))
                    }}
                    open={this.state.open}
                    icon={this.state.open ? 'calendar-today' : 'plus'}
                    actions={[
                        { icon: 'plus', onPress: () => console.log('Pressed add') },
                        {
                            icon: 'star',
                            label: 'Star',
                            onPress: () => console.log('Pressed star'),
                        },
                        {
                            icon: 'email',
                            label: 'Email',
                            onPress: () => console.log('Pressed email'),
                        },
                        {
                            icon: 'bell',
                            label: 'Remind',
                            onPress: () => console.log('Pressed notifications'),
                        },
                    ]}
                />
            </View>
        )
    }
}

What have you tried

  1. I wrapper FAB.Group in Provider and Portal but it changes the zIndex and FAB.Group goes under the other components.
  2. I used TouchableOpacity so i can use its onPress attribute but it also makes FAB.Group to go disappear.

Your Environment

software version
android 10
react-native 0.63.2
react-native-paper 4.2.0
node 12.16.3
npm 6.14.4
react-native-vector-icons 7.1.0

Author: Fantashit

1 thought on “FAB.Group onPress not working

Comments are closed.