Android: Up/back on search should cancel search, not navigate

[andrewwardmt]

Description

Originally posted here https://github.com/react-navigation/react-navigation/issues/12459#issuecomment-2685489915

### Actual behaviour

Actual behaviour: On Android, tapping the up button or using the back gesture with search open immediately navigates from the screen.

https://github.com/user-attachments/assets/e4b20ff0-6bb5-44e4-968c-e4cc71fb5a5c

This is especially a problem in landscape mode, as the text input covers the X button and tapping the X button once will open the text input again. So to cancel search, you need to awkwardly close the input, press X, close the input, and then press X again

https://github.com/user-attachments/assets/2be274c6-44b1-429f-be31-a5b770f9b48f

Expected behavior

Expected behaviour: To match native behaviour and platform conventions. On Android, pressing the up or using the back gesture when search is open should first cancel the search. Tapping it again should then return from the screen.

I have tested this on a real device (Pixel 7 Pro) as well as the android emulator

Steps to reproduce

1. Open search screen
2. Tap search icon
3. Search
4. Press "<-" or do the back gesture
5. Expected: cancel search. Actual: exits search screen

Snack or a link to a repository

https://github.com/andrewwardmt/mre-search-back-cancel

Screens version

4.4.0

React Native version

0.76.7

Platforms

Android

JavaScript runtime

None

Workflow

Expo bare workflow

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

Android emulator

Device model

No response

Acknowledgements

Yes

[kmichalikk]

The issue seems to have been solved by now

I don't see the problem when running the provided example

My simple test

https://github.com/user-attachments/assets/01f3f1b9-a2cb-43c3-b503-af5814498dbd

https://github.com/user-attachments/assets/a349ef73-ce5b-45b8-ac1c-4b028b1961a1

If I'm missing something, please let me know

CODE

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

type StackRouteParamList = {
  Home: undefined;
  Search: undefined;
};

type NavigationProp<ParamList extends ParamListBase> = {
  navigation: NativeStackNavigationProp<ParamList>;
};

type StackNavigationProp = NavigationProp<StackRouteParamList>;

const Stack = createNativeStackNavigator<StackRouteParamList>();

const Search = ({navigation}: StackNavigationProp) => {
  const [searchEnabled, setSearchEnabled] = React.useState(true);
  const [searchQuery, setSearchQuery] = React.useState('');

  React.useLayoutEffect(() => {
    if (searchEnabled) {
      navigation.setOptions({
        headerSearchBarOptions: {
          onChangeText: event => setSearchQuery(event.nativeEvent.text),
        },
      });
    } else {
      setSearchQuery('');
      navigation.setOptions({
        headerSearchBarOptions: undefined,
      });
    }
  }, [navigation, searchEnabled]);

  return <ScrollView contentInsetAdjustmentBehavior='automatic'>
    <Text>Searching: {searchQuery}</Text>
    <Button onPress={() => navigation.navigate('Home')} title='Go back'/>
  </ScrollView>
}

const Home = ({navigation}: StackNavigationProp) =>
  <View>
    <Button onPress={() => navigation.push("Search")} title='Go to Search'/>
  </View>

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

[andrewwardmt]

I've updated all the dependencies and tested again. It doesn't seem to be fixed for me:

https://github.com/user-attachments/assets/3cdceec0-ee04-4b00-a3e7-4d3939ce581f

[andrewwardmt]

Hi, thanks for the reply

Your vertical video does also show the problem - it's returning from the search screen rather than cancelling the search. Also you never press the up button, it's not just back

Your horizontal test also has a physical keyboard enabled, so the on screen keyboard doesn't pop up. You need to disable the physical keyboard/stylus in the Android settings (I forget where)

[kmichalikk]

Okay, I tested on an example native app and I see the difference in behavior in "<-" in title bar

Changing this is somewhat a "breaking change". We're fixing it and probably going to introduce a new prop to have current behaviour by default.

[andrewwardmt]

Makes sense. If the search screen has no content, then it makes sense for <- or back to return to the previous screen. See gmail. If the search screen has content (which is often the case with the headerSearch), then it makes sense to close - see Files. So a new prop to control it is definitely useful