React Native: How to implement a custom header in React Navigation?

1import { getHeaderTitle } from '@react-navigation/elements';
2
3function CustomHeader({ route, options }) {
4  const title = getHeaderTitle(options, route.name);
5
6  return (
7    <View style={styles.header}>
8      <Text style={styles.headerTitle}>{title}</Text>
9      <TouchableOpacity>
10        <Ionicons name="settings" size={24} color="white" />
11      </TouchableOpacity>
12    </View>
13  );
14}
15
16const styles = StyleSheet.create({
17  header: {
18    flexDirection: "row",
19    justifyContent: "space-between",
20    alignItems: "center",
21    backgroundColor: "#333",
22    padding: 16,
23  },
24  headerTitle: {
25    color: "white",
26    fontSize: 18,
27    fontWeight: "bold",
28  },
29});

1<Stack.Screen
2  name="Home"
3  component={HomeScreen}
4  options={{
5    header: ({ route, options }) => (
6      <CustomHeader route={route} options={options} />
7    ),
8  }}
9/>