Dismissing partial modals

While you write your awesome UI, there will be times when we will encounter a bunch of external UI libraries and components. Most of the times they will have a good API and will be able to cover most of the cases. In certain edge cases you will run into a situation where touching outside the boundary of the component will not trigger a keyboard collapse or modal dismiss. For such cases one potential solution is to attach a Responder to the background Views in such a way that it will capture such touches and respond accordingly.

Touch events in React Native are managed by the Responder System. The Responder System is an abstraction on top of the underlying touch events that allows components to manage touch interactions in a more granular way.

The onStartShouldSetResponder prop accepts a function that is invoked when a touch event is initiated. This function should return true if the component should become the responder for this touch event, or false if it should not. By returning false but executing our side effect beforehand we ensure that the gesture flow does not get affected beyond the scope of what we need.

This will make the UX so much more better and allow things to work in a manner that the users have become used to via other Apps.