React child prop doesn't change when parent state updates

Question

I have a react native app and I want to update some states and pass a prop to other components. I am passing the focus state and setFocus to the "Search" component. The focus state on the "Vault" component updates properly but it doesn't affect the "Search" component. The code is like below. What am I doing wrong?

const Vault = ({ navigation }: VaultStackNavigationProps<"Vault">) => {
  const [focus, setFocus] = useState(false);

  React.useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <Right isFocus={focus}>
          <Search handleFocus={setFocus} focus={focus} />
        </Right>
      ),
    });
  }, [navigation]);
  return (
    <Box style={{ flex: 1, backgroundColor: "#1A1A1A" }}>
      <Text color="white">hello</Text>
    </Box>
  );
};

export const Search = ({ handleFocus, focus }) => {
  const [value, setValue] = useState("");
  const inputRef = useRef<TextInput>();
  const { width } = useWindowDimensions();

  const onHandleFocus = (value) => {
    handleFocus(value);
  };

  useEffect(() => {
    if (focus) {
      inputRef.current.focus();
    } else {
      Keyboard.dismiss();

      clearTextState();
    }
  }, [focus]);

  const clearTextState = () => {
    setValue("");
  };
  const onClear = () => {
    clearTextState();
    inputRef.current.clear();
  };

  const onClose = () => {
    onHandleFocus(false);
  };
  return (
    <>
      {focus && (
        <TouchableOpacity onPress={onClose}>
          <MaterialIcons name="arrow-back" size={24} color="white" />
        </TouchableOpacity>
      )}
      {focus && (
        <TextInput
          ref={inputRef}
          style={{
            flex: 1,
            color: "white",
            paddingLeft: 15,
            fontFamily: "CrimsonRegular",
          }}
          onChangeText={(text) => setValue(text)}
          placeholder="Type here"
        />
      )}
      {focus && value.length > 0 && (
        <SearchIconButton
          onPress={onClear}
          style={{ width: width / 9 }}
          icon="close"
        />
      )}
    </>
  );
};

Answer 1

Your layoutEffect is listening changes only from navigation

Try adding focus to useLayoutEffect array like

React.useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <Right isFocus={focus}>
          <Search handleFocus={setFocus} focus={focus} />
        </Right>
      ),
    });
  }, [navigation, focus]);