Repository: NMF-earth/nmf-app (language: typescript)

Issue:
Ionicons buttons opacity
#### Summary
Find alternative to `suppressHighlighting={true}` for `Ionicons`, see this [commit](https://github.com/NMF-earth/nmf-app/commit/2e8b6f224993e29cbb0c4af1112b5155caa5d4ff). The icon opacity should change like back button instead



Discussion hints:

Pull request: Remove all usages of suppressHighlighting and make Ionicons have opacity on touch
<!-- Thanks for submitting a pull request! We appreciate a lot your help. Please provide some information so that others can review your pull request. The two last fields below are optional but appreciated. -->

✅ I have read the [contributing file](https://github.com/NMF-earth/nmf-app/blob/main/contributing.md)

## Summary

Resolves #392 

## Changelog

- Most of the usages of Ionicons dont need any suppressHighlighting as they are not touchable
- Accordion as the whole top header is Touchable it makes sense to have touch effect on it as whole not just the Ionicons
- Updated other Ionicons which are actually Touchable to wrap inside TouchableOpacity

## Demo
Cover common icon cases.
https://github.com/user-attachments/assets/0a52e64b-e99a-45cd-adc1-134ac5a5eed7

Test command: NODE_OPTIONS='--experimental-vm-modules --max-old-space-size=4096' npx --no-install jest app/components/Accordion/__tests__/Accordion.test.tsx app/components/Button/__tests__/Button.test.tsx app/components/EmissionListItem/__tests__/EmissionListItem.test.tsx app/components/InfoButton/__tests__/InfoButton.test.tsx app/components/ListItem/__tests__/ListItem.test.tsx app/components/SelectableListItem/__tests__/SelectableListItem.test.tsx app/components/TabBarIcon/__tests__/TabBarIcon.test.tsx app/components/Tag/__tests__/Tag.test.tsx app/components/TextButton/__tests__/TextButton.test.tsx app/screens/Emissions/components/SectionHeader/__tests__/SectionHeader.test.tsx app/screens/Faq/__tests__/FaqScreen.test.tsx app/screens/Languages/__tests__/LanguagesScreen.test.tsx app/screens/MonthlyBudget/__tests__/MonthlyBudgetScreen.test.tsx --passWithNoTests 2>&1

Fix patch:
diff --git a/app/components/Accordion/Accordion.tsx b/app/components/Accordion/Accordion.tsx
index 6a3941e7..97732ec5 100644
--- a/app/components/Accordion/Accordion.tsx
+++ b/app/components/Accordion/Accordion.tsx
@@ -1,5 +1,5 @@
 import React, { FC, ReactNode, Children, cloneElement, useState, ReactElement } from "react";
-import { Pressable, View } from "react-native";
+import { TouchableOpacity, View } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
 
 import Text from "../Text";
@@ -19,11 +19,11 @@ interface AccordionProps {
 
 const Item: FC<ItemProps> = ({ title, children, isFirst, isOpen, onTitlePress }) => (
   <View style={[itemStyles.container, isFirst && itemStyles.firstContainer]}>
-    <Pressable style={itemStyles.titleContainer} onPress={onTitlePress}>
-      <Ionicons suppressHighlighting={true} name={isOpen ? "chevron-down" : "chevron-up"} size={22} style={itemStyles.icon} />
+    <TouchableOpacity style={itemStyles.titleContainer} onPress={onTitlePress}>
+      <Ionicons name={isOpen ? "chevron-down" : "chevron-up"} size={22} style={itemStyles.icon} />
 
       <Text.H3 style={itemStyles.titleText}>{title}</Text.H3>
-    </Pressable>
+    </TouchableOpacity>
 
     {isOpen ? (
       <View style={itemStyles.descriptionContainer}>
diff --git a/app/components/Button/Button.tsx b/app/components/Button/Button.tsx
index 855e06f5..7f7edaf4 100644
--- a/app/components/Button/Button.tsx
+++ b/app/components/Button/Button.tsx
@@ -36,7 +36,6 @@ const buttonFactory: ButtonFactory = (type) => (props) => {
   if (icon) {
     iconItem = (
       <Ionicons
-        suppressHighlighting={true}
         name={icon as keyof typeof Ionicons.glyphMap}
         size={24}
         style={mainStyle.mainIcon}
diff --git a/app/components/EmissionListItem/EmissionListItem.tsx b/app/components/EmissionListItem/EmissionListItem.tsx
index ac228ee4..305aad69 100644
--- a/app/components/EmissionListItem/EmissionListItem.tsx
+++ b/app/components/EmissionListItem/EmissionListItem.tsx
@@ -12,7 +12,7 @@ import { RecurringEmission, Emission, EmissionType } from "interfaces";
 import Text from "../Text";
 import styles from "./EmissionListItem.styles";
 
-interface AnyEmission extends RecurringEmission, Emission {}
+interface AnyEmission extends RecurringEmission, Emission { }
 
 interface EmissionListItemProps extends Partial<AnyEmission> {
   title: string;
@@ -45,7 +45,6 @@ const EmissionListItem: React.FC<EmissionListItemProps> = ({
       <View style={styles.iconContainer}>
         <View style={isMitigated ? styles.mitigatedCircle : styles.notMitigatedCircle} />
         <Ionicons
-          suppressHighlighting={true}
           name={iconName as keyof typeof Ionicons.glyphMap}
           size={22}
           style={styles.icon}
@@ -71,7 +70,6 @@ const EmissionListItem: React.FC<EmissionListItemProps> = ({
         </View>
       </View>
       <Ionicons
-        suppressHighlighting={true}
         name={"chevron-forward-outline"}
         size={18}
         style={styles.icon}
diff --git a/app/components/InfoButton/InfoButton.tsx b/app/components/InfoButton/InfoButton.tsx
index 55f2d84e..a3113d79 100644
--- a/app/components/InfoButton/InfoButton.tsx
+++ b/app/components/InfoButton/InfoButton.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { TouchableOpacity } from "react-native";
 import { useSelector } from "react-redux";
 import { pathOr } from "ramda";
 import { Ionicons } from "@expo/vector-icons";
@@ -20,13 +21,9 @@ const InfoButton: React.FC = () => {
     useSelector((state) => emissions.selectors.getEmissionById(state, emissionId)) || {};
 
   return (
-    <Ionicons
-      suppressHighlighting={true}
-      name="information-circle"
-      size={26}
-      style={styles.infoIcon}
-      onPress={() => navigator.openInfoModal({ emissionModelType })}
-    />
+    <TouchableOpacity onPress={() => navigator.openInfoModal({ emissionModelType })}>
+      <Ionicons name="information-circle" size={26} style={styles.infoIcon} />
+    </TouchableOpacity>
   );
 };
 
diff --git a/app/components/ListItem/ListItem.tsx b/app/components/ListItem/ListItem.tsx
index 6b5290e3..7068f83f 100644
--- a/app/components/ListItem/ListItem.tsx
+++ b/app/components/ListItem/ListItem.tsx
@@ -28,7 +28,7 @@ const ListItem: React.FC<Props> = ({ title, onPress, showTopLine, showBottomLine
   return (
     <TouchableOpacity onPress={onPress} style={containerStyle}>
       <Text.Secondary numberOfLines={1}>{title}</Text.Secondary>
-      <Ionicons suppressHighlighting={true} name={"chevron-forward-outline"} size={14} color={Colors.black50} />
+      <Ionicons name={"chevron-forward-outline"} size={14} color={Colors.black50} />
     </TouchableOpacity>
   );
 };
diff --git a/app/components/SelectableListItem/SelectableListItem.tsx b/app/components/SelectableListItem/SelectableListItem.tsx
index 36143ca6..71832efe 100644
--- a/app/components/SelectableListItem/SelectableListItem.tsx
+++ b/app/components/SelectableListItem/SelectableListItem.tsx
@@ -20,7 +20,7 @@ const SelectableListItem: React.FC<Props> = ({ selected, title, onPress }) => {
         {title}
       </Text.Primary>
       {selected && (
-        <Ionicons suppressHighlighting={true} name={"checkmark"} size={26} style={styles.icon} color={Colors.primary} />
+        <Ionicons name={"checkmark"} size={26} style={styles.icon} color={Colors.primary} />
       )}
     </TouchableOpacity>
   );
diff --git a/app/components/TabBarIcon/TabBarIcon.tsx b/app/components/TabBarIcon/TabBarIcon.tsx
index c6d1c0af..8da5a732 100644
--- a/app/components/TabBarIcon/TabBarIcon.tsx
+++ b/app/components/TabBarIcon/TabBarIcon.tsx
@@ -11,7 +11,6 @@ interface Props {
 export default function TabBarIcon(props: Props): ReactElement {
   return (
     <Ionicons
-      suppressHighlighting={true}
       name={props.name as keyof typeof Ionicons.glyphMap}
       size={26}
       color={props.focused ? Colors.primary : Colors.black50}
diff --git a/app/components/Tag/Tag.tsx b/app/components/Tag/Tag.tsx
index 7354a989..42003557 100644
--- a/app/components/Tag/Tag.tsx
+++ b/app/components/Tag/Tag.tsx
@@ -19,7 +19,6 @@ const Tag: React.FC<Props> = ({ text, onPress, icon }) => {
   if (icon) {
     iconItem = (
       <Ionicons
-        suppressHighlighting={true}
         name={icon as keyof typeof Ionicons.glyphMap}
         size={32}
         style={styles.mainIcon}
@@ -34,7 +33,7 @@ const Tag: React.FC<Props> = ({ text, onPress, icon }) => {
       <View style={styles.textContainer}>
         <Text.Primary style={styles.text}>{text}</Text.Primary>
       </View>
-      <Ionicons suppressHighlighting={true} name={"chevron-forward"} size={20} color={Colors.primary} />
+      <Ionicons name={"chevron-forward"} size={20} color={Colors.primary} />
     </TouchableOpacity>
   );
 };
diff --git a/app/components/TextButton/TextButton.tsx b/app/components/TextButton/TextButton.tsx
index d6d0d160..3413a2cd 100644
--- a/app/components/TextButton/TextButton.tsx
+++ b/app/components/TextButton/TextButton.tsx
@@ -19,7 +19,7 @@ const TextButton: React.FC<Props> = ({ onPress, iconLeft, text }) => {
   return (
     <TouchableOpacity style={styles.container} onPress={onPress}>
       <View style={{ width: iconSize + 10 }}>
-        <Ionicons suppressHighlighting={true} color={Colors.secondary} name={iconLeft} size={iconSize} />
+        <Ionicons color={Colors.secondary} name={iconLeft} size={iconSize} />
       </View>
       <View style={styles.textContainer}>
         <Text.Primary darkGray style={styles.text}>
@@ -27,7 +27,7 @@ const TextButton: React.FC<Props> = ({ onPress, iconLeft, text }) => {
         </Text.Primary>
       </View>
       <View style={{ width: iconSize + 10 }}>
-        <Ionicons suppressHighlighting={true} name="create" size={iconSize} color={Colors.primary} />
+        <Ionicons name="create" size={iconSize} color={Colors.primary} />
       </View>
     </TouchableOpacity>
   );
diff --git a/app/components/TextInput/TextInput.tsx b/app/components/TextInput/TextInput.tsx
index 3997a0f9..4f451da5 100644
--- a/app/components/TextInput/TextInput.tsx
+++ b/app/components/TextInput/TextInput.tsx
@@ -25,7 +25,7 @@ const TextInput: React.FC<Props> = ({ isOptional, onChangeText, value, placehold
         style={styles.containerOptionalTitle}
       >
         {isOptional && (
-          <Ionicons suppressHighlighting={true} name={"add-circle"} size={24} color={Colors.primary} style={styles.icon} />
+          <Ionicons name={"add-circle"} size={24} color={Colors.primary} style={styles.icon} />
         )}
         <Text.H3 green={isOptional}>{title}</Text.H3>
       </TouchableOpacity>
diff --git a/app/screens/ComingSoon/ComingSoonScreen.navigationOptions.tsx b/app/screens/ComingSoon/ComingSoonScreen.navigationOptions.tsx
index 7541baba..637ffd44 100644
--- a/app/screens/ComingSoon/ComingSoonScreen.navigationOptions.tsx
+++ b/app/screens/ComingSoon/ComingSoonScreen.navigationOptions.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { View } from "react-native";
+import { TouchableOpacity } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
 import { StackNavigationOptions } from "@react-navigation/stack";
 
@@ -27,17 +27,14 @@ const navigationOptionsIOS = ({ navigation }): StackNavigationOptions => ({
   headerTitle: () => null,
   headerLeft: () => null,
   headerRight: () => (
-    <View style={iconStyle}>
-      <Ionicons
-        suppressHighlighting={true}
-        name="close"
-        size={32}
-        color={Colors.grey100}
-        onPress={() => {
-          navigate(navigation).goBack();
-        }}
-      />
-    </View>
+    <TouchableOpacity
+      style={iconStyle}
+      onPress={() => {
+        navigate(navigation).goBack();
+      }}
+    >
+      <Ionicons name="close" size={32} color={Colors.grey100} />
+    </TouchableOpacity>
   ),
 });
 
diff --git a/app/screens/Emissions/components/SectionHeader/SectionHeader.tsx b/app/screens/Emissions/components/SectionHeader/SectionHeader.tsx
index 233f42cb..182b15d8 100644
--- a/app/screens/Emissions/components/SectionHeader/SectionHeader.tsx
+++ b/app/screens/Emissions/components/SectionHeader/SectionHeader.tsx
@@ -53,7 +53,6 @@ const SectionHeader: React.FC<Props & LocalizationContextProps> = ({
         {headerText}
       </Text.Primary>
       <Ionicons
-        suppressHighlighting={true}
         name={"chevron-forward-outline"}
         size={24}
         style={styles.icon}
diff --git a/app/screens/InfoModal/InfoModal.navigationOptions.tsx b/app/screens/InfoModal/InfoModal.navigationOptions.tsx
index 7e427d89..8e03faa3 100644
--- a/app/screens/InfoModal/InfoModal.navigationOptions.tsx
+++ b/app/screens/InfoModal/InfoModal.navigationOptions.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { View } from "react-native";
+import { TouchableOpacity } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
 import { StackNavigationOptions } from "@react-navigation/stack";
 
@@ -38,17 +38,14 @@ const navigationOptionsIOS = ({ navigation, route }): StackNavigationOptions =>
     ),
   headerLeft: () => null,
   headerRight: () => (
-    <View style={iconStyle}>
-      <Ionicons
-        suppressHighlighting={true}
-        name="close"
-        size={32}
-        color={Colors.grey100}
-        onPress={() => {
-          navigate(navigation).goBack();
-        }}
-      />
-    </View>
+    <TouchableOpacity
+      style={iconStyle}
+      onPress={() => {
+        navigate(navigation).goBack();
+      }}
+    >
+      <Ionicons name="close" size={32} color={Colors.grey100} />
+    </TouchableOpacity>
   ),
 });
 
diff --git a/app/screens/MonthlyBudget/MonthlyBudgetScreen.tsx b/app/screens/MonthlyBudget/MonthlyBudgetScreen.tsx
index 42fd1706..32a3eddf 100644
--- a/app/screens/MonthlyBudget/MonthlyBudgetScreen.tsx
+++ b/app/screens/MonthlyBudget/MonthlyBudgetScreen.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { View, ScrollView } from "react-native";
+import { View, ScrollView, TouchableOpacity } from "react-native";
 import { useNavigation } from "@react-navigation/native";
 import Slider from "@react-native-community/slider";
 import { Ionicons } from "@expo/vector-icons";
@@ -98,13 +98,13 @@ const MonthlyBudgetScreen: NavStatelessComponent = () => {
           <View style={styles.worldExampleTitle}>
             <Text.Primary bold>
               {t("MONTHLY_BUDGET_SCREEN_CARBON_EMISSIONS_WORLD")}
-              <Ionicons
-                suppressHighlighting={true}
-                name="information-circle"
-                size={26}
-                color={Colors.secondary}
-                onPress={onPressInfoWorldEmission}
-              />
+              <TouchableOpacity onPress={onPressInfoWorldEmission}>
+                <Ionicons
+                  name="information-circle"
+                  size={26}
+                  color={Colors.secondary}
+                />
+              </TouchableOpacity>
             </Text.Primary>
           </View>
           {translationMonthlyBudgetCountries.map((countryArr, idx) =>
@@ -115,14 +115,13 @@ const MonthlyBudgetScreen: NavStatelessComponent = () => {
               {t("MONTHLY_BUDGET_SCREEN_PARIS_AGREEMENT")}{" "}
               {Math.round(getDisplayUnitsValue(167, useMetricUnits))}{" "}
               {getDisplayUnits(167, useMetricUnits) + "CO2eq"}
-              <Ionicons
-                suppressHighlighting={true}
-                name="information-circle"
-                size={26}
-                color={Colors.secondary}
-                onPress={onPressInfoParisAgreement}
-                activeOpacity={Colors.danger}
-              />
+              <TouchableOpacity onPress={onPressInfoParisAgreement}>
+                <Ionicons
+                  name="information-circle"
+                  size={26}
+                  color={Colors.secondary}
+                />
+              </TouchableOpacity>
             </Text.Secondary>
           </View>
         </View>
diff --git a/app/screens/Periodicity/PeriodicityModal.navigationOptions.tsx b/app/screens/Periodicity/PeriodicityModal.navigationOptions.tsx
index f946a011..5d00c77a 100644
--- a/app/screens/Periodicity/PeriodicityModal.navigationOptions.tsx
+++ b/app/screens/Periodicity/PeriodicityModal.navigationOptions.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { View } from "react-native";
+import { TouchableOpacity } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
 import { StackNavigationOptions } from "@react-navigation/stack";
 
@@ -28,15 +28,9 @@ const navigationOptionsIOS = ({ navigation }): StackNavigationOptions => ({
   headerTitle: () => <Text.H1>{t("PERIODICITY_MODAL_SCREEN_TITLE")}</Text.H1>,
   headerLeft: () => null,
   headerRight: () => (
-    <View style={iconStyle}>
-      <Ionicons
-        suppressHighlighting={true}
-        name="close"
-        size={32}
-        color={Colors.grey100}
-        onPress={() => navigate(navigation).goBack()}
-      />
-    </View>
+    <TouchableOpacity style={iconStyle} onPress={() => navigate(navigation).goBack()}>
+      <Ionicons name="close" size={32} color={Colors.grey100} />
+    </TouchableOpacity>
   ),
 });
 


Test patch:
diff --git a/app/components/Accordion/__tests__/__snapshots__/Accordion.test.tsx.snap b/app/components/Accordion/__tests__/__snapshots__/Accordion.test.tsx.snap
index a62741a1..0b4c3b59 100644
--- a/app/components/Accordion/__tests__/__snapshots__/Accordion.test.tsx.snap
+++ b/app/components/Accordion/__tests__/__snapshots__/Accordion.test.tsx.snap
@@ -24,36 +24,8 @@ exports[`Accordion renders correctly 1`] = `
       ]
     }
   >
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+    <TouchableOpacity
+      onPress={[Function]}
       style={
         {
           "alignItems": "center",
@@ -70,7 +42,6 @@ exports[`Accordion renders correctly 1`] = `
             "color": "#3957D0",
           }
         }
-        suppressHighlighting={true}
       />
       <Text.H3
         style={
@@ -84,7 +55,7 @@ exports[`Accordion renders correctly 1`] = `
       >
         Test title 1
       </Text.H3>
-    </View>
+    </TouchableOpacity>
   </View>
   <View
     style={
@@ -100,36 +71,8 @@ exports[`Accordion renders correctly 1`] = `
       ]
     }
   >
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+    <TouchableOpacity
+      onPress={[Function]}
       style={
         {
           "alignItems": "center",
@@ -146,7 +89,6 @@ exports[`Accordion renders correctly 1`] = `
             "color": "#3957D0",
           }
         }
-        suppressHighlighting={true}
       />
       <Text.H3
         style={
@@ -160,7 +102,7 @@ exports[`Accordion renders correctly 1`] = `
       >
         Test title 2
       </Text.H3>
-    </View>
+    </TouchableOpacity>
   </View>
 </View>
 `;
diff --git a/app/components/Button/__tests__/__snapshots__/Button.test.tsx.snap b/app/components/Button/__tests__/__snapshots__/Button.test.tsx.snap
index 9aa34591..9e50f6fd 100644
--- a/app/components/Button/__tests__/__snapshots__/Button.test.tsx.snap
+++ b/app/components/Button/__tests__/__snapshots__/Button.test.tsx.snap
@@ -194,7 +194,6 @@ exports[`renders correctly fullwidth Danger Button with icon 1`] = `
         "marginHorizontal": 10,
       }
     }
-    suppressHighlighting={true}
   />
 </TouchableOpacity>
 `;
@@ -288,7 +287,6 @@ exports[`renders correctly fullwidth Primary Button with icon 1`] = `
         "marginHorizontal": 10,
       }
     }
-    suppressHighlighting={true}
   />
 </TouchableOpacity>
 `;
@@ -382,7 +380,6 @@ exports[`renders correctly fullwidth Secondary Button with icon 1`] = `
         "marginHorizontal": 10,
       }
     }
-    suppressHighlighting={true}
   />
 </TouchableOpacity>
 `;
diff --git a/app/components/EmissionListItem/__tests__/__snapshots__/EmissionListItem.test.tsx.snap b/app/components/EmissionListItem/__tests__/__snapshots__/EmissionListItem.test.tsx.snap
index f2d7fe97..76f00f78 100644
--- a/app/components/EmissionListItem/__tests__/__snapshots__/EmissionListItem.test.tsx.snap
+++ b/app/components/EmissionListItem/__tests__/__snapshots__/EmissionListItem.test.tsx.snap
@@ -47,7 +47,6 @@ exports[`EmissionListItem renders correctly if mitigated 1`] = `
             "marginHorizontal": 16,
           }
         }
-        suppressHighlighting={true}
       />
     </View>
     <View
@@ -103,7 +102,6 @@ exports[`EmissionListItem renders correctly if mitigated 1`] = `
           "marginHorizontal": 16,
         }
       }
-      suppressHighlighting={true}
     />
   </TouchableOpacity>
 </GlobalizeProvider>
@@ -156,7 +154,6 @@ exports[`EmissionListItem renders correctly with audio icon 1`] = `
             "marginHorizontal": 16,
           }
         }
-        suppressHighlighting={true}
       />
     </View>
     <View
@@ -202,7 +199,6 @@ exports[`EmissionListItem renders correctly with audio icon 1`] = `
           "marginHorizontal": 16,
         }
       }
-      suppressHighlighting={true}
     />
   </TouchableOpacity>
 </GlobalizeProvider>
@@ -255,7 +251,6 @@ exports[`EmissionListItem renders correctly with boat icon 1`] = `
             "marginHorizontal": 16,
           }
         }
-        suppressHighlighting={true}
       />
     </View>
     <View
@@ -301,7 +296,6 @@ exports[`EmissionListItem renders correctly with boat icon 1`] = `
           "marginHorizontal": 16,
         }
       }
-      suppressHighlighting={true}
     />
   </TouchableOpacity>
 </GlobalizeProvider>
@@ -354,7 +348,6 @@ exports[`EmissionListItem renders correctly with bus icon 1`] = `
             "marginHorizontal": 16,
           }
         }
-        suppressHighlighting={true}
       />
     </View>
     <View
@@ -400,7 +393,6 @@ exports[`EmissionListItem renders correctly with bus icon 1`] = `
           "marginHorizontal": 16,
         }
       }
-      suppressHighlighting={true}
     />
   </TouchableOpacity>
 </GlobalizeProvider>
@@ -453,7 +445,6 @@ exports[`EmissionListItem renders correctly with car icon 1`] = `
             "marginHorizontal": 16,
           }
         }
-        suppressHighlighting={true}
       />
     </View>
     <View
@@ -499,7 +490,6 @@ exports[`EmissionListItem renders correctly with car icon 1`] = `
           "marginHorizontal": 16,
         }
       }
-      suppressHighlighting={true}
     />
   </TouchableOpacity>
 </GlobalizeProvider>
@@ -552,7 +542,6 @@ exports[`EmissionListItem renders correctly with card icon 1`] = `
             "marginHorizontal": 16,
           }
         }
-        suppressHighlighting={true}
       />
     </View>
     <View
@@ -598,7 +587,6 @@ exports[`EmissionListItem renders correctly with card icon 1`] = `
           "marginHorizontal": 16,
         }
       }
-      suppressHighlighting={true}
     />
   </TouchableOpacity>
 </GlobalizeProvider>
@@ -651,7 +639,6 @@ exports[`EmissionListItem renders correctly with chocolate icon 1`] = `
             "marginHorizontal": 16,
           }
         }
-        suppressHighlighting={true}
       />
     </View>
     <View
@@ -697,7 +684,6 @@ exports[`EmissionListItem renders correctly with chocolate icon 1`] = `
           "marginHorizontal": 16,
         }
       }
-      suppressHighlighting={true}
     />
   </TouchableOpacity>
 </GlobalizeProvider>
@@ -750,7 +736,6 @@ exports[`EmissionListItem renders correctly with coffee icon 1`] = `
             "marginHorizontal": 16,
           }
         }
-        suppressHighlighting={true}
       />
     </View>
     <View
@@ -796,7 +781,6 @@ exports[`EmissionListItem renders correctly with coffee icon 1`] = `
           "marginHorizontal": 16,
         }
       }
-      suppressHighlighting={true}
     />
   </TouchableOpacity>
 </GlobalizeProvider>
@@ -849,7 +833,6 @@ exports[`EmissionListItem renders correctly with electricity icon 1`] = `
             "marginHorizontal": 16,
           }
         }
-        suppressHighlighting={true}
       />
     </View>
     <View
@@ -895,7 +878,6 @@ exports[`EmissionListItem renders correctly with electricity icon 1`] = `
           "marginHorizontal": 16,
         }
       }
-      suppressHighlighting={true}
     />
   </TouchableOpacity>
 </GlobalizeProvider>
@@ -948,7 +930,6 @@ exports[`EmissionListItem renders correctly with fish icon 1`] = `
             "marginHorizontal": 16,
           }
         }
-        suppressHighlighting={true}
       />
     </View>
     <View
@@ -994,7 +975,6 @@ exports[`EmissionListItem renders correctly with fish icon 1`] = `
           "marginHorizontal": 16,
         }
       }
-      suppressHighlighting={true}
     />
   </TouchableOpacity>
 </GlobalizeProvider>
@@ -1047,7 +1027,6 @@ exports[`EmissionListItem renders correctly with full hd video icon 1`] = `
             "marginHorizontal": 16,
           }
         }
-        suppressHighlighting={true}
       />
     </View>
     <View
@@ -1093,7 +1072,6 @@ exports[`EmissionListItem renders correctly with full hd video icon 1`] = `
           "marginHorizontal": 16,
         }
       }
-      suppressHighlighting={true}
     />
   </TouchableOpacity>
 </GlobalizeProvider>
@@ -1146,7 +1124,6 @@ exports[`EmissionListItem renders correctly with hd video icon 1`] = `
             "marginHorizontal": 16,
           }
         }
-        suppressHighlighting={true}
       />
     </View>
     <View
@@ -1192,7 +1169,6 @@ exports[`EmissionListItem renders correctly with hd video icon 1`] = `
           "marginHorizontal": 16,
         }
       }
-      suppressHighlighting={true}
     />
   </TouchableOpacity>
 </GlobalizeProvider>
@@ -1245,7 +1221,6 @@ exports[`EmissionListItem renders correctly with longHaulFlight icon 1`] = `
             "marginHorizontal": 16,
           }
         }
-        suppressHighlighting={true}
       />
     </View>
     <View
@@ -1291,7 +1266,6 @@ exports[`EmissionListItem renders correctly with longHaulFlight icon 1`] = `
           "marginHorizontal": 16,
         }
       }
-      suppressHighlighting={true}
     />
   </TouchableOpacity>
 </GlobalizeProvider>
@@ -1344,7 +1318,6 @@ exports[`EmissionListItem renders correctly with meal icon 1`] = `
             "marginHorizontal": 16,
           }
         }
-        suppressHighlighting={true}
       />
     </View>
     <View
@@ -1390,7 +1363,6 @@ exports[`EmissionListItem renders correctly with meal icon 1`] = `
           "marginHorizontal": 16,
         }
       }
-      suppressHighlighting={true}
     />
   </TouchableOpacity>
 </GlobalizeProvider>
@@ -1443,7 +1415,6 @@ exports[`EmissionListItem renders correctly with mediumHaulFlight icon 1`] = `
             "marginHorizontal": 16,
           }
         }
-        suppressHighlighting={true}
       />
     </View>
     <View
@@ -1489,7 +1460,6 @@ exports[`EmissionListItem renders correctly with mediumHaulFlight icon 1`] = `
           "marginHorizontal": 16,
         }
       }
-      suppressHighlighting={true}
     />
   </TouchableOpacity>
 </GlobalizeProvider>
@@ -1542,7 +1512,6 @@ exports[`EmissionListItem renders correctly with motorbike icon 1`] = `
             "marginHorizontal": 16,
           }
         }
-        suppressHighlighting={true}
       />
     </View>
     <View
@@ -1588,7 +1557,6 @@ exports[`EmissionListItem renders correctly with motorbike icon 1`] = `
           "marginHorizontal": 16,
         }
       }
-      suppressHighlighting={true}
     />
   </TouchableOpacity>
 </GlobalizeProvider>
@@ -1641,7 +1609,6 @@ exports[`EmissionListItem renders correctly with redMeat icon 1`] = `
             "marginHorizontal": 16,
           }
         }
-        suppressHighlighting={true}
       />
     </View>
     <View
@@ -1687,7 +1654,6 @@ exports[`EmissionListItem renders correctly with redMeat icon 1`] = `
           "marginHorizontal": 16,
         }
       }
-      suppressHighlighting={true}
     />
   </TouchableOpacity>
 </GlobalizeProvider>
@@ -1740,7 +1706,6 @@ exports[`EmissionListItem renders correctly with shirt icon 1`] = `
             "marginHorizontal": 16,
           }
         }
-        suppressHighlighting={true}
       />
     </View>
     <View
@@ -1786,7 +1751,6 @@ exports[`EmissionListItem renders correctly with shirt icon 1`] = `
           "marginHorizontal": 16,
         }
       }
-      suppressHighlighting={true}
     />
   </TouchableOpacity>
 </GlobalizeProvider>
@@ -1839,7 +1803,6 @@ exports[`EmissionListItem renders correctly with shortHaulFlight icon 1`] = `
             "marginHorizontal": 16,
           }
         }
-        suppressHighlighting={true}
       />
     </View>
     <View
@@ -1885,7 +1848,6 @@ exports[`EmissionListItem renders correctly with shortHaulFlight icon 1`] = `
           "marginHorizontal": 16,
         }
       }
-      suppressHighlighting={true}
     />
   </TouchableOpacity>
 </GlobalizeProvider>
@@ -1938,7 +1900,6 @@ exports[`EmissionListItem renders correctly with train icon 1`] = `
             "marginHorizontal": 16,
           }
         }
-        suppressHighlighting={true}
       />
     </View>
     <View
@@ -1984,7 +1945,6 @@ exports[`EmissionListItem renders correctly with train icon 1`] = `
           "marginHorizontal": 16,
         }
       }
-      suppressHighlighting={true}
     />
   </TouchableOpacity>
 </GlobalizeProvider>
@@ -2037,7 +1997,6 @@ exports[`EmissionListItem renders correctly with ultra hd video icon 1`] = `
             "marginHorizontal": 16,
           }
         }
-        suppressHighlighting={true}
       />
     </View>
     <View
@@ -2083,7 +2042,6 @@ exports[`EmissionListItem renders correctly with ultra hd video icon 1`] = `
           "marginHorizontal": 16,
         }
       }
-      suppressHighlighting={true}
     />
   </TouchableOpacity>
 </GlobalizeProvider>
@@ -2136,7 +2094,6 @@ exports[`EmissionListItem renders correctly with whiteMeat icon 1`] = `
             "marginHorizontal": 16,
           }
         }
-        suppressHighlighting={true}
       />
     </View>
     <View
@@ -2182,7 +2139,6 @@ exports[`EmissionListItem renders correctly with whiteMeat icon 1`] = `
           "marginHorizontal": 16,
         }
       }
-      suppressHighlighting={true}
     />
   </TouchableOpacity>
 </GlobalizeProvider>
diff --git a/app/components/InfoButton/__tests__/__snapshots__/InfoButton.test.tsx.snap b/app/components/InfoButton/__tests__/__snapshots__/InfoButton.test.tsx.snap
index 8369f9b9..b64be5db 100644
--- a/app/components/InfoButton/__tests__/__snapshots__/InfoButton.test.tsx.snap
+++ b/app/components/InfoButton/__tests__/__snapshots__/InfoButton.test.tsx.snap
@@ -1,16 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly 1`] = `
-<Ionicons
-  name="information-circle"
+<TouchableOpacity
   onPress={[Function]}
-  size={26}
-  style={
-    {
-      "color": "#3957D0",
-      "marginRight": 16,
+>
+  <Ionicons
+    name="information-circle"
+    size={26}
+    style={
+      {
+        "color": "#3957D0",
+        "marginRight": 16,
+      }
     }
-  }
-  suppressHighlighting={true}
-/>
+  />
+</TouchableOpacity>
 `;
diff --git a/app/components/ListItem/__tests__/__snapshots__/ListItem.test.tsx.snap b/app/components/ListItem/__tests__/__snapshots__/ListItem.test.tsx.snap
index f37ff2f3..ae495d66 100644
--- a/app/components/ListItem/__tests__/__snapshots__/ListItem.test.tsx.snap
+++ b/app/components/ListItem/__tests__/__snapshots__/ListItem.test.tsx.snap
@@ -32,7 +32,6 @@ exports[`<ListItem /> ListItem renders correctly both topLine and bottomLine 1`]
     color="#878787"
     name="chevron-forward-outline"
     size={14}
-    suppressHighlighting={true}
   />
 </TouchableOpacity>
 `;
@@ -65,7 +64,6 @@ exports[`<ListItem /> ListItem renders correctly wtesth bottomLine 1`] = `
     color="#878787"
     name="chevron-forward-outline"
     size={14}
-    suppressHighlighting={true}
   />
 </TouchableOpacity>
 `;
@@ -98,7 +96,6 @@ exports[`<ListItem /> ListItem renders correctly wtesth topLine 1`] = `
     color="#878787"
     name="chevron-forward-outline"
     size={14}
-    suppressHighlighting={true}
   />
 </TouchableOpacity>
 `;
@@ -127,7 +124,6 @@ exports[`<ListItem /> render 1`] = `
     color="#878787"
     name="chevron-forward-outline"
     size={14}
-    suppressHighlighting={true}
   />
 </TouchableOpacity>
 `;
diff --git a/app/components/SelectableListItem/__tests__/__snapshots__/SelectableListItem.test.tsx.snap b/app/components/SelectableListItem/__tests__/__snapshots__/SelectableListItem.test.tsx.snap
index 5a7fcb98..2e5ea749 100644
--- a/app/components/SelectableListItem/__tests__/__snapshots__/SelectableListItem.test.tsx.snap
+++ b/app/components/SelectableListItem/__tests__/__snapshots__/SelectableListItem.test.tsx.snap
@@ -31,7 +31,6 @@ exports[`<SelectableListItem /> render 1`] = `
         "marginTop": 18,
       }
     }
-    suppressHighlighting={true}
   />
 </TouchableOpacity>
 `;
@@ -67,7 +66,6 @@ exports[`<SelectableListItem /> render if not selected 1`] = `
         "marginTop": 18,
       }
     }
-    suppressHighlighting={true}
   />
 </TouchableOpacity>
 `;
diff --git a/app/components/TabBarIcon/__tests__/__snapshots__/TabBarIcon.test.tsx.snap b/app/components/TabBarIcon/__tests__/__snapshots__/TabBarIcon.test.tsx.snap
index b4dd3685..85a19765 100644
--- a/app/components/TabBarIcon/__tests__/__snapshots__/TabBarIcon.test.tsx.snap
+++ b/app/components/TabBarIcon/__tests__/__snapshots__/TabBarIcon.test.tsx.snap
@@ -5,6 +5,5 @@ exports[`renders correctly 1`] = `
   color="#878787"
   name="ios-information-circle"
   size={26}
-  suppressHighlighting={true}
 />
 `;
diff --git a/app/components/Tag/__tests__/__snapshots__/Tag.test.tsx.snap b/app/components/Tag/__tests__/__snapshots__/Tag.test.tsx.snap
index cf8f7590..b46ede54 100644
--- a/app/components/Tag/__tests__/__snapshots__/Tag.test.tsx.snap
+++ b/app/components/Tag/__tests__/__snapshots__/Tag.test.tsx.snap
@@ -28,7 +28,6 @@ exports[`Tag renders correctly with airplane icon 1`] = `
         "marginRight": 16,
       }
     }
-    suppressHighlighting={true}
   />
   <View
     style={
@@ -51,7 +50,6 @@ exports[`Tag renders correctly with airplane icon 1`] = `
     color="#0F853B"
     name="chevron-forward"
     size={20}
-    suppressHighlighting={true}
   />
 </TouchableOpacity>
 `;
@@ -96,7 +94,6 @@ exports[`Tag renders correctly with no icon 1`] = `
     color="#0F853B"
     name="chevron-forward"
     size={20}
-    suppressHighlighting={true}
   />
 </TouchableOpacity>
 `;
diff --git a/app/components/TextButton/__tests__/__snapshots__/TextButton.test.tsx.snap b/app/components/TextButton/__tests__/__snapshots__/TextButton.test.tsx.snap
index f697208e..cd8e74a7 100644
--- a/app/components/TextButton/__tests__/__snapshots__/TextButton.test.tsx.snap
+++ b/app/components/TextButton/__tests__/__snapshots__/TextButton.test.tsx.snap
@@ -23,7 +23,6 @@ exports[`TextButton renders correctly with camera icon 1`] = `
       color="#3957D0"
       name="camera"
       size={20}
-      suppressHighlighting={true}
     />
   </View>
   <View
@@ -55,7 +54,6 @@ exports[`TextButton renders correctly with camera icon 1`] = `
       color="#0F853B"
       name="create"
       size={20}
-      suppressHighlighting={true}
     />
   </View>
 </TouchableOpacity>
@@ -84,7 +82,6 @@ exports[`TextButton renders correctly with repeat icon 1`] = `
       color="#3957D0"
       name="repeat"
       size={20}
-      suppressHighlighting={true}
     />
   </View>
   <View
@@ -116,7 +113,6 @@ exports[`TextButton renders correctly with repeat icon 1`] = `
       color="#0F853B"
       name="create"
       size={20}
-      suppressHighlighting={true}
     />
   </View>
 </TouchableOpacity>
diff --git a/app/screens/Emissions/components/SectionHeader/__tests__/__snapshots__/SectionHeader.test.tsx.snap b/app/screens/Emissions/components/SectionHeader/__tests__/__snapshots__/SectionHeader.test.tsx.snap
index 80cf6f01..13954e50 100644
--- a/app/screens/Emissions/components/SectionHeader/__tests__/__snapshots__/SectionHeader.test.tsx.snap
+++ b/app/screens/Emissions/components/SectionHeader/__tests__/__snapshots__/SectionHeader.test.tsx.snap
@@ -38,7 +38,6 @@ exports[`SectionHeader should render when date 1`] = `
     name="chevron-forward-outline"
     size={24}
     style={{}}
-    suppressHighlighting={true}
   />
 </TouchableOpacity>
 `;
@@ -81,7 +80,6 @@ exports[`SectionHeader should render when title 1`] = `
     name="chevron-forward-outline"
     size={24}
     style={{}}
-    suppressHighlighting={true}
   />
 </TouchableOpacity>
 `;
diff --git a/app/screens/Faq/__tests__/__snapshots__/FaqScreen.test.tsx.snap b/app/screens/Faq/__tests__/__snapshots__/FaqScreen.test.tsx.snap
index 846cb9ad..1de894f9 100644
--- a/app/screens/Faq/__tests__/__snapshots__/FaqScreen.test.tsx.snap
+++ b/app/screens/Faq/__tests__/__snapshots__/FaqScreen.test.tsx.snap
@@ -38,36 +38,8 @@ exports[`FaqScreen renders correctly 1`] = `
           ]
         }
       >
-        <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": undefined,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={true}
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
+        <TouchableOpacity
+          onPress={[Function]}
           style={
             {
               "alignItems": "center",
@@ -84,7 +56,6 @@ exports[`FaqScreen renders correctly 1`] = `
                 "color": "#3957D0",
               }
             }
-            suppressHighlighting={true}
           />
           <Text.H3
             style={
@@ -98,7 +69,7 @@ exports[`FaqScreen renders correctly 1`] = `
           >
             Are you a startup?
           </Text.H3>
-        </View>
+        </TouchableOpacity>
       </View>
       <View
         style={
@@ -114,36 +85,8 @@ exports[`FaqScreen renders correctly 1`] = `
           ]
         }
       >
-        <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": undefined,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={true}
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
+        <TouchableOpacity
+          onPress={[Function]}
           style={
             {
               "alignItems": "center",
@@ -160,7 +103,6 @@ exports[`FaqScreen renders correctly 1`] = `
                 "color": "#3957D0",
               }
             }
-            suppressHighlighting={true}
           />
           <Text.H3
             style={
@@ -174,7 +116,7 @@ exports[`FaqScreen renders correctly 1`] = `
           >
             Are you collecting my data?
           </Text.H3>
-        </View>
+        </TouchableOpacity>
       </View>
       <View
         style={
@@ -190,36 +132,8 @@ exports[`FaqScreen renders correctly 1`] = `
           ]
         }
       >
-        <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": undefined,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={true}
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
+        <TouchableOpacity
+          onPress={[Function]}
           style={
             {
               "alignItems": "center",
@@ -236,7 +150,6 @@ exports[`FaqScreen renders correctly 1`] = `
                 "color": "#3957D0",
               }
             }
-            suppressHighlighting={true}
           />
           <Text.H3
             style={
@@ -250,7 +163,7 @@ exports[`FaqScreen renders correctly 1`] = `
           >
             What is your goal?
           </Text.H3>
-        </View>
+        </TouchableOpacity>
       </View>
       <View
         style={
@@ -266,36 +179,8 @@ exports[`FaqScreen renders correctly 1`] = `
           ]
         }
       >
-        <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": undefined,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={true}
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
+        <TouchableOpacity
+          onPress={[Function]}
           style={
             {
               "alignItems": "center",
@@ -312,7 +197,6 @@ exports[`FaqScreen renders correctly 1`] = `
                 "color": "#3957D0",
               }
             }
-            suppressHighlighting={true}
           />
           <Text.H3
             style={
@@ -326,7 +210,7 @@ exports[`FaqScreen renders correctly 1`] = `
           >
             How are you different?
           </Text.H3>
-        </View>
+        </TouchableOpacity>
       </View>
       <View
         style={
@@ -342,36 +226,8 @@ exports[`FaqScreen renders correctly 1`] = `
           ]
         }
       >
-        <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": undefined,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={true}
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
+        <TouchableOpacity
+          onPress={[Function]}
           style={
             {
               "alignItems": "center",
@@ -388,7 +244,6 @@ exports[`FaqScreen renders correctly 1`] = `
                 "color": "#3957D0",
               }
             }
-            suppressHighlighting={true}
           />
           <Text.H3
             style={
@@ -402,7 +257,7 @@ exports[`FaqScreen renders correctly 1`] = `
           >
             Is everyone doing greenwashing?
           </Text.H3>
-        </View>
+        </TouchableOpacity>
       </View>
       <View
         style={
@@ -418,36 +273,8 @@ exports[`FaqScreen renders correctly 1`] = `
           ]
         }
       >
-        <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": undefined,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={true}
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
+        <TouchableOpacity
+          onPress={[Function]}
           style={
             {
               "alignItems": "center",
@@ -464,7 +291,6 @@ exports[`FaqScreen renders correctly 1`] = `
                 "color": "#3957D0",
               }
             }
-            suppressHighlighting={true}
           />
           <Text.H3
             style={
@@ -478,7 +304,7 @@ exports[`FaqScreen renders correctly 1`] = `
           >
             Why NMF?
           </Text.H3>
-        </View>
+        </TouchableOpacity>
       </View>
       <View
         style={
@@ -494,36 +320,8 @@ exports[`FaqScreen renders correctly 1`] = `
           ]
         }
       >
-        <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": undefined,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={true}
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
+        <TouchableOpacity
+          onPress={[Function]}
           style={
             {
               "alignItems": "center",
@@ -540,7 +338,6 @@ exports[`FaqScreen renders correctly 1`] = `
                 "color": "#3957D0",
               }
             }
-            suppressHighlighting={true}
           />
           <Text.H3
             style={
@@ -554,7 +351,7 @@ exports[`FaqScreen renders correctly 1`] = `
           >
             Why do I have to enter manually my emissions?
           </Text.H3>
-        </View>
+        </TouchableOpacity>
       </View>
       <View
         style={
@@ -570,36 +367,8 @@ exports[`FaqScreen renders correctly 1`] = `
           ]
         }
       >
-        <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": undefined,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={true}
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
+        <TouchableOpacity
+          onPress={[Function]}
           style={
             {
               "alignItems": "center",
@@ -616,7 +385,6 @@ exports[`FaqScreen renders correctly 1`] = `
                 "color": "#3957D0",
               }
             }
-            suppressHighlighting={true}
           />
           <Text.H3
             style={
@@ -630,7 +398,7 @@ exports[`FaqScreen renders correctly 1`] = `
           >
             Why do you encourage people to be vegetarian / vegan / flexitarian ?
           </Text.H3>
-        </View>
+        </TouchableOpacity>
       </View>
     </View>
   </View>
diff --git a/app/screens/Languages/__tests__/__snapshots__/LanguagesScreen.test.tsx.snap b/app/screens/Languages/__tests__/__snapshots__/LanguagesScreen.test.tsx.snap
index 7a1922f2..c4c512f5 100644
--- a/app/screens/Languages/__tests__/__snapshots__/LanguagesScreen.test.tsx.snap
+++ b/app/screens/Languages/__tests__/__snapshots__/LanguagesScreen.test.tsx.snap
@@ -42,7 +42,6 @@ exports[`LanguageScreen renders correctly 1`] = `
               "marginTop": 18,
             }
           }
-          suppressHighlighting={true}
         />
       </TouchableOpacity>
       <TouchableOpacity
diff --git a/app/screens/MonthlyBudget/__tests__/__snapshots__/MonthlyBudgetScreen.test.tsx.snap b/app/screens/MonthlyBudget/__tests__/__snapshots__/MonthlyBudgetScreen.test.tsx.snap
index 3d90c00b..8bfa7f03 100644
--- a/app/screens/MonthlyBudget/__tests__/__snapshots__/MonthlyBudgetScreen.test.tsx.snap
+++ b/app/screens/MonthlyBudget/__tests__/__snapshots__/MonthlyBudgetScreen.test.tsx.snap
@@ -111,13 +111,15 @@ exports[`MonthlyBudgetScreen renders correctly 1`] = `
             bold={true}
           >
             Average monthly emissions per capita in a sample of countries 
-            <Ionicons
-              color="#3957D0"
-              name="information-circle"
+            <TouchableOpacity
               onPress={[Function]}
-              size={26}
-              suppressHighlighting={true}
-            />
+            >
+              <Ionicons
+                color="#3957D0"
+                name="information-circle"
+                size={26}
+              />
+            </TouchableOpacity>
           </Text.Primary>
         </View>
         <Text.Secondary
@@ -280,14 +282,15 @@ exports[`MonthlyBudgetScreen renders correctly 1`] = `
             368
              
             lbCO2eq
-            <Ionicons
-              activeOpacity="#E70000"
-              color="#3957D0"
-              name="information-circle"
+            <TouchableOpacity
               onPress={[Function]}
-              size={26}
-              suppressHighlighting={true}
-            />
+            >
+              <Ionicons
+                color="#3957D0"
+                name="information-circle"
+                size={26}
+              />
+            </TouchableOpacity>
           </Text.Secondary>
         </View>
       </View>