Header / refresh control flickering with headerSearchBarOptions

[hwhh]

Current behavior

The refresh control spinner flickers when using headerSearchBarOptions

this is with a fresh npx react-native@latest init Test

Minimal repo:

import React, {useState, useLayoutEffect, useCallback} from 'react';
import {View, FlatList, Text, StyleSheet, RefreshControl} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

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

export default App;

const MyScreen = ({navigation}) => {
  const [data, setData] = useState([1, 2, 3]); // Your initial data
  const [query, setQuery] = useState('');
  const [refreshing, setRefreshing] = useState(false);

  useLayoutEffect(() => {
    navigation.setOptions({
      headerSearchBarOptions: {
        onChangeText: event => setQuery(event.nativeEvent.text),
      },
    });
  }, [navigation]);

  const onRefresh = useCallback(async () => {
    setRefreshing(true);
    setTimeout(() => {
      // Refreshing logic here, then set refreshing to false
      setData([1, 2, 3]); // Pretend we fetched new data
      setRefreshing(false);
    }, 1400);
  }, []);

  const renderItem = ({item}) => (
    <View style={styles.item}>
      <Text>{item.title}</Text>
    </View>
  );


  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={item => item}
      refreshControl={
        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
      }
    />
  );
};

const styles = StyleSheet.create({
  item: {
    padding: 20,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
});

package.json:

    "@react-navigation/native": "^6.1.10",
    "@react-navigation/native-stack": "^6.9.18",
    "react": "18.2.0",
    "react-native": "0.73.4",
    "react-native-safe-area-context": "^4.9.0",
    "react-native-screens": "^3.29.0"

Screen.Recording.2024-02-08.at.7.45.28.PM.mov

Expected behavior

the top bar not to flicker.

Reproduction

https://snack.expo.dev/@hhargreaves/repo?platform=ios

Platform

• Android
• iOS
• Web
• Windows
• MacOS

Packages

• @react-navigation/bottom-tabs
• @react-navigation/drawer
• @react-navigation/material-top-tabs
• @react-navigation/stack
• @react-navigation/native-stack
• react-native-tab-view

Environment

• I've removed the packages that I don't use

package	version
@react-navigation/native	6.1.10
@react-navigation/native-stack	6.9.18
react-native-safe-area-context	4.9.0
react-native-screens	3.29.0

[Acetyld]

Any update on this?