Nativebase: FAB doesn't collapse properly in iOS

[minaskamel]

"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 !!

[SupriyaKalghatgi]

@minaskamel Thank you for bringing this to our notice

[SupriyaKalghatgi]

@minaskamel The child button is not updating active state of FAB, hence this
try updating this state using ref

[minaskamel]

In onPress={() => this.setState({ active: !this.state.active })} I'm changing the state.active.. and the active of FAB I'm reading it from the state... why this is not working? Can you send me a working code?

[akhil-geekyants]

@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

[minaskamel]

That worked. Thanks a lot.

[xaamin]

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>

[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

[LuigiMaestrelli]

Why is this issue closed?
This is still happening with the latest version of native-base (2.13.12).
A workaround is good for a quick fix but the cause of the problem is still there

[landorid]

Why is this issue closed?
This is still happening with the latest version of native-base (2.13.12).
A workaround is good for a quick fix but the cause of the problem is still there

Yes, it shouldn't be closed. I had to use this lib instead of nativebase fab: https://github.com/mastermoo/react-native-action-button