Merge pull request #19622 from robertKozik/17022-migrate-BaseValidateCodeForm

17022 — migrate BaseValidateCodeForm to PressableWithFeedback

Author: puneetlath

src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {TouchableOpacity, View} from 'react-native';
+import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
@@ -24,6 +24,7 @@ import * as User from '../../../libs/actions/User';
 import FormHelpMessage from '../../../components/FormHelpMessage';
 import MagicCodeInput from '../../../components/MagicCodeInput';
 import Terms from '../Terms';
+import PressableWithFeedback from '../../../components/Pressable/PressableWithFeedback';
 
 const propTypes = {
     /* Onyx Props */
@@ -229,13 +230,17 @@ class BaseValidateCodeForm extends React.Component {
                             {this.state.linkSent ? (
                                 <Text style={[styles.mt2]}>{this.props.account.message ? this.props.translate(this.props.account.message) : ''}</Text>
                             ) : (
-                                <TouchableOpacity
+                                <PressableWithFeedback
                                     style={[styles.mt2]}
                                     onPress={this.resendValidateCode}
                                     underlayColor={themeColors.componentBG}
+                                    hoverDimmingValue={1}
+                                    pressDimmingValue={0.2}
+                                    accessibilityRole="button"
+                                    accessibilityLabel={this.props.translate('validateCodeForm.magicCodeNotReceived')}
                                 >
                                     <Text style={[styles.link]}>{this.props.translate('validateCodeForm.magicCodeNotReceived')}</Text>
-                                </TouchableOpacity>
+                                </PressableWithFeedback>
                             )}
                         </View>
                     </View>