Left button doesn't support react component

[FeniXenAaaa]

Issue Description

According to the doc custom component should be rendered when specified in topBar:

{
  id: 'buttonOne',
  icon: require('icon.png'),
  component: {
    name: 'example.CustomButtonComponent'
  },
  text: 'Button one',
  enabled: true,
  disableIconTint: false,
  color: 'red',
  disabledColor: 'black',
  testID: 'buttonOneTestID'
}

https://wix.github.io/react-native-navigation/v2/#/docs/topBar-buttons Doesn't work for me, just nothing renders.

Steps to Reproduce / Code Snippets / Screenshots

My HomeScreen component looks like this:

  name: 'com.waiterapp.HomeScreen',
    id: 'HOME_SCREEN_ID',
    options: {
        topBar: {
            leftButtons: [
                {
                    component: {
                        name: 'topBar.Button'
                    }
                }
            ]
        }
    }

Along with all other screens I register my custom button as following:

    const TestButton = ({text}) => <Text>{text || "no text"}</Text>;
    Navigation.registerComponent("topBar.Button", () => TestButton);

I assume to see text in my topBar but can't see nothing in there. "text" property isn't working as well. However, I can see button when providing some .png icon but it doesn't fit my needs.

---

Environment

• React Native Navigation version: alpha
• React Native version: 0.55.4
• Platform(s) (iOS, Android, or both?): Android (didn't test on iOS)
• Device info (Simulator/Device? OS version? Debug/Release?): Genymotion, real devices, both debug and release

[guyca]

Hey @FeniXenAaaa Can you please format your post using github markdown so it's more readable? Would be nice if the code you've included was under a ```javascript code block

[wbercx]

Have you registered example.CustomButtonComponent as an available component when your app starts up?

import MyCustomButtonComponent from './components/MyCustomButtonComponent';
import { Navigation } from 'react-native-navigation';

Navigation.registerComponent('example.CustomButtonComponent', () => MyCustomButtonComponent);

See: https://wix.github.io/react-native-navigation/v2/#/docs/Usage?id=registercomponentscreenid-generator

[FeniXenAaaa]

@guyca sorry, just formatted. @wbercx why should I register example.CustomButtonComponent ?) I register my own component that is called "topBar.Button". And it is used as reference in topBar > leftButtons options.

[wbercx]

@FeniXenAaaa You're right, I hadn't read your original post thoroughly enough. Apologies.

[guyca]

@FeniXenAaaa Perhaps we have issues rendering react component with Text as root. Can you try a more standard component which return View?

[FeniXenAaaa]

@guyca yes, I tried a lot of things: view and other touchables. Component not even tried to be rendered if I will set a breakpoint inside it. It just ignored like nothing tries to call it.

[guyca]

hmm.. try giving the button an id

[AireshBhat]

Facing the same issue, even after giving the button an id... The component renders on the topBar but nothing happens on clicking it.

[FeniXenAaaa]

@guyca ID doesn't help. Maybe you can point me to a place in Java code where the decision is made on what to render? I can try to debug and see if needed method is called or not.

[DenisBogatirov]

Facing same issue, but only on android and only with leftButtons Any lifecicle methods not being called. On iOS everything working fine

[bragur]

Hmm, think I'm running into the same issue. I gave the component a width and height and a backgroundColor to debug this a bit and it is rendering for me, albeit with a weird placement.

Something weird going on as well if the title is a component, then the button renders behind the title component and doesn't seem to take it's space.

Also, facing same issue as @Airesh-sopho that even though I get the component to render, nothing happens when clicking it.

Edit: Seems to be fixed on iOS (not yet tested on Android), at least in RNN 2.0.2556.

[Rigellute]

@bragur could you post your code please?

I also cannot get a custom component to render as a button on Android, works fine on iOS.

[damathryx]

i have this problem as well. any update on this?

[brandons]

This is still an issue on Android. iOS works fine.

[18601673727]

Setting leftButtons using custom component does not working on v1 as well.

[FinnGu]

I just migrated from v1 to v2 only to find out that this still is not fixed :/

Is there any workaround?

[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.

[brandons]

@stalebot I believe this is still an issue.

[thinklinux]

Yes, this is only a problem on Android. I know that android does not support text on the leftButtons and I was thinking that I can workaround that with a custom react component. It would be super nice if that can be fixed. @guyca if you can navigate me a little bit where the code for that would be I can try and have a look at it :)

Update - okay I used title with a custom component and visible: false on the backButton. That worked for me now tho is a hacky solution :)

[FinnGu]

Yes, this is only a problem on Android. I know that android does not support text on the leftButtons and I was thinking that I can workaround that with a custom react component. It would be super nice if that can be fixed. @guyca if you can navigate me a little bit where the code for that would be I can try and have a look at it :)

Update - okay I used title with a custom component and visible: false on the backButton. That worked for me now tho is a hacky solution :)

This still seems to be the only workaround.

[bitlab-code]

Update - okay I used title with a custom component and visible: false on the backButton. That worked for me now tho is a hacky solution :)

it doesn't work for me

• react-native 0.59.10
• react-native-navigation 2.22.3

[eduardopelitti]

Hi y'all!

With:

• RN 0.60.4
• RNN v3 Alpha 8

I'm having the same issues.

• Trying to render a custom component in the TopBar (as leftButton initially), I don't get anything in Android, it works properly on iOS.
• The only possible workarounds are:
  1. using the title component, and setting the visible: false at the backButton level.
  2. using the background component

Note, this is necessary to add a custom app icon to the TopBar and apply the proper margin to the image, since iconInsets don't appear to be working (and I'm not actually sure that these are actually meant to give padding to the icon).

Let me know if you guys need more info or want me to try something specific.

Update Note: I see this was added to To Do by @guyca so I'm not expecting this to be magically solved if the feature was not implemented yet, I just meant to comment that the workaround worked for me with this setup, and added the background workaround as well.

[spacesuitdiver]

Hello, running into this today. When each of you say "custom component" and visible: false are we referring to the { topBar: { background: { component: ... } } } ?

[FinnGu]

Hello, running into this today. When each of you say "custom component" and visible: false are we referring to the { topBar: { background: { component: ... } } } ?

component: {
    id: 'myComponentId',
    name: 'MyApp.Tabs.FirstTab',
    options: {
        topBar: {
            title: {
                id: 'myLeftButtonId',
                component: {
                    name: 'MyApp.Buttons.LeftButton'
                }
            }
        }
    }
}

This is how I got it working. I think in older versions I used backButton: {visible: false} for my component, but this should no longer be necessary.

[TylerNRobertson]

This still seems to be an issue. Also seems like IOS is behaving weird on 7.2.0 and IOS 14+

[aliraza-noon]

This still seems to be happening on android