Chore: Upgrade @types/react-native to 0.64.2 (#4026)

* Chore: Upgrade @types/react-native to 0.64.2 * minor tweak in comment * minor tweak * Chore: Upgrade @types/react-native to 0.64.2 * minor tweak in comment * minor tweak * fix accessibility within bordelessbutton
2022-04-08 11:27:10 -03:00 · 2022-04-08 11:27:10 -03:00 · ec952b058a
parent 8043ca2cf9
commit ec952b058a
11 changed files with 42 additions and 62 deletions
--- a/app/containers/LoginServices.tsx
+++ b/app/containers/LoginServices.tsx
@ -1,5 +1,5 @@
 import React from 'react';
-import { Animated, Easing, Linking, StyleSheet, Text, View } from 'react-native';
+import { Animated, Easing, Linking, StyleSheet, Text, View, ViewStyle } from 'react-native';
 import { connect } from 'react-redux';
 import { Base64 } from 'js-base64';
 import * as AppleAuthentication from 'expo-apple-authentication';
@ -410,7 +410,7 @@ class LoginServices extends React.PureComponent<ILoginServicesProps, ILoginServi
 		const { servicesHeight } = this.state;
 		const { services, separator } = this.props;
 		const { length } = Object.values(services);
-		const style = {
+		const style: Animated.AnimatedProps<ViewStyle> = {
 			overflow: 'hidden',
 			height: servicesHeight
 		};
--- a/app/containers/MessageBox/RecordAudio.tsx
+++ b/app/containers/MessageBox/RecordAudio.tsx
@ -194,14 +194,10 @@ export default class RecordAudio extends React.PureComponent<IMessageBoxRecordAu
 		}
 		if (!isRecording && !isRecorderActive) {
 			return (
-				<BorderlessButton
-					onPress={this.startRecordingAudio}
-					style={styles.actionButton}
-					testID='messagebox-send-audio'
-					// @ts-ignore
-					accessibilityLabel={I18n.t('Send_audio_message')}
-					accessibilityTraits='button'>
-					<CustomIcon name='microphone' size={24} color={themes[theme].auxiliaryTintColor} />
+				<BorderlessButton onPress={this.startRecordingAudio} style={styles.actionButton} testID='messagebox-send-audio'>
+					<View accessible accessibilityLabel={I18n.t('Send_audio_message')} accessibilityRole='button'>
+						<CustomIcon name='microphone' size={24} color={themes[theme].auxiliaryTintColor} />
+					</View>
 				</BorderlessButton>
 			);
 		}
@ -210,23 +206,17 @@ export default class RecordAudio extends React.PureComponent<IMessageBoxRecordAu
 			return (
 				<View style={styles.recordingContent}>
 					<View style={styles.textArea}>
-						<BorderlessButton
-							onPress={this.cancelRecordingAudio}
-							// @ts-ignore
-							accessibilityLabel={I18n.t('Cancel_recording')}
-							accessibilityTraits='button'
-							style={styles.actionButton}>
-							<CustomIcon size={24} color={themes[theme].dangerColor} name='delete' />
+						<BorderlessButton onPress={this.cancelRecordingAudio} style={styles.actionButton}>
+							<View accessible accessibilityLabel={I18n.t('Cancel_recording')} accessibilityRole='button'>
+								<CustomIcon size={24} color={themes[theme].dangerColor} name='delete' />
+							</View>
 						</BorderlessButton>
 						<Text style={[styles.recordingDurationText, { color: themes[theme].titleText }]}>{this.GetLastDuration}</Text>
 					</View>
-					<BorderlessButton
-						onPress={this.finishRecordingAudio}
-						// @ts-ignore
-						accessibilityLabel={I18n.t('Finish_recording')}
-						accessibilityTraits='button'
-						style={styles.actionButton}>
-						<CustomIcon size={24} color={themes[theme].tintColor} name='send-filled' />
+					<BorderlessButton onPress={this.finishRecordingAudio} style={styles.actionButton}>
+						<View accessible accessibilityLabel={I18n.t('Finish_recording')} accessibilityRole='button'>
+							<CustomIcon size={24} color={themes[theme].tintColor} name='send-filled' />
+						</View>
 					</BorderlessButton>
 				</View>
 			);
@ -235,24 +225,18 @@ export default class RecordAudio extends React.PureComponent<IMessageBoxRecordAu
 		return (
 			<View style={styles.recordingContent}>
 				<View style={styles.textArea}>
-					<BorderlessButton
-						onPress={this.cancelRecordingAudio}
-						// @ts-ignore
-						accessibilityLabel={I18n.t('Cancel_recording')}
-						accessibilityTraits='button'
-						style={styles.actionButton}>
-						<CustomIcon size={24} color={themes[theme].dangerColor} name='delete' />
+					<BorderlessButton onPress={this.cancelRecordingAudio} style={styles.actionButton}>
+						<View accessible accessibilityLabel={I18n.t('Cancel_recording')} accessibilityRole='button'>
+							<CustomIcon size={24} color={themes[theme].dangerColor} name='delete' />
+						</View>
 					</BorderlessButton>
 					<Text style={[styles.recordingDurationText, { color: themes[theme].titleText }]}>{this.duration}</Text>
 					<CustomIcon size={24} color={themes[theme].dangerColor} name='record' />
 				</View>
-				<BorderlessButton
-					onPress={this.finishRecordingAudio}
-					// @ts-ignore
-					accessibilityLabel={I18n.t('Finish_recording')}
-					accessibilityTraits='button'
-					style={styles.actionButton}>
-					<CustomIcon size={24} color={themes[theme].tintColor} name='send-filled' />
+				<BorderlessButton onPress={this.finishRecordingAudio} style={styles.actionButton}>
+					<View accessible accessibilityLabel={I18n.t('Finish_recording')} accessibilityRole='button'>
+						<CustomIcon size={24} color={themes[theme].tintColor} name='send-filled' />
+					</View>
 				</BorderlessButton>
 			</View>
 		);
--- a/app/containers/MessageBox/buttons/BaseButton.tsx
+++ b/app/containers/MessageBox/buttons/BaseButton.tsx
@ -1,5 +1,6 @@
 import { BorderlessButton } from 'react-native-gesture-handler';
 import React from 'react';
+import { View } from 'react-native';

 import styles from '../styles';
 import i18n from '../../../i18n';
@ -18,13 +19,10 @@ interface IBaseButton {
 const BaseButton = ({ accessibilityLabel, icon, color, ...props }: Partial<IBaseButton>) => {
 	const { theme } = useTheme();
 	return (
-		<BorderlessButton
-			{...props}
-			style={styles.actionButton}
-			// @ts-ignore
-			accessibilityLabel={i18n.t(accessibilityLabel)}
-			accessibilityTraits='button'>
-			<CustomIcon name={icon} size={24} color={color || themes[theme].auxiliaryTintColor} />
+		<BorderlessButton {...props} style={styles.actionButton}>
+			<View accessible accessibilityLabel={i18n.t(accessibilityLabel)} accessibilityRole='button'>
+				<CustomIcon name={icon} size={24} color={color || themes[theme].auxiliaryTintColor} />
+			</View>
 		</BorderlessButton>
 	);
 };
--- a/app/containers/message/Reply.tsx
+++ b/app/containers/message/Reply.tsx
@ -77,8 +77,6 @@ const styles = StyleSheet.create({
 		marginBottom: 4
 	},
 	image: {
-		// @ts-ignore TODO - check with the team, change this to undefined
-		width: null,
 		height: 200,
 		flex: 1,
 		borderTopLeftRadius: 4,
--- a/app/views/CannedResponsesListView/index.tsx
+++ b/app/views/CannedResponsesListView/index.tsx
@ -276,8 +276,8 @@ const CannedResponsesListView = ({ navigation, route }: ICannedResponsesListView
 			headerTitleAlign: 'center',
 			headerTitle: I18n.t('Canned_Responses'),
 			headerTitleContainerStyle: {
-				left: null,
-				right: null
+				left: 0,
+				right: 0
 			}
 		};

--- a/app/views/DiscussionsView/index.tsx
+++ b/app/views/DiscussionsView/index.tsx
@ -131,8 +131,8 @@ const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): JSX.Elem
 			headerTitleAlign: 'center',
 			headerTitle: I18n.t('Discussions'),
 			headerTitleContainerStyle: {
-				left: null,
-				right: null
+				left: 0,
+				right: 0
 			},
 			headerRight: () => (
 				<HeaderButton.Container>
--- a/app/views/RoomInfoEditView/index.tsx
+++ b/app/views/RoomInfoEditView/index.tsx
@ -738,7 +738,7 @@ class RoomInfoEditView extends React.Component<IRoomInfoEditViewProps, IRoomInfo
 							onPress={this.submit}
 							disabled={!this.formIsChanged()}
 							testID='room-info-edit-view-submit'>
-							<Text style={[styles.button, { color: themes[theme].buttonText }]} accessibilityTraits='button'>
+							<Text style={[styles.button, { color: themes[theme].buttonText }]} accessibilityRole='button'>
 								{I18n.t('SAVE')}
 							</Text>
 						</TouchableOpacity>
@ -755,7 +755,7 @@ class RoomInfoEditView extends React.Component<IRoomInfoEditViewProps, IRoomInfo
 								testID='room-info-edit-view-reset'>
 								<Text
 									style={[styles.button, styles.button_inverted, { color: themes[theme].bodyText }]}
-									accessibilityTraits='button'>
+									accessibilityRole='button'>
 									{I18n.t('RESET')}
 								</Text>
 							</TouchableOpacity>
@ -788,7 +788,7 @@ class RoomInfoEditView extends React.Component<IRoomInfoEditViewProps, IRoomInfo
 							onPress={room.teamMain ? this.deleteTeam : this.delete}
 							disabled={!this.hasDeletePermission()}
 							testID='room-info-edit-view-delete'>
-							<Text style={[styles.button, styles.button_inverted, { color: dangerColor }]} accessibilityTraits='button'>
+							<Text style={[styles.button, styles.button_inverted, { color: dangerColor }]} accessibilityRole='button'>
 								{I18n.t('DELETE')}
 							</Text>
 						</TouchableOpacity>
--- a/app/views/ThreadMessagesView/index.tsx
+++ b/app/views/ThreadMessagesView/index.tsx
@ -159,8 +159,8 @@ class ThreadMessagesView extends React.Component<IThreadMessagesViewProps, IThre
 			headerTitleAlign: 'center',
 			headerTitle: I18n.t('Threads'),
 			headerTitleContainerStyle: {
-				left: null,
-				right: null
+				left: 0,
+				right: 0
 			}
 		};

--- a/package.json
+++ b/package.json
@ -151,7 +151,7 @@
 		"@types/jest": "^26.0.24",
 		"@types/lodash": "^4.14.171",
 		"@types/react": "^17.0.14",
-		"@types/react-native": "^0.62.7",
+		"@types/react-native": "0.64.2",
 		"@types/react-native-background-timer": "^2.0.0",
 		"@types/react-native-config-reader": "^4.1.0",
 		"@types/react-native-platform-touchable": "^1.1.2",
--- a/storybook/stories/snapshots/Message.storyshot
+++ b/storybook/stories/snapshots/Message.storyshot
--- a/yarn.lock
+++ b/yarn.lock
@ -4682,10 +4682,10 @@
  dependencies:
    "@types/react" "*"

-"@types/react-native@^0.62.7":
-  version "0.62.10"
-  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.62.10.tgz#82c481df21db4e7460755dc3fc7091e333a1d2bd"
-  integrity sha512-QR4PGrzZ3IvRIHlScyIPuv2GV8tD/BMICZz514KGvn3KHbh0mLphHHemtHZC1o8u4xM5LxwVpMpMYHQ+ncSfag==
+"@types/react-native@0.64.2":
+  version "0.64.2"
+  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.64.2.tgz#2e344aeec0b4eb21fb9eaa0ed8973245c5601d56"
+  integrity sha512-w2y04h+GVLY+OMlFSmq4adPuS51XtEp1yUr83OvXf+moMQ4zDG1Q07HhyvYDXdc+BSS9ANHySBqVCz0hFxli9Q==
  dependencies:
    "@types/react" "*"