Why won't this react native header follow the style I've applied?

Question

Please take a look at my online project I created in snack https://snack.expo.dev/@sujono/7c4a2d?platform=android .

So in Role2.js I did set the values but the result isn't what i expected. This is so weird. I even tried it locally, but it still didn't work. Can't I change the style of react native header? If I can, please tell me how to do it.

Answer 1

You can make a Custom header, And you have to call it on every screen.

Usually we have three main component on Header Container, context & functionality.

(context = title & icons on both sides)

So, Header Component be like this,

const MyHeader = ({
  title,
  iconRight,
  iconLeft,
  onpressRight,
  onpressLeft,
}) => {
  return (
    <View style={styles.container}>
      <Icons
        size={20}
        name={iconLeft}
        onPress={onpressLeft}
        style={styles.iconStyle}
      />
      <Text style={styles.title}>{title}</Text>
      <Icons
        size={20}
        name={iconRight}
        onPress={onpressRight}
        style={styles.iconStyle}
      />
    </View>
  );
};

This is the main structure, now you have to handle some cases like, when icon is missing text should still be centered, and other according to your need.

This is Expo Snack for the complete component and usage. I will make nesseccery changes but the main concept will be same.

Answer 2

You can create your header component that you can use across your application. Styling and other events can be handled inside this header. Also ensure you set headerShown to false in your navigators so the default react navigation header is hidden

import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';

const Header = ({title, navigation, bgColor}) => {
  return (
    <View style={{height: 40, backgroundColor: bgColor}}>
      <TouchableOpacity onPress={() => navigation.goBack()}>
        <Text style={{ color: 'white'}}>Back</Text>
      </TouchableOpacity>
      <Text style={{flex: 1, color: 'white', textAlign: 'center', padding: 10}}>
        {title}
      </Text>
    </View>
  );
};

export default Header;