search

FaridSafi / react-native-gifted-chat

💬 The most complete chat UI for React Native
https://gifted.chat
MIT License
13.57k stars 3.55k forks source link

Duplicate or Misaligned Header Space in Chat Screen #2558

Open smit-luvani opened 18 hours ago

smit-luvani commented 18 hours ago

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] image

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

RiteshTriveni commented 6 hours ago

Same issue