New API suggestions (2.0.0)

[DanielZlotin]

As the title implies, Place your suggestions for the new API here. If you see your idea already, upvote it (with +1) rather than duplicate.

[lakhman]

Could we have a way to disable logging in development? Currently, I'm using a tab based navigation which on load frags out my console with the following debug info, it does this 5x (once for each tab), could we have a way to disable this in development? - The fragging effect is more pronounced if you passed a larger object as a prop.

Unbalanced calls start/end for tag 16
RCTLog.js:38 Running application com.ScreenName ({
    initialProps =     {
        navigatorEventID = "screenInstanceID8_events";
        navigatorID = "controllerID1_nav0";
        screenInstanceID = screenInstanceID8;
        propOne = 0;
        propTwo = 2;
    };
    rootTag = 61;
})

Could we perhaps add a Navigation.setLogger(true) or something similar to toggle this as required during development?

After some digging, I now realize this is handled by react native, not sure if there's anything we can do about this. For now you can manually alter the react-native core locally in the following places:

1. node_modules/react-native/Libraries/Utilities/infoLog.js:17

   function infoLog(...args) {
   var ignoreLogs = ['Running application', 'Unbalanced calls start/end'];
   if (args[0].startsWith(ignoreLogs[0]) || args[0].startsWith(ignoreLogs[1])) return true;
   
   return console.log(...args); // eslint-disable-line no-console-disallow
   }

2. node_modules/react-native/Libraries/Utilities/RCTLog.js:38

   // Before the `console[logFn].apply(console, args);`
   var ignoreLogs = ['Running application', 'Unbalanced calls start/end'];
   if (args[0].startsWith(ignoreLogs[0]) || args[0].startsWith(ignoreLogs[1])) return true;

You can use this to clean up your console log output for a better development experience.

[Crash--]

Can we have some methods to know:

• When a screen will be mounted. This method should be call in every components inside the screen. Maybe screenWillMount() ?
• Same thing when a screen will be unmounted
• A method to know is the screen of a component is mounted like isCurrentScreenMounted() that we can rely on for componentWillReceiveProps for instance
• For modals, is it possible to name one and after that use dismissModal(ModalName) (actually we can just dismiss the latest or all, but not one in particular)
• If you can integrate a splash screen component inside this lib, it can be very useful to hide it from the JS side directly.

Also, there is some issues with other third party plugins, because they don't assume that we can have modal. So imagine a module to display a Toast, the Toast will be displayed on top of the Root View (react view) but not on top of a modal. I had to manually update these plugins... I don't know if you can do something about that.

[guyca]

On Android we added a temp hack to override the back button press. We specify overrideBackkPressInJs: true in the call to navigator.push or navigator.showModal. I suggest we remove that, and instead add a back press listener which we'd be able to register in our screen.

[varungupta85]

A method on the navigator to identify the currently visible screen. This is useful when a similar action can be performed from two different screens and you want to perform some operations for action based on the current screen of the user. I have explained this use case in greater detail in issue 452. Other places this may be useful is while handling notifications. If you want to show a specific screen as part of handling the notification but if you are already on the same screen, you don't want to push the same screen again but maybe change something within the screen. But if the user is on some other screen, then you may want to push the screen.

[Crash--]

When an user click multiple times on a button to make an action, only the first one should be done. It will prevent multiple push / showModal (see #256 )

[varungupta85]

Enhanced API for manipulating navigation stack. Currently, we can either push one screen, pop one screen, pop all the way to the root screen or reset the navigation stack with a new screen. react-native Navigator provides a much more enhanced API for modifying the navigation stack which is useful in different cases. Most recently, I needed a popBack method using which I could pop multiple screens instead of just one. My use case is that I have a list of items, a user can click on an item to view it details (new screen) from where he can click on an edit button to edit the item (new screen). In the edit screen, he can either edit or delete the item. When the user deletes the item, I want to jump to the item list screen which means I have to pop by 2 instead of just one. If I do the pop twice to have the same effect, the app will try to render the item details screen and since the item is no longer present, I would need to handle it and also the user would see two pop animations which wouldn't be a good UX I guess.

[paandahl]

NavigationExperimental.CardStack has a replace-method that I would love to see in react-native-navigation. My use case is that I have a strict content hierarchy (Country > Region > City), and the user is allowed to jump to other items via search. When this happens, I need to replace the entire stack with a new hierarchy, and transition in one simple animation.

[florianbepunkt]

Documentation for button properties is a bit unclear IMO. For the property showAsAction the explanation should state that value never not only never shows the button in an action bar, but also that the button is shown in a contextual menu instead. Figured this out thanks @guyca

showAsAction: 'ifRoom' // optional, Android only. Control how the button is displayed in the Toolbar. Accepted valued: 'ifRoom' (default) - Show this item as a button in an Action Bar if the system decides there is room for it. otherwise item is shown inside a contextual menu 'always' - Always show this item as a button in an Action Bar. 'withText' - When this item is in the action bar, always show it with a text label even if it also has an icon specified. 'never' - Never show this item as a button in an Action Bar but as element of a contextual menu instead.

[kevinnguy]

Callback functions and delegation for screens. Thanks for the great work!

[adnanbrq]

Description It would be nice to add custom functionality to BottomBar Tabs. When you press a Button / Tab on the BottomBar you will get to the Screen it is connected to.

To achieve this, we could let JS handle the clicks IF there's a onPress / onClick or similar method attached to the Tab.

Visual Example

[sogko]

The ability to listen to more navigator events than just NavBarButtonPress.

Other possible useful events:

• Tab-bar button presses
• Drawer open/close
• Screen pushes/pops
• Tabbed-screen showed/hidden
• Show/hide modal
• Show/hide lightbox
• Tab-badge change

The implications here probably means that onNavigatorEvent allows user to additionally get events on global context (i.e. outside of the current screen context).

[guyca]

We should add selectedTab property to both startTabBasedApp and TopTabs - by default the tabs at index 0 is selected bit some times we would want a different tab to be selected by default.

632

[guns2410]

There should be an option to pass more parameters to the redux provider. #636

[kyle-ssg]

Before migrating I had a screen by where the title was touchable, having this (or better yet the ability to have custom views as titles) would be fantastic.

[guyca]

@kyle-ssg We'll definitely support custom views in Toolbar.

[kyle-ssg]

Fantastic! I've finally migrated my project over having added a few tweaks to ios, other than the above will we be handling the following:

Critical

• Preventing any screen interaction from anything other than the current screen (may need a popN function to allow for this).
• Make the static navigation properties a function, some properties e.g. the example integration with react-native-vector icons need to be async.
• Fix old views being mounted on refresh in simulator.

Low priority -Option to disable swipe gestures

Also one feature that I think would really improve the api to be a bit closer to react-router ( I may make a pr for this): -Keep the navigator in the context rather than passing it around in props -Add a <Link url="bla" component, combined with the context suggestion this would allow easy navigation links to be added anywhere -Allow for a more familiar url based routing, e.g register screen /chat/:id, callers (especially things such as push notifications, branch links) shouldn't have to care about splitting params from url.

[guyca]

@kyle-ssg Regarding "Fix old views being mounted on refresh in simulator." On which platform have you observed this issue? also which RNN and RN version?

[kyle-ssg]

RN 0.38.0 : RNN 2.0.0-experimental.170. I thought it was a duplicate of https://github.com/wix/react-native-navigation/issues/646 but if not I can just raise an issue rather than pollute this thread. I can consistently replicate it in IOS, the screen I'm currently navigated on always remounts which can throw false errors depending on the application

[davidruisinger]

I'd really appreciate a callback for when the app has been initialized. In my root app.js file I'm starting my TabBasedAppand set up a couple of listeners and initializaiton stuff. Something like:

// Start the app
this.startApp()

// Check if we should show the onboarding
if (!getOnboardingShown(store.getState())) {
  Navigation.showModal({
    screen: onboardingScreenName,
    ...
  })
}

// Subscribe to incoming links (both Branch.io & non-Branch.io)
Branch.subscribe((bundle) => this._handleDeepLink(bundle)) // pushes linked screen to navigator

...
etc.

On iOS this setup works as expected but ANdroid seems to take a little bit longer to start the actual app which causes (in this example) the Navigation.showModal (for onboarding) or _handleDeepLink (for branch.io deeplinks) to be called before the app is ready which again results in nothing beeing pushed or shown at all...

My workaround is now to call all the initialization stuff within the willAppear event handler of my very first screen but I'd like to keep my initialization stuff decoupled from my screens.

[DanielZlotin]

@flavordaaave I'm happy to report this is already implemented in both platforms in v2.0.0 branch - currently under active heavy development in the race to replace master

[PARAGJYOTI]

Here are some features need to be introduced from my opinion .

1) Initial selected tab index for both bottomTabs and topTabs .

2) collapsableToolbar for react component needs an upgrade , its terribly laggy while collapsing on scroll .

3) Navigation bar with logo image with custom positioning .

4) Show/hide feature on topTabs , Floating Button or something like topTabsHiddenOnScroll , fabButtonHideOnScroll .

5) App restarts on activity killed . Its a critical bug . Hope get fixed in V2 .

6) SplashScreen needs custom background Image feature .

717 #273 .

[holden-caulfield]

@DanielZlotin is the feature requested by @flavordaaave by chance integrated into v1? I'm on pretty much his exact same situation and could really use it right now, and looks like v2 is still not stable/complete enough to be use on a production project Thanks!

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