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
- I wrapper
FAB.Group
inProvider
andPortal
but it changes thezIndex
andFAB.Group
goes under the other components. - I used
TouchableOpacity
so i can use itsonPress
attribute but it also makesFAB.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 |
Sorry to bother, I just placed FAB at the end of the component and its working now.