Multiple Popovers opening in sequence, second not opening when triggered by button in first

Sorry for my bad English. I want to use react-native-popover-view as a guide for new user. If user read the first guide and they click “Ok” it will open the second guide. My code is below. Thank you for your help ! “react-native-popover-view”: “version”: “1.0.9”, “react-native”: “version”: “0.57.4”,

export default class App extends Component<Props> {
  componentDidMount() {
    this.setState({ isVisible: true });
  }
  state = {
    isVisible: false,
    isVisible2: false
  };

  showPopover() {
    this.setState({ isVisible: true });
  }
  showPopover2() {
    this.setState({ isVisible2: true });
    this.setState({ isVisible: false });
  }

  closePopover() {
    this.setState({ isVisible: false });
  }
  render() {
    return (
      <View style={styles.container}>
        <Popover
          isVisible={this.state.isVisible}
          fromView={this.touchable}
          onClose={() => this.closePopover()}
        >
          <Text style={styles.test}>The first guide</Text>
          <TouchableHighlight
            style={styles.button}
            onPress={() => this.showPopover2()}
          >
            <Text>go to second</Text>
          </TouchableHighlight>
        </Popover>
        <Popover
          isVisible={this.state.isVisible2}
          fromView={this.touchable2}
          onClose={() => this.closePopover()}
        >
          <Text style={styles.test}>The second guide</Text>
          <TouchableHighlight
            style={styles.button}
            onPress={() => this.showPopover()}
          >
            <Text>Press me</Text>
          </TouchableHighlight>
        </Popover>

        <TouchableHighlight
          ref={ref => (this.touchable = ref)}
          style={styles.button}
          onPress={() => this.showPopover()}
        >
          <Text>Press me</Text>
        </TouchableHighlight>
        <Text
          ref2={ref2 => (this.touchable2 = ref2)}
          tyle={styles.instructions}
        >
          text 1
        </Text>
      </View>
    );
  }
}

[SteffeyDev]

I’m considering making a change to the popover code to make this easier, which would detect when there is a modal open and then delay the second popover from trying to show until the first is closed… so you are welcome to wait for that update, but no guarantee on timing.

[huynguyen2903]

It’s work. Thank you very much @SteffeyDev.