Adding the ability to use TopNavigation component for rendering the popover-based components

Issue type

I’m submitting a … (check one with “x”)

• bug report
• feature request

Issue description

Current behavior: At the moment there is no possibility to use the TopNavigationAction component for showing Popover-based components since the TopNavigation component restricts the expected element by the properties of TopNavigationAction component.

Expected behavior: No ts errors. For example: Type ‘OverflowMenuProps’ is not assignable to type ‘TopNavigationActionProps’.

Related code:

  private renderRightControl = (): React.ReactElement<OverflowMenuProps> => {
    const { themedStyle } = this.props;

    return (
      <OverflowMenu
        style={themedStyle.menu}
        visible={this.state.menuVisible}
        placement='bottom end'
        items={this.items}
        onRequestClose={this.onMenuPress}
        onSelect={this.onMenuItemPress}>
        <TopNavigationAction
          icon={MenuIconAuth}
          onPress={this.onMenuPress}
        />
      </OverflowMenu>
    );
  };

  private renderRightControls = (): React.ReactElement<TopNavigationActionProps>[] => {
    return ([
      this.renderRightControl(),
    ]);
  };

[artyorsh]

Well, doing something like this will not break the ts build (this is simplified Top Navigation with Menu example).

Note the return type of the renderMenuAction function. It is TopNavigationActionElement but the actual rendered element is OverflowMenu. The code below will not throw ts errors.

import React from 'react';
import { Icon, OverflowMenu, TopNavigation, TopNavigationAction, TopNavigationActionElement } from 'react-native-ui-kitten';

const MenuIcon = (style) => (
  <Icon {...style} name='more-vertical'/>
);

export const TopNavigationWithMenuShowcase = () => {

  const renderMenuAction = (): TopNavigationActionElement => (
    <OverflowMenu>
      <TopNavigationAction icon={MenuIcon} onPress={toggleMenu} />
    </OverflowMenu>
  );

  return (
    <TopNavigation title='Application Title' rightControls={renderMenuAction()} />
  );
};

[32penkin]

@ng-kode nice catch, thank you 😃 will refactor the documentation somehow…