React-native-navigation: topBar in the root layout doesn't appear

[khaledafify]

Issue Description

topBar in the root layout doesn't appear

Steps to Reproduce / Code Snippets / Screenshots

in index.js

Navigation.events().registerAppLaunchedListener(() => {
    Navigation.setRoot({
      root: {
        stack: {
          children: [
            {
              component: {
                name: 'App'
              }
            }
          ],
          options: {
            topBar: {
              title: {
                text: 'Title asdadasdas asdasdasdas',
                fontSize: 14,
                color: 'red',
                fontFamily: 'Helvetica',

              }
            }
          }
        }
      }
    });
  });

Screenshot---

Environment

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

[yuannypants]

if I'm not wrong, you can't simply append your topBar as an option to a stack.. try appending it to the component itself instead?

[Luisvl13]

In your component add:

class Screen1 extends Component {
    static get options () {
        return {topBar: {title: {text: 'Screen1'}}};
    }
...
}

[guyca]

@Luisvl13 Is correct. Currently container options are applied on parent container, On Android at least, we need to consolidate the behaviour between the two platforms asap.

The reason for this, is that layouts can be nested. If the user has a stack within a stack, the inner stack's options are applied to the outer stack.
This isn't intuitive enough (at all?), We should apply the options in such cases on the stack, and perhaps add ability to apply options on all applicable layout nodes when calling mergeOptions.

[ecomaven]

Battled with this issue for a couple of days until I just stumbled upon this now. Thanks for the clarification, would be nice to have it somewhere in the "Getting Started" part of the documentation.

@yuannypants if you don't mind, what options can you apply to the stack vs component?

[spiraltrip]

Yes, this would be a good NOTE to put in the Docs - Layout Section. I spent so much time figuring why the default approach didn't work according to the docs.

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