Add image fit to header using react-navigation V. 5+?

user_11930887 0
Viewed 1167

I want to add a custom header with a background color and also an image which need to be fit to header. I am using React Navigation 5+ ( @react-navigation/native, @react-navigation/stack ) but image isn't fit to header. Is there a way to add a custom header (something like passing component to it)?
Here is how I was doing (Wanting to know if there is better way):


import * as React from 'react';
import { View,Image, Text, TouchableWithoutFeedback, Button, StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator, HeaderTitle } from '@react-navigation/stack';
import Icon from 'react-native-vector-icons/Ionicons';



const Stack = createStackNavigator();

class App extends React.Component {

  constructor(props) {
    super(props);

  }


  render () {
    return (
      <NavigationContainer>
      <Stack.Navigator>

        <Stack.Screen 
        name="Home" 
        component={HomeScreen}
        options={{
          headerBackground: props => <Header  {...this.props}/>,

        }}
        />
         <Stack.Screen 
         name="FeedbackScreen"
         component={FeedbackScreen}

         />
      </Stack.Navigator>
    </NavigationContainer>
    )
  }
}

function HomeScreen({navigation}) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>  
      <Button 
      title="Feedback"
      onPress={()=> navigation.navigate('FeedbackScreen')}/>
    </View>
  );
}

function FeedbackScreen() {
  return (
    <View>

    </View>
  )
}

function Header() {

  return (
    <View style={{backgroundColor: "#4f2170", flex:1, }}>
      <Image style={StyleSheet.absoluteFill} source={require('./Images/Mon_logo.png')} />

    </View>
    );
}




export default App;

I tried other answers but couldn't succeed...

react-navigation-v5 react-navigation react-native
1 Answers

Complete Custom Header :

import { Dimensions } from "react-native";

let {width,height} = Dimensions.get('window');

export default StyleSheet.create({
   container: {
        width: width,
        backgroundColor: '#00f7d2',
        elevation: 10,
    },
   row1: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: 20,
    },
    row2: {
        justifyContent: 'center',
        alignItems: 'center',
    },
    subLine: {
        color: '#000',
        fontWeight: '500',
        fontSize: 12
    },
    heading: {
        fontSize: 30,
        color: '#000',
        textAlign: 'center',
        width: width*0.75,
        fontWeight: 'bold'
    },
});


import React, { Component } from "react";
import { 
    View,
    StatusBar,
    TouchableOpacity,
    Text,
    Dimensions,
} from "react-native";
import styles from '../styles/HeaderStyle';
import FaIcon from 'react-native-vector-icons/FontAwesome';
import {DrawerActions, createDrawerNavigator} from 'react-navigation';


class Header extends Component{

    constructor(props){
        super(props);
        this.state = {}
    };

render() {
        return (
            <View>
                <StatusBar backgroundColor="#00f7d2" barStyle="dark-content" />
                <View style={styles.container}>

                    <View style={styles.row1}>
                        {
                            this.props.goBack ? 
                            <TouchableOpacity onPress={()=>{
                                this.props.propsRef.navigation.goBack();
                            }}>
                                <FaIcon name="arrow-left" size={30} color="#000"/>
                            </TouchableOpacity> : 
                            <TouchableOpacity onPress={()=>{
                                this.props.propsRef.navigation.dispatch(DrawerActions.openDrawer());
                            }}>
                                <FaIcon name="bars" size={30} color="#000"/>
                            </TouchableOpacity>
                        }
                        <Text style={styles.heading}>
                        {
                            this.props.title ? this.props.title : "Credito"
                        }
                        </Text>
                    </View>ss

                </View>
            </View>
        );
    }
}
user_107495470
Related