Header Buttons

// App.js
import * as React from "react";
import { View, Text, Button } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import HomeScreen from "./src/screens/Home";
import UsersScreen from "./src/screens/Users";
import UserDetail from "./src/screens/UsersDetail";
import HeaderLogo from "./src/components/HeaderLogo";

// screens
const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="Home"
        screenOptions={{
          headerStyle: {
            backgroundColor: "#f4511e",
          },
          headerTintColor: "#fff",
          headerTitleStyle: {
            fontWeight: "bold",
          },
        }}
      >
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{
            title: "Anasayfa",
            headerTitle: (props) => <HeaderLogo {...props} />,
            // headerRight: () => (
            //   <Button
            //     onPress={() => alert("This is a button!")}
            //     title="Right Btn"
            //     color="#fff"
            //   />
            // ),
            // headerLeft: () => (
            //   <Button
            //     onPress={() => alert("This is a button!")}
            //     title="Left Btn"
            //     color="#fff"
            //   />
            // ),
          }}
        />
        <Stack.Screen
          name="Users"
          component={UsersScreen}
          options={{
            title: "Kullanıcılar",
          }}
        />
        <Stack.Screen
          name="UserDetail"
          component={UserDetail}
          options={({ route }) => ({ title: route.params.name })}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

//Home/index.js
import React, { useState, useEffect } from "react";
import { View, Text, Button } from "react-native";

function HomeScreen({ navigation }) {
  const [count, setCount] = useState(0);

  useEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <Button onPress={() => setCount((c) => c + 1)} title="Update" />
      ),
    });
  }, [navigation]);

  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>{count}</Text>
      <Text>Home Screen</Text>
      <Button
        title="Kullanıcılar"
        onPress={() => navigation.navigate("Users")}
      />

      {/* <Button title="Users" onPress={() => navigation.push("Users")} /> */}
    </View>
  );
}

export default HomeScreen;