Duplicate or Misaligned Header Space in Chat Screen

[smit-luvani]

Issue Description

When using component with react-navigation , it renders 2 headers or adding margin top.

Steps to Reproduce / Code Snippets

Just installed and started app.

Result: [img URL: https://imgur.com/qe5uOFe]

Package JSON:

{
"dependencies": {
    "@faker-js/faker": "^9.0.3",
    "@gorhom/bottom-sheet": "^4.6.4",
    "@react-native-firebase/app": "^20.3.0",
    "@react-native-firebase/crashlytics": "^20.3.0",
    "@react-native-firebase/messaging": "^20.3.0",
    "@react-navigation/core": "^6.4.17",
    "@react-navigation/native": "latest",
    "@react-navigation/native-stack": "^6.11.0",
    "@react-navigation/stack": "^6.4.1",
    "@reduxjs/toolkit": "^2.2.7",
    "axios": "^1.7.7",
    "dayjs": "^1.11.13",
    "formik": "^2.4.6",
    "http-status": "^1.8.1",
    "patch-package": "^8.0.0",
    "react": "18.3.1",
    "react-native": "0.75.1",
    "react-native-animated-nav-tab-bar": "^3.1.11",
    "react-native-bootsplash": "^6.1.1",
    "react-native-config": "^1.5.3",
    "react-native-date-picker": "^5.0.7",
    "react-native-device-info": "^11.1.0",
    "react-native-fast-image": "^8.6.3",
    "react-native-gesture-handler": "^2.19.0",
    "react-native-get-random-values": "^1.11.0",
    "react-native-gifted-charts": "^1.4.43",
    "react-native-gifted-chat": "^2.6.4",
    "react-native-health": "^1.19.0",
    "react-native-health-connect": "^3.3.0",
    "react-native-image-crop-picker": "^0.41.2",
    "react-native-linear-gradient": "^2.8.3",
    "react-native-mmkv": "^2.12.2",
    "react-native-modal": "^13.0.1",
    "react-native-permissions": "^4.1.5",
    "react-native-progress": "^5.0.1",
    "react-native-reanimated": "^3.16.2",
    "react-native-responsive-fontsize": "^0.5.1",
    "react-native-safe-area-context": "^4.14.0",
    "react-native-screens": "^3.34.0",
    "react-native-select-dropdown": "^4.0.1",
    "react-native-skeleton-loaders": "^1.5.0",
    "react-native-svg": "^15.7.1",
    "react-native-vector-icons": "^10.1.0",
    "react-native-webview": "^13.12.3",
    "react-native-youtube-iframe": "^2.3.0",
    "react-redux": "^9.1.2",
    "redux": "^5.0.1",
    "styled-components": "^6.1.13",
    "toastify-react-native": "^5.0.2",
    "victory-native": "^37.1.2",
    "yup": "^1.4.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@eslint/js": "^9.10.0",
    "@react-native/babel-preset": "0.75.1",
    "@react-native/eslint-config": "0.75.1",
    "@react-native/metro-config": "0.75.1",
    "@react-native/typescript-config": "0.75.1",
    "@types/react": "^18.2.6",
    "@types/react-native-vector-icons": "^6.4.18",
    "@types/react-test-renderer": "^18.0.0",
    "@types/yup": "^0.32.0",
    "babel-jest": "^29.6.3",
    "eslint": "^9.10.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier": "^5.2.1",
    "eslint-plugin-react": "^7.35.2",
    "globals": "^15.9.0",
    "jest": "^29.6.3",
    "prettier": "^3.3.3",
    "prettier-eslint": "^16.3.0",
    "react-native-svg-transformer": "^1.5.0",
    "react-test-renderer": "18.3.1",
    "typescript": "5.7.2",
    "typescript-eslint": "^8.4.0"
  },
}

Gifted Chat:

Output of below code: https://i.imgur.com/LSIKXNJ.png

    <GiftedChat
      messages={[
        {
          _id: 1,
          text: 'Hello developer',
          createdAt: new Date(),
          user: {
            _id: 2,
            name: 'React Native',
            avatar: 'https://placeimg.com/140/140/any',
          },
        },
      ]}
    />

Additional Information

• Nodejs version: v18.19.0
• React version: 18.3.1
• React Native version: 0.75.1
• react-native-gifted-chat version: 2.6.4
• Platform(s) (iOS, Android, or both?): both
• TypeScript version: 5.7.2

[RiteshTriveni]

Same issue