FAB doesn't collapse properly in iOS

“react”: “16.0.0-alpha.12” “react-native”: “0.48.1” “native-base”: “2.3.6” iOS 11

Actual behaviour

Using FAB in iOS, when clicking on child button and then change the FAB’s “active” to false, all buttons collapses except last one. (Note that there’s no problem when clicking on the actual FAB button to expand/collapse. The problem is just when trying to collapse everything by clicking on a child button)

Code

` import React, { Component } from ‘react’; import { View } from ‘react-native’; import { Fab, Icon, Button, Container, Content } from ‘native-base’;

class TmpScreen extends Component {

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

render() {
    return(
        <Container>
            <View style={{flex: 1}}>
                <Fab
                    active={this.state.active}
                    direction="up"
                    position="bottomRight"
                    containerStyle={{  }}
                    style={{ backgroundColor: 'black' }}
                    onPress={() => this.setState({ active: !this.state.active })}
                >
                    <Icon name="add"/>
                    <Button
                        style={{backgroundColor: 'grey' }}
                        onPress={() => this.setState({ active: !this.state.active })}
                    >
                    </Button>
                    <Button
                        style={{backgroundColor: 'green'}}
                        onPress={() => this.setState({ active: !this.state.active })}
                    >
                    </Button>
                    <Button
                        style={{backgroundColor: 'red'}}
                        onPress={() => this.setState({ active: !this.state.active })}
                    >
                    </Button>
                </Fab>
            </View>
        </Container>
    )
}

} `

Steps to reproduce (code snippet or screenshot)

• Click on FAB
• Click on one of its children buttons

Screenshot of emulator/device

Is the bug present in both ios and android or in any one of them?

It’s working on Android.

Any other additional info which would help us debug the issue quicker.

Yes. If i make the direction ‘left’, the it’s working on iOS !!

[akhil-ga]

@minaskamel As a workaround you can try this

Code

import React, { Component } from 'react';
import { Container, Header, View, Button, Icon, Fab } from 'native-base';
export default class FABExample extends Component {
  constructor() {
    super();
    this.state = {
      active: true
    };
  }
  render() {
    return (
      <Container>
        <Header />
        <View style={{ flex: 1 }}>
          <Fab
            active={this.state.active}
            direction="up"
            containerStyle={{}}
            style={{ backgroundColor: '#5067FF' }}
            position="bottomRight"
            onPress={() => this.setState({ active: !this.state.active })}>
            <Icon name="share" />
            {this.state.active ? <Button style={{ backgroundColor: '#34A34F' }} onPress={() => this.setState({ active: false })}>
              <Icon name="logo-whatsapp" />
            </Button> : null}
            {this.state.active ? <Button style={{ backgroundColor: '#3B5998' }} onPress={() => this.setState({ active: false })}>
              <Icon name="logo-facebook" />
            </Button> : null}
            {this.state.active ? <Button style={{ backgroundColor: '#DD5144' }} onPress={() => this.setState({ active: false })}>
              <Icon name="mail" />
            </Button> : null}
          </Fab>
        </View>
      </Container>
    );
  }
}

Gif

[landorid]

Using the previous code losses the down animation.

Try this, it works as suggested by @SupriyaKalghatgi.

<Fab
  active={this.state.active}
  ref={component => this._fab = component}
  onPress={() => {
    const status = !this.state.active ;
    // Force the status update
    this._fab && (this._fab.state.active = status);
    this.setState({ active: status})
  }}>
  // Your buttons here
</Fab>

it worked for me with little changes; you should use this._fab._root.state.active