Header Bar düzenleme

//components/HeaderLogo.js
import { View, Text, Image } from "react-native";
import React from "react";

const HeaderLogo = () => {
  return (
    <Image
      style={{ width: 50, height: 50 }}
      source={require("../../assets/logo.png")}
    />
  );
};

export default HeaderLogo;

// App.js
import * as React from "react";
import { View, Text } 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} />,
          }}
        />
        <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 from "react";
import { View, Text, Button } from "react-native";

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

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

export default HomeScreen;

//Users/index.js
import { View, Text, Button, FlatList } from "react-native";
import React from "react";
import Item from "./item";

const data = [
  {
    id: 1,
    name: "Ahmet",
  },
  {
    id: 2,
    name: "Ayşe",
  },
  {
    id: 3,
    name: "Fatma",
  },
];

const UsersScreen = () => {
  return (
    <View style={{ flex: 1 }}>
      <FlatList
        data={data}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => <Item item={item} />}
      />
    </View>
  );
};

export default UsersScreen;

//Users/item.js
import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
import React from "react";
import { useNavigation } from "@react-navigation/native";

const item = ({ item }) => {
  const navigation = useNavigation();

  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={() => navigation.navigate("UserDetail", item)}>
        <Text style={styles.text}>{item.name}</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 10,
    backgroundColor: "#D8D8D8",
    borderBottomWidth: 1,
  },
  text: {
    fontSize: 24,
  },
});

export default item;

//UserDetail/index.js
import { View, Text, StyleSheet, Button } from "react-native";
import React from "react";

const UserDetail = ({ route, navigation }) => {
  const data = route.params;

  return (
    <View>
      <Text style={styles.text}>UserDetail</Text>
      <Text style={styles.text}>{JSON.stringify(data, null, 2)}</Text>

      <Button
        title="Update the title"
        onPress={() => navigation.setOptions({ title: "Updated!" })}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  text: {
    fontSize: 24,
  },
});

export default UserDetail;