FAB from Native base starts active

Question

I know that my question is related to this one - React Native - Native Base FAB (Floating Action Button): Clicking the FAB automatically calls sub-buttons 'onpress' But as far as it doesn't have a right answer I will ask mine.

I have copied code snippet from official docs and faced with the issue: every time when I open a screen that contains the FAB that button shows like pressed (activated). When I click on it (close it) and go to another screen the FAB shows its content again. But the state is "false" when I launch the screen.

Where is my mistake?

import React, {Component} from 'react';
import { Fab, Icon, Button } from 'native-base';

export default class PlusButton extends Component {

constructor(props) {
    super(props);
    this.state = {
        active: 'false'
    };
}

render() {
    return ( 
        <Fab
            active = {this.state.active}
            direction = "up"
            containerStyle = {{ }}
            style = {{ backgroundColor: '#ce4729' }}
            position = "bottomRight"
            onPress = {() => this.setState({ active: !this.state.active })}>

            <Icon name = "share" />

            <Button style = {{ backgroundColor: '#ce4729' }}>
                <Icon name = "logo-whatsapp" />
            </Button>

            <Button style = {{ backgroundColor: '#ce4729' }}>
                <Icon name = "logo-facebook" />
            </Button>

            <Button disabled style = {{ backgroundColor: '#ce4729' }}>
                <Icon name = "mail" />
            </Button>

        </Fab>
    );
}
}

Answer 1

have you try: this.state = { active: false };