4

I have an information carousel in a modal. On Ios it loads perfectly and can be opened and closed. On Android it opens perfectly if the initial state is set to true, but when it is closed and reopened the modal fades in slowly and the carousel is not present.

I have tried using the native Modal and a plugin. Using native my close button and hardware back button will not close the modal on android. I am testing on a Galaxy Note 8.

Any help would be greatly appreciated as I have exhausted my efforts to try and get it to operate correctly.

Here is the Modal Code Section. 

//MODAL ACTIONS
_openModal = () => {
  this.setState({ isModalVisible: true });
  console.log(this.state.isModalVisible);
  }

_closeModal = () => {
  this.setState({ isModalVisible: false });
  console.log(this.state.isModalVisible);
}

//RENDER MODAL CONTENT
_renderModalContent() {
    return (
      <Modal
        isVisible={this.state.isModalVisible}
        backdropColor={'black'}
        backdropOpacity={0.7}
        onBackButtonPress={this._closeModal}
        >
        <View style={styles.modalContainer}>
          <PersonalityDisplay
            ptData={ptTypes}
            opType={this.props.opType}
          />
          <View style={styles.closeButton}>
            <Button onPress={this._closeModal}>
              Close
            </Button>
          </View>
        </View>
    </Modal>
  )}

renderInfoPanel() {
    return (
      <Animated.View
        style={this.state.position.getLayout()}
        {...this.state.panResponder.panHandlers}
      >
        {this.renderUserInfo()}
        {this._renderMatchStamp()}
        {this._renderSideIcons()}
        {this._renderModalContent()}
      </Animated.View>
    )
  };


  render() {
    console.log(this.state.isModalVisible)
    return (
      <View>
        {this.renderInfoPanel()}
      </View>
    );
  }
}

Thanks

Ryan Chartres
  • 41
  • 5

1 Answers1

0

Few Things you better notice in your code,

  1. To close with back button correct prop is onRequestClose but not onBackButtonPress

2.Inside onRequestClose or Button onPress arrow function should be used like this onRequestClose={() => this._closeModal()}

3.Modal component doesn't have any prop called isVisible, it's actually visible.

After correcting these things Modal works fine.

Apart form these things, When you post code try to post only relevant to your issue. In your code three methods and two styling objects doesn't have any implementation which are hard to debug for others.

ThinkAndCode
  • 1,319
  • 3
  • 29
  • 60
  • Thanks for your answer. I moved to react-native-modal from the native one, which is why the props are different for visible and onRequestClose. When I have it set up with the native modal props the back button hardware and coded do not work on android. – Ryan Chartres Feb 13 '18 at 06:01
  • @Ryan Chartres, Then if you correct your code according to second point in my answer, Your code may work fine. – ThinkAndCode Feb 13 '18 at 06:48
  • Unfortunately it still did not work. It is something to do with the Open of the modal that does not work in android. But thank you for your help! – Ryan Chartres Feb 13 '18 at 22:54