2

could you somebody help me with header bar in react-navigatin v6. My motivation was that I need add image strip like divider instead of default divider under header bar:

enter image description here

I want to create own headerbar so I created Navigator:

        <Stack.Navigator
            initialRouteName="NoConnectionContent"
            screenOptions={{
                header: (props) => <Header {...props} />,
                headerStyle: {
                    backgroundColor: 'white',
                },
            }}>
            <Stack.Screen
                name="NoConnectionContent"
                component={NoConnectionContent}
                options={{title: <Text>No connection</Text>}}
            />
            <Stack.Screen name="Home" component={HomeScreen} />
            <Stack.Screen name="Details" component={DetailsScreen} />
        </Stack.Navigator>

And I created own component Header:

import React, {Component} from 'react';
import {View, StyleSheet, Image} from 'react-native';
import Config from 'react-native-config';
import { Header as  RNNHeader, getHeaderTitle} from '@react-navigation/elements';

const Header = (props) => {
    let headerStripSource =
        Config.ENV === 'dev'
            ? require('../../assets/images/devhead.jpg')
            : require('../../assets/images/prodhead.jpg');

        const title = getHeaderTitle(props.options, props.route.name);
    return (
        <View>
            <RNNHeader {...props} title={title} />
            <Image source={headerStripSource} style={styles.headStripImageStyle}/>
        </View>
    );
};

const styles = StyleSheet.create({
    headStripImageStyle: {
        position: 'absolute',
        bottom: -12,
        resizeMode: 'stretch',
        height: 10,
        width: '100%',
        marginBottom: 8,
    },
});

It works but I have to set manually back button, title, etc... but I want to pass properties automatically to header like:

<RNNHeader {...props} />

It was working in react-navigation in version 5 but in version 6 doesn't work because Header is in @react-navigation/elements.

Do you somebody way how to do it.

Thank so much.

Petrik-a-dost
  • 223
  • 4
  • 11

0 Answers0