iOS: Header button reopens keyboard after search bar is dismissed

[just1and0]

Description

When a screen has both a headerSearchBarOptions search bar and header buttons (e.g. headerRight), tapping a header button after dismissing the search bar keyboard causes the keyboard to reopen unexpectedly.

Video

Screen.Recording.2026-02-17.at.9.09.11.AM.mov

Steps to reproduce

1. Use the code snippet below (screen with headerSearchBarOptions + headerRight button)
2. Tap the search bar to focus it (keyboard opens)
3. Dismiss the keyboard (tap Cancel or tap away)
4. Tap the "Menu" button in the header
5. Bug: The keyboard opens again instead of just triggering the button action

Snippet of code that reproduces the bug

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { Alert, Button, ScrollView, Text, View } from 'react-native';

const Stack = createNativeStackNavigator();

function HomeScreen({ navigation }) {
  const [searchQuery, setSearchQuery] = React.useState('');

  React.useLayoutEffect(() => {
    navigation.setOptions({
      headerSearchBarOptions: {
        placement: 'stacked',
        hideWhenScrolling: false,
        onChangeText: (event) => setSearchQuery(event.nativeEvent.text),
      },
      headerRight: () => (
        <Button
          title="Menu"
          onPress={() => Alert.alert('Menu', 'Header button pressed')}
        />
      ),
    });
  }, [navigation]);

  return (
    <ScrollView contentInsetAdjustmentBehavior="automatic">
      <View style={{ padding: 20 }}>
        <Text style={{ fontSize: 16, lineHeight: 24 }}>
          1. Tap the search bar to focus it{'\n'}
          2. Dismiss the keyboard (tap Cancel){'\n'}
          3. Tap the "Menu" button in the header{'\n'}
          4. Bug: The keyboard opens again
        </Text>
      </View>
    </ScrollView>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Expected behavior

Tapping the header button after dismissing the search bar should only trigger the button's action, without reopening the keyboard.

Actual behavior

The keyboard reopens when tapping the header button.

Minimal reproducible example

https://github.com/sbkl/sdk-55-header-right-button-opening-keyboard

Also reported on Expo: expo/expo#43198

Root cause

1. RNSScreenStackHeaderConfig.mm: updateViewController unconditionally reassigns navitem.searchController = searchBar.controller on every React re-render. UIKit interprets this as a new search controller being set and re-activates the search bar, which reopens the keyboard.
2. RNSSearchBar.mm: searchBarCancelButtonClicked: calls resignFirstResponder on the RNSSearchBar wrapper but not on the actual UISearchBar (_controller.searchBar), so the native search bar may retain first responder status internally.

Fix

PR: #3676

Versions

• react-native-screens: 4.23.0
• react-native: 0.83.2
• OS: iOS 26.2
• Xcode: 26.2/17C52

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[github-actions]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Snack or a link to a repository, Screens version, React Native version and Platforms sections.

[hmirza1]

I actually get this issue with any input on my screen, not just a search bar. I'm using Zeego dropdown menus.

Before the input has been focussed, I can open dropdowns without issue. Once an input has been focussed and the keyboard has been shown, every subsequent trigger of the dropdown menu opens the keyboard again. This is not an issue with context menus.

Simulator.Screen.Recording.-.iPhone.17.Pro.-.2026-02-22.at.15.39.42.mov

Repro component

import { useCallback, useMemo, useState } from 'react';
import {
  ActionSheetIOS,
  Keyboard,
  Platform,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import * as DropdownMenu from 'zeego/dropdown-menu';

const ATTACHMENT_OPTIONS = [{ label: 'Take Photo' }, { label: 'Upload Image' }];

function ZeegoTriggerButton({
  label,
  onPress,
}: {
  label: string;
  onPress: () => void;
}) {
  return (
    <TouchableOpacity
      activeOpacity={0.7}
      onPress={onPress}
      className="h-12 min-w-40 items-center justify-center rounded-xl border border-[#30402E]/30 bg-white px-3"
    >
      <Text className="text-sm font-medium text-[#30402E]">{label}</Text>
    </TouchableOpacity>
  );
}

export default function ZeegoKeyboardFocusDebugScreen() {
  const insets = useSafeAreaInsets();
  const [value, setValue] = useState('');
  const [lastAction, setLastAction] = useState('None');
  const [isFocused, setIsFocused] = useState(false);

  const menuOptions = useMemo(() => ATTACHMENT_OPTIONS, []);

  const handleDirectMenuTriggerPress = useCallback(() => {
    setLastAction('Direct Zeego trigger tapped');
  }, []);

  const handleInputFocus = useCallback(() => {
    setIsFocused(true);
    setLastAction('Input focused');
  }, []);

  const handleInputBlur = useCallback(() => {
    setIsFocused(false);
    setLastAction('Input blurred');
  }, []);

  const handleDismissKeyboard = useCallback(() => {
    Keyboard.dismiss();
    setLastAction('Keyboard dismissed');
  }, []);

  const handleActionSheetPress = useCallback(() => {
    if (Platform.OS !== 'ios') {
      setLastAction('ActionSheet test is iOS only');
      return;
    }

    ActionSheetIOS.showActionSheetWithOptions(
      {
        options: ['Cancel', 'Take Photo', 'Upload Image'],
        cancelButtonIndex: 0,
      },
      (buttonIndex) => {
        if (buttonIndex === 1) {
          setLastAction('ActionSheet select: Take Photo');
          return;
        }

        if (buttonIndex === 2) {
          setLastAction('ActionSheet select: Upload Image');
          return;
        }

        setLastAction('ActionSheet dismissed');
      },
    );
  }, []);

  return (
    <View
      className="flex-1 bg-[#F8F8F8] px-5 pt-6"
      style={{ paddingBottom: insets.bottom + 16 }}
    >
      <Text className="text-lg font-semibold text-[#111111]">
        Zeego Keyboard Focus Test
      </Text>
      <Text className="mt-2 text-sm text-[#5F5F5F]">
        Minimal repro: one TextInput + Direct Zeego + ActionSheetIOS.
      </Text>

      <View className="mt-8 flex-row items-center gap-3">
        <TextInput
          value={value}
          onChangeText={setValue}
          onFocus={handleInputFocus}
          onBlur={handleInputBlur}
          placeholder="Type and dismiss keyboard, then test buttons"
          className="h-12 flex-1 rounded-2xl border border-[#D9D9D9] bg-white px-4 text-base text-[#111111]"
        />
      </View>

      <View className="mt-4 flex-row items-center gap-3">
        <DropdownMenu.Root>
          <DropdownMenu.Trigger asChild className="w-fit">
            <ZeegoTriggerButton
              label="Direct Zeego"
              onPress={handleDirectMenuTriggerPress}
            />
          </DropdownMenu.Trigger>
          <DropdownMenu.Content align="start">
            <DropdownMenu.Label>Attachments</DropdownMenu.Label>
            {menuOptions.map((option) => (
              <DropdownMenu.Item
                key={`direct-${option.label}`}
                onSelect={() => setLastAction(`Direct menu select: ${option.label}`)}
              >
                <DropdownMenu.ItemTitle>{option.label}</DropdownMenu.ItemTitle>
              </DropdownMenu.Item>
            ))}
          </DropdownMenu.Content>
        </DropdownMenu.Root>
        <Text className="text-xs text-[#5F5F5F]">
          This trigger skips `SelectWithTrigger`.
        </Text>
      </View>

      <View className="mt-4 flex-row items-center gap-3">
        <TouchableOpacity
          activeOpacity={0.7}
          onPress={handleActionSheetPress}
          className="h-12 min-w-40 items-center justify-center rounded-xl border border-[#30402E]/30 bg-white px-3"
        >
          <Text className="text-sm font-medium text-[#30402E]">
            Native ActionSheetIOS
          </Text>
        </TouchableOpacity>
        <Text className="text-xs text-[#5F5F5F]">
          Baseline iOS native sheet (not context-menu interaction).
        </Text>
      </View>

      <TouchableOpacity
        activeOpacity={0.8}
        onPress={handleDismissKeyboard}
        className="mt-4 h-11 items-center justify-center rounded-xl border border-[#D9D9D9] bg-white"
      >
        <Text className="text-sm font-medium text-[#111111]">
          Dismiss Keyboard
        </Text>
      </TouchableOpacity>

      <View className="mt-6 rounded-xl border border-[#E6E6E6] bg-white px-4 py-3">
        <Text className="text-sm text-[#444444]">Input focused: {`${isFocused}`}</Text>
        <Text className="mt-1 text-sm text-[#444444]">Last action: {lastAction}</Text>
      </View>
    </View>
  );
}

package.json

{
  "name": "app-expo",
  "version": "1.0.0",
  "private": true,
  "type": "module",
  "main": "./entry.js",
  "scripts": {
    "build": "true",
    "start": "expo start",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "format": "prettier --write .",
    "lint": "oxlint .",
    "lint:fix": "oxlint --fix .",
    "lint:format": "prettier --cache --check .",
    "typecheck": "pnpm exec tsc --noEmit",
    "vitest:run": "vitest run",
    "prebuild": "expo prebuild",
    "prebuild:clean": "expo prebuild --clean",
    "clean": "rm -rf .expo dist .tscache .turbo .cache",
    "clean:all": "rm -rf .expo dist .tscache .turbo .cache node_modules",
    "clean:dev": "rm -rf .expo dist .tscache .turbo .cache node_modules ios android"
  },
  "dependencies": {
    "@codeherence/react-native-header": "^1.0.0",
    "@csark0812/zustand-expo-devtools": "^2.0.2",
    "@expo/metro-runtime": "55.0.6",
    "@expo/vector-icons": "^15.0.3",
    "@gorhom/bottom-sheet": "^5.2.8",
    "@gorhom/portal": "^1.0.14",
    "@legendapp/list": "^2.0.15",
    "@likashefqet/react-native-image-zoom": "^4.3.0",
    "@react-native-async-storage/async-storage": "^2.1.2",
    "@react-native-community/cli": "^20.0.2",
    "@react-native-masked-view/masked-view": "^0.3.2",
    "@react-native-menu/menu": "2.0.0",
    "@react-navigation/elements": "^2.4.3",
    "@react-navigation/native": "^7.1.6",
    "@react-navigation/stack": "^7.6.13",
    "@shopify/react-native-skia": "2.4.18",
    "@tanstack/react-query": "^5.90.10",
    "axios": "^1.12.2",
    "buffer": "^6.0.3",
    "classnames": "^2.5.1",
    "date-fns": "^3.6.0",
    "expo": "55.0.0-preview.12",
    "expo-audio": "55.0.7",
    "expo-auth-session": "~55.0.5",
    "expo-blur": "~55.0.7",
    "expo-clipboard": "~55.0.7",
    "expo-crypto": "~55.0.7",
    "expo-dev-client": "~55.0.7",
    "expo-device": "~55.0.8",
    "expo-document-picker": "~55.0.7",
    "expo-file-system": "~55.0.8",
    "expo-font": "~55.0.4",
    "expo-glass-effect": "^55.0.6",
    "expo-haptics": "~55.0.7",
    "expo-image": "~55.0.4",
    "expo-image-manipulator": "~55.0.8",
    "expo-image-picker": "~55.0.8",
    "expo-intent-launcher": "~55.0.7",
    "expo-linear-gradient": "~55.0.7",
    "expo-linking": "~55.0.6",
    "expo-localization": "~55.0.7",
    "expo-media-library": "~55.0.8",
    "expo-router": "55.0.0-preview.9",
    "expo-secure-store": "~55.0.7",
    "expo-sharing": "~55.0.9",
    "expo-splash-screen": "~55.0.8",
    "expo-status-bar": "55.0.3",
    "expo-symbols": "~55.0.4",
    "expo-system-ui": "~55.0.8",
    "expo-updates": "~55.0.10",
    "expo-video": "~55.0.8",
    "expo-web-browser": "~55.0.8",
    "heroui-native": "1.0.0-rc.2",
    "input-otp-native": "^0.5.0",
    "install": "^0.13.0",
    "iso-639-1": "^3.1.5",
    "jwt-decode": "^4.0.0",
    "lodash": "^4.17.21",
    "lucide-react-native": "^0.513.0",
    "mime": "^4.0.7",
    "posthog-react-native": "^4.17.0",
    "pressto": "^0.6.0",
    "react": "19.2.0",
    "react-dom": "19.2.0",
    "react-hook-form": "^7.57.0",
    "react-native": "0.83.2",
    "react-native-draggable-flatlist": "^4.0.3",
    "react-native-edge-to-edge": "^1.6.0",
    "react-native-fast-squircle": "^1.0.11",
    "react-native-gesture-handler": "~2.30.0",
    "react-native-ios-context-menu": "3.2.1",
    "react-native-ios-utilities": "5.2.0",
    "react-native-keyboard-controller": "1.20.7",
    "react-native-mmkv": "^3.3.0",
    "react-native-pager-view": "8.0.0",
    "react-native-pip-view": "^0.3.6",
    "react-native-quick-crypto": "^0.7.17",
    "react-native-reanimated": "4.3.0-nightly-20260220-cfa662238",
    "react-native-safe-area-context": "^5.6.0",
    "react-native-screen-transitions": "3.2.1",
    "react-native-screens": "4.23.0",
    "react-native-svg": "15.15.3",
    "react-native-volume-manager": "^2.0.8",
    "react-native-web": "^0.21.0",
    "react-native-worklets": "0.8.0-nightly-20260220-cfa662238",
    "reanimated-color-picker": "^4.1.0",
    "semver": "^7.7.2",
    "sonner-native": "^0.21.0",
    "tailwind-merge": "^3.4.0",
    "tailwind-variants": "^3.2.2",
    "uniwind": "^1.1.0",
    "use-debounce": "^10.0.5",
    "uuid": "catalog:",
    "zeego": "^3.0.6",
    "zod": "4.3.5",
    "zustand": "^5.0.5"
  },
  "devDependencies": {
    "@ianvs/prettier-plugin-sort-imports": "^4.4.2",
    "@react-native/metro-babel-transformer": "^0.79.2",
    "@types/lodash": "^4.17.0",
    "@types/mime": "^4.0.0",
    "@types/react": "~19.2.10",
    "@vitejs/plugin-react": "^4.5.0",
    "expo-build-disk-cache": "^0.4.4",
    "npm-run-all2": "^8.0.4",
    "oxlint": "catalog:",
    "prettier": "^3.7.4",
    "prettier-plugin-tailwindcss": "^0.6.12",
    "react-native-svg-transformer": "^1.5.1",
    "react-query-external-sync": "^2.2.3",
    "socket.io-client": "^4.8.1",
    "tailwindcss": "^4.1.17",
    "typescript": "^5.9.3",
    "vitest": "^3.2.0",
    "vitest-react-native": "^0.1.5"
  },
  "expo": {
    "doctor": {
      "reactNativeDirectoryCheck": {
        "listUnknownPackages": false
      }
    }
  },
  "prettier": "./prettier.config.js"
}

[hmirza1]

For more context, when an input has been focussed ONCE, for the rest of the app's session this bug will occur, even on screens which don't have an input.

The screen below (and the one below that) do not have any text inputs. Probably a global native first-responder bug?

[t0maboro]

Hi @just1and0 ,
I was able to reproduce a very similar issue, even without react-native-screens involved.

In my case, I had a native Dropdown (provided by zeego) and a TextInput that were conditionally rendered. After displaying the TextInput and then switching back to the Dropdown, opening the Dropdown caused the keyboard to appear automatically, even though the TextInput was no longer visible.

Because of this, it seems the behavior is not directly related to react-native-screens. I suspect that the root cause might be somewhere in the React Native core, related to the keyboard or focus handling logic.
For that reason, I'd recommend reporting this issue in the RN repository.

repro:

import React, { useState } from 'react';
import {
  TextInput,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
} from 'react-native';
import * as DropdownMenu from 'zeego/dropdown-menu';

const App = () => {
  const [inputText, setInputText] = useState('');
  const [selectedRole, setSelectedRole] = useState('Select a role...');
  const [showTextInput, setShowTextInput] = useState(false);

  return (
    <View style={styles.container}>
      <View style={styles.innerContainer}>
        <TouchableOpacity 
          style={styles.toggleButton} 
          onPress={() => setShowTextInput(!showTextInput)}
        >
          <Text style={styles.toggleButtonText}>
            {showTextInput ? 'Show DropdownMenu' : 'Show TextInput'}
          </Text>
        </TouchableOpacity>
        <View style={styles.inputGroup}>
          {showTextInput ? (
            <TextInput
              style={styles.textInput}
              onChangeText={setInputText}
              value={inputText}
              clearButtonMode="while-editing"
            />
          ) : (
            <DropdownMenu.Root>
              <DropdownMenu.Trigger>
                <View style={styles.dropdownTrigger}>
                  <Text style={styles.dropdownTriggerText}>{selectedRole}</Text>
                </View>
              </DropdownMenu.Trigger>
              <DropdownMenu.Content>
                <DropdownMenu.Label>System Roles</DropdownMenu.Label>
                <DropdownMenu.Item
                  key="admin"
                  onSelect={() => setSelectedRole('Administrator')}>
                  <DropdownMenu.ItemTitle>Administrator</DropdownMenu.ItemTitle>
                  <DropdownMenu.ItemIcon ios={{ name: 'star.fill' }} />
                </DropdownMenu.Item>
                <DropdownMenu.Item
                  key="editor"
                  onSelect={() => setSelectedRole('Editor')}>
                  <DropdownMenu.ItemTitle>Editor</DropdownMenu.ItemTitle>
                  <DropdownMenu.ItemIcon ios={{ name: 'pencil' }} />
                </DropdownMenu.Item>
                <DropdownMenu.Item
                  key="viewer"
                  onSelect={() => setSelectedRole('Viewer')}>
                  <DropdownMenu.ItemTitle>Viewer</DropdownMenu.ItemTitle>
                  <DropdownMenu.ItemIcon ios={{ name: 'eye' }} />
                </DropdownMenu.Item>
              </DropdownMenu.Content>
            </DropdownMenu.Root>
          )}
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    paddingTop: 50,
  },
  innerContainer: {
    flex: 1,
    padding: 20,
    justifyContent: 'center',
  },
  toggleButton: {
    backgroundColor: '#007AFF',
    padding: 15,
    borderRadius: 10,
    marginBottom: 24,
    alignItems: 'center',
  },
  toggleButtonText: {
    color: '#FFFFFF',
    fontSize: 16,
    fontWeight: '600',
  },
  inputGroup: {
    marginBottom: 24,
  },
  textInput: {
    height: 50,
    backgroundColor: '#FFF',
    borderRadius: 10,
    paddingHorizontal: 15,
    fontSize: 16,
    borderColor: '#CCC',
    borderWidth: 1,
  },
  dropdownTrigger: {
    height: 50,
    backgroundColor: '#FFF',
    borderRadius: 10,
    paddingHorizontal: 15,
    borderColor: '#CCC',
    borderWidth: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  dropdownTriggerText: {
    fontSize: 16,
    color: '#000',
  },
});

export default App;

issue.mov