diff --git a/versioned_docs/version-3.2.1/FAB.md b/versioned_docs/version-3.2.1/FAB.md index 1dddda32b..b2da69276 100644 --- a/versioned_docs/version-3.2.1/FAB.md +++ b/versioned_docs/version-3.2.1/FAB.md @@ -3,7 +3,7 @@ id: FAB title: FAB --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; A floating action button is a circular icon button that hovers over content to promote a primary action in the application. diff --git a/versioned_docs/version-3.2.1/actionSheet.md b/versioned_docs/version-3.2.1/actionSheet.md index 940d5c246..0035b1242 100644 --- a/versioned_docs/version-3.2.1/actionSheet.md +++ b/versioned_docs/version-3.2.1/actionSheet.md @@ -3,7 +3,7 @@ id: action-sheet title: ActionSheet --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; An Action Sheet is a dialog that displays a set of options. It appears on top of the app's content. diff --git a/versioned_docs/version-3.2.1/alert.md b/versioned_docs/version-3.2.1/alert.md index 8c3d0b47a..1b8c4d293 100644 --- a/versioned_docs/version-3.2.1/alert.md +++ b/versioned_docs/version-3.2.1/alert.md @@ -3,7 +3,7 @@ id: alert title: Alert --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; `Alerts` are used to communicate a state that affects a system, feature or page. @@ -13,8 +13,8 @@ NativeBase exports 5 Alert related components: - `Alert`: The wrapper for alert components. - `Alert.Icon`: The visual icon for the alert that changes based on the `status` prop. - - + + ```jsx import { Alert } from 'native-base'; diff --git a/versioned_docs/version-3.2.1/alertDialog.md b/versioned_docs/version-3.2.1/alertDialog.md index 138554305..b4f1cfbc0 100644 --- a/versioned_docs/version-3.2.1/alertDialog.md +++ b/versioned_docs/version-3.2.1/alertDialog.md @@ -3,7 +3,7 @@ id: alert-dialog title: AlertDialog --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; `AlertDialog` component is used to interrupt the user with a mandatory confirmation or action. AlertDialog composes [`Modal`](modal.md) so you can use all its props. @@ -40,7 +40,6 @@ AlertDialog and its components compose the **[Modal](modal.md)** component, so a | ------------------- | --------- | -------------------------------------------------------------- | ------- | | leastDestructiveRef | React.Ref | The least destructive action to get focus when dialog is open. | - | - ## Accessibility Adheres to the [Alert and Message Dialogs WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#alertdialog) @@ -54,5 +53,3 @@ Adheres to the [Alert and Message Dialogs WAI-ARIA design pattern.](https://www. | Tab | Moves focus to the next focusable element. | | Shift + Tab | Moves focus to the previous focusable element. | | Esc | Closes the dialog and moves focus to AlertDialog.Trigger. | - - diff --git a/versioned_docs/version-3.2.1/avatar.md b/versioned_docs/version-3.2.1/avatar.md index a0b5f1913..dff7875cc 100644 --- a/versioned_docs/version-3.2.1/avatar.md +++ b/versioned_docs/version-3.2.1/avatar.md @@ -3,7 +3,7 @@ id: avatar title: Avatar --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; `Avatar` component is used to represent a user and it can display a profile picture, initials or a fallback icon. diff --git a/versioned_docs/version-3.2.1/badge.md b/versioned_docs/version-3.2.1/badge.md index 23636b2ae..607a80451 100644 --- a/versioned_docs/version-3.2.1/badge.md +++ b/versioned_docs/version-3.2.1/badge.md @@ -3,7 +3,7 @@ id: badge title: Badge --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; `Badges` are used to highlight an item's status for quick recognition. diff --git a/versioned_docs/version-3.2.1/button.mdx b/versioned_docs/version-3.2.1/button.mdx index 9e25eaec8..4d2260a91 100644 --- a/versioned_docs/version-3.2.1/button.mdx +++ b/versioned_docs/version-3.2.1/button.mdx @@ -3,7 +3,7 @@ id: button title: Button --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; The `Button` component is used to trigger an action or event. diff --git a/versioned_docs/version-3.2.1/checkBox.md b/versioned_docs/version-3.2.1/checkBox.md index 933b5cc30..10ee1772f 100644 --- a/versioned_docs/version-3.2.1/checkBox.md +++ b/versioned_docs/version-3.2.1/checkBox.md @@ -3,7 +3,7 @@ id: checkbox title: CheckBox --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; The `Checkbox` component is used in forms when a user needs to select multiple values from several options. diff --git a/versioned_docs/version-3.2.1/divider.md b/versioned_docs/version-3.2.1/divider.md index a6bd0c33c..70f897268 100644 --- a/versioned_docs/version-3.2.1/divider.md +++ b/versioned_docs/version-3.2.1/divider.md @@ -3,7 +3,7 @@ id: divider title: Divider --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; `Divider` is used to visually separate content in a list or group. diff --git a/versioned_docs/version-3.2.1/formControl.md b/versioned_docs/version-3.2.1/formControl.md index 931133b29..05b32b0d3 100644 --- a/versioned_docs/version-3.2.1/formControl.md +++ b/versioned_docs/version-3.2.1/formControl.md @@ -3,7 +3,7 @@ id: form-control title: FormControl --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; `FormControl` provides context such as `isInvalid`, `isDisabled`, and `isRequired` to form elements. diff --git a/versioned_docs/version-3.2.1/getting-started.mdx b/versioned_docs/version-3.2.1/getting-started.mdx index 670c72d99..0c37272fc 100644 --- a/versioned_docs/version-3.2.1/getting-started.mdx +++ b/versioned_docs/version-3.2.1/getting-started.mdx @@ -4,7 +4,7 @@ title: Getting Started slug: / --- -import { KitchenSinkIframe, TileLink, NBHistory } from '../src/components'; +import { KitchenSinkIframe, TileLink, NBHistory } from '../../src/components'; import TOCInline from '@theme/TOCInline';
@@ -42,7 +42,7 @@ import TOCInline from '@theme/TOCInline'; className="bg-indigo-600" />
- +
diff --git a/versioned_docs/version-3.2.1/heading.md b/versioned_docs/version-3.2.1/heading.md index 40a96a759..971b44a20 100644 --- a/versioned_docs/version-3.2.1/heading.md +++ b/versioned_docs/version-3.2.1/heading.md @@ -3,7 +3,7 @@ id: heading title: Heading --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; Headings are used for rendering headlines. `Heading` composes [`Text`](text.md) so you can use all the style props. diff --git a/versioned_docs/version-3.2.1/hidden.md b/versioned_docs/version-3.2.1/hidden.md index 2a8b0b906..0d74cacee 100644 --- a/versioned_docs/version-3.2.1/hidden.md +++ b/versioned_docs/version-3.2.1/hidden.md @@ -3,7 +3,7 @@ id: hidden title: Hidden --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; Hidden is used to toggle the visibility value of child components responsively, based on the colorMode or based on the platform. It doesn't mount the child components in the restricted values of props. diff --git a/versioned_docs/version-3.2.1/iconButton.md b/versioned_docs/version-3.2.1/iconButton.md index 0767912b5..60d5f1741 100644 --- a/versioned_docs/version-3.2.1/iconButton.md +++ b/versioned_docs/version-3.2.1/iconButton.md @@ -3,7 +3,7 @@ id: icon-button title: IconButton --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; `IconButton` composes the `Button` component. It is generally used to make an Icon pressable. diff --git a/versioned_docs/version-3.2.1/input.md b/versioned_docs/version-3.2.1/input.md index 641f15c50..9dcf9e138 100644 --- a/versioned_docs/version-3.2.1/input.md +++ b/versioned_docs/version-3.2.1/input.md @@ -3,7 +3,7 @@ id: input title: Input --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; The `Input` component is a component that is used to get user input in a text field. diff --git a/versioned_docs/version-3.2.1/install-cra.mdx b/versioned_docs/version-3.2.1/install-cra.mdx index 5cb6b9652..853c65e3a 100644 --- a/versioned_docs/version-3.2.1/install-cra.mdx +++ b/versioned_docs/version-3.2.1/install-cra.mdx @@ -5,7 +5,7 @@ title: Install in Create React App project import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; -import { TileLink } from '../src/components'; +import { TileLink } from '../../src/components'; - @@ -108,13 +106,9 @@ export default function App() { } ``` - - - -
minions clapping
diff --git a/versioned_docs/version-3.2.1/install-next.mdx b/versioned_docs/version-3.2.1/install-next.mdx index 06d2dccab..dc9dbca16 100644 --- a/versioned_docs/version-3.2.1/install-next.mdx +++ b/versioned_docs/version-3.2.1/install-next.mdx @@ -5,7 +5,7 @@ title: Install in Next.js project import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; -import { TileLink } from '../src/components'; +import { TileLink } from '../../src/components'; -

Choose your preferred setting and start your development swiftly 🚀

diff --git a/versioned_docs/version-3.2.1/install-rn.mdx b/versioned_docs/version-3.2.1/install-rn.mdx index 202de7126..8ed3a885d 100644 --- a/versioned_docs/version-3.2.1/install-rn.mdx +++ b/versioned_docs/version-3.2.1/install-rn.mdx @@ -5,8 +5,7 @@ title: Install in React Native project import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; -import { TileLink } from '../src/components'; - +import { TileLink } from '../../src/components'; - - - ### Create a new project using ReactNative CLI with NativeBase template [Refer this link](https://github.com/react-native-community/cli#about) to get infomation about the React Native CLI. @@ -44,10 +40,8 @@ npx react-native init MyApp --template react-native-template-native-base-typescr Yey! you are all set, start editing App.js/App.tsx now. - - ### Create a new project if not exist @@ -112,7 +106,6 @@ export default function App() { -
diff --git a/versioned_docs/version-3.2.1/installation.mdx b/versioned_docs/version-3.2.1/installation.mdx index 5b8e02daa..91616aeed 100644 --- a/versioned_docs/version-3.2.1/installation.mdx +++ b/versioned_docs/version-3.2.1/installation.mdx @@ -3,7 +3,7 @@ id: installation title: Installation --- -import { InstallationTiles } from '../src/components'; +import { InstallationTiles } from '../../src/components'; **NativeBase** is supported in [Expo](https://docs.expo.io/get-started/installation/) or React Native CLI initiated apps. Web support is made possible by [react-native-web](https://necolas.github.io/react-native-web/). diff --git a/versioned_docs/version-3.2.1/kitchen-sink.mdx b/versioned_docs/version-3.2.1/kitchen-sink.mdx index 000ac0ae3..7187d2c16 100644 --- a/versioned_docs/version-3.2.1/kitchen-sink.mdx +++ b/versioned_docs/version-3.2.1/kitchen-sink.mdx @@ -3,7 +3,7 @@ id: kitchen-sink title: Kitchen Sink --- -import { KitchenSinkIframe, TileLink, NBHistory } from '../src/components'; +import { KitchenSinkIframe, TileLink, NBHistory } from '../../src/components'; import useBaseUrl from '@docusaurus/useBaseUrl'; import ExpoIcon from '@site/static/img/expo-icon.svg'; import useThemeContext from '@theme/hooks/useThemeContext'; diff --git a/versioned_docs/version-3.2.1/link.md b/versioned_docs/version-3.2.1/link.md index 96c5d2b60..cdfcb946a 100644 --- a/versioned_docs/version-3.2.1/link.md +++ b/versioned_docs/version-3.2.1/link.md @@ -3,7 +3,7 @@ id: link title: Link --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; `Links` are accessible elements used primarily for navigation. This component is styled to resemble a hyperlink. @@ -57,4 +57,4 @@ import { Link } from 'native-base'; ## Accessibility -Adheres to the [Link WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#link) \ No newline at end of file +Adheres to the [Link WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#link) diff --git a/versioned_docs/version-3.2.1/menu.md b/versioned_docs/version-3.2.1/menu.md index 70d276936..736456663 100644 --- a/versioned_docs/version-3.2.1/menu.md +++ b/versioned_docs/version-3.2.1/menu.md @@ -3,7 +3,7 @@ id: menu title: Menu --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; A dropdown menu for the common dropdown menu button design pattern. @@ -89,7 +89,6 @@ Extends `MenuItem`. - ## Accessibility -Adheres to the [Menu WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#menu) \ No newline at end of file +Adheres to the [Menu WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#menu) diff --git a/versioned_docs/version-3.2.1/modal.md b/versioned_docs/version-3.2.1/modal.md index f4a013563..cd8f50169 100644 --- a/versioned_docs/version-3.2.1/modal.md +++ b/versioned_docs/version-3.2.1/modal.md @@ -3,7 +3,7 @@ id: modal title: Modal --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; A Modal is a window overlaid on either the primary window or another dialog window. Content behind a modal dialog is **inert**, meaning that users cannot interact with it. diff --git a/versioned_docs/version-3.2.1/popOver.md b/versioned_docs/version-3.2.1/popOver.md index 4ee92bdd4..57a4c1ed5 100644 --- a/versioned_docs/version-3.2.1/popOver.md +++ b/versioned_docs/version-3.2.1/popOver.md @@ -3,7 +3,7 @@ id: popover title: Popover --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; `Popover` is a non-modal dialog that floats around a trigger. It's used to display contextual information to the user, and should be paired with a pressable trigger element. @@ -71,7 +71,7 @@ You can pass custom backgroundColor using `bg` or `backgroundColor`, `borderColo `Popover.Body` composes the [`Box`](box.md) component. -### Popover.CloseButton  +### Popover.CloseButton `Popover.CloseButton` composes the [`Button`](button.md) component. diff --git a/versioned_docs/version-3.2.1/progress.md b/versioned_docs/version-3.2.1/progress.md index c6eabd361..9fe5ee80c 100644 --- a/versioned_docs/version-3.2.1/progress.md +++ b/versioned_docs/version-3.2.1/progress.md @@ -3,7 +3,7 @@ id: progress title: Progress --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; `Progress` is used to display the progress status for a task that takes a long time or consists of several steps. diff --git a/versioned_docs/version-3.2.1/radio.md b/versioned_docs/version-3.2.1/radio.md index 04da350e5..63485030b 100644 --- a/versioned_docs/version-3.2.1/radio.md +++ b/versioned_docs/version-3.2.1/radio.md @@ -3,7 +3,7 @@ id: radio title: Radio --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; `Radio` is used when only one choice may be selected in a series of options. diff --git a/versioned_docs/version-3.2.1/select.md b/versioned_docs/version-3.2.1/select.md index aceb730d5..cfecd7ead 100644 --- a/versioned_docs/version-3.2.1/select.md +++ b/versioned_docs/version-3.2.1/select.md @@ -3,7 +3,7 @@ id: select title: Select --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; import { AndroidBadge } from "/src/components/index"; diff --git a/versioned_docs/version-3.2.1/slider.md b/versioned_docs/version-3.2.1/slider.md index 0d74ff95f..b8d94b9e9 100644 --- a/versioned_docs/version-3.2.1/slider.md +++ b/versioned_docs/version-3.2.1/slider.md @@ -3,7 +3,7 @@ id: slider title: Slider --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; The `Slider` is used to allow users to make selections from a range of values. @@ -72,20 +72,15 @@ import { Slider } from 'native-base'; - ## Accessibility Adheres to the [Slider WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#slidertwothumb) ### Keyboard Interactions -| Name | Description | -| ------------------|-------------| -| ArrowRight | Increments/decrements by the step value depending on orientation.| -| ArrowLeft | Increments/decrements by the step value depending on orientation. -| ArrowUp | Increases the value by the step amount. -| ArrowDown | Decreases the value by the step amount. - - - - +| Name | Description | +| ---------- | ----------------------------------------------------------------- | +| ArrowRight | Increments/decrements by the step value depending on orientation. | +| ArrowLeft | Increments/decrements by the step value depending on orientation. | +| ArrowUp | Increases the value by the step amount. | +| ArrowDown | Decreases the value by the step amount. | diff --git a/versioned_docs/version-3.2.1/text.md b/versioned_docs/version-3.2.1/text.md index 04eca5545..10d3cdfe5 100644 --- a/versioned_docs/version-3.2.1/text.md +++ b/versioned_docs/version-3.2.1/text.md @@ -3,7 +3,7 @@ id: text title: Text --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; `Text` is used to render text and paragraphs within an interface. diff --git a/versioned_docs/version-3.2.1/textArea.md b/versioned_docs/version-3.2.1/textArea.md index 55c834ffa..31f18b444 100644 --- a/versioned_docs/version-3.2.1/textArea.md +++ b/versioned_docs/version-3.2.1/textArea.md @@ -3,7 +3,7 @@ id: textarea title: TextArea --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; The `Textarea` component allows you to easily create multi-line text inputs. diff --git a/versioned_docs/version-3.2.1/toast.md b/versioned_docs/version-3.2.1/toast.md index 914ce3de9..af50b7379 100644 --- a/versioned_docs/version-3.2.1/toast.md +++ b/versioned_docs/version-3.2.1/toast.md @@ -3,7 +3,7 @@ id: toast title: Toast --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; `Toast` is used to show alerts on top of an overlay. `Toast` will close itself when the close button is clicked, or after a timeout — the default is 5 seconds. The toast component is used to give feeback to users after an action has taken place. diff --git a/versioned_docs/version-3.2.1/tooltip.md b/versioned_docs/version-3.2.1/tooltip.md index 1d35cabf6..5723d66e1 100644 --- a/versioned_docs/version-3.2.1/tooltip.md +++ b/versioned_docs/version-3.2.1/tooltip.md @@ -3,7 +3,7 @@ id: tooltip title: Tooltip --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; A tooltip is a brief, informative message that appears when a user interacts with an element. Tooltips are usually initiated in one of two ways: through a mouse-hover gesture or through a keyboard-hover gesture. diff --git a/versioned_docs/version-3.2.1/utility-first.mdx b/versioned_docs/version-3.2.1/utility-first.mdx index ebd5645c6..9de7d2ddb 100644 --- a/versioned_docs/version-3.2.1/utility-first.mdx +++ b/versioned_docs/version-3.2.1/utility-first.mdx @@ -3,8 +3,8 @@ id: utility-first title: Utility First --- -import { UtilityFirstExample } from '../src/components'; -import { KitchenSinkIframe, TileLink, NBHistory } from '../src/components'; +import { UtilityFirstExample } from '../../src/components'; +import { KitchenSinkIframe, TileLink, NBHistory } from '../../src/components'; React Native has a great StyleSheet API which is optimal for component-based systems. NativeBase leverages it and adds a layer of utility props and constraint based designed tokens on top of it.