React-native-navigation: [V2] TopBar Button Icon + Text

[thame]

Issue Description

It does not seem to be possible to display both an icon and text in a custom TopBar button. Ideally, I would be able to have an icon and associated text for a custom button.

Steps to Reproduce / Code Snippets / Screenshots

In the TopBar options for a pushed screen, adding an icon overrides the text. Removing the icon declaration makes the text show up.

topBar: {
    title: {text: "Tab Two"},
    rightButtons: [{
        id: 'overview',
        text: 'Overview',
        icon: require('../icon.png'),
    }],
},

---

Environment

• React Native Navigation version: 2.0.2431
• React Native version: 0.51.0
• Platform(s) (iOS, Android, or both?): iOS + Android
• Device info (Simulator/Device? OS version? Debug/Release?): iPhone 8 Device, iOS 11.4, Nexus

[yuannypants]

my workaround for this is to write a custom component that returns a TouchableOpacity/TouchableHighlight containing an Image, Text and onClick function, and then passing this component as a button into rightButtons.

[thame]

@yuannypants
Thanks for the response! Do you mind sharing your code? I tried something similar and had trouble handling the interaction from the main screen.

[yuannypants]

In your main navigation component, define statically or mergeOptions as needed:

rightButtons: [
{
    id: 'CustomComponent',
    component: {
        name: 'app.CustomComponent',
        passProps: {
            originComponentId: this.props.componentId
            // Any other prop you want to pass over
        }
    }
}]

and in your CustomComponent, return render function:

<TouchableHighlight onPress={this.*your custom function*} underlayColor={'transparent'}>
    <View>
        <Image
            style={*your image styles*}
            source={*your image source*)}
        />
        <Text style={*your text style*}>
            *Your text*
        </Text>
    </View>
</TouchableHighlight>

and define the onPress function in your custom component as required, which will probably contain your navigation action (make sure you use the main Navigation screen's ID which you passed as a prop, not the custom component's own ID):

*your custom function* = () => {
    Navigation.push(this.props.originComponentId, {
        component: {
            name: '*Screen you want to go to*',
            passProps: {
                // Any props you want to pass
            }
        }
    });
}

You may want to refer to #3648 for other ways of triggering the onPress function for a custom TopBar button.

[yuannypants]

To be honest, I think this implementation is bugged to an extent too because if I fire any console.warn() in my main component, the yellow warn box appears in the custom component as well when it shouldn't... Gotta warn ya that this is just a temporary workaround on my side 😄

[thame]

@yuannypants: Thanks for the example! I think I was trying to listen to an event in the parent screen (the one defining the custom TopBar component) and describe the navigation action there. With this method I would have to pass the props for the next screen through the button component but it should work.

[yuannypants]

@thame in that case #3648 will be helpful for you!

[thame]

Thanks @yuannypants, got it working with a custom component. It is probably worthwhile keeping this open as an issue though as it appears to represent missing functionality.

[mathieumg]

I too would love to have this out of the box! Seems like a simple refactor in https://github.com/wix/react-native-navigation/blob/81d491f28558f0c8bf90797b65d2a258686b6404/lib/ios/RNNNavigationButtons.m#L83-L86

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest version and report back. Thank you for your contributions.

[mathieumg]

Not stale!

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest Detox and report back. Thank you for your contributions.

[stale[bot]]

The issue has been closed for inactivity.

[mathieumg]

Not stale...