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

Issue:
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


Discussion hints:
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 |
|:--------|:-----------:|
| <img width="1080" height="2400" alt="Image" src="https://github.com/user-attachments/assets/a857c1a2-b291-4a29-bb9d-7f0ff8f8743a" /> | <img width="1170" height="2532" alt="Image" src="https://github.com/user-attachments/assets/d88612b5-f641-4f3d-a196-7bc5fd233b63" /> |
@hb2708 well done, I've assigned you to this task :)

Pull request: refactor: move FaqScreen ScrollView padding to contentContainerStyle

<!-- 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 #399 

## Changelog

- Move FaqScreen ScrollView padding to contentContainerStyle

## Demo

| Android  | iOS |
|:--------|:-----------:|
| <img width="1080" height="2400" alt="Image" src="https://github.com/user-attachments/assets/a857c1a2-b291-4a29-bb9d-7f0ff8f8743a" /> | <img width="1170" height="2532" alt="Image" src="https://github.com/user-attachments/assets/d88612b5-f641-4f3d-a196-7bc5fd233b63" /> |




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

Fix patch:
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}>


Test patch:
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