Question 277408 in React native Question posted in
The official React Native documentation can be found here.

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

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.

Tags:

2

Answers


  1. 0

    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;
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search