Fix issue with modal content buttons not responding on some Android devices

[serhiipalash]

https://github.com/jacklam718/react-native-modals/issues/208

The solution is to decrease DraggableView component PanResponder on touch start sensitivity https://stackoverflow.com/a/52609793

Tested it on real devices both Android and iOS and everything works as expected (pressing buttons inside content and swiping out modal with gesture).

[to-dy]

Tested this on a Physical device, Samsung S8 and it doesn't entirely solve the issue as I had to tap multiple times on the screen and it didn't always work.

[serhiipalash]

Tested this on a Physical device, Samsung S8 and it doesn't entirely solves the issue as I had to tap multiple times on the screen and it didn't always work.

@to-dy please describe your testing more. What do you mean by "it doesn't entirely solves the issue"? Does the fix work for you from time to time or does it never work for you? What the exact behaviour do you see when press the button inside the modal? Do you have a protection glass on your device or maybe your screen was damaged before?

I tested the fix on my Samsung A8, which should be very close to yours Samsung S8, and everything has worked as expected.

You can also try to increase sensitivity. Create a fork from my fork and increase it from 2 to 3.

[to-dy]

Tested this on a Physical device, Samsung S8 and it doesn't entirely solves the issue as I had to tap multiple times on the screen and it didn't always work.

@to-dy please describe your testing more. What do you mean by "it doesn't entirely solves the issue"? Does the fix work for you from time to time or does it never work for you? What the exact behaviour do you see when press the button inside the modal? Do you have a protection glass on your device or maybe your screen was damaged before?

I tested the fix on my Samsung A8, which should be very close to yours Samsung S8, and everything has worked as expected.

You can also try to increase sensitivity. Create a fork from my fork and increase it from 2 to 3.

The fix didn't work on the physical device I tested with. The buttons in the modal were un-clickable. No protection glass and the screen works fine.

[serhiipalash]

The fix didn't work on the physical device I tested with. The buttons in the modal were un-clickable. No protection glass and the screen works fine.

How did you test it @to-dy ? Did you update react-native-modals dependency to https://github.com/serhiipalash/react-native-modals in your package.json and reinstall dependencies?

{
  "dependencies": {
    "react-native-modals": "https://github.com/serhiipalash/react-native-modals"
  }
}

If everything was done, then can you please try two variants with higher touch sensitivity? First with 3 pixels

{
  "dependencies": {
    "react-native-modals": "https://github.com/serhiipalash/react-native-modals#pixel3"
  }
}

and second with 4

{
  "dependencies": {
    "react-native-modals": "https://github.com/serhiipalash/react-native-modals#pixel4"
  }
}

It's also better to remove /node_modules before each installation.

[serhiipalash]

and second with 4

Galaxy S8 has 4 pixels in 1 point, and my Galaxy A8 has 3. I think that's why we have different results.

[serhiipalash]

can you please try two variants with higher touch sensitivity?

Just for clarification, the original issue of this pull request happens because in one of latest versions was added functionality to swipe out the modal, and this functionality is handled with PanResponder, and this PanResponder has onMoveShouldSetPanResponder method, which should return either true or false - for gesture it should be true and for single touch (press) - false. The problem is that on Android for some reason this method always returns true even on single touch, though all touches are treated as gestures in PanResponder and buttons onPress never fires.

The solution is to update onMoveShouldSetPanResponder condition to return false (not set PanResponder), if dx/dy (accumulated distance of the gesture since the touch started) is less then 2-4 pixels.

So my fork #master branch has condition to not set PanResponder unless dx/dy is more than 2, and #pixel3 branch - unless dx/dy is more than 3, and #pixel4 branch - unless dx/dy is more than 4.

It would be great if you test all variant @to-dy. I don't have Android device with high pixel ratio screen and can't test it by myself.

[kdo1234]

I tested the master and the pixel4 branch on a Samsung Galaxy Tab S4. Neither branch works consistently, detecting perhaps one out of every 5 taps.

[HeyShinner]

I solved my problem on Android8 and Android11 according to the change

[trickeyd]

I was in this thread last month and have had no end of problems with modals in React Native, so I created this hook based modal library.

https://www.npmjs.com/package/@idiosync/react-native-modal

It doesn't use the additional native layer that the RN implementation uses, which seems to be the source of a lot of its problems

Hope it helps!

[olcaneristi]

I solved my problem on Android8 and Android11 according to the change

We have the same issue on Samsung devices. When we click on the TouchableOpacity in ModalContent almost 4-5 times, the modal closes or the item is selected.

I wanna say it again, we only have this problem on Samsung devices.

How did you fix it?

[HeyShinner]

I solved my problem on Android8 and Android11 according to the change

We have the same issue on Samsung devices. When we click on the TouchableOpacity in ModalContent almost 4-5 times, the modal closes or the item is selected.

I wanna say it again, we only have this problem on Samsung devices.

How did you fix it?

Solved my problem on Android8 and Android11 devices, Huawei and Xiaomi phone (not Samsung devices) by this fix issue