From 5468776c2091f2d04e65662f972c0ba82f8c1089 Mon Sep 17 00:00:00 2001 From: Artur Yorsh <10753921+artyorsh@users.noreply.github.com> Date: Thu, 26 Sep 2019 11:25:36 +0300 Subject: [PATCH] docs(components): refactor examples with js code and framework icon components --- docs/src/articles/guides/create-screen.md | 19 +- docs/src/articles/guides/install-existing.md | 15 +- .../src/articles/guides/setup-icons-module.md | 24 +- .../src/articles/guides/setup-vector-icons.md | 52 ++- docs/src/structure.ts | 25 +- .../applicationProvider.component.tsx | 10 +- src/framework/theme/modal/modal.service.tsx | 38 +-- .../theme/style/styleConsumer.component.tsx | 33 +- .../theme/theme/themeConsumer.component.tsx | 26 +- src/framework/ui/avatar/avatar.component.tsx | 61 +++- .../bottomNavigation.component.tsx | 132 ++++---- .../bottomNavigationTab.component.tsx | 66 +++- src/framework/ui/button/button.component.tsx | 112 ++++--- .../ui/buttonGroup/buttonGroup.component.tsx | 65 ++-- .../ui/checkbox/checkbox.component.tsx | 191 ++++++----- src/framework/ui/drawer/drawer.component.tsx | 82 +++-- .../drawer/drawerHeaderFooter.component.tsx | 45 +-- src/framework/ui/icon/icon.component.tsx | 95 ++++-- .../ui/icon/iconRegistry.component.tsx | 18 +- src/framework/ui/input/input.component.tsx | 167 +++++++--- src/framework/ui/layout/layout.component.tsx | 91 +++--- src/framework/ui/list/list.component.tsx | 99 +++--- src/framework/ui/list/listItem.component.tsx | 108 +++--- src/framework/ui/menu/menu.component.tsx | 238 +++++++------- src/framework/ui/modal/modal.component.tsx | 69 ++-- .../overflowMenu/overflowMenu.component.tsx | 196 ++++++----- .../ui/popover/popover.component.tsx | 44 ++- src/framework/ui/radio/radio.component.tsx | 67 +++- .../ui/radioGroup/radioGroup.component.tsx | 25 +- src/framework/ui/select/select.component.tsx | 309 +++++++++--------- .../ui/spinner/spinner.component.tsx | 27 +- src/framework/ui/tab/tab.component.tsx | 67 +++- src/framework/ui/tab/tabBar.component.tsx | 12 +- src/framework/ui/tab/tabView.component.tsx | 95 +++--- src/framework/ui/text/text.component.tsx | 53 +-- src/framework/ui/toggle/toggle.component.tsx | 78 ++++- .../ui/tooltip/tooltip.component.tsx | 119 ++++--- .../topNavigation/topNavigation.component.tsx | 132 ++++---- .../topNavigationAction.component.tsx | 51 ++- .../ui/viewPager/viewPager.component.tsx | 88 +++-- 40 files changed, 1867 insertions(+), 1377 deletions(-) diff --git a/docs/src/articles/guides/create-screen.md b/docs/src/articles/guides/create-screen.md index 6d7e8d6eb..547569ab7 100644 --- a/docs/src/articles/guides/create-screen.md +++ b/docs/src/articles/guides/create-screen.md @@ -15,7 +15,7 @@ We suppose that you have a separate component per screen, let's open your `some- ## Create a Component ```js -import * as React from 'react'; +import React from 'react'; import { Layout, Text, Button } from 'react-native-ui-kitten'; export const HomeScreen = () => ( @@ -35,7 +35,7 @@ The example above will render a simple screen with a welcome text and a button. Now let's add some styles to fit the full available space on the device screen. ```js -import * as React from 'react'; +import React from 'react'; import { StyleSheet } from 'react-native'; import { Button, Layout, Text } from 'react-native-ui-kitten'; @@ -47,13 +47,8 @@ export const HomeScreen = () => ( ); const styles = StyleSheet.create({ - container: { - flex: 1, - alignItems: 'center', - }, - text: { - marginVertical: 16, - }, + container: { flex: 1, alignItems: 'center' }, + text: { marginVertical: 16 }, }); ``` @@ -65,15 +60,13 @@ const styles = StyleSheet.create({ Let's now set this screen as `ApplicationProvider` children to quickly review changes ```js -import * as React from 'react'; +import React from 'react'; import { mapping, light as lightTheme } from '@eva-design/eva'; import { ApplicationProvider } from 'react-native-ui-kitten'; import { HomeScreen } from './path-to/some-screen.component' // <-- Import a screen we've created const App = () => ( - + ); diff --git a/docs/src/articles/guides/install-existing.md b/docs/src/articles/guides/install-existing.md index cd44c2af0..a878bccd3 100644 --- a/docs/src/articles/guides/install-existing.md +++ b/docs/src/articles/guides/install-existing.md @@ -20,14 +20,17 @@ In your **App.js**: ```js import React from 'react'; import { mapping, light as lightTheme } from '@eva-design/eva'; -import { ApplicationProvider } from 'react-native-ui-kitten'; -import { RootComponent } from '../path-to/root.component'; // <-- Import your application entry point +import { ApplicationProvider, Layout, Text } from 'react-native-ui-kitten'; + +const ApplicationContent = () => ( + + Welcome to UI Kitten + +); const App = () => ( - - + + ); diff --git a/docs/src/articles/guides/setup-icons-module.md b/docs/src/articles/guides/setup-icons-module.md index ba9402c4f..2ae080831 100644 --- a/docs/src/articles/guides/setup-icons-module.md +++ b/docs/src/articles/guides/setup-icons-module.md @@ -26,18 +26,24 @@ npm i @ui-kitten/eva-icons ## Configure Icon Registry ```js -import * as React from 'react'; +import React from 'react'; import { mapping, light as lightTheme } from '@eva-design/eva'; import { EvaIconsPack } from '@ui-kitten/eva-icons'; -import { ApplicationProvider, Layout, IconRegistry } from 'react-native-ui-kitten'; +import { ApplicationProvider, IconRegistry, Layout, Text } from 'react-native-ui-kitten'; + +const ApplicationContent = () => ( + + Welcome to UI Kitten + +); const App = () => ( - - - - + + + + + + ); export default App; @@ -48,7 +54,7 @@ export default App; ## Use it with UI Kitten components ```js -import * as React from 'react'; +import React from 'react'; import { Button, Icon } from 'react-native-ui-kitten'; export const FacebookIcon = (style) => ( diff --git a/docs/src/articles/guides/setup-vector-icons.md b/docs/src/articles/guides/setup-vector-icons.md index 35f7128e0..10f1c1391 100644 --- a/docs/src/articles/guides/setup-vector-icons.md +++ b/docs/src/articles/guides/setup-vector-icons.md @@ -25,7 +25,7 @@ After vector-icons is installed and you have everything in place, we need to cre Let's create a separate file `feather-icons.js` and place there the following code. ```js -import * as React from 'react'; +import React from 'react'; import { StyleSheet } from 'react-native'; import Icon from 'react-native-vector-icons/Feather'; // <-- Import Feather icons @@ -54,6 +54,8 @@ function createIconsMap() { And providing function ```js +import Icon from 'react-native-vector-icons/Feather'; // <-- Import Feather icons + function IconProvider(name) { return { toReactElement: (props) => FeatherIcon({ name, ...props }), @@ -81,18 +83,24 @@ function FeatherIcon({ name, style }) { After everything is configured, we simply need to import a feather icon map and register it with UI Kitten APIs. ```js -import * as React from 'react'; +import React from 'react'; import { mapping, light as lightTheme } from '@eva-design/eva'; -import { ApplicationProvider, Layout, IconRegistry } from 'react-native-ui-kitten'; +import { ApplicationProvider, IconRegistry, Layout, Text } from 'react-native-ui-kitten'; import { FeatherIconsPack } from './path-to/feather-icons.js'; // <-- Feather icons map +const ApplicationContent = () => ( + + Welcome to UI Kitten + +); + const App = () => ( - - - - + + + + + + ); export default App; @@ -103,7 +111,7 @@ export default App; ## Use it with UI Kitten components ```js -import * as React from 'react'; +import React from 'react'; import { Button, Icon } from 'react-native-ui-kitten'; export const FacebookIcon = (style) => ( @@ -128,6 +136,8 @@ As a result, you should have a Button looking similar to this: As you might notice, UI Kitten API allows you to register **multiple** icon packages with the following instruction. ```js +import { IconRegistry } from 'react-native-ui-kitten'; + ``` @@ -175,19 +185,25 @@ function MaterialIcon({ name, style }) { Now all we need to do is to extend our `IconRegistry`: ```js -import * as React from 'react'; +import React from 'react'; import { mapping, light as lightTheme } from '@eva-design/eva'; -import { ApplicationProvider, Layout, IconRegistry } from 'react-native-ui-kitten'; +import { ApplicationProvider, IconRegistry, Layout, Text } from 'react-native-ui-kitten'; import { FeatherIconsPack } from './path-to/feather-icons.js'; // <-- Feather icons map import { MaterialIconsPack } from './path-to/material-icons.js'; // <-- Material icons map +const ApplicationContent = () => ( + + Welcome to UI Kitten + +); + const App = () => ( - + - - + + + + ); export default App; @@ -200,7 +216,7 @@ export default App; Now you're able to choose an icon library with simply changing `pack` property. ```js -import * as React from 'react'; +import React from 'react'; import { Button, Icon } from 'react-native-ui-kitten'; export const HomeIcon = (style) => ( diff --git a/docs/src/structure.ts b/docs/src/structure.ts index c52fe2c8e..f27fb8f33 100644 --- a/docs/src/structure.ts +++ b/docs/src/structure.ts @@ -287,6 +287,14 @@ export const structure = [ }, ], }, + { + type: 'tabs', + name: 'Menu', + icon: 'menu.svg', + source: [ + 'Menu', + ], + }, { type: 'tabs', name: 'Icon', @@ -307,10 +315,11 @@ export const structure = [ }, { type: 'tabs', - name: 'Top Navigation', + name: 'TopNavigation', icon: 'top-navigation.svg', source: [ 'TopNavigation', + 'TopNavigationAction', ], overview: [ { @@ -321,7 +330,7 @@ export const structure = [ }, { type: 'tabs', - name: 'Bottom Navigation', + name: 'BottomNavigation', icon: 'bottom-navigation.svg', source: [ 'BottomNavigation', @@ -359,11 +368,10 @@ export const structure = [ }, { type: 'tabs', - name: 'Tab View', + name: 'TabView', icon: 'tab.svg', source: [ 'TabView', - 'TabBar', 'Tab', ], overview: [ @@ -373,15 +381,6 @@ export const structure = [ }, ], }, - { - type: 'tabs', - name: 'Menu', - icon: 'menu.svg', - source: [ - 'Menu', - 'MenuItem', - ], - }, { type: 'group', name: 'Forms', diff --git a/src/framework/theme/application/applicationProvider.component.tsx b/src/framework/theme/application/applicationProvider.component.tsx index b8c2226c1..6c6d86bd2 100644 --- a/src/framework/theme/application/applicationProvider.component.tsx +++ b/src/framework/theme/application/applicationProvider.component.tsx @@ -56,24 +56,24 @@ interface State { * ``` * import React from 'react'; * import { mapping, light as lightTheme } from '@eva-design/eva'; - * import { ApplicationProvider } from 'react-native-ui-kitten'; - * import { Application } from './path-to/root.component'; + * import { ApplicationProvider, Layout, Text } from 'react-native-ui-kitten'; * * export default class App extends React.Component { * - * public render(): React.ReactNode { + * render() { * return ( * - * + * + * Welcome to UI Kitten + * * * ); * } * } * ``` */ - export class ApplicationProvider extends React.Component { private schemaProcessor: SchemaProcessor = new SchemaProcessor(); diff --git a/src/framework/theme/modal/modal.service.tsx b/src/framework/theme/modal/modal.service.tsx index b9001ff3e..1c5e264fb 100644 --- a/src/framework/theme/modal/modal.service.tsx +++ b/src/framework/theme/modal/modal.service.tsx @@ -23,52 +23,38 @@ import { ModalPresentingBased } from '../../ui/support/typings'; * * ``` * import React from 'react'; - * import { - * View, - * ViewProps, - * } from 'react-native'; - * import { - * Button, - * Text, - * ModalService, - * } from 'react-native-ui-kitten'; + * import { Layout, Button, Text, ModalService } from 'react-native-ui-kitten'; * - * export const ModalServiceShowcase = (): React.ReactElement => { + * export const ModalServiceShowcase = () => { * - * const modalID: string = ''; + * const modalID = ''; * * const showModal = () => { - * const component: React.ReactElement = this.renderModalContentElement(); - * - * this.modalID = ModalService.show(component, { allowBackdrop: true, onBackdropPress: this.hideModal }); + * const contentElement = this.renderModalContentElement(); + * this.modalID = ModalService.show(contentElement, { allowBackdrop: true, onBackdropPress: this.hideModal }); * }; * * const hideModal = () => { * ModalService.hide(this.modalID); * }; * - * const renderModalContentElement = (): React.ReactElement => { + * const renderModalContentElement = () => { * return ( - * + * * Hi, I'm modal! - * + * * ); * }; * * return ( - * - * - * - * + * + * + * + * * ); * } * ``` */ - class ModalServiceType { panel: ModalPresenting | null = null; diff --git a/src/framework/theme/style/styleConsumer.component.tsx b/src/framework/theme/style/styleConsumer.component.tsx index 4b0dacc65..2254a9f3e 100644 --- a/src/framework/theme/style/styleConsumer.component.tsx +++ b/src/framework/theme/style/styleConsumer.component.tsx @@ -61,17 +61,15 @@ export type StyledComponentClass

= React.ComponentClass { + * class Button extends React.Component { * * // Define component name used in `mapping` - * static styledComponentName: string = 'Button'; + * static styledComponentName = 'Button'; * - * private onPressIn = (e: GestureResponderEvent) => { + * onPressIn = (e) => { * // Request styles for `active` state and re-render * * this.props.dispatch([Interaction.ACTIVE]); @@ -81,7 +79,7 @@ export type StyledComponentClass

= React.ComponentClass { + * onPressOut = (e) => { * // Request styles for default state and re-render * * this.props.dispatch([]); @@ -91,7 +89,7 @@ export type StyledComponentClass

= React.ComponentClass { + * render() { * // Retrieve styles for current state from props (provided with themedStyle prop) * // And apply it with saving priority of `style` prop * @@ -108,23 +106,18 @@ export type StyledComponentClass

= React.ComponentClass(Button); + * export const StyledButton = styled(Button); * ``` * * @overview-example Styled Component Usage * * ``` * import React from 'react'; - * import { - * StyledButton, - * StyledButtonProps, - * } from './path-to/styledButton.component'; - * - * export const StyledButtonShowcase = (props?: StyledButtonProps): React.ReactElement => { - * return ( - * - * ); - * }; + * import { StyledButton } from './path-to/styledButton.component'; + * + * export const StyledButtonShowcase = (props) => ( + * + * ); * ``` */ export const styled =

(Component: React.ComponentType

): StyledComponentClass

=> { diff --git a/src/framework/theme/theme/themeConsumer.component.tsx b/src/framework/theme/theme/themeConsumer.component.tsx index 839055d3c..4af5168b8 100644 --- a/src/framework/theme/theme/themeConsumer.component.tsx +++ b/src/framework/theme/theme/themeConsumer.component.tsx @@ -49,14 +49,12 @@ export type ThemedComponentClass

= React.ComponentClass { - * - * public render(): React.ReactElement { + * render() { * // Retrieve styles from props (provided with themedStyle prop) * // And apply it with saving priority of `style` prop * @@ -71,7 +69,7 @@ export type ThemedComponentClass

= React.ComponentClass ({ + * export const ThemedButton = withStyles(Button, (theme) => ({ * backgroundColor: theme['color-primary-default'], * })); * ``` @@ -80,19 +78,13 @@ export type ThemedComponentClass

= React.ComponentClass => { - * return ( - * - * ); - * }; + * export const ThemedButtonShowcase = (props) => ( + * + * ); * ``` */ - export const withStyles =

(Component: React.ComponentType

, createStyles?: CreateStylesFunction): ThemedComponentClass

=> { diff --git a/src/framework/ui/avatar/avatar.component.tsx b/src/framework/ui/avatar/avatar.component.tsx index b1dac6025..f46e7d9d3 100644 --- a/src/framework/ui/avatar/avatar.component.tsx +++ b/src/framework/ui/avatar/avatar.component.tsx @@ -46,33 +46,58 @@ export type AvatarElement = React.ReactElement; * * ``` * import React from 'react'; - * import { Avatar, AvatarProps } from 'react-native-ui-kitten'; + * import { Avatar } from 'react-native-ui-kitten'; * - * export const AvatarShowcase = (props?: AvatarProps): React.ReactElement => { - * return ( - * - * ); - * }; + * export const AvatarShowcase = (props) => ( + * + * ); + * ``` + * + * @overview-example Remote Images + * + * ``` + * import React from 'react'; + * import { Avatar } from 'react-native-ui-kitten'; + * + * export const AvatarShowcase = (props) => ( + * + * ); * ``` * * @overview-example Eva Styling * * ``` * import React from 'react'; - * import { Avatar, AvatarProps } from 'react-native-ui-kitten'; - * - * export const AvatarShowcase = (props?: AvatarProps): React.ReactElement => { - * return ( - * - * ); - * }; + * import { Avatar } from 'react-native-ui-kitten'; + * + * export const AvatarShowcase = (props) => ( + * + * ); + * ``` + * + * @example Inline Styling + * + * ``` + * import React from 'react'; + * import { StyleSheet } from 'react-native'; + * import { Avatar } from 'react-native-ui-kitten'; + * + * export const AvatarShowcase = (props) => ( + * + * ); + * + * const styles = StyleSheet.create({ + * avatar: { width: 96, height: 96, borderRadius: 16 } + * }); * ``` */ - export class AvatarComponent extends React.Component { static styledComponentName: string = 'Avatar'; diff --git a/src/framework/ui/bottomNavigation/bottomNavigation.component.tsx b/src/framework/ui/bottomNavigation/bottomNavigation.component.tsx index 977c016e9..0a24878cd 100644 --- a/src/framework/ui/bottomNavigation/bottomNavigation.component.tsx +++ b/src/framework/ui/bottomNavigation/bottomNavigation.component.tsx @@ -66,29 +66,62 @@ export type BottomNavigationElement = React.ReactElement; * * export class BottomNavigationShowcase extends React.Component { * - * public state = { + * state = { * selectedIndex: 0, * }; * - * private onTabSelect = (selectedIndex: number) => { + * onTabSelect = (selectedIndex) => { * this.setState({ selectedIndex }); * }; * - * public render(): React.ReactNode { + * render() { * return ( * - * - * + * * * ); * } * } * ``` * - * @overview-example Without Indicator + * @overview-example With React Navigation + * + * ``` + * import React from 'react'; + * import { BottomNavigation, BottomNavigationTab } from 'react-native-ui-kitten'; + * 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 ( + * + * + * + * + * ); + * } + * + * export const BottomTabNavigator = createBottomTabNavigator({ + * Dashboard: Dashboard, + * Settings: Settings, + * }, { + * initialRouteName: 'Dashboard', + * tabBarComponent: BottomNavigationShowcase, + * }); + * ``` + * + * @example Without Indicator * * ``` * import React from 'react'; @@ -96,22 +129,22 @@ export type BottomNavigationElement = React.ReactElement; * * export class BottomNavigationShowcase extends React.Component { * - * public state = { + * state = { * selectedIndex: 0, * }; * - * private onTabSelect = (selectedIndex: number) => { + * onTabSelect = (selectedIndex) => { * this.setState({ selectedIndex }); * }; * - * public render(): React.ReactNode { + * render() { * return ( * - * + * + * * * ); * } @@ -121,68 +154,25 @@ export type BottomNavigationElement = React.ReactElement; * @example Inline Styling * * ``` - * import React, { ReactElement } from 'react'; - * import { BottomNavigation, BottomNavigationProps, BottomNavigationTab } from 'react-native-ui-kitten'; - * - * export const BottomNavigationShowcase = (props?: BottomNavigationProps): ReactElement => { - * return ( - * - * - * ( + * + * + * + * + * ); * - * export const TabNavigatorScreen: NavigationContainer = createBottomTabNavigator({ - * ...screens, - * }, { - * initialRouteName: 'Screen1', - * tabBarComponent: BottomNavigationShowcase, + * const styles = StyleSheet.create({ + * bottomNavigation: { backgroundColor: 'white' }, + * indicator: { backgroundColor: 'black' }, * }); - * - * export const BottomNavigationShowcase = (props?: BottomNavigationProps): ReactElement { - * - * const onTabSelect = (selectedIndex: number) => { - * const { [index]: selectedRoute } = props.navigation.state.routes; - * - * navigation.navigate(selectedRoute.routeName); - * }; - * - * return ( - * - * - * - * - * - * ); - * } * ``` */ - export class BottomNavigationComponent extends React.Component { static styledComponentName: string = 'BottomNavigation'; diff --git a/src/framework/ui/bottomNavigation/bottomNavigationTab.component.tsx b/src/framework/ui/bottomNavigation/bottomNavigationTab.component.tsx index 034108768..2a8c5f71e 100644 --- a/src/framework/ui/bottomNavigation/bottomNavigationTab.component.tsx +++ b/src/framework/ui/bottomNavigation/bottomNavigationTab.component.tsx @@ -60,8 +60,72 @@ export type BottomNavigationTabElement = React.ReactElement ( + * + * ); + * ``` + * + * @overview-example With Icon + * + * ``` + * // IMPORTANT: To use Icon component make sure to follow this guide: + * // https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons + * + * import React from 'react'; + * import { BottomNavigationTab, Icon } from 'react-native-ui-kitten'; + * + * const DashboardIcon = (style) => ( + * + * ); + * + * export const BottomNavigationTabShowcase = (props) => ( + * + * ); + * ``` + * + * @example Using Asset Icons + * + * ``` + * import React from 'react'; + * import { Image } from 'react-native'; + * import { BottomNavigationTab } from 'react-native-ui-kitten'; + * + * const DashboardIcon = (style) => ( + * + * ); + * + * export const BottomNavigationTabShowcase = (props) => ( + * + * ); + * ``` + * + * @example Inline Styling + * + * ``` + * import React from 'react'; + * import { StyleSheet } from 'react-native'; + * import { BottomNavigationTab } from 'react-native-ui-kitten'; + * + * export const BottomNavigationTabShowcase = (props) => ( + * + * ); + * + * const styles = StyleSheet.create({ + * tab: { backgroundColor: 'white' }, + * tabTitle: { color: 'black' }, + * }); + * ``` */ - export class BottomNavigationTabComponent extends React.Component { static styledComponentName: string = 'BottomNavigationTab'; diff --git a/src/framework/ui/button/button.component.tsx b/src/framework/ui/button/button.component.tsx index 47c68d323..3c7fde08d 100644 --- a/src/framework/ui/button/button.component.tsx +++ b/src/framework/ui/button/button.component.tsx @@ -74,87 +74,91 @@ export type ButtonElement = React.ReactElement; * * ``` * import React from 'react'; - * import { - * Button, - * ButtonProps, - * } from 'react-native-ui-kitten'; + * import { Button } from 'react-native-ui-kitten'; * - * export const ButtonShowcase = (props?: ButtonProps): React.ReactElement => { + * export const ButtonShowcase = (props) => { * * const onPress = () => { * // Handle Button press * }; * * return ( - * + * * ); * }; * ``` * + * @overview-example With Icon + * + * ``` + * // IMPORTANT: To use Icon component make sure to follow this guide: + * // https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons + * + * import React from 'react'; + * import { Button, Icon } from 'react-native-ui-kitten'; + * + * const FacebookIcon = (style) => ( + * + * ); + * + * export const LoginButton = (props) => ( + * + * ); + * ``` + * * @overview-example Eva Styling * * ``` * import React from 'react'; - * import { - * Button, - * ButtonProps, - * } from 'react-native-ui-kitten'; + * import { Button } from 'react-native-ui-kitten'; * - * export const ButtonShowcase = (props?: ButtonProps): React.ReactElement => { + * export const ButtonShowcase = (props) => ( + * + * ); + * ``` * - * const onPress = () => { - * // Handle Button press - * }; + * @example Using Asset Icons * - * return ( - * - * ); - * }; * ``` + * import React from 'react'; + * import { Image } from 'react-native'; + * import { Button } from 'react-native-ui-kitten'; * - * @example Inline Styling with Icon + * const StarIcon = (style) => ( + * + * ); + * + * export const StarButton = (props) => ( + * + * ); + * ``` + * + * @example Inline Styling * * ``` * import React from 'react'; - * import { - * ImageStyle, - * Image, - * ImageProps, - * } from 'react-native'; - * import { - * Button, - * ButtonProps, - * } from 'react-native-ui-kitten'; + * import { StyleSheet } from 'react-native'; + * import { Button } from 'react-native-ui-kitten'; * - * const ButtonIcon = (style: ImageStyle): React.ReactElement => { - * return ( - * - * ); - * }; + * export const ButtonShowcase = (props) => ( + * + * ); * - * export const ButtonShowcase = (props?: ButtonProps): React.ReactElement => { - * return ( - * - * ); - * }; + * const styles = StyleSheet.create({ + * button: { borderRadius: 8 }, + * buttonText: { color: 'white' }, + * }); * ``` */ - export class ButtonComponent extends React.Component { static styledComponentName: string = 'Button'; diff --git a/src/framework/ui/buttonGroup/buttonGroup.component.tsx b/src/framework/ui/buttonGroup/buttonGroup.component.tsx index 660b20ede..a0de04416 100644 --- a/src/framework/ui/buttonGroup/buttonGroup.component.tsx +++ b/src/framework/ui/buttonGroup/buttonGroup.component.tsx @@ -55,39 +55,54 @@ export type ButtonGroupElement = React.ReactElement; * * ``` * import React from 'react'; - * import { Button, ButtonGroup, ButtonGroupProps } from 'react-native-ui-kitten'; - * - * export const ButtonGroupShowcase = (props?: ButtonGroupProps): React.ReactElement => { - * return ( - * - * - * - * - * - * ); - * }; + * import { Button, ButtonGroup } from 'react-native-ui-kitten'; + * + * export const ButtonGroupShowcase = (props) => ( + * + * + * + * + * + * ); * ``` * * @overview-example Eva Styling * * ``` * import React from 'react'; - * import { Button, ButtonGroup, ButtonGroupProps } from 'react-native-ui-kitten'; - * - * export const ButtonGroupShowcase = (props?: ButtonGroupProps): React.ReactElement => { - * return ( - * - * - * - * - * - * ); - * }; + * import { Button, ButtonGroup } from 'react-native-ui-kitten'; + * + * export const DangerButtonGroup = (props) => ( + * + * + * + * + * + * ); + * ``` + * + * @example Inline Styling + * + * ``` + * import React from 'react'; + * import { StyleSheet } from 'react-native'; + * import { Button, ButtonGroup } from 'react-native-ui-kitten'; + * + * export const ButtonGroupShowcase = (props) => ( + * + * + * + * + * + * ); + * + * const styles = StyleSheet.create({ + * buttonGroup: { borderRadius: 8 }, + * }); * ``` */ - class ButtonGroupComponent extends React.Component { static styledComponentName: string = 'ButtonGroup'; diff --git a/src/framework/ui/checkbox/checkbox.component.tsx b/src/framework/ui/checkbox/checkbox.component.tsx index 4340a9d87..cc0b81c37 100644 --- a/src/framework/ui/checkbox/checkbox.component.tsx +++ b/src/framework/ui/checkbox/checkbox.component.tsx @@ -76,15 +76,15 @@ export type CheckBoxElement = React.ReactElement; * * export class CheckBoxShowcase extends React.Component { * - * public state = { + * state = { * checked: false, * }; * - * private onChange = (checked: boolean) => { + * onChange = (checked) => { * this.setState({ checked }); * }; * - * public render(): React.ReactNode { + * render() { * return ( * ; * } * ``` * - * @overview-example Eva Styling + * @overview-example With Text * * ``` * import React from 'react'; * import { CheckBox } from 'react-native-ui-kitten'; * - * export class CheckBoxShowcase extends React.Component { + * export class RememberPasswordCheckBox extends React.Component { * - * public state = { + * state = { * checked: false, * }; * - * private onChange = (checked: boolean) => { + * onChange = (checked) => { * this.setState({ checked }); * }; * - * public render(): React.ReactNode { + * render() { * return ( * * ); @@ -123,43 +123,44 @@ export type CheckBoxElement = React.ReactElement; * } * ``` * - * @example Inline Styling + * @overview-example Eva Styling * * ``` * import React from 'react'; - * import { CheckBox, CheckBoxProps } from 'react-native-ui-kitten'; - * - * export const CheckBoxShowcase = (props?: CheckBoxProps): React.ReactElement => { - * return ( - * - * ); - * }; + * import { CheckBox } from 'react-native-ui-kitten'; + * + * export class CheckBoxShowcase extends React.Component { + * + * state = { + * checked: false, + * }; + * + * onChange = (checked) => { + * this.setState({ checked }); + * }; + * + * render() { + * return ( + * + * ); + * } + * } * ``` * - * @example Indeterminate + * @example Indeterminate State * * ``` * import React from 'react'; + * import { View, StyleSheet } from 'react-native'; * import { CheckBox } from 'react-native-ui-kitten'; - * import { View } from 'react-native'; - * - * interface State { - * mainCheckboxChecked: boolean; - * mainCheckboxIndeterminate: boolean; - * checkbox1Checked: boolean; - * checkbox2Checked: boolean; - * checkbox3Checked: boolean; - * } * - * export class CheckBoxContainer extends React.Component { + * export class CheckBoxContainer extends React.Component { * - * public state: State = { + * state = { * mainCheckboxChecked: false, * mainCheckboxIndeterminate: false, * checkbox1Checked: false, @@ -167,7 +168,7 @@ export type CheckBoxElement = React.ReactElement; * checkbox3Checked: false, * }; * - * private onMainCheckboxChange = (checked: boolean): void => { + * onMainCheckboxChange = (checked) => { * if (checked) { * this.setState({ * checkbox1Checked: true, @@ -184,23 +185,23 @@ export type CheckBoxElement = React.ReactElement; * this.setState({ mainCheckboxChecked: checked }); * }; * - * private onCheckbox1Change = (checked: boolean): void => { + * onCheckbox1Change = (checked) => { * this.setState({ checkbox1Checked: checked }, this.setMainCheckboxDependingState); * }; * - * private onCheckbox2Change = (checked: boolean): void => { + * onCheckbox2Change = (checked) => { * this.setState({ checkbox2Checked: checked }, this.setMainCheckboxDependingState); * }; * - * private onCheckbox3Change = (checked: boolean): void => { + * onCheckbox3Change = (checked) => { * this.setState({ checkbox3Checked: checked }, this.setMainCheckboxDependingState); * }; * - * private setMainCheckboxDependingState = (): void => { + * setMainCheckboxDependingState = () => { * const { checkbox1Checked, checkbox2Checked, checkbox3Checked } = this.state; - * const states: boolean[] = [checkbox1Checked, checkbox2Checked, checkbox3Checked]; - * const someChecked: boolean = states.some((item: boolean) => item === true); - * const everyChecked: boolean = states.every((item: boolean) => item === true); + * const states = [checkbox1Checked, checkbox2Checked, checkbox3Checked]; + * const someChecked = states.some((item) => item === true); + * const everyChecked = states.every((item) => item === true); * * if (someChecked && !everyChecked) { * this.setState({ @@ -218,54 +219,70 @@ export type CheckBoxElement = React.ReactElement; * mainCheckboxIndeterminate: false, * }); * } - * }; - * - * public render(): React.ReactNode { - * const { - * mainCheckboxChecked, - * mainCheckboxIndeterminate, - * checkbox1Checked, - * checkbox2Checked, - * checkbox3Checked, - * } = this.state; + * }; * - * return ( - * - * - * - * - * - * - * ); + * render() { + * const { + * mainCheckboxChecked, + * mainCheckboxIndeterminate, + * checkbox1Checked, + * checkbox2Checked, + * checkbox3Checked, + * } = this.state; + * + * return ( + * + * + * + * + * + * + * ); * } * } * ``` - * */ - + * + * @example Inline Styling + * + * ``` + * import React from 'react'; + * import { StyleSheet } from 'react-native'; + * import { CheckBox } from 'react-native-ui-kitten'; + * + * export const CheckBoxShowcase = (props) => ( + * + * ); + * + * const styles = StyleSheet.create({ + * checkbox: { borderRadius: 8 }, + * checkboxText: { color: 'black' }, + * }); + * ``` + */ class CheckBoxComponent extends React.Component { static styledComponentName: string = 'CheckBox'; diff --git a/src/framework/ui/drawer/drawer.component.tsx b/src/framework/ui/drawer/drawer.component.tsx index 8122f6c33..20dcbe89a 100644 --- a/src/framework/ui/drawer/drawer.component.tsx +++ b/src/framework/ui/drawer/drawer.component.tsx @@ -48,7 +48,7 @@ export type DrawerElement = React.ReactElement; * import { Drawer } from 'react-native-ui-kitten'; * * const data = [ - * { title: 'Feed' }, + * { title: 'Dashboard' }, * { title: 'Messages' }, * { title: 'Settings' }, * ]; @@ -62,8 +62,9 @@ export type DrawerElement = React.ReactElement; * * ``` * import React from 'react'; - * import { createDrawerNavigator, SafeAreaView } from 'react-navigation'; - * import { Feed, Messages, Settings } from './path-to/screen-components'; // <-- Import screen components + * import { 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 { * @@ -91,31 +92,54 @@ export type DrawerElement = React.ReactElement; * } * * export const DrawerNavigator = createDrawerNavigator({ - * Feed: Feed, + * Dashboard: Dashboard, * Messages: Messages, * Settings: Settings, * }, { * contentComponent: DrawerNavigation, * }); - * * ``` * - * @example Header - * + * @overview-example With Icons * * ``` * // IMPORTANT: To use Icon component make sure to follow this guide: * // https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons * - * import React from 'react' - * import { DrawerHeaderFooter, Icon } from 'react-native-ui-kitten'; + * import React from 'react'; + * import { Drawer, Icon } from 'react-native-ui-kitten'; + * + * const data = [ + * { title: 'Dashboard', icon: DashboardIcon }, + * { title: 'Messages', icon: MessagesIcon }, + * { title: 'Settings', icon: SettingsIcon }, + * ]; + * + * const DashboardIcon = (style) => ( + * + * ); * - * const ProfileIcon = (style) => ( - * + * const MessagesIcon = (style) => ( + * * ); * + * const SettingsIcon = (style) => ( + * + * ); + * + * export const DrawerShowcase = (props) => ( + * + * ); + * ``` + * + * @overview-example Header + * + * ``` + * import React from 'react' + * import { Drawer, DrawerHeaderFooter } from 'react-native-ui-kitten'; + * * export const ProfileHeader = (props) => ( - * + * * ); * * export const DrawerShowcase = (props) => ( @@ -123,14 +147,14 @@ export type DrawerElement = React.ReactElement; * ); * ``` * - * @example Footer + * @overview-example Footer * * ``` * import React from 'react'; * import { Drawer, DrawerHeaderFooter } from 'react-native-ui-kitten'; * * const data = [ - * { title: 'Feed' }, + * { title: 'Dashboard' }, * { title: 'Messages' }, * { title: 'Settings' }, * ]; @@ -152,7 +176,7 @@ export type DrawerElement = React.ReactElement; * import { Drawer, Text } from 'react-native-ui-kitten'; * * const data = [ - * { title: 'Feed' }, + * { title: 'Dashboard' }, * { title: 'Messages' }, * { title: 'Settings' }, * ]; @@ -168,31 +192,6 @@ export type DrawerElement = React.ReactElement; * ); * ``` * - * @example Icon Item - * - * ``` - * // IMPORTANT: To use Icon component make sure to follow this guide: - * // https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons - * - * import React from 'react'; - * import { View, Image } from 'react-native'; - * import { Icon } from 'react-native-ui-kitten'; - * - * const data = [ - * { title: 'Feed' }, - * { title: 'Messages', icon: MessagesIcon }, - * { title: 'Settings' }, - * ]; - * - * const MessagesIcon = (style) => ( - * - * ); - * - * export const DrawerShowcase = (props) => ( - * - * ); - * ``` - * * @example Notification Badge Item * * ``` @@ -201,7 +200,7 @@ export type DrawerElement = React.ReactElement; * import { Drawer, Text } from 'react-native-ui-kitten'; * * const data = [ - * { title: 'Feed' }, + * { title: 'Dashboard' }, * { title: 'Messages', accessory: NotificationBadge }, * { title: 'Settings' }, * ]; @@ -229,7 +228,6 @@ export type DrawerElement = React.ReactElement; * }); * ``` */ - class DrawerComponent extends React.Component { static styledComponentName: string = 'Drawer'; diff --git a/src/framework/ui/drawer/drawerHeaderFooter.component.tsx b/src/framework/ui/drawer/drawerHeaderFooter.component.tsx index da4c6ba2d..afb41d6b3 100644 --- a/src/framework/ui/drawer/drawerHeaderFooter.component.tsx +++ b/src/framework/ui/drawer/drawerHeaderFooter.component.tsx @@ -51,25 +51,7 @@ export type DrawerHeaderFooterElement = ListItemElement; * ); * ``` * - * @example With Icon - * - * ``` - * // IMPORTANT: To use Icon component make sure to follow this guide: - * // https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons - * - * import React from 'react' - * import { DrawerHeaderFooter, Icon } from 'react-native-ui-kitten'; - * - * const ProfileIcon = (style) => ( - * - * ); - * - * export const ProfileHeader = (props) => ( - * - * ); - * ``` - * - * @example With Accessory + * @overview-example With Accessory * * ``` * // IMPORTANT: To use Icon component make sure to follow this guide: @@ -83,7 +65,7 @@ export type DrawerHeaderFooterElement = ListItemElement; * ); * * const LogoutButton = (style): React.ReactElement => ( - * + * + * ); + * + * export const PasswordInput = (props) => ( + * + * ); + * ``` + * + * @overview-example Using Asset Source + * + * ``` + * import React from 'react'; + * import { Image } from 'react-native'; + * import { Button } from 'react-native-ui-kitten'; + * + * const FacebookIcon = (style) => ( + * + * ); + * + * export const LoginButton = (props) => ( + * + * ); + * ``` + * * @overview-example Animation Usage * * ``` @@ -107,9 +149,7 @@ export type IconElement = React.ReactElement; * ref={iconRef} * name='star' * animation='shake' - * animationConfig={{ - cycles: -1, - }} + * animationConfig={{ cycles: -1 }} * /> * ); * @@ -123,6 +163,7 @@ export type IconElement = React.ReactElement; * import { Input, Icon } from 'react-native-ui-kitten'; * * export class PasswordInput extends React.Component { + * * state = { * passwordVisible: false, * }; @@ -158,6 +199,7 @@ export type IconElement = React.ReactElement; * import { Button, Icon } from 'react-native-ui-kitten'; * * export class LikeButton extends React.Component { + * * state = { * liked: false, * }; @@ -184,8 +226,21 @@ export type IconElement = React.ReactElement; * } * } * ``` + * + * @example Inline Styling + * + * ``` + * // Visit react-native-svg documentation for more details + * // https://github.com/react-native-community/react-native-svg#common-props + * + * import React from 'react'; + * import { Icon } from 'react-native-ui-kitten'; + * + * export const StarIcon = (props) => ( + * + * ); + * ``` */ - export class Icon extends React.Component> { static defaultProps: Partial = { diff --git a/src/framework/ui/icon/iconRegistry.component.tsx b/src/framework/ui/icon/iconRegistry.component.tsx index c67e2d863..35c051ce3 100644 --- a/src/framework/ui/icon/iconRegistry.component.tsx +++ b/src/framework/ui/icon/iconRegistry.component.tsx @@ -25,20 +25,20 @@ export type IconRegistryElement = React.ReactElement; * ``` * import React from 'react'; * import { mapping, light as lightTheme } from '@eva-design/eva'; - * import { ApplicationProvider, IconRegistry } from 'react-native-ui-kitten'; + * import { ApplicationProvider, IconRegistry, Layout, Text } from 'react-native-ui-kitten'; * import { EvaIconsPack } from '@ui-kitten/eva-icons'; // <-- Make sure it is installed. npm i @ui-kitten/eva-icons - * import { Application } from './path-to/root.component'; * * export default class App extends React.Component { - * - * public render(): React.ReactNode { + * render() { * return ( - * - * + * * - * + * + * + * Welcome to UI Kitten + * + * + * * ); * } * } diff --git a/src/framework/ui/input/input.component.tsx b/src/framework/ui/input/input.component.tsx index 38dc188dd..65e15910d 100644 --- a/src/framework/ui/input/input.component.tsx +++ b/src/framework/ui/input/input.component.tsx @@ -110,15 +110,15 @@ export type InputElement = React.ReactElement; * * export class InputShowcase extends React.Component { * - * public state = { + * state = { * inputValue: '', * }; * - * private onInputValueChange = (inputValue: string) => { + * onInputValueChange = (inputValue) => { * this.setState({ inputValue }); * }; * - * public render(): React.ReactNode { + * render() { * return ( * ; * } * ``` * - * @overview-example Eva Styling + * @overview-example With Icon * * ``` + * // IMPORTANT: To use Icon component make sure to follow this guide: + * // https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons + * * import React from 'react'; - * import { Input } from 'react-native-ui-kitten'; + * import { Input, Icon } from 'react-native-ui-kitten'; * - * export class InputShowcase extends React.Component { + * export class SecureInput extends React.Component { * - * public state = { + * state = { * inputValue: '', + * secureTextEntry: true, * }; * - * private onInputValueChange = (inputValue: string) => { + * onInputValueChange = (inputValue) => { * this.setState({ inputValue }); * }; * - * public render(): React.ReactNode { + * onIconPress = () => { + * const secureTextEntry = !this.state.secureTextEntry; + * this.setState({ secureTextEntry }); + * }; + * + * renderIcon = (style) => ( + * const iconName = this.state.secureTextEntry ? 'eye' : 'eye-off'; + * return ( + * + * ); + * ); + * + * render() { * return ( * * ); @@ -158,52 +175,89 @@ export type InputElement = React.ReactElement; * } * ``` * - * @example With Icons + * @overview-example With Label * * ``` * import React from 'react'; - * import { - * StyleSheet, - * View, - * ImageProps, - * Image, - * GestureResponderEvent, - * Alert, - * } from 'react-native'; * import { Input } from 'react-native-ui-kitten'; * - * export class InputShowcase extends React.Component { + * export class EmailInput extends React.Component { + * + * state = { + * inputValue: '', + * }; + * + * onInputValueChange = (inputValue) => { + * this.setState({ inputValue }); + * }; + * + * render() { + * return ( + * + * ); + * } + * } + * ``` + * @overview-example With Caption + * + * ``` + * import React from 'react'; + * import { Input } from 'react-native-ui-kitten'; + * + * export class PasswordInput extends React.Component { * - * public state = { + * state = { * inputValue: '', * }; * - * private onInputValueChange = (inputValue: string) => { + * onInputValueChange = (inputValue) => { * this.setState({ inputValue }); * }; * - * private onIconPress = (event: GestureResponderEvent): void => { - * Alert.alert('On Input Icon Press'); + * isValidInputValue = () => { + * return this.state.inputValue.length >= 6; * }; * - * private renderIcon = (style: StyleType): React.ReactElement => { + * render() { + * const isValidInputValue = this.isValidInputValue(); * return ( - * * ); + * } + * } + * ``` + * + * @overview-example Eva Styling + * + * ``` + * import React from 'react'; + * import { Input } from 'react-native-ui-kitten'; + * + * export class InputShowcase extends React.Component { + * + * state = { + * inputValue: '', * }; * - * public render(): React.ReactNode { + * onInputValueChange = (inputValue) => { + * this.setState({ inputValue }); + * }; + * + * render() { * return ( * * ); @@ -211,36 +265,43 @@ export type InputElement = React.ReactElement; * } * ``` * + * @example Using Asset Icons + * + * ``` + * import React from 'react'; + * import { Image } from 'react-native'; + * import { Input } from 'react-native-ui-kitten'; + * + * const StarIcon = (style) => ( + * + * ); + * + * export const StarInput = (props) => ( + * + * ); + * ``` + * * @example Inline Styling * * ``` * import React from 'react'; - * import { - * StyleSheet, - * View, - * ImageProps, - * Image, - * GestureResponderEvent, - * Alert, - * } from 'react-native'; + * import { StyleSheet } from 'react-native'; * import { Input } from 'react-native-ui-kitten'; * * export class InputShowcase extends React.Component { * - * public state = { + * state = { * inputValue: '', * }; * - * private onInputValueChange = (inputValue: string) => { + * onInputValueChange = (inputValue) => { * this.setState({ inputValue }); * }; * - * public render(): React.ReactNode { + * render() { * return ( * ; * ); * } * } + * + * const styles = StyleSheet.create({ + * input: { borderRadius: 8 }, + * inputText: { color: 'black' }, + * inputLabel: { color: 'gray' }, + * inputCaption: { color: 'gray' }, + * }); * ``` - * */ - + */ export class InputComponent extends React.Component { static styledComponentName: string = 'Input'; diff --git a/src/framework/ui/layout/layout.component.tsx b/src/framework/ui/layout/layout.component.tsx index 3202170b8..9c755eb1a 100644 --- a/src/framework/ui/layout/layout.component.tsx +++ b/src/framework/ui/layout/layout.component.tsx @@ -45,28 +45,37 @@ export type LayoutElement = React.ReactElement; * * ``` * import React from 'react'; + * import { Layout, Text } from 'react-native-ui-kitten'; + * + * export const LayoutShowcase = (props) => ( + * + * Layout + * + * ); + * ``` + * + * @overview-example Layout Levels + * + * ``` + * import React from 'react'; * import { StyleSheet } from 'react-native'; - * import { - * Layout, - * Text, - * } from 'react-native-ui-kitten'; - * - * export class LayoutShowcase extends React.Component { - * - * public render(): React.ReactNode { - * return ( - * - * Layout - * - * ); - * } - *} + * import { Layout, Text } from 'react-native-ui-kitten'; + * + * export const LayoutShowcase = (props) => ( + * + * + * + * + * Welcome to UI Kitten + * + * + * + * + * ); * * const styles = StyleSheet.create({ - * container: { - * flex: 1, - * padding: 16, - * }, + * container: { flex: 1, padding: 16 } + * contentContainer: { justifyContent: 'center', alignItems: 'center' } * }); * ``` * @@ -74,25 +83,33 @@ export type LayoutElement = React.ReactElement; * * ``` * import React from 'react'; - * import { StyleSheet } from 'react-native'; - * import { - * Layout, - * Text, - * } from 'react-native-ui-kitten'; - * - * export class LayoutShowcase extends React.Component { - * - * public render(): React.ReactNode { - * return ( - * - * Layout - * - * ); - * } - * } + * import { Layout, Text } from 'react-native-ui-kitten'; + * + * export const LayoutShowcase = (props) => ( + * + * Layout + * + * ); * ``` - * */ - + * + * @example Inline Styling + * + * ``` + * import React from 'react'; + * import { StyleSheet } from 'react-native-ui-kitten'; + * import { Layout, Text } from 'react-native-ui-kitten'; + * + * export const LayoutShowcase = (props) => ( + * + * Layout + * + * ); + * + * const styles = StyleSheet.create({ + * container: { flex: 1, justifyContent: 'center', alignItems: 'center' }, + * }); + * ``` + */ export class LayoutComponent extends React.Component { static styledComponentName: string = 'Layout'; diff --git a/src/framework/ui/list/list.component.tsx b/src/framework/ui/list/list.component.tsx index 2888bd6c7..8a03d2a39 100644 --- a/src/framework/ui/list/list.component.tsx +++ b/src/framework/ui/list/list.component.tsx @@ -48,33 +48,23 @@ export type ListElement = React.ReactElement; * * ``` * import React from 'react'; - * import { ListRenderItemInfo } from 'react-native'; - * import { - * List, - * ListItem, - * } from 'react-native-ui-kitten'; + * import { List, ListItem } from 'react-native-ui-kitten'; * - * export const ListShowcase = (props?: ListProps): React.ReactElement => { + * export const ListShowcase = (props) => { * - * private data: string[] = [ - * 'Item 1', - * 'Item 2', - * 'Item 3', - * ]; + * const data = ['Item 1', 'Item 2', 'Item 3']; * - * private onItemPress = (index: number) => { + * const onItemPress = (index) => { * // Handle item press * }; * - * private renderItem = (info: ListRenderItemInfo): React.ReactElement => { - * return ( - * - * ); - * }; + * const renderItem = ({ item, index }) => ( + * + * ); * * return ( * ; * }; * ``` * - * @example With Custom ListItem + * @overview-example Custom List Item * * ``` * import React from 'react'; - * import { ListRenderItemInfo } from 'react-native'; - * import { - * List, - * ListItem, - * } from 'react-native-ui-kitten'; - * import { CustomListItemView } from './path-to/custom-list-item-view'; + * import { List, ListItem, Text } from 'react-native-ui-kitten'; * - * export const ListShowcase = (props?: ListProps): React.ReactElement => { + * export const ListShowcase = (props) => { * - * const data: string[] = [ - * ... - * ]; + * const data = ['Item 1', 'Item 2', 'Item 3']; * - * const onItemPress = (index: number) => { - * // Handle List Item press - * }; + * const renderItem = ({ item, index }) => ( + * + * {item} + * + * ); + * + * return ( + * + * ); + * }; + * ``` * - * const renderItem = (info: ListRenderItemInfo): React.ReactElement => { - * return ( - * - * - * - * ); + * @example Inline Styling + * + * ``` + * import React from 'react'; + * import { StyleSheet } from 'react-native-ui-kitten'; + * import { List, ListItem } from 'react-native-ui-kitten'; + * + * export const ListShowcase = (props) => { + * + * const data = ['Item 1', 'Item 2', 'Item 3']; + * + * const onItemPress = (index) => { + * // Handle item press * }; * + * const renderItem = ({ item, index }) => ( + * + * ); + * * return ( * * ); * }; + * + * const styles = StyleSheet.create({ + * contentContainer: { paddingHorizontal: 8 }, + * }); * ``` - * */ - + */ class ListComponent extends React.Component { static styledComponentName: string = 'List'; diff --git a/src/framework/ui/list/listItem.component.tsx b/src/framework/ui/list/listItem.component.tsx index 4dbce3e31..6f9527af7 100644 --- a/src/framework/ui/list/listItem.component.tsx +++ b/src/framework/ui/list/listItem.component.tsx @@ -96,89 +96,89 @@ export type ListItemElement = React.ReactElement; * * ``` * import React from 'react' - * import { ListItem, ListItemProps } from 'react-native-ui-kitten'; + * import { ListItem } from 'react-native-ui-kitten'; * - * export const ListItemShowcase = (props?: ListItemProps): React.ReactElement => { - * - * return ( - * - * ); - * }; + * export const ListItemShowcase = (props) => ( + * + * ); * ``` * - * @example With Icon + * @overview-example With Icon * * ``` - * import React from 'react' - * import { Image, ImageProps } from 'react-native' - * import { ListItem, ListItemProps, StyleType } from 'react-native-ui-kitten'; + * // IMPORTANT: To use Icon component make sure to follow this guide: + * // https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons * - * export const ListItemShowcase = (props?: ListItemProps): React.ReactElement => { + * import React from 'react' + * import { ListItem, Icon } from 'react-native-ui-kitten'; * - * const Icon = (style: StyleType): React.ReactElement => { - * return ( - * - * ); - * }; + * const StarIcon = (style) => ( + * + * ); * - * return ( - * - * ); - * }; + * export const ListItemShowcase = (props) => ( + * + * ); * ``` * * @example With Accessory * * ``` * import React from 'react' - * import { ListItem, ListItemProps, Button, ButtonProps, StyleType } from 'react-native-ui-kitten'; + * import { ListItem, Button } from 'react-native-ui-kitten'; * - * export const ListItemShowcase = (props?: ListItemProps): React.ReactElement => { + * export const ListItemShowcase = (props) => { * - * const Accessory = (style: StyleType): React.ReactElement => { - * return ( - * - * ); - * }; + * const Accessory = (style) => ( + * + * ); * * return ( - * + * * ); * }; * ``` * + * @example Using Asset Icons + * + * ``` + * import React from 'react'; + * import { Image } from 'react-native'; + * import { ListItem } from 'react-native-ui-kitten'; + * + * const StarIcon = (style) => ( + * + * ); + * + * export const ListItemShowcase = (props) => ( + * + * ); + * ``` + * * @example Inline Styling * * ``` * import React from 'react' - * import { ListItem, ListItemProps } from 'react-native-ui-kitten'; + * import { StyleSheet } from 'react-native-ui-kitten'; + * import { ListItem } from 'react-native-ui-kitten'; * - * export const ListItemShowcase = (props?: ListItemProps): React.ReactElement => { + * export const ListItemShowcase = (props) => ( + * + * ); * - * return ( - * - * ); - * }; + * const styles = StyleSheet.create({ + * listItem: { borderRadius: 8 }, + * listItemTitle: { color: 'black' }, + * listItemDescription: { color: 'gray' }, + * }); * ``` - * */ - + */ export class ListItemComponent extends React.Component { static styledComponentName: string = 'ListItem'; diff --git a/src/framework/ui/menu/menu.component.tsx b/src/framework/ui/menu/menu.component.tsx index 1879e66bb..c344e1384 100644 --- a/src/framework/ui/menu/menu.component.tsx +++ b/src/framework/ui/menu/menu.component.tsx @@ -62,35 +62,28 @@ export type MenuElement = React.ReactElement; * * ``` * import React from 'react'; - * import { - * Menu, - * MenuItemType, - * } from 'react-native-ui-kitten'; + * import { Menu } from 'react-native-ui-kitten'; * - * interface State { - * selectedIndex: number; - * } - * - * export class MenuShowcase extends React.Component { + * export class MenuShowcase extends React.Component { * - * public state: State = { + * state = { * selectedIndex: null, * }; * - * private data: MenuItemType[] = [ + * data = [ * { title: 'Item 1' }, * { title: 'Item 2' }, * { title: 'Item 3' }, * ]; * - * private onSelect = (selectedIndex: number): void => { + * onSelect = (selectedIndex) => { * this.setState({ selectedIndex }); * }; * - * public render(): React.ReactNode { + * render() { * return ( *

@@ -99,41 +92,40 @@ export type MenuElement = React.ReactElement; * } * ``` * - * @overview-example Eva Styling + * @overview-example Sub Menus * * ``` * import React from 'react'; - * import { - * Menu, - * MenuItemType, - * } from 'react-native-ui-kitten'; - * - * interface State { - * selectedIndex: number; - * } + * import { Menu } from 'react-native-ui-kitten'; * - * export class MenuShowcase extends React.Component { + * export class MenuShowcase extends React.Component { * - * public state: State = { + * state = { * selectedIndex: null, * }; * - * private data: MenuItemType[] = [ + * data = [ * { title: 'Item 1' }, - * { title: 'Item 2' }, + * { + * title: 'Item 2', + * subItems: [ + * { title: 'Item 21' }, + * { title: 'Item 22' }, + * { title: 'Item 23' }, + * ], + * }, * { title: 'Item 3' }, * ]; * - * private onSelect = (selectedIndex: number): void => { + * onSelect = (selectedIndex) => { * this.setState({ selectedIndex }); * }; * - * public render(): React.ReactNode { + * render() { * return ( * * ); @@ -141,39 +133,39 @@ export type MenuElement = React.ReactElement; * } * ``` * - * @example Disabled Item + * @overview-example With Icons * * ``` + * // IMPORTANT: To use Icon component make sure to follow this guide: + * // https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons + * * import React from 'react'; - * import { - * Menu, - * MenuItemType, - * } from 'react-native-ui-kitten'; + * import { Menu, Icon } from 'react-native-ui-kitten'; * - * interface State { - * selectedIndex: number; - * } + * const StarIcon = (style) => ( + * + * ); * - * export class MenuShowcase extends React.Component { + * export class MenuShowcase extends React.Component { * - * public state: State = { + * state = { * selectedIndex: null, * }; * - * private data: MenuItemType[] = [ - * { title: 'Item 1', disabled: true }, - * { title: 'Item 2' }, - * { title: 'Item 3' }, + * data = [ + * { title: 'Item 1', icon: StarIcon }, + * { title: 'Item 2', icon: StarIcon }, + * { title: 'Item 3', icon: StarIcon }, * ]; * - * private onSelect = (selectedIndex: number): void => { + * onSelect = (selectedIndex) => { * this.setState({ selectedIndex }); * }; * - * public render(): React.ReactNode { + * render() { * return ( * @@ -182,55 +174,67 @@ export type MenuElement = React.ReactElement; * } * ``` * - * @example With Icons + * @overview-example Eva Styling * * ``` * import React from 'react'; - * import { - * Menu, - * MenuItemType, - * } from 'react-native-ui-kitten'; + * import { Menu } from 'react-native-ui-kitten'; + * + * export class MenuShowcase extends React.Component { * - * interface State { - * selectedIndex: number; + * state = { + * selectedIndex: null, + * }; + * + * data = [ + * { title: 'Item 1' }, + * { title: 'Item 2' }, + * { title: 'Item 3' }, + * ]; + * + * onSelect = (selectedIndex) => { + * this.setState({ selectedIndex }); + * }; + * + * render() { + * return ( + * + * ); + * } * } + * ``` + * + * @example Disabled Item + * + * ``` + * import React from 'react'; + * import { Menu } from 'react-native-ui-kitten'; * - * export class MenuShowcase extends React.Component { + * export class MenuShowcase extends React.Component { * - * public state: State = { + * state = { * selectedIndex: null, * }; * - * private data: MenuItemType[] = [ - * { - * title: 'Item 1', - * icon: this.Icon, - * }, - * { - * title: 'Item 2', - * icon: this.Icon, - * }, - * { - * title: 'Item 3', - * icon: this.Icon, - * }, + * data = [ + * { title: 'Item 1', disabled: true }, + * { title: 'Item 2' }, + * { title: 'Item 3' }, * ]; * - * private Icon = (style: StyleType): React.ReactElement => ( - * - * ); - * - * private onSelect = (selectedIndex: number): void => { + * onSelect = (selectedIndex) => { * this.setState({ selectedIndex }); * }; * - * public render(): React.ReactNode { + * render() { * return ( * @@ -239,46 +243,37 @@ export type MenuElement = React.ReactElement; * } * ``` * - * @example With Items Groups + * @example Using Asset Icons * * ``` * import React from 'react'; - * import { - * Menu, - * MenuItemType, - * } from 'react-native-ui-kitten'; + * import { Image } from 'react-native'; + * import { Menu } from 'react-native-ui-kitten'; * - * interface State { - * selectedIndex: number; - * } + * const StarIcon = (style) => ( + * + * ); * - * export class MenuShowcase extends React.Component { + * export class MenuShowcase extends React.Component { * - * public state: State = { + * state = { * selectedIndex: null, * }; * - * private data: MenuItemType[] = [ - * { title: 'Item 1' }, - * { - * title: 'Item 2', - * subItems: [ - * { title: 'Item 21' }, - * { title: 'Item 22' }, - * { title: 'Item 23' }, - * ], - * }, - * { title: 'Item 3' }, + * data = [ + * { title: 'Item 1', icon: StarIcon }, + * { title: 'Item 2', icon: StarIcon }, + * { title: 'Item 3', icon: StarIcon }, * ]; * - * private onSelect = (selectedIndex: number): void => { + * onSelect = (selectedIndex) => { * this.setState({ selectedIndex }); * }; * - * public render(): React.ReactNode { + * render() { * return ( * @@ -291,44 +286,41 @@ export type MenuElement = React.ReactElement; * * ``` * import React from 'react'; - * import { - * Menu, - * MenuItemType, - * } from 'react-native-ui-kitten'; - * - * interface State { - * selectedIndex: number; - * } + * import { StyleSheet } from 'react-native'; + * import { Menu } from 'react-native-ui-kitten'; * - * export class MenuShowcase extends React.Component { + * export class MenuShowcase extends React.Component { * - * public state: State = { + * state = { * selectedIndex: null, * }; * - * private data: MenuItemType[] = [ - * { title: 'Item 1', titleStyle: { color: 'red', fontSize: 18 } }, - * { title: 'Item 2' }, - * { title: 'Item 3' }, + * data = [ + * { title: 'Item 1', titleStyle: styles.menuItemTitle }, + * { title: 'Item 2', titleStyle: styles.menuItemTitle }, + * { title: 'Item 3', titleStyle: styles.menuItemTitle }, * ]; * - * private onSelect = (selectedIndex: number): void => { + * onSelect = (selectedIndex) => { * this.setState({ selectedIndex }); * }; * - * public render(): React.ReactNode { + * render() { * return ( * * ); * } * } + * + * const styles = StyleSheet.create({ + * menuItemTitle: { color: 'black', fontSize: 18 }, + * }); * ``` */ - class MenuComponent extends React.Component { static styledComponentName: string = 'Menu'; diff --git a/src/framework/ui/modal/modal.component.tsx b/src/framework/ui/modal/modal.component.tsx index 69f037a63..c8e141df3 100644 --- a/src/framework/ui/modal/modal.component.tsx +++ b/src/framework/ui/modal/modal.component.tsx @@ -67,35 +67,21 @@ export type ModalElement = React.ReactElement; * * ``` * import React from 'react'; - * import { - * StyleSheet, - * View, - * ViewProps, - * } from 'react-native'; - * import { - * Button, - * Modal, - * Text, - * Layout, - * } from 'react-native-ui-kitten'; + * import { StyleSheet } from 'react-native'; + * import { Button, Modal, Text, Layout } from 'react-native-ui-kitten'; * - * interface State { - * modalVisible: boolean; - * } - * - * export class ModalShowcase extends React.Component { + * export class ModalShowcase extends React.Component { * - * public state: State = { + * state = { * modalVisible: false, * }; * - * private setModalVisible = (): void => { - * const modalVisible: boolean = !this.state.modalVisible; - * + * setModalVisible = () => { + * const modalVisible = !this.state.modalVisible; * this.setState({ modalVisible }); * }; * - * private renderModalElement = (): React.ReactElement => { + * renderModalElement = () => { * return ( * ; * ); * }; * - * public render(): React.ReactNode { + * render() { * return ( - * + * * * * {this.renderModalElement()} * - * + * * ); * } * } @@ -132,39 +118,25 @@ export type ModalElement = React.ReactElement; * }); * ``` * - * @example With Backdrop + * @overview-example With Backdrop * * ``` * import React from 'react'; - * import { - * StyleSheet, - * View, - * ViewProps, - * } from 'react-native'; - * import { - * Button, - * Modal, - * Text, - * Layout, - * } from 'react-native-ui-kitten'; + * import { StyleSheet } from 'react-native'; + * import { Button, Modal, Text, Layout } from 'react-native-ui-kitten'; * - * interface State { - * modalVisible: boolean; - * } - * - * export class ModalShowcase extends React.Component { + * export class ModalShowcase extends React.Component { * - * public state: State = { + * state = { * modalVisible: false, * }; * - * private setModalVisible = (): void => { + * setModalVisible = () => { * const modalVisible: boolean = !this.state.modalVisible; - * * this.setState({ modalVisible }); * }; * - * private renderModalElement = (): React.ReactElement => { + * renderModalElement = () => { * return ( * ; * ); * }; * - * public render(): React.ReactNode { + * render() { * return ( - * + * * * ; * }, * }); * ``` - * */ - + */ export class Modal extends React.Component { static defaultProps: Partial = { diff --git a/src/framework/ui/overflowMenu/overflowMenu.component.tsx b/src/framework/ui/overflowMenu/overflowMenu.component.tsx index 37ffed4ae..f1a707b29 100644 --- a/src/framework/ui/overflowMenu/overflowMenu.component.tsx +++ b/src/framework/ui/overflowMenu/overflowMenu.component.tsx @@ -67,41 +67,31 @@ export type OverflowMenuElement = React.ReactElement; * * ``` * import React from 'react'; - * import { - * OverflowMenu, - * OverflowMenuItemType, - * Button, - * } from 'react-native-ui-kitten'; - * - * interface State { - * menuVisible: boolean; - * selectedIndex: number; - * } + * import { OverflowMenu, Button } from 'react-native-ui-kitten'; * - * export class OverflowMenuShowcase extends React.Component { + * export class OverflowMenuShowcase extends React.Component { * - * private data: OverflowMenuItemType[] = [ + * data = [ * { title: 'Menu Item 1' }, * { title: 'Menu Item 2' }, * { title: 'Menu Item 3' }, * ]; * - * public state: State = { + * state = { * menuVisible: false, * selectedIndex: null, * }; * - * private onItemSelect = (selectedIndex: number): void => { + * onItemSelect = (selectedIndex) => { * this.setState({ selectedIndex }); * }; * - * private toggleMenu = (): void => { - * const menuVisible: boolean = !this.state.menuVisible; - * + * toggleMenu = () => { + * const menuVisible = !this.state.menuVisible; * this.setState({ menuVisible }); * }; * - * public render(): React.ReactNode { + * render() { * return ( * ; * selectedIndex={this.state.selectedIndex} * onSelect={this.onItemSelect} * onBackdropPress={this.toggleMenu}> - * + * + * * * ); * } @@ -189,41 +160,31 @@ export type OverflowMenuElement = React.ReactElement; * * ``` * import React from 'react'; - * import { - * OverflowMenu, - * OverflowMenuItemType, - * Button, - * } from 'react-native-ui-kitten'; - * - * interface State { - * menuVisible: boolean; - * selectedIndex: number; - * } + * import { OverflowMenu, Button } from 'react-native-ui-kitten'; * - * export class OverflowMenuShowcase extends React.Component { + * export class OverflowMenuShowcase extends React.Component { * - * private data: OverflowMenuItemType[] = [ + * data = [ * { title: 'Menu Item 1' }, * { title: 'Menu Item 2', disabled: true }, * { title: 'Menu Item 3' }, * ]; * - * public state: State = { + * state = { * menuVisible: false, * selectedIndex: null, * }; * - * private onItemSelect = (selectedIndex: number): void => { + * onItemSelect = (selectedIndex) => { * this.setState({ selectedIndex }); * }; * - * private toggleMenu = (): void => { - * const menuVisible: boolean = !this.state.menuVisible; - * + * toggleMenu = () => { + * const menuVisible = !this.state.menuVisible; * this.setState({ menuVisible }); * }; * - * public render(): React.ReactNode { + * render() { * return ( * ; * selectedIndex={this.state.selectedIndex} * onSelect={this.onItemSelect} * onBackdropPress={this.toggleMenu}> - * + * * * ); * } @@ -244,41 +203,31 @@ export type OverflowMenuElement = React.ReactElement; * * ``` * import React from 'react'; - * import { - * OverflowMenu, - * OverflowMenuItemType, - * Button, - * } from 'react-native-ui-kitten'; - * - * interface State { - * menuVisible: boolean; - * selectedIndex: number; - * } + * import { OverflowMenu, Button } from 'react-native-ui-kitten'; * - * export class OverflowMenuShowcase extends React.Component { + * export class OverflowMenuShowcase extends React.Component { * - * private data: OverflowMenuItemType[] = [ + * data = [ * { title: 'Menu Item 1' }, * { title: 'Menu Item 2' }, * { title: 'Menu Item 3' }, * ]; * - * public state: State = { + * state = { * menuVisible: false, * selectedIndex: null, * }; * - * private onItemSelect = (selectedIndex: number): void => { + * onItemSelect = (selectedIndex) => { * this.setState({ selectedIndex }); * }; * - * private toggleMenu = (): void => { - * const menuVisible: boolean = !this.state.menuVisible; - * + * toggleMenu = () => { + * const menuVisible = !this.state.menuVisible; * this.setState({ menuVisible }); * }; * - * public render(): React.ReactNode { + * render() { * return ( * ; * selectedIndex={this.state.selectedIndex} * onSelect={this.onItemSelect} * onBackdropPress={this.toggleMenu}> - * + * + * + * ); + * } + * } + * ``` + * + * @example Using Asset Icons + * + * ``` + * import React from 'react'; + * import { Image } from 'react-native'; + * import { OverflowMenu, Button } from 'react-native-ui-kitten'; + * + * const StarIcon = (style) => ( + * + * ); + * + * export class OverflowMenuShowcase extends React.Component { + * + * data = [ + * { title: 'Menu Item 1', icon: StarIcon }, + * { title: 'Menu Item 2', icon: StarIcon }, + * { title: 'Menu Item 3', icon: StarIcon }, + * ]; + * + * state = { + * menuVisible: false, + * selectedIndex: null, + * }; + * + * onItemSelect = (selectedIndex) => { + * this.setState({ selectedIndex }); + * }; + * + * toggleMenu = () => { + * const menuVisible = !this.state.menuVisible; + * this.setState({ menuVisible }); + * }; + * + * render() { + * return ( + * + * * * ); * } * } * ``` */ - class OverflowMenuComponent extends React.Component { static styledComponentName: string = 'OverflowMenu'; diff --git a/src/framework/ui/popover/popover.component.tsx b/src/framework/ui/popover/popover.component.tsx index 9c3632063..6c54df210 100644 --- a/src/framework/ui/popover/popover.component.tsx +++ b/src/framework/ui/popover/popover.component.tsx @@ -62,7 +62,7 @@ const TAG_CONTENT: number = 1; const PLACEMENT_DEFAULT: PopoverPlacement = PopoverPlacements.BOTTOM; /** - * Displays content in a `Modal` when users focus on or tap an element. Also supports autoplacement. + * Displays content in a `Modal` when users focus on or tap an element. Also supports automatic placement. * * @extends React.Component * @@ -90,49 +90,43 @@ const PLACEMENT_DEFAULT: PopoverPlacement = PopoverPlacements.BOTTOM; * * ``` * import React from 'react'; - * import { - * View, - * ViewProps, - * } from 'react-native'; - * import { - * Popover, - * Button, - * Text, - * } from 'react-native-ui-kitten'; + * import { StyleSheet } from 'react-native'; + * import { Popover, Layout, Button, Text } from 'react-native-ui-kitten'; * * export class PopoverShowcase extends React.Component { - * public state: State = { + * + * state = { * popoverVisible: false, * }; * - * private togglePopover = () => { - * this.setState({ popoverVisible: !this.state.popoverVisible }); + * togglePopover = () => { + * const popoverVisible = !this.state.popoverVisible; + * this.setState({ popoverVisible }); * }; * - * private renderPopoverContentElement = (): React.ReactElement => { - * return ( - * - * Hi! This is popover. - * - * ); - * }; + * renderPopoverContentElement = () => ( + * + * Hi! This is popover. + * + * ); * - * public render(): React.ReactNode { + * render() { * return ( * - * + * * * ); * } * } + * + * const styles = StyleSheet.create({ + * popoverContent: { justifyContent: 'center', alignItems: 'center' }, + * }); * ``` */ - export class PopoverComponent extends React.Component { static styledComponentName: string = 'Popover'; diff --git a/src/framework/ui/radio/radio.component.tsx b/src/framework/ui/radio/radio.component.tsx index 8041d93e4..c22f7f34c 100644 --- a/src/framework/ui/radio/radio.component.tsx +++ b/src/framework/ui/radio/radio.component.tsx @@ -70,15 +70,16 @@ export type RadioElement = React.ReactElement; * import { Radio } from 'react-native-ui-kitten'; * * export class RadioShowcase extends React.Component { - * public state = { + * + * state = { * checked: false, * }; * - * private onChange = (checked: boolean) => { + * onChange = (checked) => { * this.setState({ checked }); * }; * - * public render(): React.ReactNode { + * render() { * return ( * ; * ) * } * } + * + * ``` + * @overview-example With Text + * + * ``` + * import React from 'react'; + * import { Radio } from 'react-native-ui-kitten'; + * + * export class RadioShowcase extends React.Component { + * + * state = { + * checked: false, + * }; + * + * onChange = (checked) => { + * this.setState({ checked }); + * }; + * + * render() { + * return ( + * + * ) + * } + * } * ``` * * @overview-example Eva Styling @@ -96,15 +125,16 @@ export type RadioElement = React.ReactElement; * import { Radio } from 'react-native-ui-kitten'; * * export class RadioShowcase extends React.Component { - * public state = { + * + * state = { * checked: false, * }; * - * private onChange = (checked: boolean) => { + * onChange = (checked) => { * this.setState({ checked }); * }; * - * public render(): React.ReactNode { + * render() { * return ( * ; * * ``` * import React from 'react'; - * import { Radio, RadioProps } from 'react-native-ui-kitten'; + * import { StyleSheet } from 'react-native'; + * import { Radio } from 'react-native-ui-kitten'; + * + * export const RadioShowcase = (props) => ( + * + * ); * - * export const RadioShowcase = (props?: RadioProps): React.ReactElement => { - * return ( - * - * ); - * }; + * const styles = StyleSheet.create({ + * radio: { width: 32, height: 32 }, + * radioText: { color: 'black' }, + * }); * ``` */ diff --git a/src/framework/ui/radioGroup/radioGroup.component.tsx b/src/framework/ui/radioGroup/radioGroup.component.tsx index 462d37421..070b06899 100644 --- a/src/framework/ui/radioGroup/radioGroup.component.tsx +++ b/src/framework/ui/radioGroup/radioGroup.component.tsx @@ -52,22 +52,22 @@ export type RadioGroupElement = React.ReactElement; * * export class RadioGroupShowcase extends React.Component { * - * public state = { + * state = { * selectedIndex: 0, * }; * - * private onGroupSelectionChange = (selectedIndex: number) => { + * onGroupSelectionChange = (selectedIndex) => { * this.setState({ selectedIndex }); * }; * - * public render(): React.ReactNode { + * render() { * return ( * - * - * - * + * + * + * * * ); * } @@ -82,30 +82,29 @@ export type RadioGroupElement = React.ReactElement; * * export class RadioGroupShowcase extends React.Component { * - * public state = { + * state = { * selectedIndex: 0, * }; * - * private onGroupSelectionChange = (selectedIndex: number) => { + * onGroupSelectionChange = (selectedIndex) => { * this.setState({ selectedIndex }); * }; * - * public render(): React.ReactNode { + * render() { * return ( * - * - * - * + * + * + * * * ); * } * } * ``` */ - class RadioGroupComponent extends React.Component { static styledComponentName: string = 'RadioGroup'; diff --git a/src/framework/ui/select/select.component.tsx b/src/framework/ui/select/select.component.tsx index a31ae2c85..5a1b7fa7b 100644 --- a/src/framework/ui/select/select.component.tsx +++ b/src/framework/ui/select/select.component.tsx @@ -133,37 +133,25 @@ interface State { * * ``` * import React from 'react'; - * import { - * Select, - * SelectOptionType, - * SelectOption, - * } from 'react-native-ui-kitten'; - * - * interface State { - * selectedOption: SelectOption; - * } + * import { Select } from 'react-native-ui-kitten'; * - * export class SelectContainer extends React.Component { + * export class SelectContainer extends React.Component { * - * private items: SelectOptionType[] = [ + * items = [ * { text: 'Option 1' }, * { text: 'Option 2' }, * { text: 'Option 3' }, - * { text: 'Option 4' }, - * { text: 'Option 5' }, - * { text: 'Option 6' }, - * { text: 'Option 8' }, * ]; * - * public state: State = { + * state = { * selectedOption: null, * }; * - * private onSelect = (selectedOption: SelectOption): void => { + * onSelect = (selectedOption) => { * this.setState({ selectedOption }); * }; * - * public render(): React.ReactNode { + * render() { * return ( * @@ -222,45 +198,112 @@ interface State { * } * ``` * - * @example Eva Styling + * @overview-example Select Groups * * ``` * import React from 'react'; - * import { - * Select, - * SelectOptionType, - * SelectOption, - * } from 'react-native-ui-kitten'; - * - * interface State { - * selectedOption: SelectOption; + * import { Select } from 'react-native-ui-kitten'; + * + * export class SelectContainer extends React.Component { + * + * items = [ + * { text: 'Option 1' }, + * { text: 'Option 2' }, + * { text: 'Option 3', items: [ { text: 'Option 31' }, { text: 'Option 32' }, { text: 'Option 33' } ] }, + * { text: 'Option 4' }, + * ]; + * + * state = { + * selectedOption: null, + * }; + * + * onSelect = (selectedOption) => { + * this.setState({ selectedOption }); + * }; + * + * render() { + * return ( + * + * ); + * } * } + * ``` + * + * @overview-example Eva Styling + * + * ``` + * import React from 'react'; + * import { Select } from 'react-native-ui-kitten'; * - * export class SelectContainer extends React.Component { + * export class SelectContainer extends React.Component { * - * private items: SelectOptionType[] = [ + * items = [ * { text: 'Option 1' }, * { text: 'Option 2' }, * { text: 'Option 3' }, - * { text: 'Option 4' }, - * { text: 'Option 5' }, - * { text: 'Option 6' }, - * { text: 'Option 8' }, * ]; * - * public state: State = { + * state = { * selectedOption: null, * }; * - * private onSelect = (selectedOption: SelectOption): void => { + * onSelect = (selectedOption) => { * this.setState({ selectedOption }); * }; * - * public render(): React.ReactNode { + * render() { * return ( * + * ); + * } + * } + * ``` + * + * @example Using Asset Icons + * + * ``` + * import React from 'react'; + * import { Image } from 'react-native'; + * import { Select } from 'react-native-ui-kitten'; + * + * export class SelectContainer extends React.Component { + * + * items = [ + * { text: 'Option 1' }, + * { text: 'Option 2' }, + * { text: 'Option 3' }, + * ]; + * + * state = { + * selectedOption: null, * }; * - * public render(): React.ReactNode { + * onSelect = (selectedOption) => { + * this.setState({ selectedOption }); + * }; + * + * renderIcon = (style, visible) => ( + * + * ); + * + * render() { * return ( * { static styledComponentName: string = 'Select'; diff --git a/src/framework/ui/spinner/spinner.component.tsx b/src/framework/ui/spinner/spinner.component.tsx index 4fc2905e9..865e2d8f2 100644 --- a/src/framework/ui/spinner/spinner.component.tsx +++ b/src/framework/ui/spinner/spinner.component.tsx @@ -111,33 +111,22 @@ export type SpinnerElement = React.ReactElement; *} * * const styles = StyleSheet.create({ - * loading: { - * flex: 1, - * justifyContent: 'center', - * alignItems: 'center', - * }, + * loading: { + * flex: 1, + * justifyContent: 'center', + * alignItems: 'center', + * }, *}); *``` * - * @example Size + * @overview-example Eva Styling * * ``` * import React from 'react'; * import { Spinner } from 'react-native-ui-kitten'; * - * export const GiantSpinner = () => ( - * - * ); - * ``` - * - * @example Status - * - * ``` - * import React from 'react'; - * import { Spinner } from 'react-native-ui-kitten'; - * - * export const DangerSpinner = () => ( - * + * export const SpinnerShowcase = (props) => ( + * * ); * ``` */ diff --git a/src/framework/ui/tab/tab.component.tsx b/src/framework/ui/tab/tab.component.tsx index 6abcf322c..08a8049ad 100644 --- a/src/framework/ui/tab/tab.component.tsx +++ b/src/framework/ui/tab/tab.component.tsx @@ -63,8 +63,73 @@ export type TabElement = React.ReactElement; * @property TouchableOpacityProps * * @property StyledComponentProps + * + * @overview-example Simple Usage + * + * ``` + * import React from 'react'; + * import { Tab } from 'react-native-ui-kitten'; + * + * export const DashboardTab = (props) => ( + * + * ); + * ``` + * + * @overview-example With Icon + * + * ``` + * // IMPORTANT: To use Icon component make sure to follow this guide: + * // https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons + * + * import React from 'react'; + * import { Tab, Icon } from 'react-native-ui-kitten'; + * + * const DashboardIcon = (style) => ( + * + * ); + * + * export const DashboardTab = (props) => ( + * + * ); + * ``` + * + * @example Using Asset Icons + * + * ``` + * import React from 'react'; + * import { Image } from 'react-native'; + * import { Tab } from 'react-native-ui-kitten'; + * + * const DashboardIcon = (style) => ( + * + * ); + * + * export const DashboardTab = (props) => ( + * + * ); + * ``` + * + * @example Inline Styling + * + * ``` + * import React from 'react'; + * import { StyleSheet } from 'react-native'; + * import { Tab } from 'react-native-ui-kitten'; + * + * export const TabShowcase = (props) => ( + * + * ); + * + * const styles = StyleSheet.create({ + * tab: { backgroundColor: 'white' }, + * tabTitle: { color: 'black' }, + * }); + * ``` */ - export class TabComponent extends React.Component { static styledComponentName: string = 'Tab'; diff --git a/src/framework/ui/tab/tabBar.component.tsx b/src/framework/ui/tab/tabBar.component.tsx index 4487ad4d9..27dfa4e50 100644 --- a/src/framework/ui/tab/tabBar.component.tsx +++ b/src/framework/ui/tab/tabBar.component.tsx @@ -53,22 +53,19 @@ export type TabBarElement = React.ReactElement; * * ``` * import React from 'react'; - * import { - * TabBar, - * Tab, - * } from 'react-native-ui-kitten'; + * import { TabBar, Tab } from 'react-native-ui-kitten'; * * export class TabBarShowcase extends React.Component { * - * public state = { + * state = { * selectedIndex: 0, * }; * - * private onBarSelect = (selectedIndex: number) => { + * onBarSelect = (selectedIndex) => { * this.setState({ selectedIndex }); * }; * - * public render(): React.ReactNode { + * render() { * return ( * ; * } * ``` */ - export class TabBarComponent extends React.Component { static styledComponentName: string = 'TabBar'; diff --git a/src/framework/ui/tab/tabView.component.tsx b/src/framework/ui/tab/tabView.component.tsx index 06d9074aa..31aca8fb5 100644 --- a/src/framework/ui/tab/tabView.component.tsx +++ b/src/framework/ui/tab/tabView.component.tsx @@ -67,33 +67,28 @@ export type TabViewElement = React.ReactElement; * * ``` * import React from 'react'; - * import { - * TabView, - * Tab, - * } from 'react-native-ui-kitten'; + * import { TabView, Tab, Text } from 'react-native-ui-kitten'; * * export class TabViewShowcase extends React.Component { - * public state: State = { + * + * state = { * selectedIndex: 0, * }; * - * private onSelect = (selectedIndex: number) => { + * onSelect = (selectedIndex) => { * this.setState({ selectedIndex }); * }; * - * public render(): React.ReactNode { + * render() { * return ( * - * Tab 1 - * - * Tab 2 + * + * DASHBOARD * - * Tab 3 + * + * SETTINGS * * * ); @@ -101,78 +96,72 @@ export type TabViewElement = React.ReactElement; * } * ``` * - * @example Lazy Loading + * @overview-example Lazy Loading * * ``` * import React from 'react'; - * import { - * TabView, - * Tab, - * } from 'react-native-ui-kitten'; + * import { TabView, Tab, Text } from 'react-native-ui-kitten'; * * export class TabViewShowcase extends React.Component { * - * public state = { + * state = { * selectedIndex: 0, * }; * - * private onSelect = (selectedIndex: number) => { + * onSelect = (selectedIndex) => { * this.setState({ selectedIndex }); * }; * - * private shouldLoadTabContent = (index: number): boolean => { + * shouldLoadTabContent = (index) => { * return index === this.state.selectedIndex; * }; * - * public render(): React.ReactNode { + * render() { * return ( * - * - * Tab 1 + * + * DASHBOARD * - * - * Tab 2 - * - * - * Tab 3 + * + * SETTINGS * * * ); * } * } - * * ``` * * @example Inline Styling * * ``` * import React from 'react'; - * import { TabView, Tab, TabViewProps } from 'react-native-ui-kitten'; - * - * export const TabViewShowcase = (props?: TabViewProps): React.ReactElement => { - * return ( - * - * - * Tab 1 - * - * - * Tab 2 - * - * - * Tab 3 - * - * - * ); - * }; + * import { StyleSheet } from 'react-native'; + * import { TabView, Tab, Text } from 'react-native-ui-kitten'; + * + * export const TabViewShowcase = (props) => ( + * + * + * DASHBOARD + * + * + * SETTINGS + * + * + * ); + * + * const styles = StyleSheet.create({ + * tabView: { backgroundColor: 'white' }, + * tabBar: { backgroundColor: 'gray' }, + * tabViewIndicator: { backgroundColor: 'blue' }, + * }); * ``` - * */ - + */ export class TabView extends React.Component { static defaultProps: Partial = { diff --git a/src/framework/ui/text/text.component.tsx b/src/framework/ui/text/text.component.tsx index f7014d9ef..5b8dea143 100644 --- a/src/framework/ui/text/text.component.tsx +++ b/src/framework/ui/text/text.component.tsx @@ -51,36 +51,45 @@ export type TextElement = React.ReactElement; * * ``` * import React from 'react'; - * import { Text, TextProps } from 'react-native-ui-kitten'; - * - * export const TextShowcase = (props?: TextProps): React.ReactElement => { - * return ( - * - * Sample Text - * - * ); - * }; + * import { Text } from 'react-native-ui-kitten'; + * + * export const TextShowcase = (props) => ( + * Sample Text + * ); * ``` * * @overview-example Eva Styling * * ``` * import React from 'react'; - * import { Text, TextProps } from 'react-native-ui-kitten'; - * - * export const TextShowcase = (props?: TextProps): React.ReactElement => { - * return ( - * - * Sample Text - * - * ); - * }; + * import { Text } from 'react-native-ui-kitten'; + * + * export const TextShowcase = (props) => ( + * + * Sample Text + * + * ); + * ``` + * + * @example Inline Styling + * + * ``` + * import React from 'react'; + * import { StyleSheet } from 'react-native'; + * import { Text } from 'react-native-ui-kitten'; + * + * export const TextShowcase = (props) => ( + * Sample Text + * ); + * + * const styles = StyleSheet.create({ + * text: { color: 'black', fontSize: 18 }, + * }); * ``` */ - export class TextComponent extends React.Component { static styledComponentName: string = 'Text'; diff --git a/src/framework/ui/toggle/toggle.component.tsx b/src/framework/ui/toggle/toggle.component.tsx index 6b1a60f51..5b181ff81 100644 --- a/src/framework/ui/toggle/toggle.component.tsx +++ b/src/framework/ui/toggle/toggle.component.tsx @@ -63,6 +63,10 @@ export type ToggleElement = React.ReactElement; * Can be `giant`, `large`, `medium`, `small`, or `tiny`. * Default is `medium`. * + * @property {string} text - Determines text of the component. + * + * @property {StyleProp} textStyle - Customizes text style. + * * @property {(checked: boolean) => void} onChange - Fires when selection state is changed. * * @property TouchableOpacityProps @@ -77,15 +81,15 @@ export type ToggleElement = React.ReactElement; * * export class ToggleShowcase extends React.Component { * - * public state = { + * state = { * checked: false, * }; * - * private onChange = (checked: boolean) => { + * onChange = (checked) => { * this.setState({ checked }); * }; * - * public render(): React.ReactNode { + * render() { * return ( * ; * } * ``` * + * @overview-example With Text + * + * ``` + * import React from 'react'; + * import { Toggle } from 'react-native-ui-kitten'; + * + * export class ToggleShowcase extends React.Component { + * + * state = { + * checked: false, + * }; + * + * onChange = (checked) => { + * this.setState({ checked }); + * }; + * + * render() { + * return ( + * + * ) + * } + * } + * ``` + * * @overview-example Eva Styling * * ``` @@ -104,15 +136,15 @@ export type ToggleElement = React.ReactElement; * * export class ToggleShowcase extends React.Component { * - * public state = { + * state = { * checked: false, * }; * - * private onChange = (checked: boolean) => { + * onChange = (checked) => { * this.setState({ checked }); * }; * - * public render(): React.ReactNode { + * render() { * return ( * ; * } * } * ``` + * + * @example Inline Styling + * + * ``` + * import React from 'react'; + * import { StyleSheet } from 'react-native'; + * import { Toggle } from 'react-native-ui-kitten'; + * + * export class ToggleShowcase extends React.Component { + * + * state = { + * checked: false, + * }; + * + * onChange = (checked) => { + * this.setState({ checked }); + * }; + * + * render() { + * return ( + * + * ); + * } + * } + * + * const styles = StyleSheet.create({ + * toggleText: { color: 'black' }, + * }); + * ``` */ export class ToggleComponent extends React.Component implements PanResponderCallbacks { diff --git a/src/framework/ui/tooltip/tooltip.component.tsx b/src/framework/ui/tooltip/tooltip.component.tsx index b8a3b5113..d5c4c560b 100644 --- a/src/framework/ui/tooltip/tooltip.component.tsx +++ b/src/framework/ui/tooltip/tooltip.component.tsx @@ -29,8 +29,8 @@ import { PopoverProps, } from '../popover/popover.component'; import { - Omit, ModalPresentingBased, + Omit, } from '../support/typings'; type IconElement = React.ReactElement; @@ -82,80 +82,100 @@ export type TooltipElement = React.ReactElement; * * ``` * import React from 'react'; - * import { - * Tooltip, - * Button, - * } from 'react-native-ui-kitten'; + * import { Tooltip, Button } from 'react-native-ui-kitten'; * * export class TooltipShowcase extends React.Component { * - * public state = { + * state = { * tooltipVisible: false, * }; * - * private toggleTooltip = () => { - * this.setState({ tooltipVisible: !this.state.tooltipVisible }); + * toggleTooltip = () => { + * const tooltipVisible = !this.state.tooltipVisible; + * this.setState({ tooltipVisible }); * }; * - * public render(): React.ReactNode { + * render() { * return ( * - * + * * * ); * } * } * ``` * - * @example With Icon + * @overview-example With Icon * * ``` + * // IMPORTANT: To use Icon component make sure to follow this guide: + * // https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons + * * import React from 'react'; - * import { - * Image, - * ImageProps, - * } from 'react-native'; - * import { - * Tooltip, - * Button, - * StyleType, - * } from 'react-native-ui-kitten'; + * import { Tooltip, Button, Icon } from 'react-native-ui-kitten'; + * + * const StarIcon = (style) => ( + * + * ); * * export class TooltipShowcase extends React.Component { * - * public state = { + * state = { * tooltipVisible: false, * }; * - * private toggleTooltip = () => { - * this.setState({ tooltipVisible: !this.state.tooltipVisible }); + * toggleTooltip = () => { + * const tooltipVisible = !this.state.tooltipVisible; + * this.setState({ tooltipVisible }); * }; * - * private renderIcon = (style: StyleType): React.ReactElement => { + * render() { * return ( - * + * + * + * * ); + * } + * } + * ``` + * + * @example Using Asset Icons + * + * ``` + * import React from 'react'; + * import { Image } from 'react-native'; + * import { Tooltip, Button } from 'react-native-ui-kitten'; + * + * const StarIcon = (style) => ( + * + * ); + * + * export class TooltipShowcase extends React.Component { + * + * state = { + * tooltipVisible: false, + * }; + * + * toggleTooltip = () => { + * const tooltipVisible = !this.state.tooltipVisible; + * this.setState({ tooltipVisible }); * }; * - * public render(): React.ReactNode { + * render() { * return ( * - * + * * * ); * } @@ -166,39 +186,38 @@ export type TooltipElement = React.ReactElement; * * ``` * import React from 'react'; - * import { - * Tooltip, - * Button, - * StyleType, - * } from 'react-native-ui-kitten'; + * import { StyleSheet } from 'react-native'; + * import { Tooltip, Button } from 'react-native-ui-kitten'; * * export class TooltipShowcase extends React.Component { * - * public state = { + * state = { * tooltipVisible: false, * }; * - * private toggleTooltip = () => { - * this.setState({ tooltipVisible: !this.state.tooltipVisible }); + * toggleTooltip = () => { + * const tooltipVisible = !this.state.tooltipVisible; + * this.setState({ tooltipVisible }); * }; * - * public render(): React.ReactNode { + * render() { * return ( * - * + * * * ); * } * } + * + * const styles = StyleSheet.create({ + * tooltipText: { color: 'white', fontSize: 18 }, + * }); * ``` */ - export class TooltipComponent extends React.Component { static styledComponentName: string = 'Tooltip'; diff --git a/src/framework/ui/topNavigation/topNavigation.component.tsx b/src/framework/ui/topNavigation/topNavigation.component.tsx index cea7c192e..306d500d5 100644 --- a/src/framework/ui/topNavigation/topNavigation.component.tsx +++ b/src/framework/ui/topNavigation/topNavigation.component.tsx @@ -71,82 +71,104 @@ export type TopNavigationElement = React.ReactElement; * * ``` * import React from 'react'; - * import { - * TopNavigation, - * TopNavigationAction, - * TopNavigationActionProps, - * } from 'react-native-ui-kitten'; + * import { TopNavigation } from 'react-native-ui-kitten'; * - * export const TopNavigationShowcase = (props?: TopNavigationProps): React.ReactElement => { - * return ( - * - * ); - * }; + * export const AwesomeAppHeader = (props) => ( + * + * ); * ``` * * @overview-example Actions * * ``` + * // IMPORTANT: To use Icon component make sure to follow this guide: + * // https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons + * * import React from 'react'; - * import { Image, ImageProps } from 'react-native'; - * import { - * TopNavigation, - * TopNavigationAction, - * TopNavigationActionProps, - * } from 'react-native-ui-kitten'; - * - * export const TopNavigationShowcase = (props?: TopNavigationProps): React.ReactElement => { - * - * private onLeftControlPress = () => { - * // Handle Left Control press - * }; - * - * const renderControlIcon = (style: StyleType): React.ReactElement => { - * return ( - * - * ); - * }; - * - * const renderLeftControl = (): React.ReactElement => { - * return ( - * - * ); - * }; + * import { TopNavigation, TopNavigationAction, Icon } from 'react-native-ui-kitten'; + * + * const BackIcon = (style) => ( + * + * ); + * + * const EditIcon = (style) => ( + * + * ); + * + * const MenuIcon = (style) => ( + * + * ); + * + * const BackAction = (props) => ( + * + * ); + * + * const EditAction = (props) => ( + * + * ); + * + * const MenuAction = (props) => ( + * + * ); + * + * export const AwesomeAppHeader = (props) => { + * + * const onBackPress = () => {}; + * + * const renderLeftControl = () => ( + * + * ); + * + * const renderRightControls = () => [ + * , + * , + * ]; * * return ( * * ); * }; * ``` * + * @example Centered Title + * + * ``` + * import React from 'react'; + * import { TopNavigation } from 'react-native-ui-kitten'; + * + * export const AwesomeAppHeader = (props) => ( + * + * ); + * ``` + * * @example Inline Styling * * ``` * import React from 'react'; - * import { TopNavigation, TopNavigationProps } from 'react-native-ui-kitten'; + * import { StyleSheet } from 'react-native'; + * import { TopNavigation } from 'react-native-ui-kitten'; * - * export const TopNavigationShowcase = (props?: TopNavigationProps): React.ReactElement => { - * return ( - * - * ); - * }; + * export const AwesomeAppHeader = (props) => ( + * + * ); + * + * const styles = StyleSheet.create({ + * header: { backgroundColor: 'black' }, + * headerTitle: { color: 'white' }, + * headerSubtitle: { color: 'gray' }, + * }); * ``` - * */ - + */ export class TopNavigationComponent extends React.Component { static styledComponentName: string = 'TopNavigation'; diff --git a/src/framework/ui/topNavigation/topNavigationAction.component.tsx b/src/framework/ui/topNavigation/topNavigationAction.component.tsx index c064085c6..04ef40419 100644 --- a/src/framework/ui/topNavigation/topNavigationAction.component.tsx +++ b/src/framework/ui/topNavigation/topNavigationAction.component.tsx @@ -44,8 +44,57 @@ export type TopNavigationActionElement = React.ReactElement ( + * + * ); + * + * export const BackAction = (props) => ( + * + * ); + * ``` + * + * @example Using Asset Icons + * + * ``` + * import React from 'react'; + * import { Image } from 'react-native-ui-kitten'; + * import { TopNavigationAction } from 'react-native-ui-kitten'; + * + * const BackIcon = (style) => ( + * + * ); + * + * export const BackAction = (props) => ( + * + * ); + * ``` + * + * @example Inline Styling + * + * ``` + * import React from 'react'; + * import { StyleSheet } from 'react-native'; + * import { TopNavigationAction } from 'react-native-ui-kitten'; + * + * export const BackAction = (props) => ( + * + * ); + * + * const styles = StyleSheet.create({ + * action: { marginHorizontal: 4 }, + * }); + * ``` */ - class TopNavigationActionComponent extends React.Component { static styledComponentName: string = 'TopNavigationAction'; diff --git a/src/framework/ui/viewPager/viewPager.component.tsx b/src/framework/ui/viewPager/viewPager.component.tsx index 69693ecab..7b674d56e 100644 --- a/src/framework/ui/viewPager/viewPager.component.tsx +++ b/src/framework/ui/viewPager/viewPager.component.tsx @@ -57,78 +57,112 @@ export type ViewPagerElement = React.ReactElement; * * ``` * import React from 'react'; - * import { ViewPager } from 'react-native-ui-kitten'; + * import { ViewPager, Layout, Text } from 'react-native-ui-kitten'; * * export class ViewPagerShowcase extends React.Component { - * public state: State = { + * + * state = { * selectedIndex: 0, * }; * - * private onIndexChange = (selectedIndex: number) => { + * onIndexChange = (selectedIndex) => { * this.setState({ selectedIndex }); * }; * - * public render(): React.ReactNode { + * render() { * return ( * - * + * * Tab 1 - * - * + * + * * Tab 2 - * - * - * Tab 3 - * + * * * ); * } * } * ``` * - * @example Lazy Loading + * @overview-example Lazy Loading * * ``` * import React from 'react'; - * import { ViewPager } from 'react-native-ui-kitten'; + * import { ViewPager, Layout, Text } from 'react-native-ui-kitten'; * * export class ViewPagerShowcase extends React.Component { - * public state: State = { - * selectedIndex: 0, - * }; * - * private onIndexChange = (selectedIndex: number) => { + * state = { + * selectedIndex: 0, + * }; + * + * onIndexChange = (selectedIndex) => { * this.setState({ selectedIndex }); * }; * - * private shouldLoadPageContent = (index: number): boolean => { + * shouldLoadPageContent = (index) => { * return index === this.state.selectedIndex; * }; * - * public render(): React.ReactNode { + * render() { * return ( * - * + * * Tab 1 - * - * + * + * * Tab 2 - * - * - * Tab 3 - * + * * * ); * } * } * ``` + * + * @example Inline Styling + * + * ``` + * import React from 'react'; + * import { StyleSheet } from 'react-native'; + * import { ViewPager, Layout, Text } from 'react-native-ui-kitten'; + * + * export class ViewPagerShowcase extends React.Component { + * + * state = { + * selectedIndex: 0, + * }; + * + * onIndexChange = (selectedIndex) => { + * this.setState({ selectedIndex }); + * }; + * + * render() { + * return ( + * + * + * Tab 1 + * + * + * Tab 2 + * + * + * ); + * } + * } + * + * const styles = StyleSheet.create({ + * container: { paddingHorizontal: 16 }, + * }); + * ``` */ - export class ViewPager extends React.Component implements PanResponderCallbacks { static defaultProps: Partial = {