App freezes on clicking of outside of the content (backdrop) after orientation changes in ipad

[vinaykumar0339]

Environment

System:
OS: macOS 13.5
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Memory: 1.46 GB / 16.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 16.18.0
path: ~/.nvm/versions/node/v16.18.0/bin/node
Yarn:
version: 1.22.19
path: /usr/local/bin/yarn
npm:
version: 8.19.2
path: ~/.nvm/versions/node/v16.18.0/bin/npm
Watchman:
version: 2023.11.27.00
path: /usr/local/bin/watchman
Managers:
CocoaPods:
version: 1.14.3
path: /Users/thippireddyvinaykumar/.rvm/gems/ruby-3.1.1/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 23.0
- iOS 17.0
- macOS 14.0
- tvOS 17.0
- watchOS 10.0
Android SDK:
API Levels:
- "26"
- "27"
- "29"
- "30"
- "31"
- "33"
Build Tools:
- 26.0.2
- 28.0.3
- 29.0.2
- 30.0.0
- 30.0.2
- 30.0.3
- 31.0.0
- 33.0.0
System Images:
- android-29 | Google APIs Intel x86 Atom
- android-33 | Google APIs Intel x86_64 Atom
Android NDK: 23.1.7779620
IDEs:
Android Studio: 2022.3 AI-223.8836.35.2231.10671973
Xcode:
version: 15.0.1/15A507
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.8
path: /usr/bin/javac
Ruby:
version: 3.1.1
path: /Users/thippireddyvinaykumar/.rvm/rubies/ruby-3.1.1/bin/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.72.7
wanted: 0.72.7
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: false
newArchEnabled: false
iOS:
hermesEnabled: true
newArchEnabled: false

Platforms

Tested in iOS

Versions

• Android:
• iOS: any OS
• react-native-modal: 13.0.1
• react-native: 0.72.7
• react: 18.2.0

Description

On the iPad, open the modal, change the orientation from landscape to portrait mode, and click on backdrop modal closes But you cannot use it (freezes). To unfreeze it just close the app (which closes into background mode, not in recent apps) then open again it working fine any work around here?

Reproducible Demo

class BottomSheet extends React.Component {
constructor(props) {
super(props);
const title = _.get(this.props, 'route.params.title', false);
this.state = {
modalVisible: true,
appState: AppState.currentState,
};
}

componentDidMount() {
    const title = _.get(this.props, 'route.params.title', false);
    if (title) {
        this.setState({ modalVisible: false }, () => {
        });
    }
    this.subscriptionToAppState = AppState.addEventListener('change', this._handleAppStateChange);
}

componentWillUnmount() {
    if(this.subscriptionToAppState) {
        this.subscriptionToAppState.remove();
    }
}

_handleAppStateChange = (nextAppState) => {
    if (this.state.appState.match(/inactive|background/) && nextAppState === 'active') {

    } else {
        if(this.props.type !== 'form') {
            this.setModalVisible(false);
        }
    }
    this.setState({ appState: nextAppState });
};

setModalVisible(status) {
    const {preventModalStatusStorage = false, resetModal} = this.props
    if (preventModalStatusStorage) {
        if (resetModal) {
            resetModal();
        }
    } else {
        this.setState({ modalVisible: status }, () => {});
    }
}

onBackdropPress = () => {
    if(this.props.swipeDisabled) return;
    this.props.onSkip?.();
    this.setModalVisible(false)
}

orientationChangeHandler = () => {
    if (this.props.closeSheetOnOrientationChange === true) {
        this.onBackdropPress();
    }
}

render() {
    const deviceHeight = Dimensions.get('window').height;
    const deviceWidth = Dimensions.get('window').width;
    const { showButtons, onPress, resetModal, swipeDisabled, draggable, children,positiveText, negativeText } = this.props;
    const isVisible = this.state.modalVisible;
    return (
        <Modal
            testID={this.props.testID}
            onBackdropPress={this.onBackdropPress}
            propagateSwipe={!swipeDisabled}
            coverScreen={true}
            deviceHeight={deviceHeight}
            deviceWidth={deviceWidth}
            isVisible={isVisible}
            swipeDirection={swipeDisabled ? '' : ['down']}
            style={[styles.modal, this.props.customModalStyles]}
            onSwipeMove={(per) => {
                Keyboard.dismiss();
                if (per * 100 <= 50) {
                    this.setModalVisible(false);
                    this.props.onSkip?.();
                }
            }}
            onSwipeComplete={() => this.setModalVisible(false)}
            onModalHide={() => {
                if (resetModal) {
                    resetModal();
                }
            }}
        >
            {draggable ? <Draggable/> : null}
            {children}
            {showButtons ? <FormButtons disabled={false} cancel={() => this.setModalVisible(false)}
                                        positiveText={positiveText || strings.get(keys.SAVE)}
                                        negativeText={negativeText}
                                        onPress={() => {
                                            if (onPress) onPress();
                                            this.setModalVisible(false);
                                        }}/> : null}
        </Modal>
    );
}

}

const styles = StyleSheet.create({
modal: {
margin: 0,
justifyContent: 'flex-end'
}
});