React-native-paper: FAB not responding if at least once disabled [working with RN 0.59.8 but not with 0.60.4]

Created on 31 Jul 2019 · 7Comments · Source: callstack/react-native-paper

If problematically set disabled prop to false then afterwords the FAB never responds with disabled={true}. FAB is greyed out properly according to whether disabled or not but completely freezes if once disabled.

TRIED WITH MULTIPLE PROJECTS USING RN 0.60.4 - GOT SAME RESULTS

Here is my code:-

import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    Button,
    Alert
} from 'react-native';

import { FAB } from 'react-native-paper';

export default class FabComponent extends Component {
    state = {
        disableFab: false
    }

    handleFabPress = () => {
        Alert.alert(
            'Alert Title',
            'You pressed the floating button',
            [
              {
                text: 'Cancel',
                onPress: () => console.log('Cancel Pressed'),
                style: 'cancel',
              },
              {text: 'OK', onPress: () => console.log('OK Pressed')},
            ],
            {cancelable: false},
          );
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                    <Button
                        onPress={() => {
                                this.setState((prevState) => {
                                    return {
                                        disableFab: ! prevState.disableFab
                                    }
                                })
                            }
                        }
                        title={this.state.disableFab? 'Enable FAB' : 'Disable FAB'}
                        color="#488c51"
                    />
                </View>

                <FAB
                    style={styles.fab}
                    small={false}
                    icon="add"
                    disabled={this.state.disableFab}
                    onPress={this.handleFabPress}
                />
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    fab: {
        position: 'absolute',
        margin: 16,
        right: 0,
        bottom: 0,
      },
  });

the repo is here - https://github.com/devsrv/rnpaper-fab

Source

devsrv

👍1

Most helpful comment

@devsrv Paper v3 uses react-native-vector-icons/Material-Community-Icons instead of react-native-vector-icons/Material-Icons by default so you need to update name of the icon or use old Icon component via settings prop on PaperProvider. You can see how to do it here