🔥[🐛] Extra whitespace under message composer on iOS

[zbarbuto]

Issue

When the message composer is focused there is additional whitespace between the bottom of the input and the on-screen keyboard. This is particularly noticeable in landscape where there isn't a lot of vertical real-estate:

Screen.Recording.2026-07-06.at.2.50.25.pm.mov

Describe your issue here

Steps to reproduce

Steps to reproduce the behavior:

1. Rotate device to landscape
2. Focus keyboard
3. Message input moves up and covers most of the screen

Expected behavior

Message input should appear just above the keyboard

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",
    "expo": "~56.0.0",
    "expo-image-manipulator": "~56.0.20",
    "react": "19.2.3",
    "react-native": "0.85.0",
    "react-native-gesture-handler": "~2.31.1",
    "react-native-reanimated": "4.3.1",
    "react-native-safe-area-context": "~5.7.0",
    "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

---