Skip to content

Commit 144abb4

Browse files
authored
refactor(ui): bottom-navigation documentation update
1 parent 27eac63 commit 144abb4

File tree

1 file changed

+34
-1
lines changed

1 file changed

+34
-1
lines changed

src/framework/ui/bottomNavigation/bottomNavigation.component.tsx

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,9 @@ export type BottomNavigationProps = StyledComponentProps & ViewProps & Component
4444
*
4545
* @property {number} selectedIndex - Determines index of the selected tab.
4646
*
47+
* @property {string} appearance - Determines the appearance of the component.
48+
* Can be `default` | `noIndicator`.
49+
*
4750
* @property {React.ReactElement<TabProps> | React.ReactElement<TabProps>[]} children -
4851
* Determines tabs of the Bottom Navigation.
4952
*
@@ -55,7 +58,7 @@ export type BottomNavigationProps = StyledComponentProps & ViewProps & Component
5558
*
5659
* @property StyledComponentProps
5760
*
58-
* @example Simple usage example
61+
* @overview-example Simple usage example
5962
*
6063
* ```
6164
* import React from 'react';
@@ -85,6 +88,36 @@ export type BottomNavigationProps = StyledComponentProps & ViewProps & Component
8588
* }
8689
* ```
8790
*
91+
* @overview-example Without indicator
92+
*
93+
* ```
94+
* import React from 'react';
95+
* import { BottomNavigation, BottomNavigationTab } from 'react-native-ui-kitten';
96+
*
97+
* export class BottomNavigationShowcase extends React.Component {
98+
*
99+
* public state = {
100+
* selectedIndex: 0,
101+
* };
102+
*
103+
* private onTabSelect = (selectedIndex: number) => {
104+
* this.setState({ selectedIndex });
105+
* };
106+
*
107+
* public render(): React.ReactNode {
108+
* return (
109+
* <BottomNavigation
110+
* appearance='noIndicator'
111+
* selectedIndex={this.state.selectedIndex}
112+
* onSelect={this.onTabSelect}
113+
* <BottomNavigationTab title='Tab 1/>
114+
* <BottomNavigationTab title='Tab 2/>
115+
* </BottomNavigation>
116+
* );
117+
* }
118+
* }
119+
* ```
120+
*
88121
* @example Inline styling example
89122
*
90123
* ```

0 commit comments

Comments
 (0)