Icons doesnt appear using headerRight after react-navigation update ^3.0.0-rc.5

[guptanisha]

'headerRight' icon doesn't appear when headerBackButton shows. Happening after updated react-navigation to version ^3.0.0-rc.5.

Any help would be appreciated!!

software | version react-navigation | 4.0.10 react-native | ^0.61.5 expo | 35 npm or yarn | npm

Current Behaviour:-

Expected Behaviour:-

static navigationOptions = ({ navigation }) => { const activityId = navigation.state.params.activity.id; let activity = Activities.getActivityById(activityId); const client = navigation.state.params.client; let responsiblePerson = getUserToNotify(client); let responsibleContactNumber = getResponsibleContactNumber(responsiblePerson);

    if (responsibleContactNumber != null) {
        var number = responsibleContactNumber.number;
        if (responsibleContactNumber.countryCode == "33") {
            if ( (number.charAt(0)) != 0 ) {
                number = "0" + number;
            }
        }
    }
    return {
        headerTitle: null,
        headerStyle: { backgroundColor: '#fff' },
        headerTintStyle: Styles.colorPrimary,
        headerRight: () => (
            <View style={{flexDirection: 'row'}}>
                {client.cellNumber || client.homeNumber ?
                <TouchableOpacity 
                onPress={() => responsibleContactNumber == null ? null : Communications.phonecall(number, true)} 
                style={{flex: 1, paddingTop: 10, paddingBottom: 10, paddingLeft: 10}}>
                    <FontAwesome 
                        name='phone' 
                        style={{paddingHorizontal: 10, color: Styles.colorPrimary}}
                        size={23} 
                    />
                </TouchableOpacity>
                : null }
                {client ?
                <TouchableOpacity 
                onPress={() => navigation.navigate('ClientTabs', {data: client, deleteAvailable: false})}
                style={{flex: 1, paddingTop: 10, paddingBottom: 10, paddingLeft: 10}}>
                    <FontAwesome 
                        name='user' 
                        style={{paddingHorizontal: 10, color: Styles.colorPrimary}}
                        size={23} 
                    />
                </TouchableOpacity>
                : null }
                { activity.isDeclined != true ?
                <TouchableOpacity 
                onPress={() => navigation.navigate('AppointmentEditor', { activityId: activityId, onGoBack: navigation.state.params.onGoBack })} 
                style={{flex: 1, paddingTop: 10, paddingBottom: 10, paddingLeft: 10}}>
                    <FontAwesome 
                        name='pencil-square-o' 
                        style={{paddingHorizontal: 10, color: Styles.colorPrimary}}
                        size={23} 
                    />
                </TouchableOpacity>
                : null }
            </View>
        )
    };  
};

[guptanisha]

@satya164 also I tried to update React-Navigation 4.0, getting a new error
"Unable to resolve "./views/Header/Header" from "node_modules/react-navigation-stack/lib/module/index.js" Failed building JavaScript bundle."

Prompt help would be appreciable!!

[satya164]

https://reactnavigation.org/docs/en/next/troubleshooting.html#im-getting-an-error-unable-to-resolve-module-after-updating-to-the-latest-version

[guptanisha]

@satya164 Thanks for the solution. It fixed the issue.

In the image below. Before the update icons in the header were appearing(Refer the left image), After icons don't appear also HeaderTitle appearing, HeaderBackButton behaves weirdly.

Really thankful.

[guptanisha]

@satya164 also drawer navigator doesn't open the toggle. Updated the code like below.

headerLeft: (
<TouchableOpacity onPress={() => navigation.toggleDrawer()} style={{padding: 10, paddingLeft: 15}}> <FontAwesome name='bars' size={23} style={{color: colorPrimary}} /> </TouchableOpacity> ),

[guptanisha]

@brentvatne would help to suggest any solution.

thanks!

[guptanisha]

@satya164 Thanks for the solution. It fixed the issue.

In the image below. Before the update icons in the header were appearing(Refer the left image), After icons don't appear also HeaderTitle appearing, HeaderBackButton behaves weirdly.

Really thankful.

@satya164 @brentvatne Kindly suggest what I m doing wrong in above.