'useReanimatedHeaderHeight' doesn't respond to changes in search bar focus

[ha3]

Description

On iOS, when the search bar is focused, the upper section of the header is collapsed. But it seems that the reanimated value from useReanimatedHeaderHeight doesn't get updated during focus/blur.

Also on the simulator (iPhone 13 - iOS 15.5) I tested, useReanimatedHeaderHeight returns the value '91' but when I used the visual inspector I found it should be '96' (44 for the upper part, 52 for the search bar). I haven't tested this with other simulators–but as far as I know, they should have the same search bar height.

Steps to reproduce

1. Add a screen with a search bar
2. Wrap NavigationContainer with ReanimatedScreenProvider.
3. Use useReanimatedHeaderHeight inside the screen
4. Log header height value inside a worklet
5. Click on the search bar and observe that the header height has been changed
6. Observe that the change in the header height is not reflected in the logs

Snack or a link to a repository

https://snack.expo.dev/@hozdemir/delicious-red-marshmallows

Screens version

3.27.0

React Native version

0.72.6

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

iPhone 13 (iOS 15.5)

Acknowledgements

Yes

[tboba]

Hi @ha3, thanks for reporting this issue!
Unfortunately I cannot reproduce this problem. On my side useReanimatedHeaderHeight hook returns correct values when I'm trying to swipe the search bar.

On the large header:

Screen.Recording.2023-11-02.at.15.38.10.mov

On small header:

Screen.Recording.2023-11-02.at.15.39.31.mov

Here's my code that reproduces this issue. Here I'm using Native Stack v5, but this shouldn't have an impact on the problem. Can you try to compare if you're using the shared value correctly?
Cheers!

import { ScrollView, StyleSheet, Text } from 'react-native';

import { NavigationContainer } from '@react-navigation/native';
import {
  useReanimatedHeaderHeight,
  ReanimatedScreenProvider,
} from 'react-native-screens/reanimated';
import Animated, { useAnimatedStyle } from 'react-native-reanimated';
import { createNativeStackNavigator } from 'react-native-screens/native-stack';
import { FullWindowOverlay } from 'react-native-screens';
import React from 'react';

const Stack = createNativeStackNavigator();

function ExampleScreen() {
  const headerHeight = useReanimatedHeaderHeight();

  const animatedStyles = useAnimatedStyle(() => ({
    transform: [{ translateY: headerHeight.value }],
  }));

  return (
    <FullWindowOverlay>
      <Animated.View
        style={[
          {
            display: 'flex',
            justifyContent: 'flex-end',
            alignItems: 'center',

            backgroundColor: 'red',
            width: '100%',
            opacity: 0.5,
            height: 60,
            zIndex: 1,
          },
          animatedStyles,
        ]}>
        <Text>I'm a header!</Text>
      </Animated.View>
    </FullWindowOverlay>
  );
}

const Screen = () => {
  return (
    <>
      <ScrollView
        style={styles.screen}
        contentContainerStyle={{
          flexGrow: 1,
          justifyContent: 'center',
          alignItems: 'center',
        }}
        contentInsetAdjustmentBehavior="automatic">
        <Text>Screen</Text>
      </ScrollView>
      <ExampleScreen />
    </>
  );
};

export default function App() {
  return (
    <ReanimatedScreenProvider>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen
            name="screen"
            component={Screen}
            options={{
              searchBar: {
                placeholder: 'Search',
              },
              headerTitle: 'Custom header title',
            }}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </ReanimatedScreenProvider>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
  },
});

[tboba]

Actually, when I'm trying to use native stack v6 from React Navigation the issue occurs for me 💡
Let me investigate that further, I'll try to come back with a solution shortly.

[tboba]

@ha3 I've tried to test useReanimatedHeaderHeight on example app from React Navigation and it seems that I've managed to make it work. My first assumption is that react navigation needs to have react-native-screens version set to 3.27.0 (which currently is 3.22.1, as Expo Go has that version of rn-screens by default).

Screen.Recording.2023-11-02.at.17.13.00.mov

Could you check if patching react-native-screens version to 3.27.0 inside whole @react-navigation monorepo is sufficient in your case?

[ha3]

@tboba sorry for responding so late! Unfortunately, I couldn't run the example app in react-navigation repo.

Also, I don't understand one thing. Since react-native-screens is a peer dependency for react-navigation, its code uses the version installed in the user's app. So how should changing the version inside the monorepo affects the outcome?

[tboba]

@ha3 I think that you should be right right about your meaning of screens as a peer dependency, but to be honest I don't know how peerDependencies work with different versions of packages between defined version of peerDependency and the actual dependency installed in a project.
While I was testing screens inside a react navigation example, changing the version of react-native-screens somehow worked for me 🤔

[tboba]

Hi @ha3, sorry for pretty late update about this issue, but I finally found the time to check it again 😄
Right now useReanimatedHeaderHeight should work correctly with search bar (and other stuff, like large title mode), but it seems that native-stack v7 is required to make it work (at this moment you need to install alpha version of 7.0). That's because on native-stack v6, implementation of adding useAnimatedHeaderHeight hasn't been merged yet.

However, I'll try to push forward with creating a PR for adding useAnimatedHeaderHeight also there! 💪
Because there's a way to make this hook working, I'll close this issue for now, but don't hesitate to ask any questions, if you have any.

Cheers! 👋

Screen.Recording.2024-05-15.at.14.55.42.mov