feat: Center the switch component within the ListItemSwitch by applying a new style.

<!-- 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

Fixes #406

## Changelog

- Updates styles for the switch

## Demo

<img width="1170" height="2532" alt="image" src="https://github.com/user-attachments/assets/e5ec5c43-78f2-436d-9ae8-f04468d9515c" />

Bug: aligment issue switch

Bug: aligment issue switch
**Describe the bug**

Fix alignment issue, see screenshot below. It should be center vertically and the trailing edge of the switch should have same margin as the chevron.

<img width="314" height="192" alt="Image" src="https://github.com/user-attachments/assets/cda14948-4e7b-4f51-b0c9-68feb4130676" />

NODE_OPTIONS='--experimental-vm-modules --max-old-space-size=4096' npx --no-install jest app/components/ListItemSwitch/__tests__/ListItemSwitch.test.tsx --passWithNoTests 2>&1

diff --git a/app/components/ListItemSwitch/ListItemSwitch.styles.ts b/app/components/ListItemSwitch/ListItemSwitch.styles.ts
index b412184b..f237406d 100644
--- a/app/components/ListItemSwitch/ListItemSwitch.styles.ts
+++ b/app/components/ListItemSwitch/ListItemSwitch.styles.ts
@@ -12,6 +12,9 @@ export default StyleSheet.create({
   text: {
     paddingVertical: 18,
   },
+  switch: {
+    alignSelf: "center",
+  },
   topLine: {
     borderTopColor: Colors.grey10,
     borderTopWidth: 1.6,
diff --git a/app/components/ListItemSwitch/ListItemSwitch.tsx b/app/components/ListItemSwitch/ListItemSwitch.tsx
index d32c8e6c..17ce4893 100644
--- a/app/components/ListItemSwitch/ListItemSwitch.tsx
+++ b/app/components/ListItemSwitch/ListItemSwitch.tsx
@@ -32,7 +32,7 @@ const ListItemSwitch: React.FC<Props> = ({
   return (
     <View style={containerStyle}>
       <Text.Secondary style={styles.text}>{title}</Text.Secondary>
-      <Switch value={value} onChange={onChange} />
+      <Switch style={styles.switch} value={value} onChange={onChange} />
     </View>
   );
 };

diff --git a/app/components/ListItemSwitch/__tests__/__snapshots__/ListItemSwitch.test.tsx.snap b/app/components/ListItemSwitch/__tests__/__snapshots__/ListItemSwitch.test.tsx.snap
index b1e08408..031fcd86 100644
--- a/app/components/ListItemSwitch/__tests__/__snapshots__/ListItemSwitch.test.tsx.snap
+++ b/app/components/ListItemSwitch/__tests__/__snapshots__/ListItemSwitch.test.tsx.snap
@@ -34,6 +34,11 @@ exports[`<ListItemSwitch /> ListItem renders correctly with both topLine and bot
   </RCTText>
   <Switch
     onChange={[Function]}
+    style={
+      {
+        "alignSelf": "center",
+      }
+    }
     value={true}
   />
 </View>
@@ -69,6 +74,11 @@ exports[`<ListItemSwitch /> ListItem renders correctly with bottomLine 1`] = `
   </RCTText>
   <Switch
     onChange={[Function]}
+    style={
+      {
+        "alignSelf": "center",
+      }
+    }
     value={true}
   />
 </View>
@@ -104,6 +114,11 @@ exports[`<ListItemSwitch /> ListItem renders correctly with topLine 1`] = `
   </RCTText>
   <Switch
     onChange={[Function]}
+    style={
+      {
+        "alignSelf": "center",
+      }
+    }
     value={true}
   />
 </View>
@@ -135,6 +150,11 @@ exports[`<ListItemSwitch /> render 1`] = `
   </RCTText>
   <Switch
     onChange={[Function]}
+    style={
+      {
+        "alignSelf": "center",
+      }
+    }
     value={true}
   />
 </View>


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

Ionicons buttons opacity

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

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>
   ),
 });

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>


refactor: move FaqScreen ScrollView padding to contentContainerStyle

✅ I have read the [contributing file](https://github.com/NMF-earth/nmf-app/blob/main/contributing.md)

## Summary

Fixes #399

## Changelog

- Move FaqScreen ScrollView padding to contentContainerStyle

## Demo

| Android  | iOS |
|:--------|:-----------:|
|  |  |

Bug: Bottom Tabs Overlap FAQ Content

Bug: Bottom Tabs Overlap FAQ Content
**Describe the bug**
  In the FAQ screen under the Settings tab, the content of an expanded Accordion overlaps with the bottom tab navigator. The last item of the list becomes partially hidden, reducing readability and hurting the user experience. There should be a margin or padding at the bottom to avoid this overlap.

**To Reproduce**
Steps to reproduce the behavior:
1. Navigate to 'Settings Tab'
2. Tap on 'FAQ'
3. Expand an Accordion item with a longer description.
4. Scroll to the bottom — observe how content overlaps with the bottom tabs.

**Expected behaviour**
There should be adequate space between the last Accordion item and the bottom navigation tabs to ensure content visibility and accessibility.

**Screenshots**

![Image](https://github.com/user-attachments/assets/ac8b5679-e5d7-44a3-b0b5-92e29b5524bd)

**Device and OS info**
 - Device: [Xiaomi Redmi12]
 - OS: [Android 15]
 - Version [0.10.1-51]

**Additional context**
No

I’d like to take this issue and work on a fix. Planning to address it by adding bottom padding or adjusting contentInset to ensure the last Accordion item doesn’t overlap with the bottom tab.
@muhammadkamran8586 thanks for reporting this bug. You can open a pr, I will have a look ;)
Hey @PierreBresson I am happy to help address this and I do have a fix ready for this on my local but will hold it till be merge #401 as that will allow me to pass the pre-commit checks and create a pr

Adding Local fix screenshot for reference

| Android  | iOS |
|:--------|:-----------:|
|  |  |
@hb2708 well done, I've assigned you to this task :)

NODE_OPTIONS='--experimental-vm-modules --max-old-space-size=4096' npx --no-install jest app/screens/Faq/__tests__/FaqScreen.test.tsx --passWithNoTests 2>&1

diff --git a/app/screens/Faq/FaqScreen.styles.ts b/app/screens/Faq/FaqScreen.styles.ts
index bcfeccf0..dc706a1a 100644
--- a/app/screens/Faq/FaqScreen.styles.ts
+++ b/app/screens/Faq/FaqScreen.styles.ts
@@ -5,6 +5,8 @@ import { Colors } from "style";
 const styles = StyleSheet.create({
   container: {
     backgroundColor: Colors.white,
+  },
+  contentContainer: {
     paddingHorizontal: 16,
     paddingVertical: 24,
   },
diff --git a/app/screens/Faq/FaqScreen.tsx b/app/screens/Faq/FaqScreen.tsx
index a17c76b4..9103dcc6 100644
--- a/app/screens/Faq/FaqScreen.tsx
+++ b/app/screens/Faq/FaqScreen.tsx
@@ -10,7 +10,10 @@ import navigationOptions from "./FaqScreen.navigationOptions";

 const FaqScreen: NavStatelessComponent = () => {
   return (
-    <ScrollView style={styles.container}>
+    <ScrollView
+      style={styles.container}
+      contentContainerStyle={styles.contentContainer}
+    >
       <Accordion>
         {content.map((content, index) => (
           <Accordion.Item key={index} title={content.title}>

diff --git a/app/screens/Faq/__tests__/__snapshots__/FaqScreen.test.tsx.snap b/app/screens/Faq/__tests__/__snapshots__/FaqScreen.test.tsx.snap
index e4334a01..846cb9ad 100644
--- a/app/screens/Faq/__tests__/__snapshots__/FaqScreen.test.tsx.snap
+++ b/app/screens/Faq/__tests__/__snapshots__/FaqScreen.test.tsx.snap
@@ -2,13 +2,17 @@

 exports[`FaqScreen renders correctly 1`] = `
 <RCTScrollView
-  style={
+  contentContainerStyle={
     {
-      "backgroundColor": "#FFFFFF",
       "paddingHorizontal": 16,
       "paddingVertical": 24,
     }
   }
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+    }
+  }
 >
   <View>
     <View


Update Social Links on SettingsScreen + Fix Failing Lint and tests

Fixes #400

✅ I have read the [contributing file](https://github.com/NMF-earth/nmf-app/blob/main/contributing.md)

## Summary

This PR updates the application to be compatible with Expo 52, refactors deprecated APIs, and improves the Social Media component.

**Motivation:**
- **Expo 52 Compatibility:** The `expo-camera` and `expo-notifications` APIs have changed, requiring updates to our implementation.
- **Test Stability:** The upgrade changed how assets are mocked in tests, causing snapshot failures that needed to be resolved.
- **UI Modernization:** The Social Media links needed to be consolidated and the layout improved.

## Changelog

- **SocialMedia**: Replaced Mastodon/Medium links with a single Website link and updated layout to use `gap`.
- **Notifications**: Updated scheduling logic to use `SchedulableTriggerInputTypes.WEEKLY` and removed deprecated fields.
- **BarCodeScan**: Migrated from legacy `expo-camera` to `CameraView` and `useCameraPermissions`.
- **Tests**: Updated snapshots for `StickersImage`, `OpenFoodFacts`, [SettingsScreen](cci:1://file:///Users/harshalbhavsar/Documents/Code/nmf-app/app/screens/Settings/SettingsScreen.tsx:21:0-162:2), and [MonthlyBudgetScreen](cci:1://file:///Users/harshalbhavsar/Documents/Code/nmf-app/app/screens/MonthlyBudget/MonthlyBudgetScreen.tsx:58:0-139:2) to match Expo 52's image mocking and library updates. Removed unused `expo-barcode-scanner` mock.

## Demo

| Before | After |
|:--------|:-----------:|
|  |   |

**Tests Passed:**
Ran `yarn test` successfully with all 66 test suites passing.

```bash
Test Suites: 66 passed, 66 total
Tests:       433 passed, 433 total
Snapshots:   143 passed, 143 total
Time:        15.013 s

Non-working links

Non-working links
The two links on the end of the settings pages are not available.

**To Reproduce**
Steps to reproduce the behavior:
1. Go to 'settings'
2. Scroll down to the end of the page
3. Click on 'mastodon.social icon and medium.com'
4. See error

**Expected behaviour**
Links should take us to a useful page.

**Screenshots**

![Image](https://github.com/user-attachments/assets/e7114eb2-fee4-4446-9252-f29c2c651d3e)
![Image](https://github.com/user-attachments/assets/a63ab8dc-cdcd-4eb1-bb8d-1346a61857ba)
![Image](https://github.com/user-attachments/assets/1f1635c4-6de5-4646-8379-fbcd79eb643c)

** Please complete the following information (if applicable):**
 - Device: Motorola Edge 40 neo
 - OS: Android
 - Version [e.g. 0.5.0]

I'd like to know if there are any other links you would want to add instead of these. Also the about page is very simple, i would like to redesign it.
Hey,
The 2 available links atm are github and nmf website, I've close down social media. Feel free to submit a redesign :)
@PierreBresson did you take down http://nmf.earth ? seems no more avalilable?
@hb2708 it's online here now : https://nmf-earth.github.io
> [@hb2708](https://github.com/hb2708) it's online here now : https://nmf-earth.github.io

@PierreBresson
Thanks for pointing it out.

I was trying to fix the issue by removing the close down social link and noticed that multiple test are failing as well us unable to commit at all due to same. And it seems from the [latest commit on master](https://github.com/NMF-earth/nmf-app/commit/b0414f6c6bf3706d8a2060c7fd680204ff75f44c). Would you be okey if i help to fix those tests as well?

NODE_OPTIONS='--experimental-vm-modules --max-old-space-size=4096' npx --no-install jest app/components/OpenFoodFacts/__tests__/OpenFoodFacts.test.tsx app/components/SocialMedia/__tests__/SocialMedia.test.tsx app/components/StickersImage/__tests__/StickersImage.test.tsx app/screens/MonthlyBudget/__tests__/MonthlyBudgetScreen.test.tsx app/screens/Settings/__tests__/SettingsScreen.test.tsx --passWithNoTests 2>&1

diff --git a/app/components/SocialMedia/SocialMedia.styles.ts b/app/components/SocialMedia/SocialMedia.styles.ts
index ebb319e7..6835b392 100644
--- a/app/components/SocialMedia/SocialMedia.styles.ts
+++ b/app/components/SocialMedia/SocialMedia.styles.ts
@@ -9,8 +9,9 @@ export default StyleSheet.create({
   box: {
     flex: 1,
     flexDirection: "row",
-    justifyContent: "space-between",
+    justifyContent: "center",
     maxWidth: 200,
+    gap: 40,
     paddingBottom: 50,
   },
 });
diff --git a/app/components/SocialMedia/SocialMedia.tsx b/app/components/SocialMedia/SocialMedia.tsx
index 5e1f3875..25992879 100644
--- a/app/components/SocialMedia/SocialMedia.tsx
+++ b/app/components/SocialMedia/SocialMedia.tsx
@@ -13,12 +13,8 @@ const socialMedia = [
     url: "https://github.com/NMF-earth",
   },
   {
-    iconName: "mastodon",
-    url: "https://mastodon.social/@nmf_earth",
-  },
-  {
-    iconName: "medium-m",
-    url: "https://medium.com/@nmf_earth",
+    iconName: "globe",
+    url: "https://nmf-earth.github.io",
   },
 ];

diff --git a/app/screens/BarCodeScan/BarCodeScanScreen.tsx b/app/screens/BarCodeScan/BarCodeScanScreen.tsx
index ce61ed7c..798fa26b 100644
--- a/app/screens/BarCodeScan/BarCodeScanScreen.tsx
+++ b/app/screens/BarCodeScan/BarCodeScanScreen.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { useNavigation } from "@react-navigation/native";
 import { ActivityIndicator, View } from "react-native";
-import { CameraView, CameraType, useCameraPermissions } from "expo-camera";
+import { CameraView, useCameraPermissions } from "expo-camera";
 import { is, path, pathOr, both, complement, equals } from "ramda";
 import constants from "expo-constants";

@@ -24,7 +24,7 @@ const getEcoScore = pathOr("", ["ecoscore_grade"]);
 const getName = path(["product_name"]);

 const BarCodeScanScreen = ({ language = "" }: LocalizationContextProps) => {
-  const [hasPermission, setHasPermission] = useState(null);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [scanned, setScanned] = useState(false);
   const [hasCarbonData, setHasCarbonData] = useState(true);
   const [isFetchingData, setIsFetchingData] = useState(false);
@@ -39,15 +39,13 @@ const BarCodeScanScreen = ({ language = "" }: LocalizationContextProps) => {
   const { version, ios, android } = constants.expoConfig;
   const buildNumber = platform.isIOS ? ios.buildNumber : android.versionCode;
   const platformType = platform.isIOS ? "iOS" : "Android";
-  // TODO:
   const [permission, requestPermission] = useCameraPermissions();

   useEffect(() => {
     (async () => {
-      const { status } = await requestPermission();
-      setHasPermission(status === "granted");
+      await requestPermission();
     })();
-  }, []);
+  }, [requestPermission]);

   const onPressTryAgain = () => {
     setError(false);
@@ -119,7 +117,7 @@ const BarCodeScanScreen = ({ language = "" }: LocalizationContextProps) => {
     return <View style={styles.container}></View>;
   }

-  if (!permission) {
+  if (!permission.granted) {
     return <PermissionsRequest type="camera" />;
   }

@@ -179,7 +177,8 @@ const BarCodeScanScreen = ({ language = "" }: LocalizationContextProps) => {
         </Text.H2>
         <CameraView
           style={styles.scanner}
-          // onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
+        // FIXME: Add onBarCodeScanned
+        // onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
         />
         {__DEV__ ? (
           <Button.Secondary
diff --git a/app/screens/Notifications/NotificationsScreen.tsx b/app/screens/Notifications/NotificationsScreen.tsx
index 606b2795..4504fafa 100644
--- a/app/screens/Notifications/NotificationsScreen.tsx
+++ b/app/screens/Notifications/NotificationsScreen.tsx
@@ -11,16 +11,16 @@ import { t } from "utils";
 import navigationOptions from "./NotificationsScreen.navigationOptions";
 import styles from "./NotificationsScreen.styles";

-const notification = {
+const notification: Notifications.NotificationRequestInput = {
   content: {
     title: t("NOTIFICATIONS_SCREEN_NOTIFICATION_TITLE"),
     body: t("NOTIFICATIONS_SCREEN_NOTIFICATION_BODY"),
   },
   trigger: {
+    type: Notifications.SchedulableTriggerInputTypes.WEEKLY,
     weekday: 1,
     hour: 21,
     minute: 0,
-    repeats: true,
   },
 };

@@ -41,8 +41,7 @@ const NotificationsScreen: NavStatelessComponent = () => {
         }

         if (value) {
-          // TODO: fix
-          // await Notifications.scheduleNotificationAsync(notification);
+          await Notifications.scheduleNotificationAsync(notification);
         } else {
           await Notifications.cancelAllScheduledNotificationsAsync();
         }

diff --git a/app/components/OpenFoodFacts/__tests__/__snapshots__/OpenFoodFacts.test.tsx.snap b/app/components/OpenFoodFacts/__tests__/__snapshots__/OpenFoodFacts.test.tsx.snap
index 5bc53025..11fd5648 100644
--- a/app/components/OpenFoodFacts/__tests__/__snapshots__/OpenFoodFacts.test.tsx.snap
+++ b/app/components/OpenFoodFacts/__tests__/__snapshots__/OpenFoodFacts.test.tsx.snap
@@ -35,7 +35,11 @@ exports[`<OpenFoodFacts /> render correctly 1`] = `
     >
       <Image
         resizeMode="contain"
-        source={1}
+        source={
+          {
+            "testUri": "../../../assets/images/open-food-fact/nutriscore-a.png",
+          }
+        }
         style={
           {
             "alignSelf": "center",
@@ -55,7 +59,11 @@ exports[`<OpenFoodFacts /> render correctly 1`] = `
     >
       <Image
         resizeMode="contain"
-        source={1}
+        source={
+          {
+            "testUri": "../../../assets/images/open-food-fact/nova-unknown.png",
+          }
+        }
         style={
           {
             "alignSelf": "center",
@@ -75,7 +83,11 @@ exports[`<OpenFoodFacts /> render correctly 1`] = `
     >
       <Image
         resizeMode="contain"
-        source={1}
+        source={
+          {
+            "testUri": "../../../assets/images/open-food-fact/ecoscore-a.png",
+          }
+        }
         style={
           {
             "alignSelf": "center",
@@ -124,7 +136,11 @@ exports[`<OpenFoodFacts /> render nothing if bad data passed 1`] = `
     >
       <Image
         resizeMode="contain"
-        source={1}
+        source={
+          {
+            "testUri": "../../../assets/images/open-food-fact/nutriscore-unknown.png",
+          }
+        }
         style={
           {
             "alignSelf": "center",
@@ -144,7 +160,11 @@ exports[`<OpenFoodFacts /> render nothing if bad data passed 1`] = `
     >
       <Image
         resizeMode="contain"
-        source={1}
+        source={
+          {
+            "testUri": "../../../assets/images/open-food-fact/nova-unknown.png",
+          }
+        }
         style={
           {
             "alignSelf": "center",
@@ -164,7 +184,11 @@ exports[`<OpenFoodFacts /> render nothing if bad data passed 1`] = `
     >
       <Image
         resizeMode="contain"
-        source={1}
+        source={
+          {
+            "testUri": "../../../assets/images/open-food-fact/ecoscore-unknown.png",
+          }
+        }
         style={
           {
             "alignSelf": "center",
diff --git a/app/components/SocialMedia/__tests__/__snapshots__/SocialMedia.test.tsx.snap b/app/components/SocialMedia/__tests__/__snapshots__/SocialMedia.test.tsx.snap
index 0326afda..611be8f7 100644
--- a/app/components/SocialMedia/__tests__/__snapshots__/SocialMedia.test.tsx.snap
+++ b/app/components/SocialMedia/__tests__/__snapshots__/SocialMedia.test.tsx.snap
@@ -15,7 +15,8 @@ exports[`renders correctly SocialMedia 1`] = `
       {
         "flex": 1,
         "flexDirection": "row",
-        "justifyContent": "space-between",
+        "gap": 40,
+        "justifyContent": "center",
         "maxWidth": 200,
         "paddingBottom": 50,
       }
@@ -35,16 +36,7 @@ exports[`renders correctly SocialMedia 1`] = `
     >
       <View
         color="#595D58"
-        name="mastodon"
-        size={32}
-      />
-    </TouchableOpacity>
-    <TouchableOpacity
-      onPress={[Function]}
-    >
-      <View
-        color="#595D58"
-        name="medium-m"
+        name="globe"
         size={32}
       />
     </TouchableOpacity>
diff --git a/app/components/StickersImage/__tests__/__snapshots__/StickersImage.test.tsx.snap b/app/components/StickersImage/__tests__/__snapshots__/StickersImage.test.tsx.snap
index 2c825305..a06506a2 100644
--- a/app/components/StickersImage/__tests__/__snapshots__/StickersImage.test.tsx.snap
+++ b/app/components/StickersImage/__tests__/__snapshots__/StickersImage.test.tsx.snap
@@ -10,7 +10,11 @@ exports[`renders correctly StickersImage with bike image 1`] = `
 >
   <Image
     resizeMode="contain"
-    source={1}
+    source={
+      {
+        "testUri": "../../../assets/images/stickers/bike.png",
+      }
+    }
     style={
       {
         "alignSelf": "center",
@@ -34,7 +38,11 @@ exports[`renders correctly StickersImage with earth image 1`] = `
 >
   <Image
     resizeMode="contain"
-    source={1}
+    source={
+      {
+        "testUri": "../../../assets/images/stickers/earth.png",
+      }
+    }
     style={
       {
         "alignSelf": "center",
@@ -58,7 +66,11 @@ exports[`renders correctly StickersImage with restaurant image 1`] = `
 >
   <Image
     resizeMode="contain"
-    source={1}
+    source={
+      {
+        "testUri": "../../../assets/images/stickers/restaurant.png",
+      }
+    }
     style={
       {
         "alignSelf": "center",
diff --git a/app/screens/MonthlyBudget/__tests__/__snapshots__/MonthlyBudgetScreen.test.tsx.snap b/app/screens/MonthlyBudget/__tests__/__snapshots__/MonthlyBudgetScreen.test.tsx.snap
index fd12751c..3d90c00b 100644
--- a/app/screens/MonthlyBudget/__tests__/__snapshots__/MonthlyBudgetScreen.test.tsx.snap
+++ b/app/screens/MonthlyBudget/__tests__/__snapshots__/MonthlyBudgetScreen.test.tsx.snap
@@ -31,62 +31,6 @@ exports[`MonthlyBudgetScreen renders correctly 1`] = `
         onLayout={[Function]}
         style={
           [
-            {
-              "defaultIndicatorIdle": {
-                "backgroundColor": "#C0C0C0",
-                "height": 10,
-                "width": 2,
-              },
-              "defaultIndicatorMarked": {
-                "backgroundColor": "#CCCCCC",
-                "height": 20,
-                "width": 5,
-              },
-              "defaultSlider": {},
-              "defaultSlideriOS": {
-                "height": 40,
-              },
-              "sliderMainContainer": {
-                "width": "100%",
-                "zIndex": 1,
-              },
-              "stepIndicatorElement": {
-                "alignContent": "center",
-                "alignItems": "center",
-              },
-              "stepNumber": {
-                "alignItems": "center",
-                "marginTop": 20,
-                "position": "absolute",
-              },
-              "stepsIndicator": {
-                "flex": 1,
-                "flexDirection": "row",
-                "justifyContent": "space-between",
-                "top": 10,
-                "zIndex": 2,
-              },
-              "thumbImage": {
-                "alignContent": "center",
-                "alignItems": "center",
-                "position": "absolute",
-              },
-              "thumbImageContainer": {
-                "alignContent": "center",
-                "alignItems": "center",
-                "justifyContent": "center",
-                "position": "absolute",
-                "zIndex": 3,
-              },
-              "trackMarkContainer": {
-                "alignContent": "center",
-                "alignItems": "center",
-                "alignSelf": "center",
-                "justifyContent": "center",
-                "position": "absolute",
-                "zIndex": 3,
-              },
-            },
             [
               {
                 "marginTop": 14,
diff --git a/app/screens/Settings/__tests__/__snapshots__/SettingsScreen.test.tsx.snap b/app/screens/Settings/__tests__/__snapshots__/SettingsScreen.test.tsx.snap
index 5544bdde..113d059c 100644
--- a/app/screens/Settings/__tests__/__snapshots__/SettingsScreen.test.tsx.snap
+++ b/app/screens/Settings/__tests__/__snapshots__/SettingsScreen.test.tsx.snap
@@ -104,7 +104,11 @@ exports[`SettingsScreen renders correctly 1`] = `
     >
       <Image
         resizeMode="contain"
-        source={1}
+        source={
+          {
+            "testUri": "../../../assets/images/logos/nmf.png",
+          }
+        }
         style={
           {
             "width": "50%",
diff --git a/jest/mock/node-modules/index.js b/jest/mock/node-modules/index.js
index 9123a987..ffd18897 100644
--- a/jest/mock/node-modules/index.js
+++ b/jest/mock/node-modules/index.js
@@ -76,16 +76,6 @@ jest.mock("expo-constants", () => {
   };
 });

-jest.mock("expo-barcode-scanner", () => {
-  return {
-    BarCodeScanner: {
-      requestPermissionsAsync: () => ({
-        status: "denied",
-      }),
-    },
-  };
-});
-
 jest.mock("expo-notifications", () => {
   return {
     requestPermissionsAsync: () => ({


(#339) Present PermissionsRequest in Notification screen

✅ I have read the [contributing file](https://github.com/NMF-earth/nmf-app/blob/main/contributing.md)

## Summary

Closes #339

## Changelog

- Update snapshots
- Check for permissions on useEffect in Notifications screen
- Use PermissionsRequest component to require permissions in Notifications screen
- Add necessary translations

## Demo

![image](https://user-images.githubusercontent.com/39802870/139155519-63c26c98-460a-4fe9-bd67-dcb9e04e3330.png)

Present PermissionsRequest in Notification screen
#### Summary
Show `PermissionsRequest` component in Notification screen instead of opening settings with Linking.

_NB: First to submit a valid PR, first to merge. Except if you already have merged some good code in this repo, I won’t assign any issue due to spam and beginners unable to complete a PR without a lot of help from my side._

As far as I'm concerned you can't show the permission pop up twice to a user once they've rejected.
I also agree that just sending users to settings might not be a good UX, rather showing a popup saying :
`you've rejected before if you want you can go to settings and give permission manually` (sth like that) & then two buttons `yes`/`no` sth
@BatDroid indeed, you are right, you can only ask once with the native popup/dialog/prompt.
The idea is to do the same as in the `BarCodeScanScreen`. When user open for the notification screen for the first time, he should see the native dialog with empty screen behind, like line 102 of `BarCodeScanScreen` :
```
  if (hasPermission === null) {
    return <View style={styles.container}></View>;
  }
```
And then if user has denied the authorization in the dialog show the component:
```
  if (!hasPermission) {
    return <PermissionsRequest type="notification" />;
  }
```
otherwise, show normal render.

NODE_OPTIONS='--experimental-vm-modules --max-old-space-size=4096' npx --no-install jest app/components/PermissionsRequest/__tests__/PermissionsRequest.test.tsx app/screens/Notifications/__tests__/NotificationsScreen.tests.tsx --passWithNoTests 2>&1

diff --git a/app/components/PermissionsRequest/translations/en.json b/app/components/PermissionsRequest/translations/en.json
index ae6002d8..5210dddb 100644
--- a/app/components/PermissionsRequest/translations/en.json
+++ b/app/components/PermissionsRequest/translations/en.json
@@ -2,6 +2,6 @@
   "PERMISSIONS_REQUEST_COMPONENT_OPEN_SETTINGS": "Open settings",
   "PERMISSIONS_REQUEST_COMPONENT_CAMERA_TITLE": "No access to camera",
   "PERMISSIONS_REQUEST_COMPONENT_CAMERA_SUBTITLE": "Please give NMF.earth app access to camera in your phone settings to use this feature.",
-  "PERMISSIONS_REQUEST_COMPONENT_NOTIFICATION_TITLE": "",
-  "PERMISSIONS_REQUEST_COMPONENT_NOTIFICATION_SUBTITLE": ""
+  "PERMISSIONS_REQUEST_COMPONENT_NOTIFICATION_TITLE": "No permission to send notifications",
+  "PERMISSIONS_REQUEST_COMPONENT_NOTIFICATION_SUBTITLE": "Please give NMF.earth app permission to send you notifications in your phone settings to use this feature."
 }
diff --git a/app/screens/Notifications/NotificationsScreen.tsx b/app/screens/Notifications/NotificationsScreen.tsx
index b772d818..63c75c78 100644
--- a/app/screens/Notifications/NotificationsScreen.tsx
+++ b/app/screens/Notifications/NotificationsScreen.tsx
@@ -1,10 +1,10 @@
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useState, useEffect } from "react";
 import { View, Switch, Alert, Linking } from "react-native";
 import * as Notifications from "expo-notifications";
 import { useDispatch, useSelector } from "react-redux";

 import { NavStatelessComponent } from "interfaces";
-import { Text } from "components";
+import { PermissionsRequest, Text } from "components";
 import { userPreferences } from "ducks";
 import { t } from "utils";

@@ -29,31 +29,46 @@ const NotificationsScreen: NavStatelessComponent = () => {
   const [activated, setActivated] = useState(
     useSelector(userPreferences.selectors.getActivateNotifications)
   );
+  const [hasPermission, setHasPermission] = useState(null);

   const onValueChange = useCallback(
     async (value: boolean) => {
       try {
-        const permission = await Notifications.requestPermissionsAsync();
+        if (!hasPermission) {
+          Linking.openSettings();
+          return;
+        }

-        if (permission.granted && value) {
+        if (value) {
           await Notifications.scheduleNotificationAsync(notification);
         } else {
           await Notifications.cancelAllScheduledNotificationsAsync();
-
-          if (!permission.granted) {
-            Linking.openSettings();
-          }
         }

-        setActivated(permission.granted && value);
-        dispatch(userPreferences.actions.toggleNotifications(permission.granted && value));
+        setActivated(value);
+        dispatch(userPreferences.actions.toggleNotifications(value));
       } catch (e) {
         Alert.alert("Error", e);
       }
     },
-    [dispatch]
+    [dispatch, hasPermission]
   );

+  useEffect(() => {
+    (async () => {
+      const { status } = await Notifications.requestPermissionsAsync();
+      setHasPermission(status === "granted");
+    })();
+  }, []);
+
+  if (hasPermission === null) {
+    return <View style={styles.container} />;
+  }
+
+  if (!hasPermission) {
+    return <PermissionsRequest type="notification" />;
+  }
+
   return (
     <View style={styles.container}>
       <Text.Primary style={styles.intro}>{t("NOTIFICATIONS_SCREEN_INTRO")}</Text.Primary>
diff --git a/scripts/poeditor/en.json b/scripts/poeditor/en.json
index dd1e4570..76207d46 100644
--- a/scripts/poeditor/en.json
+++ b/scripts/poeditor/en.json
@@ -217,6 +217,6 @@
 	"PERMISSIONS_REQUEST_COMPONENT_OPEN_SETTINGS": "Open settings",
 	"PERMISSIONS_REQUEST_COMPONENT_CAMERA_TITLE": "No access to camera",
 	"PERMISSIONS_REQUEST_COMPONENT_CAMERA_SUBTITLE": "Please give NMF.earth app access to camera in your phone settings to use this feature.",
-	"PERMISSIONS_REQUEST_COMPONENT_NOTIFICATION_TITLE": "",
-	"PERMISSIONS_REQUEST_COMPONENT_NOTIFICATION_SUBTITLE": ""
+	"PERMISSIONS_REQUEST_COMPONENT_NOTIFICATION_TITLE": "No permission to send notifications",
+	"PERMISSIONS_REQUEST_COMPONENT_NOTIFICATION_SUBTITLE": "Please give NMF.earth app permission to send you notifications in your phone settings to use this feature."
 }
\ No newline at end of file

diff --git a/app/components/PermissionsRequest/__tests__/__snapshots__/PermissionsRequest.test.tsx.snap b/app/components/PermissionsRequest/__tests__/__snapshots__/PermissionsRequest.test.tsx.snap
index 25b50ab3..bdbde928 100644
--- a/app/components/PermissionsRequest/__tests__/__snapshots__/PermissionsRequest.test.tsx.snap
+++ b/app/components/PermissionsRequest/__tests__/__snapshots__/PermissionsRequest.test.tsx.snap
@@ -85,12 +85,12 @@ exports[`renders correctly PermissionsRequest if notification 1`] = `
     <Text.H2
       center={true}
     >
-
+      No permission to send notifications
     </Text.H2>
     <Text.Primary
       center={true}
     >
-
+      Please give NMF.earth app permission to send you notifications in your phone settings to use this feature.
     </Text.Primary>
   </View>
   <Button.Secondary
diff --git a/app/screens/Notifications/__tests__/__snapshots__/NotificationsScreen.tests.tsx.snap b/app/screens/Notifications/__tests__/__snapshots__/NotificationsScreen.tests.tsx.snap
index 1e5f798c..aadab118 100644
--- a/app/screens/Notifications/__tests__/__snapshots__/NotificationsScreen.tests.tsx.snap
+++ b/app/screens/Notifications/__tests__/__snapshots__/NotificationsScreen.tests.tsx.snap
@@ -9,44 +9,5 @@ exports[`NotificationsScreen renders correctly 1`] = `
       "paddingHorizontal": 16,
     }
   }
->
-  <Text.Primary
-    style={
-      Object {
-        "paddingTop": 30,
-      }
-    }
-  >
-    Receive a notification every Sunday at 9 p.m to remind you to add your weekly emissions.
-  </Text.Primary>
-  <View
-    style={
-      Object {
-        "alignItems": "center",
-        "flexDirection": "row",
-        "justifyContent": "space-between",
-        "marginTop": 22,
-      }
-    }
-  >
-    <Text.Secondary
-      bold={true}
-    >
-      Activated
-    </Text.Secondary>
-    <RCTSwitch
-      accessibilityRole="switch"
-      onChange={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      style={
-        Object {
-          "height": 31,
-          "width": 51,
-        }
-      }
-      value={false}
-    />
-  </View>
-</View>
+/>
 `;