React-native-navigation: Touchables in topbar background component not working

[zabojad]

Issue Description

I'm having three TouchableOpacity comps in my topbar background component and they are not pressable.

My topar options:

    {
        visible: true,
        animate: false,
        hideOnScroll: false,
        background: {
            component: {
                name: "Header"
            },
        },
        noBorder: true,
        borderHeight: 0,
        elevation: 0,
    }

If I use title component instead of background, then the buttons are pressable but I get the issue described there.

How can I have a topbar background component with Touchable components?

Steps to Reproduce / Code Snippets / Screenshots

Use the following topbar options:

    {
        visible: true,
        animate: false,
        hideOnScroll: false,
        background: {
            component: {
                name: "Header"
            },
        },
        noBorder: true,
        borderHeight: 0,
        elevation: 0,
    }

With the following topbar background component:

<View style={{flex:1}}>
  <TouchableOpacity onPress={cb}>
    <Text>1</Text>
  </TouchableOpacity>
  <TouchableOpacity onPress={cb}>
    <Text>2</Text>
  </TouchableOpacity>
  <TouchableOpacity onPress={cb}>
    <Text>3</Text>
  </TouchableOpacity>
</View>

And your Touchable won't be "touchable"...

The problem is that the topbar background component is the only way to get a custom topbar without margins...

---

Environment

• React Native Navigation version: 7.1.0
• React Native version: 0.63.3
• Platform(s) (iOS, Android, or both?): Android
• Device info (Simulator/Device? OS version? Debug/Release?): both

[zabojad]

Hey @guyca ! Any thought on this one?

-> if this is by design that background component cannot have Touchables/Pressables, then OK but...
-> there is no other way to have a custom component as a topBar that doesn't have some unwanted paddings/margins... the topBar title custom comp have margins we cannot control: https://github.com/wix/react-native-navigation/issues/6456

My two cents: I think the best way to solve this would be to have a topBar title custom comp without any margin (like the background one). If we have a custom comp, it means we want to have full control over its UI. It would also make the background comp unnecessary and thus make the API simpler...

[zabojad]

@guyca what can we do to help prioritize this issue?

[danilobuerger]

@zabojad The best way to get somebody to respond to your ticket is to just wait. Spamming github notifications on random maintainers is not helpful.

[mateioprea]

@zabojad I have a custom Touchable component in the TopBar and it works. Can you fork this lib and create an example on the playground with your use case?

[zabojad]

@mateioprea I'll provide a reproducer but in the meantime, can you confirm you are using a custom background component? Like in this conf:

    topbar: {
        visible: true,
        animate: false,
        hideOnScroll: false,
        background: {
            component: {
                name: "Header"
            },
        },
    }

If you are using a "title" component, then yes you won't have this issue but then you also won't have full control over the topbar paddings...

@danilobuerger I hardly see how my few messages can be qualified as "spamming". I'm just trying to ask for help to the maintainers and ask them what I can do to avoid them spending too much time on it. A lot of issues on this repo get closed automatically due to lack of messages in their thread and the actual issues in the lib remain. I also hardly see how you remark is any helpful...

[danilobuerger]

@zabojad If everybody sends a "few messages", it adds up. Your assertion on why issues get closed is wrong. Most of the time issues get closed because the OP did not explain it well enough and did not provide an adequate reproduction. The better the issue is describe by the OP and the easier the reproduction (i.e. fork of the playground app) the more likely it is somebody will actually investigate it.

[mateioprea]

@zabojad I just tested it and it works:

This is my Header component:

import React from 'react';
import {TouchableOpacity, View, Text} from 'react-native';

function Header() {

    return (
        <View>
            <TouchableOpacity onPress={() => console.log("PRESS HEADER")}>
                <Text>Test</Text>
            </TouchableOpacity>

        </View>
    )
}

export default Header;

This is my config for TopBar:

topBar: {
            searchBar: {
                visible: true,
                hiddenWhenScrolling: true,
                hideTopBarOnFocus: true,
                backgroundColor: COLORS.MEDIUM_GRAY,
                tintColor: COLORS.DARK_BLUE_600,
                obscuresBackgroundDuringPresentation: true,
            },
            background: {
                component: {
                    name: 'Header',
                },
            },
            visible: true,
            noBorder: true,
            drawBehind: false,
            animate: true,
        },

This is a demo: https://www.dropbox.com/s/i445sh0hfqcw4m9/Screen%20Recording%202020-10-15%20at%2013.21.04.mov?dl=0

[jordoh]

I've found that you can interact with background components on iOS, but not on Android.

On Android, the background view is inserted as the first view in TopBar.java, so presumably other views (e.g. the title) are over top of it:

    public void setBackgroundComponent(View component) {
        if (this.component == component || component.getParent() != null) return;
        this.component = component;
        root.addView(component, 0);
    }

Patching the addView call to remove the 0 results in a background component that can be interacted with, though it may have other ramifications, depending on your setup.

[zabojad]

Just tried on iOS while preparing a reproducer and indeed, it works on iOS. The problem is Android only.

In case it is still needed by the dev team, here is a reproducer: https://github.com/zabojad/react-native-navigation/tree/issue_6652

[danilobuerger]

Issue is reproducible on iOS 12.4 too. However, not present on iOS 14.0.

[danilobuerger]

However, on iOS 14, top bar buttons are displayed underneath the background which is not correct.

[danilobuerger]

I accidentally tagged this as a bug, but we should first of all discuss if this is even something that we want to support.

[danilobuerger]

After talking about it, we feel like that the topBar.background should not be able to handle touches. So the current behavior is correct and we don't want to modify it. You can still use a transparent title component to handle the touches. I know that there are some issues with it not stretching the whole width in some cases, but this is something that we are open to change. Feel free to submit a PR for that.