Skip to content

Commit

Permalink
docs(components): unify react-navigation samples
Browse files Browse the repository at this point in the history
  • Loading branch information
@artyorsh
artyorsh authored Oct 30, 2019
1 parent c9a1890 commit 480311f
Show file tree
Hide file tree
Showing 4 changed files with 148 additions and 61 deletions.
1 change: 1 addition & 0 deletions docs/src/structure.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -396,6 +396,7 @@ export const structure = [
icon: 'tab.svg',
source: [
'TabView',
'TabBar',
'Tab',
],
overview: [
Expand Down
69 changes: 45 additions & 24 deletions src/framework/ui/bottomNavigation/bottomNavigation.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,38 +60,59 @@ export type BottomNavigationElement = React.ReactElement<BottomNavigationProps>;
*
* @overview-example BottomNavigationSimpleUsage
*
* @overview-example With React Navigation
* @overview-example Using with React Navigation
*
* ```
* import React from 'react';
* import { BottomNavigation, BottomNavigationTab } from 'react-native-ui-kitten';
* import { createAppContainer, SafeAreaView } from 'react-navigation';
* import { createBottomTabNavigator } from 'react-navigation-tabs';
* import { Dashboard, Settings } from './path-to/screen-components'; // <-- Import screen components
*
* export const BottomNavigationShowcase = (props) => {
*
* const onTabSelect = (selectedIndex) => {
* const { [index]: selectedRoute } = props.navigation.state.routes;
* props.navigation.navigate(selectedRoute.routeName);
* };
*
* return (
* <BottomNavigation
* selectedIndex={props.navigation.state.index}
* onSelect={onTabSelect}>
* <BottomNavigationTab title='Dashboard' />
* <BottomNavigationTab title='Settings' />
* </BottomNavigation>
* import { BottomNavigation, BottomNavigationTab, Layout, Text } from 'react-native-ui-kitten';
*
* // React Navigation also requires installing additional dependencies:
* //
* // npm i react-navigation react-navigation-tabs react-native-reanimated react-native-gesture-handler
* //
* // Then install it for ios:
* //
* // cd ios && pod install
*
* const HomeScreen = () => (
* <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
* <Text category='h1'>HOME</Text>
* </Layout>
* );
*
* const SettingsScreen = () => (
* <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
* <Text category='h1'>SETTINGS</Text>
* </Layout>
* );
*
* const TabBarComponent = ({ navigation }) => {
*
* const onSelect = (index) => {
* const { [index]: selectedTabRoute } = navigation.state.routes;
* navigation.navigate(selectedTabRoute.routeName);
* };
*
* return (
* <SafeAreaView>
* <BottomNavigation selectedIndex={navigation.state.index} onSelect={onSelect}>
* <BottomNavigationTab title='HOME'/>
* <BottomNavigationTab title='SETTINGS'/>
* </BottomNavigation>
* </SafeAreaView>
* );
* }
* };
*
* export const BottomTabNavigator = createBottomTabNavigator({
* Dashboard: Dashboard,
* Settings: Settings,
* const TabNavigator = createBottomTabNavigator({
* Home: HomeScreen,
* Settings: SettingsScreen,
* }, {
* initialRouteName: 'Dashboard',
* tabBarComponent: BottomNavigationShowcase,
* tabBarComponent: TabBarComponent,
* });
*
* export const AppNavigator = createAppContainer(TabNavigator);
* ```
*
* @example BottomNavigationWithoutIndicator
Expand Down
84 changes: 47 additions & 37 deletions src/framework/ui/drawer/drawer.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,54 +43,64 @@ export type DrawerElement = React.ReactElement<DrawerProps>;
*
* @overview-example DrawerSimpleUsage
*
* @overview-example DrawerWithIcons
*
* @overview-example DrawerHeader
*
* @overview-example DrawerFooter
*
* @overview-example Using with React Navigation
*
* ```
* import React from 'react';
* import { SafeAreaView } from 'react-navigation';
* import { createAppContainer, SafeAreaView } from 'react-navigation';
* import { createDrawerNavigator } from 'react-navigation-drawer';
* import { Dashboard, Messages, Settings } from './path-to/screen-components'; // <-- Import screen components
*
* class DrawerNavigation extends React.Component {
*
* constructor(props) {
* super(props);
* this.drawerData = props.items.map(this.createDrawerItem);
* }
*
* onRouteSelect = (index) => {
* const { [index]: route } = this.drawerData;
* this.props.navigation.navigate(route.title);
* import { Drawer, Layout, Text } from 'react-native-ui-kitten';
*
* // React Navigation also requires installing additional dependencies:
* //
* // npm i react-navigation react-navigation-drawer react-native-reanimated react-native-gesture-handler
* //
* // Then, install it for ios:
* //
* // cd ./ios && pod install
*
* const HomeScreen = () => (
* <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
* <Text category='h1'>HOME</Text>
* </Layout>
* );
*
* const SettingsScreen = () => (
* <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
* <Text category='h1'>SETTINGS</Text>
* </Layout>
* );
*
* const DrawerComponent = ({ navigation }) => {
*
* const onSelect = (index) => {
* const { [index]: selectedTabRoute } = navigation.state.routes;
* navigation.navigate(selectedTabRoute.routeName);
* };
*
* createDrawerItem = ({ routeName }) => ({
* title: routeName,
* });
*
* render() {
* return (
* <SafeAreaView>
* <Drawer data={this.drawerData} onSelect={this.onRouteSelect}/>
* </SafeAreaView>
* );
* }
* }
*
* export const DrawerNavigator = createDrawerNavigator({
* Dashboard: Dashboard,
* Messages: Messages,
* Settings: Settings,
* return (
* <SafeAreaView>
* <Drawer data={[{ title: 'Home' }, { title: 'Settings' }]} onSelect={onSelect} />
* </SafeAreaView>
* );
* };
*
* const DrawerNavigator = createDrawerNavigator({
* Home: HomeScreen,
* Settings: SettingsScreen,
* }, {
* contentComponent: DrawerNavigation,
* contentComponent: DrawerComponent,
* });
*
* export const AppNavigator = createAppContainer(DrawerNavigator);
* ```
*
* @overview-example DrawerWithIcons
*
* @overview-example DrawerHeader
*
* @overview-example DrawerFooter
*
* @example DrawerCustomHeader
*
* @example DrawerNotificationBadgeItem
Expand Down
55 changes: 55 additions & 0 deletions src/framework/ui/tab/tabBar.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,61 @@ export type TabBarElement = React.ReactElement<TabBarProps>;
* @property StyledComponentProps
*
* @overview-example TabBarSimpleUsage
*
* @overview-example Using with React Navigation
*
* ```
* import React from 'react';
* import { createAppContainer, SafeAreaView } from 'react-navigation';
* import { createMaterialTopTabNavigator } from 'react-navigation-tabs';
* import { TabBar, Tab, Layout, Text } from 'react-native-ui-kitten';
*
* // React Navigation also requires installing additional dependencies:
* //
* // npm i react-navigation react-navigation-tabs react-native-reanimated react-native-gesture-handler
* //
* // Then install it for ios:
* //
* // cd ios && pod install
*
* const HomeScreen = () => (
* <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
* <Text category='h1'>HOME</Text>
* </Layout>
* );
*
* const SettingsScreen = () => (
* <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
* <Text category='h1'>SETTINGS</Text>
* </Layout>
* );
*
* const TabBarComponent = ({ navigation }) => {
*
* const onSelect = (index) => {
* const { [index]: selectedTabRoute } = navigation.state.routes;
* navigation.navigate(selectedTabRoute.routeName);
* };
*
* return (
* <SafeAreaView>
* <TabBar selectedIndex={navigation.state.index} onSelect={onSelect}>
* <Tab title='HOME'/>
* <Tab title='SETTINGS'/>
* </TabBar>
* </SafeAreaView>
* );
* };
*
* const TabNavigator = createMaterialTopTabNavigator({
* Home: HomeScreen,
* Settings: SettingsScreen,
* }, {
* tabBarComponent: TabBarComponent,
* });
*
* export const AppNavigator = createAppContainer(TabNavigator);
* ```
*/
export class TabBarComponent extends React.Component<TabBarProps> {

Expand Down

0 comments on commit 480311f

Please sign in to comment.