regression: modal touchables not working after RNGH migration (#7101)

Co-authored-by: Otávio Stasiak <91474186+OtavioStasiak@users.noreply.github.com>

Author: Rohit3523

app/containers/TwoFactor/index.tsx

@@ -7,6 +7,7 @@ import useDeepCompareEffect from 'use-deep-compare-effect';
 import { useForm } from 'react-hook-form';
 import * as yup from 'yup';
 import { yupResolver } from '@hookform/resolvers/yup';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 import { ControlledFormTextInput } from '../TextInput';
 import I18n from '../../i18n';
@@ -157,7 +158,7 @@ const TwoFactor = React.memo(() => {
 			useNativeDriver
 			isVisible={visible}
 			hideModalContentWhileAnimating>
-			<View style={styles.container} testID='two-factor'>
+			<GestureHandlerRootView style={styles.container} testID='two-factor'>
 				<View
 					style={[
 						styles.content,
@@ -198,7 +199,7 @@ const TwoFactor = React.memo(() => {
 					</View>
 				</View>
 				<Toast />
-			</View>
+			</GestureHandlerRootView>
 		</Modal>
 	);
 });

app/views/ChangePasscodeView.tsx

@@ -3,6 +3,7 @@ import { StyleSheet } from 'react-native';
 import useDeepCompareEffect from 'use-deep-compare-effect';
 import isEmpty from 'lodash/isEmpty';
 import Modal from 'react-native-modal';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 import { hasNotch } from '../lib/methods/helpers';
 import { PasscodeChoose } from '../containers/Passcode';
@@ -12,6 +13,11 @@ import { CHANGE_PASSCODE_EMITTER } from '../lib/constants/localAuthentication';
 import Touch from '../containers/Touch';
 
 const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		justifyContent: 'center',
+		alignItems: 'center'
+	},
 	modal: {
 		margin: 0
 	},
@@ -69,12 +75,14 @@ const ChangePasscodeView = React.memo(() => {
 
 	return (
 		<Modal useNativeDriver isVisible={visible} hideModalContentWhileAnimating style={styles.modal}>
-			<PasscodeChoose finishProcess={onSubmit} force={data?.force} />
-			{!data?.force ? (
-				<Touch onPress={onCancel} style={styles.close}>
-					<CustomIcon name='close' size={30} />
-				</Touch>
-			) : null}
+			<GestureHandlerRootView style={styles.container}>
+				<PasscodeChoose finishProcess={onSubmit} force={data?.force} />
+				{!data?.force ? (
+					<Touch onPress={onCancel} style={styles.close}>
+						<CustomIcon name='close' size={30} />
+					</Touch>
+				) : null}
+			</GestureHandlerRootView>
 		</Modal>
 	);
 });

app/views/JitsiMeetView/JitsiAuthModal.tsx

@@ -2,6 +2,7 @@ import { useNavigation } from '@react-navigation/native';
 import React from 'react';
 import { Linking, StyleSheet, Text, View } from 'react-native';
 import Modal from 'react-native-modal';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 import sharedStyles from '../Styles';
 import Button from '../../containers/Button';
@@ -48,7 +49,7 @@ const JitsiAuthModal = ({
 
 	return (
 		<Modal isVisible>
-			<View style={[styles.container, { backgroundColor: colors.surfaceRoom }]}>
+			<GestureHandlerRootView style={[styles.container, { backgroundColor: colors.surfaceRoom }]}>
 				<Text style={[styles.title, { color: colors.fontTitlesLabels }]}>{i18n.t('Jitsi_may_require_authentication')}</Text>
 				{isAdmin ? (
 					<Text style={[styles.regular, { color: colors.fontTitlesLabels }]}>
@@ -75,7 +76,7 @@ const JitsiAuthModal = ({
 						}}
 					/>
 				</View>
-			</View>
+			</GestureHandlerRootView>
 		</Modal>
 	);
 };

app/views/RoomView/Banner.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
-import { Text, View } from 'react-native';
-import { BorderlessButton, ScrollView } from 'react-native-gesture-handler';
+import { Text } from 'react-native';
+import { BorderlessButton, GestureHandlerRootView, ScrollView } from 'react-native-gesture-handler';
 import Modal from 'react-native-modal';
 
 import Markdown, { MarkdownPreview } from '../../containers/markdown';
@@ -42,12 +42,12 @@ const Banner = React.memo(
 						isVisible={showModal}
 						animationIn='fadeIn'
 						animationOut='fadeOut'>
-						<View style={[styles.modalView, { backgroundColor: themes[theme].surfaceNeutral }]}>
+						<GestureHandlerRootView style={[styles.modalView, { backgroundColor: themes[theme].surfaceNeutral }]}>
 							<Text style={[styles.bannerModalTitle, { color: themes[theme].fontSecondaryInfo }]}>{title}</Text>
 							<ScrollView style={styles.modalScrollView}>
 								<Markdown msg={text} />
 							</ScrollView>
-						</View>
+						</GestureHandlerRootView>
 					</Modal>
 				</>
 			);

app/views/ScreenLockedView.tsx

@@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react';
 import { StyleSheet } from 'react-native';
 import Modal from 'react-native-modal';
 import useDeepCompareEffect from 'use-deep-compare-effect';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 import { PasscodeEnter } from '../containers/Passcode';
 import { LOCAL_AUTHENTICATE_EMITTER } from '../lib/constants/localAuthentication';
@@ -19,6 +20,11 @@ interface IData {
 }
 
 const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		justifyContent: 'center',
+		alignItems: 'center'
+	},
 	close: {
 		position: 'absolute',
 		top: hasNotch ? 50 : 30,
@@ -73,12 +79,14 @@ const ScreenLockedView = (): JSX.Element => {
 			style={{ margin: 0 }}
 			animationIn='fadeIn'
 			animationOut='fadeOut'>
-			<PasscodeEnter hasBiometry={!!data?.hasBiometry} finishProcess={onSubmit} />
-			{data?.force ? (
-				<Touch onPress={onCancel} style={styles.close}>
-					<CustomIcon name='close' size={30} />
-				</Touch>
-			) : null}
+			<GestureHandlerRootView style={styles.container}>
+				<PasscodeEnter hasBiometry={!!data?.hasBiometry} finishProcess={onSubmit} />
+				{data?.force ? (
+					<Touch onPress={onCancel} style={styles.close}>
+						<CustomIcon name='close' size={30} />
+					</Touch>
+				) : null}
+			</GestureHandlerRootView>
 		</Modal>
 	);
 };