Skip to content

🔥[🐛] Attachment sheet can show randomly #3707

Description

@zbarbuto

Issue

Occasionally when dismissing the keyboard, the attachment bottom sheet will automatically show. It seems to happen more in landscape orientation.

Describe your issue here

Steps to reproduce

Steps to reproduce the behavior:

I've been trying to get some consistent steps to reproduce on iOS and the best I've got is to use the basic app from #3706 then:

  1. Have the app in landscape
  2. Tap hold to open message actions then open the emoji picker
  3. Dismiss the emoji picker immediately
  4. Dismiss the message actions

Here's how it looks:

ScreenRecording_07-06-2026.13-27-26_1.mp4

Note how:

  1. The attachment bar is not there, but when I rotate to landscape it is.
  2. I dismiss the attachment bar and then re-trigger the issue with the steps above
  3. The bar briefly appears then disappears then re-appears
  4. If I rotate to portrait it disappears again and then rotating to landscape brings it back

On Android it seems to be enough to just open and dismiss the keyboard (this recording is a Galaxy Z fold on Android 13):

Screen_Recording_20260706_150317_ReactNativeSandbox.mp4

And this is S22 Ultra on Android 14

Screen_Recording_20260706_150736_ReactNativeSandbox.mp4

Expected behavior

Attachment bar should only appear when actually tapping the "+" button.

Project Related Information

Customization

Click To Expand

import { useRef } from 'react';
import { StatusBar, Text, useColorScheme, View } from 'react-native';
import 'react-native-gesture-handler';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
import {
  Channel,
  Chat,
  MessageComposer,
  MessageList,
  OverlayProvider,
  useChatContext,
  useCreateChatClient,
} from 'stream-chat-expo';
import {
  channelId,
  channelType,
  chatApiKey,
  chatUserId,
  chatUserName,
  chatUserToken,
} from './config';

const user = {
  id: chatUserId,
  name: chatUserName,
};

function App() {
  const isDarkMode = useColorScheme() === 'dark';

  return (
    <SafeAreaProvider>
      <GestureHandlerRootView>
        <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
        <ChatWrapper>
          <ChatChannel />
        </ChatWrapper>
      </GestureHandlerRootView>
    </SafeAreaProvider>
  );
}

export const ChatWrapper = ({ children }) => {
  const chatClient = useCreateChatClient({
    apiKey: chatApiKey,
    userData: user,
    tokenOrProvider: chatUserToken,
  });

  if (!chatClient) {
    return (
      <SafeAreaView>
        <Text>Loading chat ...</Text>
      </SafeAreaView>
    );
  }

  return (
    <SafeAreaView>
      <OverlayProvider value={{}}>
        <Chat client={chatClient}>{children}</Chat>
      </OverlayProvider>
    </SafeAreaView>
  );
};

const ChatChannel = () => {
  const { client } = useChatContext();
  const channel = useRef(client.channel(channelType, channelId));
  return (
    <View>
      <Channel channel={channel.current}>
        <MessageList />
        <MessageComposer />
      </Channel>
    </View>
  );
};

export default App;

Offline support

  • I have enabled offline support.
  • The feature I'm having does not occur when offline support is disabled. (stripe out if not applicable)

Environment

Click To Expand

package.json:

{
  "name": "ReactNativeSandbox",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "reanimated": {
    "staticFeatureFlags": {
      "FORCE_REACT_RENDER_FOR_SETTLED_ANIMATIONS": false
    }
  },
  "dependencies": {
    "@react-native-community/netinfo": "12.0.1",
    "@react-native/new-app-screen": "0.85.0",
    "@react-navigation/native": "^7.3.7",
    "@react-navigation/native-stack": "^7.17.9",
    "expo": "~56.0.0",
    "expo-image-manipulator": "~56.0.20",
    "expo-image-picker": "^57.0.2",
    "react": "19.2.3",
    "react-native": "0.85.0",
    "react-native-gesture-handler": "~2.31.1",
    "react-native-orientation-director": "^3.0.2",
    "react-native-reanimated": "4.3.1",
    "react-native-safe-area-context": "~5.7.0",
    "react-native-screens": "^4.25.2",
    "react-native-svg": "15.15.4",
    "react-native-teleport": "^1.1.10",
    "react-native-worklets": "0.8.3",
    "stream-chat-expo": "^9.6.0"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/preset-env": "^7.25.3",
    "@babel/runtime": "^7.25.0",
    "@react-native-community/cli": "20.1.0",
    "@react-native-community/cli-platform-android": "20.1.0",
    "@react-native-community/cli-platform-ios": "20.1.0",
    "@react-native/babel-preset": "0.85.0",
    "@react-native/eslint-config": "0.85.0",
    "@react-native/metro-config": "0.85.0",
    "@react-native/typescript-config": "0.85.0",
    "@types/jest": "^29.5.13",
    "@types/react": "^19.2.0",
    "@types/react-test-renderer": "^19.1.0",
    "babel-preset-expo": "~56.0.0",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "19.2.3",
    "typescript": "^5.8.3"
  },
  "engines": {
    "node": ">= 22.11.0"
  }
}

react-native info output:

 OUTPUT GOES HERE
  • Platform that you're experiencing the issue on:
    • iOS
    • Android
    • [] iOS but have not tested behavior on Android
    • Android but have not tested behavior on iOS
    • Both
  • stream-chat-react-native version you're using that has this issue:
    • e.g. 5.4.3
  • Device/Emulator info:
    • I am using a physical device
    • OS version:iOS 26.2
    • Device/Emulator: iPhone 16

Additional context

Screenshots

Click To Expand


Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions