We Keep Coding

Screen freezes after closing modal (Native-base) (only android)

On any screen that I have a modal, always after closing I can't click on anything. The screen completely freezes.
This only happens on android. On IOS it works fine.
sorry for my bad english!!!
GIF
Expo Snack with error: https://snack.expo.dev/#willianferreira/modal-freeze-screen-android
Remembering that the error only happens on android.
Try to open the modal, close it and then type in the input
I wish the screen didn't freeze
export function BaseModal({ isVisible, onClose, children }: BaseModalProps) {
return (
<Modal isOpen={isVisible} onClose={onClose} size="lg">
<Modal.Content py={4} px={4}>
<Modal.CloseButton />
{children}
</Modal.Content>
</Modal>
);
}

React Bootstrap - Have Alert fade without containers below being pushed up on complete

using React Bootstrap Alerts
I want a dismissable alert that will not cause the elements to shift up or down when or when the alert is not present. To solve this I included an alert with 0 opacity only when the showAlert state is false. When the dismiss is clicked I trigger the onClose callback.
The problem is that this works perfectly other than now I want to introduce the React Bootstrap fade transition but the half second or so the fade takes place for it'll momentarily push the containers down before being pushed back up because of the 0 opacity alert being called the moment the dismiss is clicked.
<Col className="alert">
{!showAlert && (
<Alert variant="light" style={{ opacity: 0 }}>
.
</Alert>
)}
<Alert
id="showAlert"
show={showAlert}
onClose={() => setShowAlert(false)}
dismissible
variant={alertVariant}
>
{alertMessage}
</Alert>
</Col>

React Native Modal background doesn't work properly

Im using react-native-modal
This was my modal
import Modal from 'react-native-modal';
..
....
..
<Modal
visible={modalVisible} //this one was the issue (should be isVisible)
animationType={'slide'}
swipeDirection="down"
transparent={true}
onRequestClose={() => closeModal()}
onSwipeComplete={() => closeModal()}
style={{justifyContent: 'flex-end', margin: 0}}
>
</Modal>
So as you can see, my idea was to open it half way and slide it down to close
My problem was that it was acting weird, the modal wasn't updating properly, sometimes the modal opened way less than it was supposed to

After reading the documentation and common problems:
The solution was to change the visible prop to isVisible
isVisible={modalVisible}

React.js dialog component disappears yet remains in DOM

I'm using a Dialog component from Material-UI which, for the most part, is working correctly. However, if I click away from the Dialog, the Dialog will disappear (as expected) but sometimes, it remains in the DOM with its opacity set to 0, and I can't click anything else since the Dialog is in the way. This is a small sample of my code:
const [openDialog, setOpenDialog] = React.useState(false);
React.useEffect(() => {
// Get data for ReactTable
}, []);
return(
<div>
// Other components
<Button color="white" onClick={() => setOpenDialog(true)}>
Open Dialog
</Button>
// Other components
<Dialog open={openDialog} maxWidth="md" onClose={() => setOpenDialog(false)}>
// ReactTable and close button
</Dialog>
</div>
)
This bug doesn't always occur which makes it tricky to debug. I've only been using React for about a month, but I'm wondering if it's a state problem, or maybe some sort of race condition. Any suggestions?
Edit: This also occurs when a DropzoneDialog appears, to upload a file.

This also works:
<Dialog className={openDialog ? "" : classes.displayNone} open={openDialog} maxWidth="md" onClose={() => setOpenDialog(false)}>
// ReactTable and close button
</Dialog>
where in the styles file you have:
displayNone: {
display: "none"
}

In case anyone else has this same issue, I found the answer:
Elsewhere in the app, useEffect() was stuck in a loop and running extremely frequently which slowed the app down, causing this problem.

How to close swipeabledrawer within different class

I'm a little bit confused with the SwipeableDrawer explanation on the Material-ui website. Basically I have a Component 'Sidebar' which opens a SwipeableDrawer if a user clicks on button on the appbar, or a user swipes to open up the sidebar.
In the appbar there's a button you can press which gets passed to the parent component.
// Topbar.js
<IconButton color="inherit" onClick={onSidebarOpen}>
<MenuIcon/>
</IconButton>
// Main.js
<Topbar onSidebarOpen={this.handleSidebarOpen}/>
The handelSidebarOpen method sets a state of whether the sidebar is open or closed. So now the problem is that I'm not entirely sure how to tell the Sidebar properly to open or close the drawer if a user swipes the drawer open.
I used this approach
<Sidebar
open={this.state.openSidebar}
onClose={this.handleSidebarClose}
/>
And then in the Sidebar class I do this
// Inside render method
const {open, onClose} = this.props;
return (
<SwipeableDrawer
open={open}
onOpen={event => this.showDrawer(event)}
onClose={onClose}
disableBackdropTransition={!iOS}
disableDiscovery={iOS}
>
{console.log(onClose)}
{this.fullList()}
</SwipeableDrawer>
);
Please feel free to ask me for clarification if you don't understand the problem. I've made a little demo to show the problem.
https://codesandbox.io/embed/dazzling-galileo-mc3oz?fontsize=14&hidenavigation=1&theme=dark
Try to swipe the sidebar open and watch what happens. Thanks in advance.

Just pass handleSidebarOpen method in Sidebar at your Main.js file.
<Sidebar
open={this.state.openSidebar}
onOpen={this.handleSidebarOpen}
onClose={this.handleSidebarClose}
/>
Get that function in your Sidebar.js and use it on onOpen attribute of SwipeableDrawer. Like below,
const { open, onOpen, onClose } = this.props;
return (
<SwipeableDrawer
open={open}
onOpen={onOpen}
onClose={onClose}
disableBackdropTransition={!iOS}
disableDiscovery={iOS}
>
{console.log(onClose)}
{this.fullList()}
</SwipeableDrawer>
);
I have also created sandbox for you;
https://codesandbox.io/s/react-gki1u?fontsize=14&hidenavigation=1&theme=dark