From 387e599a374321314f8e10fa038db4cf6912a083 Mon Sep 17 00:00:00 2001 From: Nishan Bende Date: Mon, 5 Jul 2021 10:48:46 +0530 Subject: [PATCH 01/21] fix: building card recipe --- docs/builldingCard.md | 5 +++-- docs/install-rn.mdx | 2 +- src/components/NBHistory/index.js | 6 +++--- versioned_docs/version-3.0.3/builldingCard.md | 5 +++-- versioned_docs/version-3.0.3/install-rn.mdx | 2 +- 5 files changed, 11 insertions(+), 9 deletions(-) diff --git a/docs/builldingCard.md b/docs/builldingCard.md index 0bf3d9b8f..0450302ae 100644 --- a/docs/builldingCard.md +++ b/docs/builldingCard.md @@ -21,11 +21,12 @@ AspectRatio, Center, Box, Stack, Heading } from "native-base"; function CardComponent(){ return( - image base + image base NEWS @@ -35,7 +36,7 @@ function CardComponent(){ The Stunning Dawki River in Meghalaya is So Clear That Boats Appear Floating in Air - + With lush green meadows, rivers clear as crystal, pine-covered hills, gorgeous waterfalls, lakes and majestic forests, the mesmerizing. Meghalaya is truly a Nature lover’s paradise… diff --git a/docs/install-rn.mdx b/docs/install-rn.mdx index bc29985ff..ca4746850 100644 --- a/docs/install-rn.mdx +++ b/docs/install-rn.mdx @@ -10,7 +10,7 @@ import { TileLink } from '../src/components'; ### Create a new project ```bash -react-native init AwesomeNativeBase +npx react-native init AwesomeNativeBase cd AwesomeNativeBase ``` diff --git a/src/components/NBHistory/index.js b/src/components/NBHistory/index.js index c5478a88b..87e26417c 100644 --- a/src/components/NBHistory/index.js +++ b/src/components/NBHistory/index.js @@ -17,7 +17,7 @@ export default function NBHistory() {
- image base + image base NEWS @@ -35,7 +36,7 @@ function CardComponent(){ The Stunning Dawki River in Meghalaya is So Clear That Boats Appear Floating in Air - + With lush green meadows, rivers clear as crystal, pine-covered hills, gorgeous waterfalls, lakes and majestic forests, the mesmerizing. Meghalaya is truly a Nature lover’s paradise… diff --git a/versioned_docs/version-3.0.3/install-rn.mdx b/versioned_docs/version-3.0.3/install-rn.mdx index 3d2394a2e..95bf40dd4 100644 --- a/versioned_docs/version-3.0.3/install-rn.mdx +++ b/versioned_docs/version-3.0.3/install-rn.mdx @@ -10,7 +10,7 @@ import { TileLink } from '../../src/components'; ### Create a new project ```bash -react-native init AwesomeNativeBase +npx react-native init AwesomeNativeBase cd AwesomeNativeBase ``` From baf963c837b2d5c4aebcf35675a2d67cfce3f330 Mon Sep 17 00:00:00 2001 From: Aditya Jamuar Date: Wed, 14 Jul 2021 19:17:32 +0530 Subject: [PATCH 02/21] Update issue templates --- .github/ISSUE_TEMPLATE/bug_report.md | 38 +++++++++++++++++++++++ .github/ISSUE_TEMPLATE/feature_request.md | 20 ++++++++++++ .github/ISSUE_TEMPLATE/pr-request.md | 18 +++++++++++ 3 files changed, 76 insertions(+) create mode 100644 .github/ISSUE_TEMPLATE/bug_report.md create mode 100644 .github/ISSUE_TEMPLATE/feature_request.md create mode 100644 .github/ISSUE_TEMPLATE/pr-request.md diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md new file mode 100644 index 000000000..dd84ea782 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -0,0 +1,38 @@ +--- +name: Bug report +about: Create a report to help us improve +title: '' +labels: '' +assignees: '' + +--- + +**Describe the bug** +A clear and concise description of what the bug is. + +**To Reproduce** +Steps to reproduce the behavior: +1. Go to '...' +2. Click on '....' +3. Scroll down to '....' +4. See error + +**Expected behavior** +A clear and concise description of what you expected to happen. + +**Screenshots** +If applicable, add screenshots to help explain your problem. + +**Desktop (please complete the following information):** + - OS: [e.g. iOS] + - Browser [e.g. chrome, safari] + - Version [e.g. 22] + +**Smartphone (please complete the following information):** + - Device: [e.g. iPhone6] + - OS: [e.g. iOS8.1] + - Browser [e.g. stock browser, safari] + - Version [e.g. 22] + +**Additional context** +Add any other context about the problem here. diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md new file mode 100644 index 000000000..bbcbbe7d6 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -0,0 +1,20 @@ +--- +name: Feature request +about: Suggest an idea for this project +title: '' +labels: '' +assignees: '' + +--- + +**Is your feature request related to a problem? Please describe.** +A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] + +**Describe the solution you'd like** +A clear and concise description of what you want to happen. + +**Describe alternatives you've considered** +A clear and concise description of any alternative solutions or features you've considered. + +**Additional context** +Add any other context or screenshots about the feature request here. diff --git a/.github/ISSUE_TEMPLATE/pr-request.md b/.github/ISSUE_TEMPLATE/pr-request.md new file mode 100644 index 000000000..66f64a48e --- /dev/null +++ b/.github/ISSUE_TEMPLATE/pr-request.md @@ -0,0 +1,18 @@ +--- +name: PR request +about: Make changes in the project +title: '' +labels: '' +assignees: '' + +--- + +### Define the issue along with a screenshot + +### Steps to reproduce +1. Go to "../.." +2. Do this... + +### Your solution + +### Screenshot of your working solution From 209eb18f1666eb66de1b1b799c230eeab001f91b Mon Sep 17 00:00:00 2001 From: Aditya Jamuar Date: Wed, 14 Jul 2021 19:18:16 +0530 Subject: [PATCH 03/21] Update issue templates --- .github/ISSUE_TEMPLATE/pr-request.md | 18 ------------------ 1 file changed, 18 deletions(-) delete mode 100644 .github/ISSUE_TEMPLATE/pr-request.md diff --git a/.github/ISSUE_TEMPLATE/pr-request.md b/.github/ISSUE_TEMPLATE/pr-request.md deleted file mode 100644 index 66f64a48e..000000000 --- a/.github/ISSUE_TEMPLATE/pr-request.md +++ /dev/null @@ -1,18 +0,0 @@ ---- -name: PR request -about: Make changes in the project -title: '' -labels: '' -assignees: '' - ---- - -### Define the issue along with a screenshot - -### Steps to reproduce -1. Go to "../.." -2. Do this... - -### Your solution - -### Screenshot of your working solution From a83b87af2b3856ff9b2a24912f285f4d682a146f Mon Sep 17 00:00:00 2001 From: Himanshu Satija Date: Fri, 16 Jul 2021 13:01:46 +0530 Subject: [PATCH 04/21] update native-base version --- nb-plugins/component-snackplayer/index.js | 2 +- package.json | 2 +- remark-snackplayer/index.js | 2 +- yarn.lock | 8 ++++---- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/nb-plugins/component-snackplayer/index.js b/nb-plugins/component-snackplayer/index.js index 8343f8ab8..5b848a917 100644 --- a/nb-plugins/component-snackplayer/index.js +++ b/nb-plugins/component-snackplayer/index.js @@ -18,7 +18,7 @@ const processNode = (node, parent) => { return new Promise(async (resolve, reject) => { try { const params = parseParams(node.meta); - const NBversion = '3.0.4'; + const NBversion = '3.0.6'; // Gather necessary Params let name = params.name ? decodeURIComponent(params.name) : 'Example'; const description = params.description diff --git a/package.json b/package.json index 81c251841..b7ea2772e 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "clsx": "^1.1.1", "dedent": "^0.7.0", "docusaurus-tailwindcss-loader": "file:plugins/docusaurus-tailwindcss-loader", - "native-base": "^3.0.4", + "native-base": "^3.0.6", "object.fromentries": "^2.0.3", "patch-package": "^6.4.7", "postcss": "^7.0.34", diff --git a/remark-snackplayer/index.js b/remark-snackplayer/index.js index 4273b391c..c7bb3190e 100644 --- a/remark-snackplayer/index.js +++ b/remark-snackplayer/index.js @@ -32,7 +32,7 @@ const processNode = (node, parent) => { try { const params = parseParams(node.meta); const simplifedMeta = simplifyMeta(node.meta); - const NBversion = '3.0.4'; + const NBversion = '3.0.6'; // Gather necessary Params let name = simplifedMeta.name ? decodeURIComponent(simplifedMeta.name) diff --git a/yarn.lock b/yarn.lock index 45cb2dc3c..ba33306dc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8399,10 +8399,10 @@ nanomatch@^1.2.9: snapdragon "^0.8.1" to-regex "^3.0.1" -native-base@^3.0.4: - version "3.0.4" - resolved "https://registry.yarnpkg.com/native-base/-/native-base-3.0.4.tgz#c61c0bb3b180cc3856da899692148a1a252899bd" - integrity sha512-w8qphjxvUBDmniqYtvtdV39iQwCP/qnJTA+klNYUqxOrxVAoYPNwOCN8upTkwSnEORkxwho9p4Dpm4o0ZrNoMA== +native-base@^3.0.6: + version "3.0.6" + resolved "https://registry.npmjs.org/native-base/-/native-base-3.0.6.tgz#b8df193eba1e700389acb82caa418506522b5edf" + integrity sha512-BdDif2xArJfzmeDeI58RRW5SO6r38xBKnA8rRy9B2mzUdQfA6GRTsZ/n49GxaGziyHOQCKAPEAc3Eq6IMEJ+dA== dependencies: "@react-aria/visually-hidden" "^3.2.1" "@react-native-aria/button" "^0.2.4" From 79db0d84131d3c1b2bf25d0b3774390ffc3ee5b2 Mon Sep 17 00:00:00 2001 From: Himanshu Satija Date: Fri, 16 Jul 2021 13:05:47 +0530 Subject: [PATCH 05/21] create new version --- docs/changelog.md | 2 + .../{version-3.0.4 => version-3.0.6}/FAB.md | 2 +- .../{version-3.0.4 => version-3.0.6}/Kbd.md | 0 .../VStack.md | 0 .../ZStack.md | 0 .../accessibility.md | 0 .../accordion.md | 0 .../actionSheet.md | 2 +- .../{version-3.0.4 => version-3.0.6}/alert.md | 2 +- .../alertDialog.md | 19 +- .../appBar.md | 0 .../appDrawer.md | 0 .../aspectRatio.md | 0 .../avatar.md | 2 +- .../{version-3.0.4 => version-3.0.6}/badge.md | 2 +- .../{version-3.0.4 => version-3.0.6}/box.md | 0 .../breadCrumb.md | 0 .../breakpoints.md | 0 .../buildingAppBar.md | 0 .../buildingDrawerNavigation.md | 0 .../buildingFooterTabs.md | 0 .../buildingSearchBar.md | 0 .../buildingSwipeList.md | 0 .../buildingTabView.md | 0 .../builldingCard.md | 5 +- .../button.mdx | 2 +- .../cascader.md | 0 .../center.md | 0 .../changelog.md | 2 + .../checkBox.md | 2 +- .../circularProgress.md | 0 .../closeButton.md | 0 .../{version-3.0.4 => version-3.0.6}/code.md | 0 .../collapse.md | 0 .../colorMode.md | 0 .../container.md | 0 .../customizingComponents.md | 0 .../customizingFonts.md | 0 .../customizingTheme.md | 0 .../darkMode.md | 0 .../datePicker.md | 0 .../default-theme.md | 0 .../design-tokens.md | 0 .../divider.md | 2 +- .../{version-3.0.4 => version-3.0.6}/faq.md | 0 .../flatList.md | 0 .../{version-3.0.4 => version-3.0.6}/flex.md | 0 .../{version-3.0.4 => version-3.0.6}/form.md | 0 .../formControl.md | 2 +- .../hStack.md | 0 .../heading.md | 2 +- .../{version-3.0.4 => version-3.0.6}/icon.md | 0 .../iconButton.md | 4 +- .../{version-3.0.4 => version-3.0.6}/image.md | 0 .../{version-3.0.4 => version-3.0.6}/input.md | 2 +- .../install-cra.mdx | 2 +- .../install-expo.mdx | 2 +- .../install-next.mdx | 3 +- .../install-rn.mdx | 4 +- .../installation.mdx | 2 +- .../interaction-styles.mdx | 0 .../keyboardAvoidingView.md | 0 .../kitchen-sink.mdx | 2 +- .../{version-3.0.4 => version-3.0.6}/link.md | 4 +- .../{version-3.0.4 => version-3.0.6}/list.md | 0 .../loginsignupforms.md | 0 .../{version-3.0.4 => version-3.0.6}/menu.md | 5 +- .../migration/Accordion.md | 0 .../migration/Actionsheet.md | 0 .../migration/Badge.md | 0 .../migration/Button.md | 0 .../Screenshot_2021-01-22_at_1.15.34_PM.png | Bin .../Screenshot_2021-01-22_at_1.16.25_PM.png | Bin .../Screenshot_2021-01-22_at_1.17.11_PM.png | Bin .../Screenshot_2021-01-22_at_1.20.36_PM.png | Bin .../Screenshot_2021-01-22_at_1.22.36_PM.png | Bin .../Screenshot_2021-01-22_at_1.23.42_PM.png | Bin .../Screenshot_2021-01-22_at_1.32.47_PM.png | Bin .../Screenshot_2021-01-22_at_1.38.15_PM.png | Bin .../Screenshot_2021-01-22_at_12.29.32_PM.png | Bin .../Screenshot_2021-01-22_at_12.53.09_PM.png | Bin .../Screenshot_2021-01-22_at_2.37.09_PM.png | Bin .../Screenshot_2021-01-22_at_2.38.52_PM.png | Bin .../migration/Card.md | 0 .../migration/Checkbox.md | 0 .../Screenshot_2021-01-22_at_3.09.29_PM.png | Bin .../Screenshot_2021-01-22_at_4.34.08_PM.png | Bin .../migration/DatePicker.md | 0 .../migration/DeckSwiper.md | 0 .../migration/Drawer.md | 0 .../migration/FABs.md | 0 .../migration/FooterTab.md | 0 .../migration/Form.md | 0 .../migration/Guide.md | 0 .../migration/Header.md | 0 .../migration/Icon.md | 0 .../migration/Layout.md | 0 .../migration/List.md | 0 .../migration/Picker.md | 0 .../migration/Radio Button.md | 0 .../migration/Searchbar.md | 0 .../migration/Segment.md | 0 .../migration/Spinner.md | 0 .../migration/SwipeList.md | 0 .../migration/Tabs.md | 0 .../migration/Thumbnail.md | 0 .../migration/Toast.md | 0 .../migration/Typography.md | 0 .../{version-3.0.4 => version-3.0.6}/modal.md | 2 +- .../nativebase-factory.md | 0 .../nativebase-formik-ui.md | 0 .../nativebase.mdx | 2 +- .../numberInput.md | 0 .../overlay.md | 0 .../pagination.md | 0 .../pinInput.md | 0 .../popOver.md | 16 +- .../presence-transition.md | 0 .../pressable.md | 0 .../progress.md | 2 +- .../{version-3.0.4 => version-3.0.6}/radio.md | 2 +- .../reactHooksForms.md | 0 .../responsive.md | 0 .../safe-area-view-props.md | 0 .../scrollview.md | 0 .../sectionList.md | 0 .../select.md | 2 +- .../setup-provider.md | 0 .../simpleGrid.md | 0 .../skeleton.md | 2 +- .../{version-3.0.4 => version-3.0.6}/slide.md | 0 .../slider.md | 19 +- .../snackBar.md | 0 .../spinner.md | 0 .../{version-3.0.4 => version-3.0.6}/stack.md | 0 .../stagger.md | 0 .../{version-3.0.4 => version-3.0.6}/stat.md | 0 .../statusBar.md | 0 .../swipableList.md | 0 .../switch.md | 0 .../{version-3.0.4 => version-3.0.6}/tabs.md | 0 .../{version-3.0.4 => version-3.0.6}/tag.md | 0 .../{version-3.0.4 => version-3.0.6}/text.md | 2 +- .../textArea.md | 2 +- .../textField.md | 0 .../{version-3.0.4 => version-3.0.6}/theme.md | 0 .../{version-3.0.4 => version-3.0.6}/toast.md | 2 +- .../todo-list.md | 0 .../tooltip.md | 15 +- .../transition.md | 0 .../typeAhead.md | 0 .../useAccessibleColors.md | 0 .../useBreakPointValue.md | 0 .../useClipboard.md | 0 .../useColorMode.md | 0 .../useColorModeValue.md | 0 .../useContrastText.md | 0 .../useDisclosure.md | 0 .../useMediaQuery.md | 0 .../usePopOver.md | 0 .../useTheme.md | 0 .../useToken.md | 0 .../utility-first.mdx | 4 +- .../utilityProps.md | 0 .../{version-3.0.4 => version-3.0.6}/view.md | 0 .../{version-3.0.4 => version-3.0.6}/wrap.md | 0 .../version-3.0.6-sidebars.json | 663 ++++++++++++++++++ versions.json | 2 +- 168 files changed, 746 insertions(+), 69 deletions(-) rename versioned_docs/{version-3.0.4 => version-3.0.6}/FAB.md (91%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/Kbd.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/VStack.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/ZStack.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/accessibility.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/accordion.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/actionSheet.md (96%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/alert.md (96%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/alertDialog.md (87%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/appBar.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/appDrawer.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/aspectRatio.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/avatar.md (95%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/badge.md (91%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/box.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/breadCrumb.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/breakpoints.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/buildingAppBar.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/buildingDrawerNavigation.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/buildingFooterTabs.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/buildingSearchBar.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/buildingSwipeList.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/buildingTabView.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/builldingCard.md (88%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/button.mdx (95%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/cascader.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/center.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/changelog.md (90%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/checkBox.md (96%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/circularProgress.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/closeButton.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/code.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/collapse.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/colorMode.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/container.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/customizingComponents.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/customizingFonts.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/customizingTheme.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/darkMode.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/datePicker.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/default-theme.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/design-tokens.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/divider.md (95%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/faq.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/flatList.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/flex.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/form.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/formControl.md (93%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/hStack.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/heading.md (93%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/icon.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/iconButton.md (88%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/image.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/input.md (94%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/install-cra.mdx (98%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/install-expo.mdx (97%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/install-next.mdx (99%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/install-rn.mdx (95%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/installation.mdx (93%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/interaction-styles.mdx (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/keyboardAvoidingView.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/kitchen-sink.mdx (97%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/link.md (93%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/list.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/loginsignupforms.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/menu.md (94%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/migration/Accordion.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/migration/Actionsheet.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/migration/Badge.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/migration/Button.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/migration/Button/Screenshot_2021-01-22_at_1.15.34_PM.png (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/migration/Button/Screenshot_2021-01-22_at_1.16.25_PM.png (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/migration/Button/Screenshot_2021-01-22_at_1.17.11_PM.png (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/migration/Button/Screenshot_2021-01-22_at_1.20.36_PM.png (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/migration/Button/Screenshot_2021-01-22_at_1.22.36_PM.png (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/migration/Button/Screenshot_2021-01-22_at_1.23.42_PM.png (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/migration/Button/Screenshot_2021-01-22_at_1.32.47_PM.png (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/migration/Button/Screenshot_2021-01-22_at_1.38.15_PM.png (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/migration/Button/Screenshot_2021-01-22_at_12.29.32_PM.png (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/migration/Button/Screenshot_2021-01-22_at_12.53.09_PM.png (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/migration/Button/Screenshot_2021-01-22_at_2.37.09_PM.png (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/migration/Button/Screenshot_2021-01-22_at_2.38.52_PM.png (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/migration/Card.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/migration/Checkbox.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/migration/Checkbox/Screenshot_2021-01-22_at_3.09.29_PM.png (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/migration/Checkbox/Screenshot_2021-01-22_at_4.34.08_PM.png (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/migration/DatePicker.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/migration/DeckSwiper.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/migration/Drawer.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/migration/FABs.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/migration/FooterTab.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/migration/Form.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/migration/Guide.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/migration/Header.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/migration/Icon.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/migration/Layout.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/migration/List.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/migration/Picker.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/migration/Radio Button.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/migration/Searchbar.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/migration/Segment.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/migration/Spinner.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/migration/SwipeList.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/migration/Tabs.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/migration/Thumbnail.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/migration/Toast.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/migration/Typography.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/modal.md (98%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/nativebase-factory.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/nativebase-formik-ui.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/nativebase.mdx (97%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/numberInput.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/overlay.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/pagination.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/pinInput.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/popOver.md (76%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/presence-transition.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/pressable.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/progress.md (95%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/radio.md (97%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/reactHooksForms.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/responsive.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/safe-area-view-props.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/scrollview.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/sectionList.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/select.md (99%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/setup-provider.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/simpleGrid.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/skeleton.md (98%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/slide.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/slider.md (71%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/snackBar.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/spinner.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/stack.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/stagger.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/stat.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/statusBar.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/swipableList.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/switch.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/tabs.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/tag.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/text.md (91%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/textArea.md (90%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/textField.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/theme.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/toast.md (97%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/todo-list.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/tooltip.md (73%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/transition.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/typeAhead.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/useAccessibleColors.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/useBreakPointValue.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/useClipboard.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/useColorMode.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/useColorModeValue.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/useContrastText.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/useDisclosure.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/useMediaQuery.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/usePopOver.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/useTheme.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/useToken.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/utility-first.mdx (97%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/utilityProps.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/view.md (100%) rename versioned_docs/{version-3.0.4 => version-3.0.6}/wrap.md (100%) create mode 100644 versioned_sidebars/version-3.0.6-sidebars.json diff --git a/docs/changelog.md b/docs/changelog.md index 3c65f2d9b..7eb8d4342 100644 --- a/docs/changelog.md +++ b/docs/changelog.md @@ -17,5 +17,7 @@ title: Changelog - Add a prop to render FAB outside of portal #3829 - Fix input padding(top/bottom) not working on android #3825 - Fix custom fonts not working on android for some cases #3821 +- Fixed bold and italics issue in typography +- Spinner visibility issue fixed For more details. Visit [releases](https://github.com/GeekyAnts/NativeBase/releases/tag/v3.0.4). diff --git a/versioned_docs/version-3.0.4/FAB.md b/versioned_docs/version-3.0.6/FAB.md similarity index 91% rename from versioned_docs/version-3.0.4/FAB.md rename to versioned_docs/version-3.0.6/FAB.md index b2da69276..1dddda32b 100644 --- a/versioned_docs/version-3.0.4/FAB.md +++ b/versioned_docs/version-3.0.6/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.0.4/Kbd.md b/versioned_docs/version-3.0.6/Kbd.md similarity index 100% rename from versioned_docs/version-3.0.4/Kbd.md rename to versioned_docs/version-3.0.6/Kbd.md diff --git a/versioned_docs/version-3.0.4/VStack.md b/versioned_docs/version-3.0.6/VStack.md similarity index 100% rename from versioned_docs/version-3.0.4/VStack.md rename to versioned_docs/version-3.0.6/VStack.md diff --git a/versioned_docs/version-3.0.4/ZStack.md b/versioned_docs/version-3.0.6/ZStack.md similarity index 100% rename from versioned_docs/version-3.0.4/ZStack.md rename to versioned_docs/version-3.0.6/ZStack.md diff --git a/versioned_docs/version-3.0.4/accessibility.md b/versioned_docs/version-3.0.6/accessibility.md similarity index 100% rename from versioned_docs/version-3.0.4/accessibility.md rename to versioned_docs/version-3.0.6/accessibility.md diff --git a/versioned_docs/version-3.0.4/accordion.md b/versioned_docs/version-3.0.6/accordion.md similarity index 100% rename from versioned_docs/version-3.0.4/accordion.md rename to versioned_docs/version-3.0.6/accordion.md diff --git a/versioned_docs/version-3.0.4/actionSheet.md b/versioned_docs/version-3.0.6/actionSheet.md similarity index 96% rename from versioned_docs/version-3.0.4/actionSheet.md rename to versioned_docs/version-3.0.6/actionSheet.md index c3c21288d..fb2b9f8e7 100644 --- a/versioned_docs/version-3.0.4/actionSheet.md +++ b/versioned_docs/version-3.0.6/actionSheet.md @@ -3,7 +3,7 @@ id: actionSheet 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.0.4/alert.md b/versioned_docs/version-3.0.6/alert.md similarity index 96% rename from versioned_docs/version-3.0.4/alert.md rename to versioned_docs/version-3.0.6/alert.md index a56754e77..f8e2766cd 100644 --- a/versioned_docs/version-3.0.4/alert.md +++ b/versioned_docs/version-3.0.6/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. diff --git a/versioned_docs/version-3.0.4/alertDialog.md b/versioned_docs/version-3.0.6/alertDialog.md similarity index 87% rename from versioned_docs/version-3.0.4/alertDialog.md rename to versioned_docs/version-3.0.6/alertDialog.md index 5e9d0d3d8..2dada0110 100644 --- a/versioned_docs/version-3.0.4/alertDialog.md +++ b/versioned_docs/version-3.0.6/alertDialog.md @@ -3,7 +3,7 @@ id: alertDialog 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. @@ -142,16 +142,19 @@ 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) ### Keyboard Interactions -| Name | Description | -| ----------- | --------------------------------------------------------- | -| Space | Opens/closes the dialog. | -| Enter | Opens/closes the dialog. | -| 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. | +| Name | Description | +| --------------------|-------------| +| Space | Opens/closes the dialog. | +| Enter | Opens/closes the dialog. | +| 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.0.4/appBar.md b/versioned_docs/version-3.0.6/appBar.md similarity index 100% rename from versioned_docs/version-3.0.4/appBar.md rename to versioned_docs/version-3.0.6/appBar.md diff --git a/versioned_docs/version-3.0.4/appDrawer.md b/versioned_docs/version-3.0.6/appDrawer.md similarity index 100% rename from versioned_docs/version-3.0.4/appDrawer.md rename to versioned_docs/version-3.0.6/appDrawer.md diff --git a/versioned_docs/version-3.0.4/aspectRatio.md b/versioned_docs/version-3.0.6/aspectRatio.md similarity index 100% rename from versioned_docs/version-3.0.4/aspectRatio.md rename to versioned_docs/version-3.0.6/aspectRatio.md diff --git a/versioned_docs/version-3.0.4/avatar.md b/versioned_docs/version-3.0.6/avatar.md similarity index 95% rename from versioned_docs/version-3.0.4/avatar.md rename to versioned_docs/version-3.0.6/avatar.md index dff7875cc..a0b5f1913 100644 --- a/versioned_docs/version-3.0.4/avatar.md +++ b/versioned_docs/version-3.0.6/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.0.4/badge.md b/versioned_docs/version-3.0.6/badge.md similarity index 91% rename from versioned_docs/version-3.0.4/badge.md rename to versioned_docs/version-3.0.6/badge.md index 607a80451..23636b2ae 100644 --- a/versioned_docs/version-3.0.4/badge.md +++ b/versioned_docs/version-3.0.6/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.0.4/box.md b/versioned_docs/version-3.0.6/box.md similarity index 100% rename from versioned_docs/version-3.0.4/box.md rename to versioned_docs/version-3.0.6/box.md diff --git a/versioned_docs/version-3.0.4/breadCrumb.md b/versioned_docs/version-3.0.6/breadCrumb.md similarity index 100% rename from versioned_docs/version-3.0.4/breadCrumb.md rename to versioned_docs/version-3.0.6/breadCrumb.md diff --git a/versioned_docs/version-3.0.4/breakpoints.md b/versioned_docs/version-3.0.6/breakpoints.md similarity index 100% rename from versioned_docs/version-3.0.4/breakpoints.md rename to versioned_docs/version-3.0.6/breakpoints.md diff --git a/versioned_docs/version-3.0.4/buildingAppBar.md b/versioned_docs/version-3.0.6/buildingAppBar.md similarity index 100% rename from versioned_docs/version-3.0.4/buildingAppBar.md rename to versioned_docs/version-3.0.6/buildingAppBar.md diff --git a/versioned_docs/version-3.0.4/buildingDrawerNavigation.md b/versioned_docs/version-3.0.6/buildingDrawerNavigation.md similarity index 100% rename from versioned_docs/version-3.0.4/buildingDrawerNavigation.md rename to versioned_docs/version-3.0.6/buildingDrawerNavigation.md diff --git a/versioned_docs/version-3.0.4/buildingFooterTabs.md b/versioned_docs/version-3.0.6/buildingFooterTabs.md similarity index 100% rename from versioned_docs/version-3.0.4/buildingFooterTabs.md rename to versioned_docs/version-3.0.6/buildingFooterTabs.md diff --git a/versioned_docs/version-3.0.4/buildingSearchBar.md b/versioned_docs/version-3.0.6/buildingSearchBar.md similarity index 100% rename from versioned_docs/version-3.0.4/buildingSearchBar.md rename to versioned_docs/version-3.0.6/buildingSearchBar.md diff --git a/versioned_docs/version-3.0.4/buildingSwipeList.md b/versioned_docs/version-3.0.6/buildingSwipeList.md similarity index 100% rename from versioned_docs/version-3.0.4/buildingSwipeList.md rename to versioned_docs/version-3.0.6/buildingSwipeList.md diff --git a/versioned_docs/version-3.0.4/buildingTabView.md b/versioned_docs/version-3.0.6/buildingTabView.md similarity index 100% rename from versioned_docs/version-3.0.4/buildingTabView.md rename to versioned_docs/version-3.0.6/buildingTabView.md diff --git a/versioned_docs/version-3.0.4/builldingCard.md b/versioned_docs/version-3.0.6/builldingCard.md similarity index 88% rename from versioned_docs/version-3.0.4/builldingCard.md rename to versioned_docs/version-3.0.6/builldingCard.md index 0bf3d9b8f..0450302ae 100644 --- a/versioned_docs/version-3.0.4/builldingCard.md +++ b/versioned_docs/version-3.0.6/builldingCard.md @@ -21,11 +21,12 @@ AspectRatio, Center, Box, Stack, Heading } from "native-base"; function CardComponent(){ return( - image base + image base NEWS @@ -35,7 +36,7 @@ function CardComponent(){ The Stunning Dawki River in Meghalaya is So Clear That Boats Appear Floating in Air - + With lush green meadows, rivers clear as crystal, pine-covered hills, gorgeous waterfalls, lakes and majestic forests, the mesmerizing. Meghalaya is truly a Nature lover’s paradise… diff --git a/versioned_docs/version-3.0.4/button.mdx b/versioned_docs/version-3.0.6/button.mdx similarity index 95% rename from versioned_docs/version-3.0.4/button.mdx rename to versioned_docs/version-3.0.6/button.mdx index c138b3d29..ce48491f3 100644 --- a/versioned_docs/version-3.0.4/button.mdx +++ b/versioned_docs/version-3.0.6/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.0.4/cascader.md b/versioned_docs/version-3.0.6/cascader.md similarity index 100% rename from versioned_docs/version-3.0.4/cascader.md rename to versioned_docs/version-3.0.6/cascader.md diff --git a/versioned_docs/version-3.0.4/center.md b/versioned_docs/version-3.0.6/center.md similarity index 100% rename from versioned_docs/version-3.0.4/center.md rename to versioned_docs/version-3.0.6/center.md diff --git a/versioned_docs/version-3.0.4/changelog.md b/versioned_docs/version-3.0.6/changelog.md similarity index 90% rename from versioned_docs/version-3.0.4/changelog.md rename to versioned_docs/version-3.0.6/changelog.md index 3c65f2d9b..7eb8d4342 100644 --- a/versioned_docs/version-3.0.4/changelog.md +++ b/versioned_docs/version-3.0.6/changelog.md @@ -17,5 +17,7 @@ title: Changelog - Add a prop to render FAB outside of portal #3829 - Fix input padding(top/bottom) not working on android #3825 - Fix custom fonts not working on android for some cases #3821 +- Fixed bold and italics issue in typography +- Spinner visibility issue fixed For more details. Visit [releases](https://github.com/GeekyAnts/NativeBase/releases/tag/v3.0.4). diff --git a/versioned_docs/version-3.0.4/checkBox.md b/versioned_docs/version-3.0.6/checkBox.md similarity index 96% rename from versioned_docs/version-3.0.4/checkBox.md rename to versioned_docs/version-3.0.6/checkBox.md index 81a7c5e6c..fc54f268c 100644 --- a/versioned_docs/version-3.0.4/checkBox.md +++ b/versioned_docs/version-3.0.6/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.0.4/circularProgress.md b/versioned_docs/version-3.0.6/circularProgress.md similarity index 100% rename from versioned_docs/version-3.0.4/circularProgress.md rename to versioned_docs/version-3.0.6/circularProgress.md diff --git a/versioned_docs/version-3.0.4/closeButton.md b/versioned_docs/version-3.0.6/closeButton.md similarity index 100% rename from versioned_docs/version-3.0.4/closeButton.md rename to versioned_docs/version-3.0.6/closeButton.md diff --git a/versioned_docs/version-3.0.4/code.md b/versioned_docs/version-3.0.6/code.md similarity index 100% rename from versioned_docs/version-3.0.4/code.md rename to versioned_docs/version-3.0.6/code.md diff --git a/versioned_docs/version-3.0.4/collapse.md b/versioned_docs/version-3.0.6/collapse.md similarity index 100% rename from versioned_docs/version-3.0.4/collapse.md rename to versioned_docs/version-3.0.6/collapse.md diff --git a/versioned_docs/version-3.0.4/colorMode.md b/versioned_docs/version-3.0.6/colorMode.md similarity index 100% rename from versioned_docs/version-3.0.4/colorMode.md rename to versioned_docs/version-3.0.6/colorMode.md diff --git a/versioned_docs/version-3.0.4/container.md b/versioned_docs/version-3.0.6/container.md similarity index 100% rename from versioned_docs/version-3.0.4/container.md rename to versioned_docs/version-3.0.6/container.md diff --git a/versioned_docs/version-3.0.4/customizingComponents.md b/versioned_docs/version-3.0.6/customizingComponents.md similarity index 100% rename from versioned_docs/version-3.0.4/customizingComponents.md rename to versioned_docs/version-3.0.6/customizingComponents.md diff --git a/versioned_docs/version-3.0.4/customizingFonts.md b/versioned_docs/version-3.0.6/customizingFonts.md similarity index 100% rename from versioned_docs/version-3.0.4/customizingFonts.md rename to versioned_docs/version-3.0.6/customizingFonts.md diff --git a/versioned_docs/version-3.0.4/customizingTheme.md b/versioned_docs/version-3.0.6/customizingTheme.md similarity index 100% rename from versioned_docs/version-3.0.4/customizingTheme.md rename to versioned_docs/version-3.0.6/customizingTheme.md diff --git a/versioned_docs/version-3.0.4/darkMode.md b/versioned_docs/version-3.0.6/darkMode.md similarity index 100% rename from versioned_docs/version-3.0.4/darkMode.md rename to versioned_docs/version-3.0.6/darkMode.md diff --git a/versioned_docs/version-3.0.4/datePicker.md b/versioned_docs/version-3.0.6/datePicker.md similarity index 100% rename from versioned_docs/version-3.0.4/datePicker.md rename to versioned_docs/version-3.0.6/datePicker.md diff --git a/versioned_docs/version-3.0.4/default-theme.md b/versioned_docs/version-3.0.6/default-theme.md similarity index 100% rename from versioned_docs/version-3.0.4/default-theme.md rename to versioned_docs/version-3.0.6/default-theme.md diff --git a/versioned_docs/version-3.0.4/design-tokens.md b/versioned_docs/version-3.0.6/design-tokens.md similarity index 100% rename from versioned_docs/version-3.0.4/design-tokens.md rename to versioned_docs/version-3.0.6/design-tokens.md diff --git a/versioned_docs/version-3.0.4/divider.md b/versioned_docs/version-3.0.6/divider.md similarity index 95% rename from versioned_docs/version-3.0.4/divider.md rename to versioned_docs/version-3.0.6/divider.md index 70f897268..a6bd0c33c 100644 --- a/versioned_docs/version-3.0.4/divider.md +++ b/versioned_docs/version-3.0.6/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.0.4/faq.md b/versioned_docs/version-3.0.6/faq.md similarity index 100% rename from versioned_docs/version-3.0.4/faq.md rename to versioned_docs/version-3.0.6/faq.md diff --git a/versioned_docs/version-3.0.4/flatList.md b/versioned_docs/version-3.0.6/flatList.md similarity index 100% rename from versioned_docs/version-3.0.4/flatList.md rename to versioned_docs/version-3.0.6/flatList.md diff --git a/versioned_docs/version-3.0.4/flex.md b/versioned_docs/version-3.0.6/flex.md similarity index 100% rename from versioned_docs/version-3.0.4/flex.md rename to versioned_docs/version-3.0.6/flex.md diff --git a/versioned_docs/version-3.0.4/form.md b/versioned_docs/version-3.0.6/form.md similarity index 100% rename from versioned_docs/version-3.0.4/form.md rename to versioned_docs/version-3.0.6/form.md diff --git a/versioned_docs/version-3.0.4/formControl.md b/versioned_docs/version-3.0.6/formControl.md similarity index 93% rename from versioned_docs/version-3.0.4/formControl.md rename to versioned_docs/version-3.0.6/formControl.md index 560499ffd..9d26b7649 100644 --- a/versioned_docs/version-3.0.4/formControl.md +++ b/versioned_docs/version-3.0.6/formControl.md @@ -3,7 +3,7 @@ id: formControl 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.0.4/hStack.md b/versioned_docs/version-3.0.6/hStack.md similarity index 100% rename from versioned_docs/version-3.0.4/hStack.md rename to versioned_docs/version-3.0.6/hStack.md diff --git a/versioned_docs/version-3.0.4/heading.md b/versioned_docs/version-3.0.6/heading.md similarity index 93% rename from versioned_docs/version-3.0.4/heading.md rename to versioned_docs/version-3.0.6/heading.md index 971b44a20..40a96a759 100644 --- a/versioned_docs/version-3.0.4/heading.md +++ b/versioned_docs/version-3.0.6/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.0.4/icon.md b/versioned_docs/version-3.0.6/icon.md similarity index 100% rename from versioned_docs/version-3.0.4/icon.md rename to versioned_docs/version-3.0.6/icon.md diff --git a/versioned_docs/version-3.0.4/iconButton.md b/versioned_docs/version-3.0.6/iconButton.md similarity index 88% rename from versioned_docs/version-3.0.4/iconButton.md rename to versioned_docs/version-3.0.6/iconButton.md index dcf790c3f..dc7ce443a 100644 --- a/versioned_docs/version-3.0.4/iconButton.md +++ b/versioned_docs/version-3.0.6/iconButton.md @@ -3,7 +3,7 @@ id: iconButton 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. @@ -40,4 +40,4 @@ import { ComponentTheme } from '../../src/components'; ## Accessibility - Use accessibilityLabel for labelling icon buttons to make sure it's announced by screen reader devices. -- IconButton has a `role` set to [button](https://www.w3.org/TR/wai-aria-practices-1.2/#button). +- IconButton has a `role` set to [button](https://www.w3.org/TR/wai-aria-practices-1.2/#button). \ No newline at end of file diff --git a/versioned_docs/version-3.0.4/image.md b/versioned_docs/version-3.0.6/image.md similarity index 100% rename from versioned_docs/version-3.0.4/image.md rename to versioned_docs/version-3.0.6/image.md diff --git a/versioned_docs/version-3.0.4/input.md b/versioned_docs/version-3.0.6/input.md similarity index 94% rename from versioned_docs/version-3.0.4/input.md rename to versioned_docs/version-3.0.6/input.md index 9dcf9e138..641f15c50 100644 --- a/versioned_docs/version-3.0.4/input.md +++ b/versioned_docs/version-3.0.6/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.0.4/install-cra.mdx b/versioned_docs/version-3.0.6/install-cra.mdx similarity index 98% rename from versioned_docs/version-3.0.4/install-cra.mdx rename to versioned_docs/version-3.0.6/install-cra.mdx index ba24220f0..01c435dcd 100644 --- a/versioned_docs/version-3.0.4/install-cra.mdx +++ b/versioned_docs/version-3.0.6/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'; +

Choose your preferred setting and start your development swiftly 🚀

diff --git a/versioned_docs/version-3.0.4/install-rn.mdx b/versioned_docs/version-3.0.6/install-rn.mdx similarity index 95% rename from versioned_docs/version-3.0.4/install-rn.mdx rename to versioned_docs/version-3.0.6/install-rn.mdx index 4e6701c76..576daca24 100644 --- a/versioned_docs/version-3.0.4/install-rn.mdx +++ b/versioned_docs/version-3.0.6/install-rn.mdx @@ -5,12 +5,12 @@ 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 ```bash -react-native init AwesomeNativeBase +npx react-native init AwesomeNativeBase cd AwesomeNativeBase ``` diff --git a/versioned_docs/version-3.0.4/installation.mdx b/versioned_docs/version-3.0.6/installation.mdx similarity index 93% rename from versioned_docs/version-3.0.4/installation.mdx rename to versioned_docs/version-3.0.6/installation.mdx index 91616aeed..5b8e02daa 100644 --- a/versioned_docs/version-3.0.4/installation.mdx +++ b/versioned_docs/version-3.0.6/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.0.4/interaction-styles.mdx b/versioned_docs/version-3.0.6/interaction-styles.mdx similarity index 100% rename from versioned_docs/version-3.0.4/interaction-styles.mdx rename to versioned_docs/version-3.0.6/interaction-styles.mdx diff --git a/versioned_docs/version-3.0.4/keyboardAvoidingView.md b/versioned_docs/version-3.0.6/keyboardAvoidingView.md similarity index 100% rename from versioned_docs/version-3.0.4/keyboardAvoidingView.md rename to versioned_docs/version-3.0.6/keyboardAvoidingView.md diff --git a/versioned_docs/version-3.0.4/kitchen-sink.mdx b/versioned_docs/version-3.0.6/kitchen-sink.mdx similarity index 97% rename from versioned_docs/version-3.0.4/kitchen-sink.mdx rename to versioned_docs/version-3.0.6/kitchen-sink.mdx index 7187d2c16..000ac0ae3 100644 --- a/versioned_docs/version-3.0.4/kitchen-sink.mdx +++ b/versioned_docs/version-3.0.6/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.0.4/link.md b/versioned_docs/version-3.0.6/link.md similarity index 93% rename from versioned_docs/version-3.0.4/link.md rename to versioned_docs/version-3.0.6/link.md index 5e77da915..e888268d8 100644 --- a/versioned_docs/version-3.0.4/link.md +++ b/versioned_docs/version-3.0.6/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. @@ -65,4 +65,4 @@ Link implements **[Box](box.md)**, so all the Box Props can be passed to it. ## Accessibility -Adheres to the [Link WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#link) +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 diff --git a/versioned_docs/version-3.0.4/list.md b/versioned_docs/version-3.0.6/list.md similarity index 100% rename from versioned_docs/version-3.0.4/list.md rename to versioned_docs/version-3.0.6/list.md diff --git a/versioned_docs/version-3.0.4/loginsignupforms.md b/versioned_docs/version-3.0.6/loginsignupforms.md similarity index 100% rename from versioned_docs/version-3.0.4/loginsignupforms.md rename to versioned_docs/version-3.0.6/loginsignupforms.md diff --git a/versioned_docs/version-3.0.4/menu.md b/versioned_docs/version-3.0.6/menu.md similarity index 94% rename from versioned_docs/version-3.0.4/menu.md rename to versioned_docs/version-3.0.6/menu.md index 736456663..70d276936 100644 --- a/versioned_docs/version-3.0.4/menu.md +++ b/versioned_docs/version-3.0.6/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,6 +89,7 @@ Extends `MenuItem`. + ## Accessibility -Adheres to the [Menu WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#menu) +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 diff --git a/versioned_docs/version-3.0.4/migration/Accordion.md b/versioned_docs/version-3.0.6/migration/Accordion.md similarity index 100% rename from versioned_docs/version-3.0.4/migration/Accordion.md rename to versioned_docs/version-3.0.6/migration/Accordion.md diff --git a/versioned_docs/version-3.0.4/migration/Actionsheet.md b/versioned_docs/version-3.0.6/migration/Actionsheet.md similarity index 100% rename from versioned_docs/version-3.0.4/migration/Actionsheet.md rename to versioned_docs/version-3.0.6/migration/Actionsheet.md diff --git a/versioned_docs/version-3.0.4/migration/Badge.md b/versioned_docs/version-3.0.6/migration/Badge.md similarity index 100% rename from versioned_docs/version-3.0.4/migration/Badge.md rename to versioned_docs/version-3.0.6/migration/Badge.md diff --git a/versioned_docs/version-3.0.4/migration/Button.md b/versioned_docs/version-3.0.6/migration/Button.md similarity index 100% rename from versioned_docs/version-3.0.4/migration/Button.md rename to versioned_docs/version-3.0.6/migration/Button.md diff --git a/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.15.34_PM.png b/versioned_docs/version-3.0.6/migration/Button/Screenshot_2021-01-22_at_1.15.34_PM.png similarity index 100% rename from versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.15.34_PM.png rename to versioned_docs/version-3.0.6/migration/Button/Screenshot_2021-01-22_at_1.15.34_PM.png diff --git a/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.16.25_PM.png b/versioned_docs/version-3.0.6/migration/Button/Screenshot_2021-01-22_at_1.16.25_PM.png similarity index 100% rename from versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.16.25_PM.png rename to versioned_docs/version-3.0.6/migration/Button/Screenshot_2021-01-22_at_1.16.25_PM.png diff --git a/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.17.11_PM.png b/versioned_docs/version-3.0.6/migration/Button/Screenshot_2021-01-22_at_1.17.11_PM.png similarity index 100% rename from versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.17.11_PM.png rename to versioned_docs/version-3.0.6/migration/Button/Screenshot_2021-01-22_at_1.17.11_PM.png diff --git a/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.20.36_PM.png b/versioned_docs/version-3.0.6/migration/Button/Screenshot_2021-01-22_at_1.20.36_PM.png similarity index 100% rename from versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.20.36_PM.png rename to versioned_docs/version-3.0.6/migration/Button/Screenshot_2021-01-22_at_1.20.36_PM.png diff --git a/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.22.36_PM.png b/versioned_docs/version-3.0.6/migration/Button/Screenshot_2021-01-22_at_1.22.36_PM.png similarity index 100% rename from versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.22.36_PM.png rename to versioned_docs/version-3.0.6/migration/Button/Screenshot_2021-01-22_at_1.22.36_PM.png diff --git a/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.23.42_PM.png b/versioned_docs/version-3.0.6/migration/Button/Screenshot_2021-01-22_at_1.23.42_PM.png similarity index 100% rename from versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.23.42_PM.png rename to versioned_docs/version-3.0.6/migration/Button/Screenshot_2021-01-22_at_1.23.42_PM.png diff --git a/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.32.47_PM.png b/versioned_docs/version-3.0.6/migration/Button/Screenshot_2021-01-22_at_1.32.47_PM.png similarity index 100% rename from versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.32.47_PM.png rename to versioned_docs/version-3.0.6/migration/Button/Screenshot_2021-01-22_at_1.32.47_PM.png diff --git a/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.38.15_PM.png b/versioned_docs/version-3.0.6/migration/Button/Screenshot_2021-01-22_at_1.38.15_PM.png similarity index 100% rename from versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.38.15_PM.png rename to versioned_docs/version-3.0.6/migration/Button/Screenshot_2021-01-22_at_1.38.15_PM.png diff --git a/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_12.29.32_PM.png b/versioned_docs/version-3.0.6/migration/Button/Screenshot_2021-01-22_at_12.29.32_PM.png similarity index 100% rename from versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_12.29.32_PM.png rename to versioned_docs/version-3.0.6/migration/Button/Screenshot_2021-01-22_at_12.29.32_PM.png diff --git a/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_12.53.09_PM.png b/versioned_docs/version-3.0.6/migration/Button/Screenshot_2021-01-22_at_12.53.09_PM.png similarity index 100% rename from versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_12.53.09_PM.png rename to versioned_docs/version-3.0.6/migration/Button/Screenshot_2021-01-22_at_12.53.09_PM.png diff --git a/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_2.37.09_PM.png b/versioned_docs/version-3.0.6/migration/Button/Screenshot_2021-01-22_at_2.37.09_PM.png similarity index 100% rename from versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_2.37.09_PM.png rename to versioned_docs/version-3.0.6/migration/Button/Screenshot_2021-01-22_at_2.37.09_PM.png diff --git a/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_2.38.52_PM.png b/versioned_docs/version-3.0.6/migration/Button/Screenshot_2021-01-22_at_2.38.52_PM.png similarity index 100% rename from versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_2.38.52_PM.png rename to versioned_docs/version-3.0.6/migration/Button/Screenshot_2021-01-22_at_2.38.52_PM.png diff --git a/versioned_docs/version-3.0.4/migration/Card.md b/versioned_docs/version-3.0.6/migration/Card.md similarity index 100% rename from versioned_docs/version-3.0.4/migration/Card.md rename to versioned_docs/version-3.0.6/migration/Card.md diff --git a/versioned_docs/version-3.0.4/migration/Checkbox.md b/versioned_docs/version-3.0.6/migration/Checkbox.md similarity index 100% rename from versioned_docs/version-3.0.4/migration/Checkbox.md rename to versioned_docs/version-3.0.6/migration/Checkbox.md diff --git a/versioned_docs/version-3.0.4/migration/Checkbox/Screenshot_2021-01-22_at_3.09.29_PM.png b/versioned_docs/version-3.0.6/migration/Checkbox/Screenshot_2021-01-22_at_3.09.29_PM.png similarity index 100% rename from versioned_docs/version-3.0.4/migration/Checkbox/Screenshot_2021-01-22_at_3.09.29_PM.png rename to versioned_docs/version-3.0.6/migration/Checkbox/Screenshot_2021-01-22_at_3.09.29_PM.png diff --git a/versioned_docs/version-3.0.4/migration/Checkbox/Screenshot_2021-01-22_at_4.34.08_PM.png b/versioned_docs/version-3.0.6/migration/Checkbox/Screenshot_2021-01-22_at_4.34.08_PM.png similarity index 100% rename from versioned_docs/version-3.0.4/migration/Checkbox/Screenshot_2021-01-22_at_4.34.08_PM.png rename to versioned_docs/version-3.0.6/migration/Checkbox/Screenshot_2021-01-22_at_4.34.08_PM.png diff --git a/versioned_docs/version-3.0.4/migration/DatePicker.md b/versioned_docs/version-3.0.6/migration/DatePicker.md similarity index 100% rename from versioned_docs/version-3.0.4/migration/DatePicker.md rename to versioned_docs/version-3.0.6/migration/DatePicker.md diff --git a/versioned_docs/version-3.0.4/migration/DeckSwiper.md b/versioned_docs/version-3.0.6/migration/DeckSwiper.md similarity index 100% rename from versioned_docs/version-3.0.4/migration/DeckSwiper.md rename to versioned_docs/version-3.0.6/migration/DeckSwiper.md diff --git a/versioned_docs/version-3.0.4/migration/Drawer.md b/versioned_docs/version-3.0.6/migration/Drawer.md similarity index 100% rename from versioned_docs/version-3.0.4/migration/Drawer.md rename to versioned_docs/version-3.0.6/migration/Drawer.md diff --git a/versioned_docs/version-3.0.4/migration/FABs.md b/versioned_docs/version-3.0.6/migration/FABs.md similarity index 100% rename from versioned_docs/version-3.0.4/migration/FABs.md rename to versioned_docs/version-3.0.6/migration/FABs.md diff --git a/versioned_docs/version-3.0.4/migration/FooterTab.md b/versioned_docs/version-3.0.6/migration/FooterTab.md similarity index 100% rename from versioned_docs/version-3.0.4/migration/FooterTab.md rename to versioned_docs/version-3.0.6/migration/FooterTab.md diff --git a/versioned_docs/version-3.0.4/migration/Form.md b/versioned_docs/version-3.0.6/migration/Form.md similarity index 100% rename from versioned_docs/version-3.0.4/migration/Form.md rename to versioned_docs/version-3.0.6/migration/Form.md diff --git a/versioned_docs/version-3.0.4/migration/Guide.md b/versioned_docs/version-3.0.6/migration/Guide.md similarity index 100% rename from versioned_docs/version-3.0.4/migration/Guide.md rename to versioned_docs/version-3.0.6/migration/Guide.md diff --git a/versioned_docs/version-3.0.4/migration/Header.md b/versioned_docs/version-3.0.6/migration/Header.md similarity index 100% rename from versioned_docs/version-3.0.4/migration/Header.md rename to versioned_docs/version-3.0.6/migration/Header.md diff --git a/versioned_docs/version-3.0.4/migration/Icon.md b/versioned_docs/version-3.0.6/migration/Icon.md similarity index 100% rename from versioned_docs/version-3.0.4/migration/Icon.md rename to versioned_docs/version-3.0.6/migration/Icon.md diff --git a/versioned_docs/version-3.0.4/migration/Layout.md b/versioned_docs/version-3.0.6/migration/Layout.md similarity index 100% rename from versioned_docs/version-3.0.4/migration/Layout.md rename to versioned_docs/version-3.0.6/migration/Layout.md diff --git a/versioned_docs/version-3.0.4/migration/List.md b/versioned_docs/version-3.0.6/migration/List.md similarity index 100% rename from versioned_docs/version-3.0.4/migration/List.md rename to versioned_docs/version-3.0.6/migration/List.md diff --git a/versioned_docs/version-3.0.4/migration/Picker.md b/versioned_docs/version-3.0.6/migration/Picker.md similarity index 100% rename from versioned_docs/version-3.0.4/migration/Picker.md rename to versioned_docs/version-3.0.6/migration/Picker.md diff --git a/versioned_docs/version-3.0.4/migration/Radio Button.md b/versioned_docs/version-3.0.6/migration/Radio Button.md similarity index 100% rename from versioned_docs/version-3.0.4/migration/Radio Button.md rename to versioned_docs/version-3.0.6/migration/Radio Button.md diff --git a/versioned_docs/version-3.0.4/migration/Searchbar.md b/versioned_docs/version-3.0.6/migration/Searchbar.md similarity index 100% rename from versioned_docs/version-3.0.4/migration/Searchbar.md rename to versioned_docs/version-3.0.6/migration/Searchbar.md diff --git a/versioned_docs/version-3.0.4/migration/Segment.md b/versioned_docs/version-3.0.6/migration/Segment.md similarity index 100% rename from versioned_docs/version-3.0.4/migration/Segment.md rename to versioned_docs/version-3.0.6/migration/Segment.md diff --git a/versioned_docs/version-3.0.4/migration/Spinner.md b/versioned_docs/version-3.0.6/migration/Spinner.md similarity index 100% rename from versioned_docs/version-3.0.4/migration/Spinner.md rename to versioned_docs/version-3.0.6/migration/Spinner.md diff --git a/versioned_docs/version-3.0.4/migration/SwipeList.md b/versioned_docs/version-3.0.6/migration/SwipeList.md similarity index 100% rename from versioned_docs/version-3.0.4/migration/SwipeList.md rename to versioned_docs/version-3.0.6/migration/SwipeList.md diff --git a/versioned_docs/version-3.0.4/migration/Tabs.md b/versioned_docs/version-3.0.6/migration/Tabs.md similarity index 100% rename from versioned_docs/version-3.0.4/migration/Tabs.md rename to versioned_docs/version-3.0.6/migration/Tabs.md diff --git a/versioned_docs/version-3.0.4/migration/Thumbnail.md b/versioned_docs/version-3.0.6/migration/Thumbnail.md similarity index 100% rename from versioned_docs/version-3.0.4/migration/Thumbnail.md rename to versioned_docs/version-3.0.6/migration/Thumbnail.md diff --git a/versioned_docs/version-3.0.4/migration/Toast.md b/versioned_docs/version-3.0.6/migration/Toast.md similarity index 100% rename from versioned_docs/version-3.0.4/migration/Toast.md rename to versioned_docs/version-3.0.6/migration/Toast.md diff --git a/versioned_docs/version-3.0.4/migration/Typography.md b/versioned_docs/version-3.0.6/migration/Typography.md similarity index 100% rename from versioned_docs/version-3.0.4/migration/Typography.md rename to versioned_docs/version-3.0.6/migration/Typography.md diff --git a/versioned_docs/version-3.0.4/modal.md b/versioned_docs/version-3.0.6/modal.md similarity index 98% rename from versioned_docs/version-3.0.4/modal.md rename to versioned_docs/version-3.0.6/modal.md index df0f0dd3e..1748506c4 100644 --- a/versioned_docs/version-3.0.4/modal.md +++ b/versioned_docs/version-3.0.6/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.0.4/nativebase-factory.md b/versioned_docs/version-3.0.6/nativebase-factory.md similarity index 100% rename from versioned_docs/version-3.0.4/nativebase-factory.md rename to versioned_docs/version-3.0.6/nativebase-factory.md diff --git a/versioned_docs/version-3.0.4/nativebase-formik-ui.md b/versioned_docs/version-3.0.6/nativebase-formik-ui.md similarity index 100% rename from versioned_docs/version-3.0.4/nativebase-formik-ui.md rename to versioned_docs/version-3.0.6/nativebase-formik-ui.md diff --git a/versioned_docs/version-3.0.4/nativebase.mdx b/versioned_docs/version-3.0.6/nativebase.mdx similarity index 97% rename from versioned_docs/version-3.0.4/nativebase.mdx rename to versioned_docs/version-3.0.6/nativebase.mdx index 67326a804..7f3c5e962 100644 --- a/versioned_docs/version-3.0.4/nativebase.mdx +++ b/versioned_docs/version-3.0.6/nativebase.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';
diff --git a/versioned_docs/version-3.0.4/numberInput.md b/versioned_docs/version-3.0.6/numberInput.md similarity index 100% rename from versioned_docs/version-3.0.4/numberInput.md rename to versioned_docs/version-3.0.6/numberInput.md diff --git a/versioned_docs/version-3.0.4/overlay.md b/versioned_docs/version-3.0.6/overlay.md similarity index 100% rename from versioned_docs/version-3.0.4/overlay.md rename to versioned_docs/version-3.0.6/overlay.md diff --git a/versioned_docs/version-3.0.4/pagination.md b/versioned_docs/version-3.0.6/pagination.md similarity index 100% rename from versioned_docs/version-3.0.4/pagination.md rename to versioned_docs/version-3.0.6/pagination.md diff --git a/versioned_docs/version-3.0.4/pinInput.md b/versioned_docs/version-3.0.6/pinInput.md similarity index 100% rename from versioned_docs/version-3.0.4/pinInput.md rename to versioned_docs/version-3.0.6/pinInput.md diff --git a/versioned_docs/version-3.0.4/popOver.md b/versioned_docs/version-3.0.6/popOver.md similarity index 76% rename from versioned_docs/version-3.0.4/popOver.md rename to versioned_docs/version-3.0.6/popOver.md index c1908d9f5..211d69be5 100644 --- a/versioned_docs/version-3.0.4/popOver.md +++ b/versioned_docs/version-3.0.6/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. @@ -85,10 +85,10 @@ Adheres to the [Dialog WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria- ### Keyboard Interactions -| Name | Description | -| ----------- | ------------------------------------------------------ | -| Space | Opens/closes the popover. | -| Enter | Opens/closes the popover. | -| Tab | Moves focus to the next focusable element. | -| Shift + Tab | Moves focus to the previous focusable element. | -| Esc | Closes the popover and moves focus to Popover.Trigger. | +| Name | Description | +| --------------------|-------------| +| Space | Opens/closes the popover. | +| Enter | Opens/closes the popover. | +| Tab | Moves focus to the next focusable element. | +| Shift + Tab | Moves focus to the previous focusable element. | +| Esc | Closes the popover and moves focus to Popover.Trigger. | \ No newline at end of file diff --git a/versioned_docs/version-3.0.4/presence-transition.md b/versioned_docs/version-3.0.6/presence-transition.md similarity index 100% rename from versioned_docs/version-3.0.4/presence-transition.md rename to versioned_docs/version-3.0.6/presence-transition.md diff --git a/versioned_docs/version-3.0.4/pressable.md b/versioned_docs/version-3.0.6/pressable.md similarity index 100% rename from versioned_docs/version-3.0.4/pressable.md rename to versioned_docs/version-3.0.6/pressable.md diff --git a/versioned_docs/version-3.0.4/progress.md b/versioned_docs/version-3.0.6/progress.md similarity index 95% rename from versioned_docs/version-3.0.4/progress.md rename to versioned_docs/version-3.0.6/progress.md index 9fe5ee80c..c6eabd361 100644 --- a/versioned_docs/version-3.0.4/progress.md +++ b/versioned_docs/version-3.0.6/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.0.4/radio.md b/versioned_docs/version-3.0.6/radio.md similarity index 97% rename from versioned_docs/version-3.0.4/radio.md rename to versioned_docs/version-3.0.6/radio.md index 63485030b..04da350e5 100644 --- a/versioned_docs/version-3.0.4/radio.md +++ b/versioned_docs/version-3.0.6/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.0.4/reactHooksForms.md b/versioned_docs/version-3.0.6/reactHooksForms.md similarity index 100% rename from versioned_docs/version-3.0.4/reactHooksForms.md rename to versioned_docs/version-3.0.6/reactHooksForms.md diff --git a/versioned_docs/version-3.0.4/responsive.md b/versioned_docs/version-3.0.6/responsive.md similarity index 100% rename from versioned_docs/version-3.0.4/responsive.md rename to versioned_docs/version-3.0.6/responsive.md diff --git a/versioned_docs/version-3.0.4/safe-area-view-props.md b/versioned_docs/version-3.0.6/safe-area-view-props.md similarity index 100% rename from versioned_docs/version-3.0.4/safe-area-view-props.md rename to versioned_docs/version-3.0.6/safe-area-view-props.md diff --git a/versioned_docs/version-3.0.4/scrollview.md b/versioned_docs/version-3.0.6/scrollview.md similarity index 100% rename from versioned_docs/version-3.0.4/scrollview.md rename to versioned_docs/version-3.0.6/scrollview.md diff --git a/versioned_docs/version-3.0.4/sectionList.md b/versioned_docs/version-3.0.6/sectionList.md similarity index 100% rename from versioned_docs/version-3.0.4/sectionList.md rename to versioned_docs/version-3.0.6/sectionList.md diff --git a/versioned_docs/version-3.0.4/select.md b/versioned_docs/version-3.0.6/select.md similarity index 99% rename from versioned_docs/version-3.0.4/select.md rename to versioned_docs/version-3.0.6/select.md index cfecd7ead..aceb730d5 100644 --- a/versioned_docs/version-3.0.4/select.md +++ b/versioned_docs/version-3.0.6/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.0.4/setup-provider.md b/versioned_docs/version-3.0.6/setup-provider.md similarity index 100% rename from versioned_docs/version-3.0.4/setup-provider.md rename to versioned_docs/version-3.0.6/setup-provider.md diff --git a/versioned_docs/version-3.0.4/simpleGrid.md b/versioned_docs/version-3.0.6/simpleGrid.md similarity index 100% rename from versioned_docs/version-3.0.4/simpleGrid.md rename to versioned_docs/version-3.0.6/simpleGrid.md diff --git a/versioned_docs/version-3.0.4/skeleton.md b/versioned_docs/version-3.0.6/skeleton.md similarity index 98% rename from versioned_docs/version-3.0.4/skeleton.md rename to versioned_docs/version-3.0.6/skeleton.md index c151432f6..e7427c690 100644 --- a/versioned_docs/version-3.0.4/skeleton.md +++ b/versioned_docs/version-3.0.6/skeleton.md @@ -3,7 +3,7 @@ id: skeleton title: Skeleton --- -import { ComponentTheme } from '../../src/components'; +import { ComponentTheme } from '../src/components'; `Skeleton` is used to display the loading state of a component. diff --git a/versioned_docs/version-3.0.4/slide.md b/versioned_docs/version-3.0.6/slide.md similarity index 100% rename from versioned_docs/version-3.0.4/slide.md rename to versioned_docs/version-3.0.6/slide.md diff --git a/versioned_docs/version-3.0.4/slider.md b/versioned_docs/version-3.0.6/slider.md similarity index 71% rename from versioned_docs/version-3.0.4/slider.md rename to versioned_docs/version-3.0.6/slider.md index b8d94b9e9..0d74ff95f 100644 --- a/versioned_docs/version-3.0.4/slider.md +++ b/versioned_docs/version-3.0.6/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,15 +72,20 @@ 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.0.4/snackBar.md b/versioned_docs/version-3.0.6/snackBar.md similarity index 100% rename from versioned_docs/version-3.0.4/snackBar.md rename to versioned_docs/version-3.0.6/snackBar.md diff --git a/versioned_docs/version-3.0.4/spinner.md b/versioned_docs/version-3.0.6/spinner.md similarity index 100% rename from versioned_docs/version-3.0.4/spinner.md rename to versioned_docs/version-3.0.6/spinner.md diff --git a/versioned_docs/version-3.0.4/stack.md b/versioned_docs/version-3.0.6/stack.md similarity index 100% rename from versioned_docs/version-3.0.4/stack.md rename to versioned_docs/version-3.0.6/stack.md diff --git a/versioned_docs/version-3.0.4/stagger.md b/versioned_docs/version-3.0.6/stagger.md similarity index 100% rename from versioned_docs/version-3.0.4/stagger.md rename to versioned_docs/version-3.0.6/stagger.md diff --git a/versioned_docs/version-3.0.4/stat.md b/versioned_docs/version-3.0.6/stat.md similarity index 100% rename from versioned_docs/version-3.0.4/stat.md rename to versioned_docs/version-3.0.6/stat.md diff --git a/versioned_docs/version-3.0.4/statusBar.md b/versioned_docs/version-3.0.6/statusBar.md similarity index 100% rename from versioned_docs/version-3.0.4/statusBar.md rename to versioned_docs/version-3.0.6/statusBar.md diff --git a/versioned_docs/version-3.0.4/swipableList.md b/versioned_docs/version-3.0.6/swipableList.md similarity index 100% rename from versioned_docs/version-3.0.4/swipableList.md rename to versioned_docs/version-3.0.6/swipableList.md diff --git a/versioned_docs/version-3.0.4/switch.md b/versioned_docs/version-3.0.6/switch.md similarity index 100% rename from versioned_docs/version-3.0.4/switch.md rename to versioned_docs/version-3.0.6/switch.md diff --git a/versioned_docs/version-3.0.4/tabs.md b/versioned_docs/version-3.0.6/tabs.md similarity index 100% rename from versioned_docs/version-3.0.4/tabs.md rename to versioned_docs/version-3.0.6/tabs.md diff --git a/versioned_docs/version-3.0.4/tag.md b/versioned_docs/version-3.0.6/tag.md similarity index 100% rename from versioned_docs/version-3.0.4/tag.md rename to versioned_docs/version-3.0.6/tag.md diff --git a/versioned_docs/version-3.0.4/text.md b/versioned_docs/version-3.0.6/text.md similarity index 91% rename from versioned_docs/version-3.0.4/text.md rename to versioned_docs/version-3.0.6/text.md index 10d3cdfe5..04eca5545 100644 --- a/versioned_docs/version-3.0.4/text.md +++ b/versioned_docs/version-3.0.6/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.0.4/textArea.md b/versioned_docs/version-3.0.6/textArea.md similarity index 90% rename from versioned_docs/version-3.0.4/textArea.md rename to versioned_docs/version-3.0.6/textArea.md index b27635b06..ada0c3196 100644 --- a/versioned_docs/version-3.0.4/textArea.md +++ b/versioned_docs/version-3.0.6/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.0.4/textField.md b/versioned_docs/version-3.0.6/textField.md similarity index 100% rename from versioned_docs/version-3.0.4/textField.md rename to versioned_docs/version-3.0.6/textField.md diff --git a/versioned_docs/version-3.0.4/theme.md b/versioned_docs/version-3.0.6/theme.md similarity index 100% rename from versioned_docs/version-3.0.4/theme.md rename to versioned_docs/version-3.0.6/theme.md diff --git a/versioned_docs/version-3.0.4/toast.md b/versioned_docs/version-3.0.6/toast.md similarity index 97% rename from versioned_docs/version-3.0.4/toast.md rename to versioned_docs/version-3.0.6/toast.md index e0da14f77..94fb032fd 100644 --- a/versioned_docs/version-3.0.4/toast.md +++ b/versioned_docs/version-3.0.6/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.0.4/todo-list.md b/versioned_docs/version-3.0.6/todo-list.md similarity index 100% rename from versioned_docs/version-3.0.4/todo-list.md rename to versioned_docs/version-3.0.6/todo-list.md diff --git a/versioned_docs/version-3.0.4/tooltip.md b/versioned_docs/version-3.0.6/tooltip.md similarity index 73% rename from versioned_docs/version-3.0.4/tooltip.md rename to versioned_docs/version-3.0.6/tooltip.md index 32f30f67a..400a8fe9f 100644 --- a/versioned_docs/version-3.0.4/tooltip.md +++ b/versioned_docs/version-3.0.6/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. @@ -52,12 +52,11 @@ You can pass custom backgroundColor using `bg` or `backgroundColor`, `borderColo ## Accessibility Adheres to the [Tooltip WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-1.1/#tooltip) - ### Keyboard Interactions -| Name | Description | -| ----- | ------------------------------------------ | -| Space | If open, closes the tooltip without delay. | -| Enter | If open, closes the tooltip without delay. | -| Tab | Moves focus to the next focusable element. | -| Esc | If open, closes the tooltip without delay. | +| Name | Description | +| --------------------|-------------| +| Space | If open, closes the tooltip without delay. | +| Enter | If open, closes the tooltip without delay. | +| Tab | Moves focus to the next focusable element. | +| Esc | If open, closes the tooltip without delay. | \ No newline at end of file diff --git a/versioned_docs/version-3.0.4/transition.md b/versioned_docs/version-3.0.6/transition.md similarity index 100% rename from versioned_docs/version-3.0.4/transition.md rename to versioned_docs/version-3.0.6/transition.md diff --git a/versioned_docs/version-3.0.4/typeAhead.md b/versioned_docs/version-3.0.6/typeAhead.md similarity index 100% rename from versioned_docs/version-3.0.4/typeAhead.md rename to versioned_docs/version-3.0.6/typeAhead.md diff --git a/versioned_docs/version-3.0.4/useAccessibleColors.md b/versioned_docs/version-3.0.6/useAccessibleColors.md similarity index 100% rename from versioned_docs/version-3.0.4/useAccessibleColors.md rename to versioned_docs/version-3.0.6/useAccessibleColors.md diff --git a/versioned_docs/version-3.0.4/useBreakPointValue.md b/versioned_docs/version-3.0.6/useBreakPointValue.md similarity index 100% rename from versioned_docs/version-3.0.4/useBreakPointValue.md rename to versioned_docs/version-3.0.6/useBreakPointValue.md diff --git a/versioned_docs/version-3.0.4/useClipboard.md b/versioned_docs/version-3.0.6/useClipboard.md similarity index 100% rename from versioned_docs/version-3.0.4/useClipboard.md rename to versioned_docs/version-3.0.6/useClipboard.md diff --git a/versioned_docs/version-3.0.4/useColorMode.md b/versioned_docs/version-3.0.6/useColorMode.md similarity index 100% rename from versioned_docs/version-3.0.4/useColorMode.md rename to versioned_docs/version-3.0.6/useColorMode.md diff --git a/versioned_docs/version-3.0.4/useColorModeValue.md b/versioned_docs/version-3.0.6/useColorModeValue.md similarity index 100% rename from versioned_docs/version-3.0.4/useColorModeValue.md rename to versioned_docs/version-3.0.6/useColorModeValue.md diff --git a/versioned_docs/version-3.0.4/useContrastText.md b/versioned_docs/version-3.0.6/useContrastText.md similarity index 100% rename from versioned_docs/version-3.0.4/useContrastText.md rename to versioned_docs/version-3.0.6/useContrastText.md diff --git a/versioned_docs/version-3.0.4/useDisclosure.md b/versioned_docs/version-3.0.6/useDisclosure.md similarity index 100% rename from versioned_docs/version-3.0.4/useDisclosure.md rename to versioned_docs/version-3.0.6/useDisclosure.md diff --git a/versioned_docs/version-3.0.4/useMediaQuery.md b/versioned_docs/version-3.0.6/useMediaQuery.md similarity index 100% rename from versioned_docs/version-3.0.4/useMediaQuery.md rename to versioned_docs/version-3.0.6/useMediaQuery.md diff --git a/versioned_docs/version-3.0.4/usePopOver.md b/versioned_docs/version-3.0.6/usePopOver.md similarity index 100% rename from versioned_docs/version-3.0.4/usePopOver.md rename to versioned_docs/version-3.0.6/usePopOver.md diff --git a/versioned_docs/version-3.0.4/useTheme.md b/versioned_docs/version-3.0.6/useTheme.md similarity index 100% rename from versioned_docs/version-3.0.4/useTheme.md rename to versioned_docs/version-3.0.6/useTheme.md diff --git a/versioned_docs/version-3.0.4/useToken.md b/versioned_docs/version-3.0.6/useToken.md similarity index 100% rename from versioned_docs/version-3.0.4/useToken.md rename to versioned_docs/version-3.0.6/useToken.md diff --git a/versioned_docs/version-3.0.4/utility-first.mdx b/versioned_docs/version-3.0.6/utility-first.mdx similarity index 97% rename from versioned_docs/version-3.0.4/utility-first.mdx rename to versioned_docs/version-3.0.6/utility-first.mdx index 9de7d2ddb..ebd5645c6 100644 --- a/versioned_docs/version-3.0.4/utility-first.mdx +++ b/versioned_docs/version-3.0.6/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. diff --git a/versioned_docs/version-3.0.4/utilityProps.md b/versioned_docs/version-3.0.6/utilityProps.md similarity index 100% rename from versioned_docs/version-3.0.4/utilityProps.md rename to versioned_docs/version-3.0.6/utilityProps.md diff --git a/versioned_docs/version-3.0.4/view.md b/versioned_docs/version-3.0.6/view.md similarity index 100% rename from versioned_docs/version-3.0.4/view.md rename to versioned_docs/version-3.0.6/view.md diff --git a/versioned_docs/version-3.0.4/wrap.md b/versioned_docs/version-3.0.6/wrap.md similarity index 100% rename from versioned_docs/version-3.0.4/wrap.md rename to versioned_docs/version-3.0.6/wrap.md diff --git a/versioned_sidebars/version-3.0.6-sidebars.json b/versioned_sidebars/version-3.0.6-sidebars.json new file mode 100644 index 000000000..6a8a7a3b6 --- /dev/null +++ b/versioned_sidebars/version-3.0.6-sidebars.json @@ -0,0 +1,663 @@ +{ + "version-3.0.6/componentsSidebar": [ + { + "collapsed": false, + "type": "category", + "label": "Introduction", + "items": [ + { + "type": "doc", + "id": "version-3.0.6/nativebase" + }, + { + "type": "doc", + "id": "version-3.0.6/installation" + }, + { + "type": "doc", + "id": "version-3.0.6/setup-provider" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Core concepts", + "items": [ + { + "type": "doc", + "id": "version-3.0.6/utility-first" + }, + { + "type": "doc", + "id": "version-3.0.6/design-tokens" + }, + { + "type": "doc", + "id": "version-3.0.6/interaction-styles" + }, + { + "type": "doc", + "id": "version-3.0.6/responsive-style" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Features", + "items": [ + { + "type": "doc", + "id": "version-3.0.6/utility-props" + }, + { + "type": "doc", + "id": "version-3.0.6/color-mode" + }, + { + "type": "doc", + "id": "version-3.0.6/nativebase-factory" + }, + { + "type": "doc", + "id": "version-3.0.6/safe-area-view-props" + }, + { + "type": "doc", + "id": "version-3.0.6/accessibility" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Theme", + "items": [ + { + "type": "doc", + "id": "version-3.0.6/default-theme" + }, + { + "type": "doc", + "id": "version-3.0.6/customizingTheme" + }, + { + "type": "doc", + "id": "version-3.0.6/customizingFonts" + }, + { + "type": "doc", + "id": "version-3.0.6/customizingComponents" + }, + { + "type": "doc", + "id": "version-3.0.6/darkMode" + }, + { + "type": "doc", + "id": "version-3.0.6/breakpoint" + }, + { + "type": "doc", + "id": "version-3.0.6/theme" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Layout", + "items": [ + { + "type": "doc", + "id": "version-3.0.6/box" + }, + { + "type": "doc", + "id": "version-3.0.6/center" + }, + { + "type": "doc", + "id": "version-3.0.6/container" + }, + { + "type": "doc", + "id": "version-3.0.6/flex" + }, + { + "type": "doc", + "id": "version-3.0.6/hStack" + }, + { + "type": "doc", + "id": "version-3.0.6/stack" + }, + { + "type": "doc", + "id": "version-3.0.6/VStack" + }, + { + "type": "doc", + "id": "version-3.0.6/ZStack" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Forms", + "items": [ + { + "type": "doc", + "id": "version-3.0.6/button" + }, + { + "type": "doc", + "id": "version-3.0.6/pressable" + }, + { + "type": "doc", + "id": "version-3.0.6/checkBox" + }, + { + "type": "doc", + "id": "version-3.0.6/formControl" + }, + { + "type": "doc", + "id": "version-3.0.6/iconButton" + }, + { + "type": "doc", + "id": "version-3.0.6/input" + }, + { + "type": "doc", + "id": "version-3.0.6/link" + }, + { + "type": "doc", + "id": "version-3.0.6/radio" + }, + { + "type": "doc", + "id": "version-3.0.6/select" + }, + { + "type": "doc", + "id": "version-3.0.6/slider" + }, + { + "type": "doc", + "id": "version-3.0.6/switch" + }, + { + "type": "doc", + "id": "version-3.0.6/textArea" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Data Display", + "items": [ + { + "type": "doc", + "id": "version-3.0.6/badge" + }, + { + "type": "doc", + "id": "version-3.0.6/divider" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Feedback", + "items": [ + { + "type": "doc", + "id": "version-3.0.6/alert" + }, + { + "type": "doc", + "id": "version-3.0.6/progress" + }, + { + "type": "doc", + "id": "version-3.0.6/spinner" + }, + { + "type": "doc", + "id": "version-3.0.6/toast" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Typography", + "items": [ + { + "type": "doc", + "id": "version-3.0.6/text" + }, + { + "type": "doc", + "id": "version-3.0.6/heading" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Overlay", + "items": [ + { + "type": "doc", + "id": "version-3.0.6/alertDialog" + }, + { + "type": "doc", + "id": "version-3.0.6/menu" + }, + { + "type": "doc", + "id": "version-3.0.6/modal" + }, + { + "type": "doc", + "id": "version-3.0.6/popOver" + }, + { + "type": "doc", + "id": "version-3.0.6/tooltip" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Disclosure", + "items": [ + { + "type": "doc", + "id": "version-3.0.6/actionSheet" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Media and Icons", + "items": [ + { + "type": "doc", + "id": "version-3.0.6/avatar" + }, + { + "type": "doc", + "id": "version-3.0.6/icon" + }, + { + "type": "doc", + "id": "version-3.0.6/image" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Transition", + "items": [ + { + "type": "doc", + "id": "version-3.0.6/presence-transition" + }, + { + "type": "doc", + "id": "version-3.0.6/slide" + }, + { + "type": "doc", + "id": "version-3.0.6/stagger" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Others", + "items": [ + { + "type": "doc", + "id": "version-3.0.6/FAB" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "ReactNative Components", + "items": [ + { + "type": "doc", + "id": "version-3.0.6/scrollview" + }, + { + "type": "doc", + "id": "version-3.0.6/view" + }, + { + "type": "doc", + "id": "version-3.0.6/keyboardAvoidingView" + }, + { + "type": "doc", + "id": "version-3.0.6/statusBar" + }, + { + "type": "doc", + "id": "version-3.0.6/flatList" + }, + { + "type": "doc", + "id": "version-3.0.6/sectionList" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Hooks", + "items": [ + { + "type": "doc", + "id": "version-3.0.6/use-disclosure" + }, + { + "type": "doc", + "id": "version-3.0.6/use-breakPoint-value" + }, + { + "type": "doc", + "id": "version-3.0.6/use-clipboard" + }, + { + "type": "doc", + "id": "version-3.0.6/use-media-query" + }, + { + "type": "doc", + "id": "version-3.0.6/use-theme" + }, + { + "type": "doc", + "id": "version-3.0.6/use-token" + }, + { + "type": "doc", + "id": "version-3.0.6/use-color-mode" + }, + { + "type": "doc", + "id": "version-3.0.6/use-color-mode-value" + }, + { + "type": "doc", + "id": "version-3.0.6/use-contrast-text" + }, + { + "type": "doc", + "id": "version-3.0.6/use-accessible-colors" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Examples", + "items": [ + { + "type": "doc", + "id": "version-3.0.6/todo-example" + }, + { + "type": "doc", + "id": "version-3.0.6/kitchen-sink" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Community Integration", + "items": [ + { + "type": "doc", + "id": "version-3.0.6/react-hook-forms" + }, + { + "type": "doc", + "id": "version-3.0.6/nativebase-formik-ui" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Recipes", + "items": [ + { + "collapsed": true, + "type": "category", + "label": "Designs", + "items": [ + { + "type": "doc", + "id": "version-3.0.6/buildingAppBar" + }, + { + "type": "doc", + "id": "version-3.0.6/buildingCard" + }, + { + "type": "doc", + "id": "version-3.0.6/buildingDrawerNavigation" + }, + { + "type": "doc", + "id": "version-3.0.6/buildingTabView" + }, + { + "type": "doc", + "id": "version-3.0.6/buildingSwipeList" + } + ] + }, + { + "collapsed": true, + "type": "category", + "label": "Forms", + "items": [ + { + "type": "doc", + "id": "version-3.0.6/form" + }, + { + "type": "doc", + "id": "version-3.0.6/loginsignupforms" + }, + { + "type": "doc", + "id": "version-3.0.6/buildingSearchBar" + } + ] + }, + { + "collapsed": true, + "type": "category", + "label": "Layout", + "items": [ + { + "type": "doc", + "id": "version-3.0.6/appDrawer" + }, + { + "type": "doc", + "id": "version-3.0.6/buildingFooterTabs" + } + ] + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Migration", + "items": [ + { + "type": "doc", + "id": "version-3.0.6/migration/Guide" + }, + { + "collapsed": true, + "type": "category", + "label": "Components Migration", + "items": [ + { + "type": "doc", + "id": "version-3.0.6/migration/Actionsheet" + }, + { + "type": "doc", + "id": "version-3.0.6/migration/Badge" + }, + { + "type": "doc", + "id": "version-3.0.6/migration/Button" + }, + { + "type": "doc", + "id": "version-3.0.6/migration/Card" + }, + { + "type": "doc", + "id": "version-3.0.6/migration/Checkbox" + }, + { + "type": "doc", + "id": "version-3.0.6/migration/DatePicker" + }, + { + "type": "doc", + "id": "version-3.0.6/migration/DeckSwiper" + }, + { + "type": "doc", + "id": "version-3.0.6/migration/Drawer" + }, + { + "type": "doc", + "id": "version-3.0.6/migration/FABs" + }, + { + "type": "doc", + "id": "version-3.0.6/migration/FooterTab" + }, + { + "type": "doc", + "id": "version-3.0.6/migration/Form" + }, + { + "type": "doc", + "id": "version-3.0.6/migration/Header" + }, + { + "type": "doc", + "id": "version-3.0.6/migration/Icon" + }, + { + "type": "doc", + "id": "version-3.0.6/migration/Layout" + }, + { + "type": "doc", + "id": "version-3.0.6/migration/Picker" + }, + { + "type": "doc", + "id": "version-3.0.6/migration/Radio Button" + }, + { + "type": "doc", + "id": "version-3.0.6/migration/Searchbar" + }, + { + "type": "doc", + "id": "version-3.0.6/migration/Segment" + }, + { + "type": "doc", + "id": "version-3.0.6/migration/Spinner" + }, + { + "type": "doc", + "id": "version-3.0.6/migration/SwipeList" + }, + { + "type": "doc", + "id": "version-3.0.6/migration/Tabs" + }, + { + "type": "doc", + "id": "version-3.0.6/migration/Thumbnail" + }, + { + "type": "doc", + "id": "version-3.0.6/migration/Toast" + }, + { + "type": "doc", + "id": "version-3.0.6/migration/Typography" + } + ] + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "More", + "items": [ + { + "type": "doc", + "id": "version-3.0.6/changelog" + }, + { + "type": "doc", + "id": "version-3.0.6/faq" + } + ] + }, + { + "type": "doc", + "id": "version-3.0.6/install-expo" + }, + { + "type": "doc", + "id": "version-3.0.6/install-rn" + }, + { + "type": "doc", + "id": "version-3.0.6/install-cra" + }, + { + "type": "doc", + "id": "version-3.0.6/install-next" + } + ] +} diff --git a/versions.json b/versions.json index 5b922af27..53bf06d69 100644 --- a/versions.json +++ b/versions.json @@ -1,5 +1,5 @@ [ - "3.0.4", + "3.0.6", "3.0.3", "3.0.0", "3.0.0-next.40", From 78238fbdc2f0cfd8543bf5418e83521c261de71c Mon Sep 17 00:00:00 2001 From: Himanshu Satija Date: Fri, 16 Jul 2021 13:06:23 +0530 Subject: [PATCH 06/21] 3.0.6 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 126469d37..2df80a1af 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "docs-v-2", - "version": "3.0.4", + "version": "3.0.6", "private": true, "scripts": { "docusaurus": "docusaurus", From ab5d1dd9edb5b430d1ca960cc5ec4a8256eaa864 Mon Sep 17 00:00:00 2001 From: Himanshu Satija Date: Fri, 16 Jul 2021 13:10:53 +0530 Subject: [PATCH 07/21] fix path in versioned_docs --- versioned_docs/version-3.0.6/FAB.md | 2 +- versioned_docs/version-3.0.6/actionSheet.md | 2 +- versioned_docs/version-3.0.6/alert.md | 2 +- versioned_docs/version-3.0.6/alertDialog.md | 2 +- versioned_docs/version-3.0.6/avatar.md | 2 +- versioned_docs/version-3.0.6/badge.md | 2 +- versioned_docs/version-3.0.6/button.mdx | 2 +- versioned_docs/version-3.0.6/checkBox.md | 2 +- versioned_docs/version-3.0.6/divider.md | 2 +- versioned_docs/version-3.0.6/formControl.md | 2 +- versioned_docs/version-3.0.6/heading.md | 2 +- versioned_docs/version-3.0.6/iconButton.md | 2 +- versioned_docs/version-3.0.6/input.md | 2 +- versioned_docs/version-3.0.6/install-cra.mdx | 2 +- versioned_docs/version-3.0.6/install-expo.mdx | 2 +- versioned_docs/version-3.0.6/install-next.mdx | 2 +- versioned_docs/version-3.0.6/install-rn.mdx | 2 +- versioned_docs/version-3.0.6/installation.mdx | 2 +- versioned_docs/version-3.0.6/kitchen-sink.mdx | 2 +- versioned_docs/version-3.0.6/link.md | 2 +- versioned_docs/version-3.0.6/menu.md | 2 +- versioned_docs/version-3.0.6/modal.md | 2 +- versioned_docs/version-3.0.6/nativebase.mdx | 2 +- versioned_docs/version-3.0.6/popOver.md | 2 +- versioned_docs/version-3.0.6/progress.md | 2 +- versioned_docs/version-3.0.6/radio.md | 2 +- versioned_docs/version-3.0.6/select.md | 2 +- versioned_docs/version-3.0.6/skeleton.md | 2 +- versioned_docs/version-3.0.6/slider.md | 2 +- versioned_docs/version-3.0.6/text.md | 2 +- versioned_docs/version-3.0.6/textArea.md | 2 +- versioned_docs/version-3.0.6/toast.md | 2 +- versioned_docs/version-3.0.6/tooltip.md | 2 +- versioned_docs/version-3.0.6/utility-first.mdx | 4 ++-- 34 files changed, 35 insertions(+), 35 deletions(-) diff --git a/versioned_docs/version-3.0.6/FAB.md b/versioned_docs/version-3.0.6/FAB.md index 1dddda32b..b2da69276 100644 --- a/versioned_docs/version-3.0.6/FAB.md +++ b/versioned_docs/version-3.0.6/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.0.6/actionSheet.md b/versioned_docs/version-3.0.6/actionSheet.md index fb2b9f8e7..c3c21288d 100644 --- a/versioned_docs/version-3.0.6/actionSheet.md +++ b/versioned_docs/version-3.0.6/actionSheet.md @@ -3,7 +3,7 @@ id: actionSheet 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.0.6/alert.md b/versioned_docs/version-3.0.6/alert.md index f8e2766cd..a56754e77 100644 --- a/versioned_docs/version-3.0.6/alert.md +++ b/versioned_docs/version-3.0.6/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. diff --git a/versioned_docs/version-3.0.6/alertDialog.md b/versioned_docs/version-3.0.6/alertDialog.md index 2dada0110..0d663fcb9 100644 --- a/versioned_docs/version-3.0.6/alertDialog.md +++ b/versioned_docs/version-3.0.6/alertDialog.md @@ -3,7 +3,7 @@ id: alertDialog 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. diff --git a/versioned_docs/version-3.0.6/avatar.md b/versioned_docs/version-3.0.6/avatar.md index a0b5f1913..dff7875cc 100644 --- a/versioned_docs/version-3.0.6/avatar.md +++ b/versioned_docs/version-3.0.6/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.0.6/badge.md b/versioned_docs/version-3.0.6/badge.md index 23636b2ae..607a80451 100644 --- a/versioned_docs/version-3.0.6/badge.md +++ b/versioned_docs/version-3.0.6/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.0.6/button.mdx b/versioned_docs/version-3.0.6/button.mdx index ce48491f3..c138b3d29 100644 --- a/versioned_docs/version-3.0.6/button.mdx +++ b/versioned_docs/version-3.0.6/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.0.6/checkBox.md b/versioned_docs/version-3.0.6/checkBox.md index fc54f268c..81a7c5e6c 100644 --- a/versioned_docs/version-3.0.6/checkBox.md +++ b/versioned_docs/version-3.0.6/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.0.6/divider.md b/versioned_docs/version-3.0.6/divider.md index a6bd0c33c..70f897268 100644 --- a/versioned_docs/version-3.0.6/divider.md +++ b/versioned_docs/version-3.0.6/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.0.6/formControl.md b/versioned_docs/version-3.0.6/formControl.md index 9d26b7649..560499ffd 100644 --- a/versioned_docs/version-3.0.6/formControl.md +++ b/versioned_docs/version-3.0.6/formControl.md @@ -3,7 +3,7 @@ id: formControl 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.0.6/heading.md b/versioned_docs/version-3.0.6/heading.md index 40a96a759..971b44a20 100644 --- a/versioned_docs/version-3.0.6/heading.md +++ b/versioned_docs/version-3.0.6/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.0.6/iconButton.md b/versioned_docs/version-3.0.6/iconButton.md index dc7ce443a..1bc45de4b 100644 --- a/versioned_docs/version-3.0.6/iconButton.md +++ b/versioned_docs/version-3.0.6/iconButton.md @@ -3,7 +3,7 @@ id: iconButton 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.0.6/input.md b/versioned_docs/version-3.0.6/input.md index 641f15c50..9dcf9e138 100644 --- a/versioned_docs/version-3.0.6/input.md +++ b/versioned_docs/version-3.0.6/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.0.6/install-cra.mdx b/versioned_docs/version-3.0.6/install-cra.mdx index 01c435dcd..ba24220f0 100644 --- a/versioned_docs/version-3.0.6/install-cra.mdx +++ b/versioned_docs/version-3.0.6/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'; diff --git a/versioned_docs/version-3.0.6/popOver.md b/versioned_docs/version-3.0.6/popOver.md index 211d69be5..027edd129 100644 --- a/versioned_docs/version-3.0.6/popOver.md +++ b/versioned_docs/version-3.0.6/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. diff --git a/versioned_docs/version-3.0.6/progress.md b/versioned_docs/version-3.0.6/progress.md index c6eabd361..9fe5ee80c 100644 --- a/versioned_docs/version-3.0.6/progress.md +++ b/versioned_docs/version-3.0.6/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.0.6/radio.md b/versioned_docs/version-3.0.6/radio.md index 04da350e5..63485030b 100644 --- a/versioned_docs/version-3.0.6/radio.md +++ b/versioned_docs/version-3.0.6/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.0.6/select.md b/versioned_docs/version-3.0.6/select.md index aceb730d5..cfecd7ead 100644 --- a/versioned_docs/version-3.0.6/select.md +++ b/versioned_docs/version-3.0.6/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.0.6/skeleton.md b/versioned_docs/version-3.0.6/skeleton.md index e7427c690..c151432f6 100644 --- a/versioned_docs/version-3.0.6/skeleton.md +++ b/versioned_docs/version-3.0.6/skeleton.md @@ -3,7 +3,7 @@ id: skeleton title: Skeleton --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; `Skeleton` is used to display the loading state of a component. diff --git a/versioned_docs/version-3.0.6/slider.md b/versioned_docs/version-3.0.6/slider.md index 0d74ff95f..8c2d7365d 100644 --- a/versioned_docs/version-3.0.6/slider.md +++ b/versioned_docs/version-3.0.6/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. diff --git a/versioned_docs/version-3.0.6/text.md b/versioned_docs/version-3.0.6/text.md index 04eca5545..10d3cdfe5 100644 --- a/versioned_docs/version-3.0.6/text.md +++ b/versioned_docs/version-3.0.6/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.0.6/textArea.md b/versioned_docs/version-3.0.6/textArea.md index ada0c3196..b27635b06 100644 --- a/versioned_docs/version-3.0.6/textArea.md +++ b/versioned_docs/version-3.0.6/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.0.6/toast.md b/versioned_docs/version-3.0.6/toast.md index 94fb032fd..e0da14f77 100644 --- a/versioned_docs/version-3.0.6/toast.md +++ b/versioned_docs/version-3.0.6/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.0.6/tooltip.md b/versioned_docs/version-3.0.6/tooltip.md index 400a8fe9f..78cecc97e 100644 --- a/versioned_docs/version-3.0.6/tooltip.md +++ b/versioned_docs/version-3.0.6/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.0.6/utility-first.mdx b/versioned_docs/version-3.0.6/utility-first.mdx index ebd5645c6..9de7d2ddb 100644 --- a/versioned_docs/version-3.0.6/utility-first.mdx +++ b/versioned_docs/version-3.0.6/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. From 3e89b37d81084042cb6cde386ac997c334edd8a0 Mon Sep 17 00:00:00 2001 From: amars29 Date: Tue, 20 Jul 2021 16:38:28 +0530 Subject: [PATCH 08/21] replacing empty string with null in SnackPlayer dependencies --- docs/form.md | 4 ++-- remark-snackplayer/index.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/form.md b/docs/form.md index 726d11383..c2b6ca94d 100644 --- a/docs/form.md +++ b/docs/form.md @@ -125,7 +125,7 @@ export default function () { Create a button to validate and submit the form. -```SnackPlayer name=Form%20Example(Validate and Submit) +```SnackPlayer name=Form%20Example(Validate%20and%20Submit) import React from 'react'; import { VStack, @@ -196,4 +196,4 @@ export default function () { ## Community Integration -NativeBase can be used with other popular Form libraries like [`Formik`](nativebase-formik-ui.md) and [`React Hook Forms`](reactHooksForm.md) as well. For more details checkout Community Integration section of the docs. +NativeBase can be used with other popular Form libraries like [`Formik`](nativebase-formik-ui.md) and [`React Hook Forms`](reactHooksForms.md) as well. For more details checkout Community Integration section of the docs. diff --git a/remark-snackplayer/index.js b/remark-snackplayer/index.js index c7bb3190e..dd28ce315 100644 --- a/remark-snackplayer/index.js +++ b/remark-snackplayer/index.js @@ -51,7 +51,7 @@ const processNode = (node, parent) => { // Generate Node for SnackPlayer let dependencies = `react-is,expo-font,native-base@${NBversion},styled-system,expo-constants,react-native-web,react-native-safe-area-context,react-native-svg,styled-components,@expo/vector-icons,expo-linear-gradient`; dependencies = `${dependencies},${ - simplifedMeta.dependencies ? simplifedMeta.dependencies : '' + simplifedMeta.dependencies ? simplifedMeta.dependencies : null }`; if (name.split(' ')[0] === 'Formik') { From c2c3df36c27e659cf27be1987c6f494dc1e6749e Mon Sep 17 00:00:00 2001 From: amars29 Date: Tue, 20 Jul 2021 17:36:09 +0530 Subject: [PATCH 09/21] fixed width of bash in install-next and added safeara props in loginsignup examples --- docs/install-cra.mdx | 5 ++++- docs/loginsignupforms.md | 2 ++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/docs/install-cra.mdx b/docs/install-cra.mdx index 01c435dcd..3c319f38b 100644 --- a/docs/install-cra.mdx +++ b/docs/install-cra.mdx @@ -57,19 +57,22 @@ cd my-app ]}> +
```bash yarn add react-native-web native-base react-native-svg styled-components styled-system react-native-safe-area-context ``` - +
 +
```bash npm install react-native-web native-base react-native-svg styled-components styled-system react-native-safe-area-context ``` +
 diff --git a/docs/loginsignupforms.md b/docs/loginsignupforms.md index ea7c4c056..fc403d08f 100644 --- a/docs/loginsignupforms.md +++ b/docs/loginsignupforms.md @@ -31,6 +31,7 @@ export default function App() { return ( Date: Wed, 21 Jul 2021 17:44:35 +0530 Subject: [PATCH 10/21] fix: snackplayer is not working on FireFox and safari browser --- nb-plugins/component-snackplayer/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/nb-plugins/component-snackplayer/index.js b/nb-plugins/component-snackplayer/index.js index 5b848a917..bb9cb98d1 100644 --- a/nb-plugins/component-snackplayer/index.js +++ b/nb-plugins/component-snackplayer/index.js @@ -52,7 +52,6 @@ const processNode = (node, parent) => { data-snack-preview="${preview}" data-snack-loading="${loading}" data-snack-dependencies="${dependencies}" - data-snack-sdkversion="40.0.0" >
`, }); From d270445a0d8aa704a5c4a5f6eadc0fe15aeeaafa Mon Sep 17 00:00:00 2001 From: Nishan Bende Date: Wed, 28 Jul 2021 12:35:34 +0530 Subject: [PATCH 11/21] feat: add testing guide --- docs/testing.md | 25 +++++++++++++++++++++++++ sidebars.js | 4 ++++ 2 files changed, 29 insertions(+) create mode 100644 docs/testing.md diff --git a/docs/testing.md b/docs/testing.md new file mode 100644 index 000000000..cfd5b0139 --- /dev/null +++ b/docs/testing.md @@ -0,0 +1,25 @@ +--- +id: testing +title: Testing +--- + +NativeBase works with react-native's jest preset or expo's jest-expo preset. However, there's one thing you'll need to do for it to work as expected. + +### Adding initialWindowMetrics in NativeBaseProvider. + +- NativeBaseProvider uses [SafeAreaContext](https://github.com/th3rdwave/react-native-safe-area-context#testing) which needs initialWindowMetrics to be passed to the Provider while testing. + +Not following the above may lead to an error related to SafeAreaProvider while running `yarn test`. + +To fix the above issue, you can simply pass initialWindowMetrics to NativeBaseProvider in your tests. + +```jsx +const inset = { + frame: { x: 0, y: 0, width: 0, height: 0 }, + insets: { top: 0, left: 0, right: 0, bottom: 0 }, +}; + + + {children} +; +``` diff --git a/sidebars.js b/sidebars.js index 001b6d2dc..5df202aaa 100644 --- a/sidebars.js +++ b/sidebars.js @@ -207,6 +207,10 @@ module.exports = { 'use-accessible-colors', ], }, + { + type: 'doc', + id: 'testing', + }, { type: 'category', label: 'Examples', From 6fe6d8cd94398d4419d153da10ba3851dd6973b1 Mon Sep 17 00:00:00 2001 From: Rohit Singh Date: Mon, 2 Aug 2021 13:56:17 +0530 Subject: [PATCH 12/21] fix: docsearc h --- {docs => unreleased-docs}/Kbd.md | 0 {docs => unreleased-docs}/accordion.md | 0 {docs => unreleased-docs}/appBar.md | 6 +-- {docs => unreleased-docs}/aspectRatio.md | 2 +- {docs => unreleased-docs}/breadCrumb.md | 8 +-- {docs => unreleased-docs}/cascader.md | 0 {docs => unreleased-docs}/circularProgress.md | 0 {docs => unreleased-docs}/closeButton.md | 0 {docs => unreleased-docs}/code.md | 0 {docs => unreleased-docs}/collapse.md | 0 {docs => unreleased-docs}/datePicker.md | 0 unreleased-docs/interaction-styles.md | 4 ++ {docs => unreleased-docs}/numberInput.md | 0 {docs => unreleased-docs}/pagination.md | 0 {docs => unreleased-docs}/pinInput.md | 0 unreleased-docs/platform-styles.md | 0 {docs => unreleased-docs}/simpleGrid.md | 0 {docs => unreleased-docs}/skeleton.md | 0 {docs => unreleased-docs}/snackBar.md | 0 {docs => unreleased-docs}/stat.md | 0 {docs => unreleased-docs}/tabs.md | 0 {docs => unreleased-docs}/tag.md | 0 {docs => unreleased-docs}/typeAhead.md | 0 unreleased-docs/view.md | 54 +++++++++++++++++++ {docs => unreleased-docs}/wrap.md | 0 25 files changed, 66 insertions(+), 8 deletions(-) rename {docs => unreleased-docs}/Kbd.md (100%) rename {docs => unreleased-docs}/accordion.md (100%) rename {docs => unreleased-docs}/appBar.md (89%) rename {docs => unreleased-docs}/aspectRatio.md (96%) rename {docs => unreleased-docs}/breadCrumb.md (95%) rename {docs => unreleased-docs}/cascader.md (100%) rename {docs => unreleased-docs}/circularProgress.md (100%) rename {docs => unreleased-docs}/closeButton.md (100%) rename {docs => unreleased-docs}/code.md (100%) rename {docs => unreleased-docs}/collapse.md (100%) rename {docs => unreleased-docs}/datePicker.md (100%) create mode 100644 unreleased-docs/interaction-styles.md rename {docs => unreleased-docs}/numberInput.md (100%) rename {docs => unreleased-docs}/pagination.md (100%) rename {docs => unreleased-docs}/pinInput.md (100%) create mode 100644 unreleased-docs/platform-styles.md rename {docs => unreleased-docs}/simpleGrid.md (100%) rename {docs => unreleased-docs}/skeleton.md (100%) rename {docs => unreleased-docs}/snackBar.md (100%) rename {docs => unreleased-docs}/stat.md (100%) rename {docs => unreleased-docs}/tabs.md (100%) rename {docs => unreleased-docs}/tag.md (100%) rename {docs => unreleased-docs}/typeAhead.md (100%) create mode 100644 unreleased-docs/view.md rename {docs => unreleased-docs}/wrap.md (100%) diff --git a/docs/Kbd.md b/unreleased-docs/Kbd.md similarity index 100% rename from docs/Kbd.md rename to unreleased-docs/Kbd.md diff --git a/docs/accordion.md b/unreleased-docs/accordion.md similarity index 100% rename from docs/accordion.md rename to unreleased-docs/accordion.md diff --git a/docs/appBar.md b/unreleased-docs/appBar.md similarity index 89% rename from docs/appBar.md rename to unreleased-docs/appBar.md index 583007a50..8984e753a 100644 --- a/docs/appBar.md +++ b/unreleased-docs/appBar.md @@ -78,12 +78,12 @@ export default function () { ### AppBar.Left -Implements [`HStack`](hStack.md), all the props of HStack can be passed. +Implements [`HStack`](hStack.md) , all the props of HStack can be passed. ### AppBar.Content -Implements [`HStack`](hStack.md), all the props of HStack can be passed. +Implements [`HStack`](hStack.md) , all the props of HStack can be passed. ### AppBar.Right -Implements [`HStack`](hStack.md), all the props of HStack can be passed. +Implements [`HStack`](hStack.md) , all the props of HStack can be passed. diff --git a/docs/aspectRatio.md b/unreleased-docs/aspectRatio.md similarity index 96% rename from docs/aspectRatio.md rename to unreleased-docs/aspectRatio.md index 036dfc3f8..9bcb91863 100644 --- a/docs/aspectRatio.md +++ b/unreleased-docs/aspectRatio.md @@ -45,7 +45,7 @@ function Component() { diff --git a/docs/breadCrumb.md b/unreleased-docs/breadCrumb.md similarity index 95% rename from docs/breadCrumb.md rename to unreleased-docs/breadCrumb.md index a0c567378..ce903a92e 100644 --- a/docs/breadCrumb.md +++ b/unreleased-docs/breadCrumb.md @@ -37,7 +37,7 @@ function BreadcrumbComponent () { Home (This is currently active) - + Docs @@ -90,7 +90,7 @@ function BreadcrumbComponent () { Home (This is currently active) - + Docs @@ -138,7 +138,7 @@ function BreadcrumbComponent () { Home (This is currently active) - + Docs @@ -186,7 +186,7 @@ function BreadcrumbComponent () { - + Docs diff --git a/docs/cascader.md b/unreleased-docs/cascader.md similarity index 100% rename from docs/cascader.md rename to unreleased-docs/cascader.md diff --git a/docs/circularProgress.md b/unreleased-docs/circularProgress.md similarity index 100% rename from docs/circularProgress.md rename to unreleased-docs/circularProgress.md diff --git a/docs/closeButton.md b/unreleased-docs/closeButton.md similarity index 100% rename from docs/closeButton.md rename to unreleased-docs/closeButton.md diff --git a/docs/code.md b/unreleased-docs/code.md similarity index 100% rename from docs/code.md rename to unreleased-docs/code.md diff --git a/docs/collapse.md b/unreleased-docs/collapse.md similarity index 100% rename from docs/collapse.md rename to unreleased-docs/collapse.md diff --git a/docs/datePicker.md b/unreleased-docs/datePicker.md similarity index 100% rename from docs/datePicker.md rename to unreleased-docs/datePicker.md diff --git a/unreleased-docs/interaction-styles.md b/unreleased-docs/interaction-styles.md new file mode 100644 index 000000000..77c0e5ad5 --- /dev/null +++ b/unreleased-docs/interaction-styles.md @@ -0,0 +1,4 @@ +--- +id: interaction-styles +title: Adding pressed, hover and focus styles +--- diff --git a/docs/numberInput.md b/unreleased-docs/numberInput.md similarity index 100% rename from docs/numberInput.md rename to unreleased-docs/numberInput.md diff --git a/docs/pagination.md b/unreleased-docs/pagination.md similarity index 100% rename from docs/pagination.md rename to unreleased-docs/pagination.md diff --git a/docs/pinInput.md b/unreleased-docs/pinInput.md similarity index 100% rename from docs/pinInput.md rename to unreleased-docs/pinInput.md diff --git a/unreleased-docs/platform-styles.md b/unreleased-docs/platform-styles.md new file mode 100644 index 000000000..e69de29bb diff --git a/docs/simpleGrid.md b/unreleased-docs/simpleGrid.md similarity index 100% rename from docs/simpleGrid.md rename to unreleased-docs/simpleGrid.md diff --git a/docs/skeleton.md b/unreleased-docs/skeleton.md similarity index 100% rename from docs/skeleton.md rename to unreleased-docs/skeleton.md diff --git a/docs/snackBar.md b/unreleased-docs/snackBar.md similarity index 100% rename from docs/snackBar.md rename to unreleased-docs/snackBar.md diff --git a/docs/stat.md b/unreleased-docs/stat.md similarity index 100% rename from docs/stat.md rename to unreleased-docs/stat.md diff --git a/docs/tabs.md b/unreleased-docs/tabs.md similarity index 100% rename from docs/tabs.md rename to unreleased-docs/tabs.md diff --git a/docs/tag.md b/unreleased-docs/tag.md similarity index 100% rename from docs/tag.md rename to unreleased-docs/tag.md diff --git a/docs/typeAhead.md b/unreleased-docs/typeAhead.md similarity index 100% rename from docs/typeAhead.md rename to unreleased-docs/typeAhead.md diff --git a/unreleased-docs/view.md b/unreleased-docs/view.md new file mode 100644 index 000000000..9f19caf89 --- /dev/null +++ b/unreleased-docs/view.md @@ -0,0 +1,54 @@ +--- +id: view +title: View +--- + +A generic [`View`](https://reactnative.dev/docs/view) from [React Native](https://reactnative.dev/docs/view) + +## Implements + +- [`View`](https://reactnative.dev/docs/view) from [`React Native`](https://reactnative.dev) +- [`color`](https://styled-system.com/api/#color), [`space`](https://styled-system.com/api/#space), [`layout`](https://styled-system.com/api/#layout), [`flexbox`](https://styled-system.com/api/#flexbox), [`position`](https://styled-system.com/api/#flexbox) & [`border`](https://styled-system.com/api/#border) from [`style-system`](https://styled-system.com/) + +## Example + +### Basic + +```SnackPlayer name=View%20Example +import React from "react"; +import { Text, VStack, NativeBaseProvider, View, Center } from "native-base"; + +function ViewComponent() { + return ( + + This is a View + + ); +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Props + +| Name | Type | Description | Default | +| ------------- | ---------------------------------------- | ------------------------------------------------------------------------------------- | ------- | +| shadow | number | Applies box shadow and accepts a number from 0 to 9 | - | +| style | stylesheet | Applies user-defined styles and accepts a stylesheet. | - | +| children | JSX.Element | Renders components as Box children. Accepts a JSX.Element or an array of JSX.Element. | - | +| SafeAreaProps | [SafeAreaProps](safe-area-view-props.md) | Renders components as Box children. Accepts a JSX.Element or an array of JSX.Element. | - | diff --git a/docs/wrap.md b/unreleased-docs/wrap.md similarity index 100% rename from docs/wrap.md rename to unreleased-docs/wrap.md From 2a3c7698339509ed65b85e5f1d98c3a12eced8ba Mon Sep 17 00:00:00 2001 From: Aditya Jamuar Date: Mon, 2 Aug 2021 14:24:48 +0530 Subject: [PATCH 13/21] version bump to v3.0.7 --- nb-plugins/component-snackplayer/index.js | 2 +- package.json | 2 +- remark-snackplayer/index.js | 2 +- versioned_docs/version-3.0.7/FAB.md | 44 ++ versioned_docs/version-3.0.7/VStack.md | 24 + versioned_docs/version-3.0.7/ZStack.md | 23 + versioned_docs/version-3.0.7/accessibility.md | 24 + versioned_docs/version-3.0.7/actionSheet.md | 78 +++ versioned_docs/version-3.0.7/alert.md | 87 +++ versioned_docs/version-3.0.7/alertDialog.md | 157 +++++ versioned_docs/version-3.0.7/appDrawer.md | 57 ++ versioned_docs/version-3.0.7/avatar.md | 76 ++ versioned_docs/version-3.0.7/badge.md | 50 ++ versioned_docs/version-3.0.7/box.md | 138 ++++ versioned_docs/version-3.0.7/breakpoints.md | 37 + .../version-3.0.7/buildingAppBar.md | 48 ++ .../version-3.0.7/buildingDrawerNavigation.md | 174 +++++ .../version-3.0.7/buildingFooterTabs.md | 115 +++ .../version-3.0.7/buildingSearchBar.md | 72 ++ .../version-3.0.7/buildingSwipeList.md | 144 ++++ .../version-3.0.7/buildingTabView.md | 101 +++ versioned_docs/version-3.0.7/builldingCard.md | 58 ++ versioned_docs/version-3.0.7/button.mdx | 84 +++ versioned_docs/version-3.0.7/center.md | 48 ++ versioned_docs/version-3.0.7/changelog.md | 23 + versioned_docs/version-3.0.7/checkBox.md | 104 +++ versioned_docs/version-3.0.7/colorMode.md | 152 ++++ versioned_docs/version-3.0.7/container.md | 57 ++ .../version-3.0.7/customizingComponents.md | 160 +++++ .../version-3.0.7/customizingFonts.md | 87 +++ .../version-3.0.7/customizingTheme.md | 108 +++ versioned_docs/version-3.0.7/darkMode.md | 89 +++ versioned_docs/version-3.0.7/default-theme.md | 212 ++++++ versioned_docs/version-3.0.7/design-tokens.md | 69 ++ versioned_docs/version-3.0.7/divider.md | 56 ++ versioned_docs/version-3.0.7/faq.md | 6 + versioned_docs/version-3.0.7/flatList.md | 18 + versioned_docs/version-3.0.7/flex.md | 44 ++ versioned_docs/version-3.0.7/form.md | 199 ++++++ versioned_docs/version-3.0.7/formControl.md | 52 ++ versioned_docs/version-3.0.7/hStack.md | 24 + versioned_docs/version-3.0.7/heading.md | 56 ++ versioned_docs/version-3.0.7/icon.md | 54 ++ versioned_docs/version-3.0.7/iconButton.md | 43 ++ versioned_docs/version-3.0.7/image.md | 49 ++ versioned_docs/version-3.0.7/input.md | 76 ++ versioned_docs/version-3.0.7/install-cra.mdx | 131 ++++ versioned_docs/version-3.0.7/install-expo.mdx | 103 +++ versioned_docs/version-3.0.7/install-next.mdx | 263 +++++++ versioned_docs/version-3.0.7/install-rn.mdx | 97 +++ versioned_docs/version-3.0.7/installation.mdx | 30 + .../version-3.0.7/interaction-styles.mdx | 225 ++++++ .../version-3.0.7/keyboardAvoidingView.md | 18 + versioned_docs/version-3.0.7/kitchen-sink.mdx | 66 ++ versioned_docs/version-3.0.7/link.md | 68 ++ versioned_docs/version-3.0.7/list.md | 64 ++ .../version-3.0.7/loginsignupforms.md | 219 ++++++ versioned_docs/version-3.0.7/menu.md | 94 +++ .../version-3.0.7/migration/Accordion.md | 89 +++ .../version-3.0.7/migration/Actionsheet.md | 102 +++ .../version-3.0.7/migration/Badge.md | 39 ++ .../version-3.0.7/migration/Button.md | 191 +++++ .../Screenshot_2021-01-22_at_1.15.34_PM.png | Bin 0 -> 9022 bytes .../Screenshot_2021-01-22_at_1.16.25_PM.png | Bin 0 -> 8669 bytes .../Screenshot_2021-01-22_at_1.17.11_PM.png | Bin 0 -> 10048 bytes .../Screenshot_2021-01-22_at_1.20.36_PM.png | Bin 0 -> 9795 bytes .../Screenshot_2021-01-22_at_1.22.36_PM.png | Bin 0 -> 8306 bytes .../Screenshot_2021-01-22_at_1.23.42_PM.png | Bin 0 -> 7841 bytes .../Screenshot_2021-01-22_at_1.32.47_PM.png | Bin 0 -> 9384 bytes .../Screenshot_2021-01-22_at_1.38.15_PM.png | Bin 0 -> 10101 bytes .../Screenshot_2021-01-22_at_12.29.32_PM.png | Bin 0 -> 8297 bytes .../Screenshot_2021-01-22_at_12.53.09_PM.png | Bin 0 -> 8494 bytes .../Screenshot_2021-01-22_at_2.37.09_PM.png | Bin 0 -> 8816 bytes .../Screenshot_2021-01-22_at_2.38.52_PM.png | Bin 0 -> 8409 bytes .../version-3.0.7/migration/Card.md | 86 +++ .../version-3.0.7/migration/Checkbox.md | 49 ++ .../Screenshot_2021-01-22_at_3.09.29_PM.png | Bin 0 -> 10808 bytes .../Screenshot_2021-01-22_at_4.34.08_PM.png | Bin 0 -> 9954 bytes .../version-3.0.7/migration/DatePicker.md | 1 + .../version-3.0.7/migration/DeckSwiper.md | 3 + .../version-3.0.7/migration/Drawer.md | 1 + .../version-3.0.7/migration/FABs.md | 63 ++ .../version-3.0.7/migration/FooterTab.md | 1 + .../version-3.0.7/migration/Form.md | 67 ++ .../version-3.0.7/migration/Guide.md | 19 + .../version-3.0.7/migration/Header.md | 1 + .../version-3.0.7/migration/Icon.md | 75 ++ .../version-3.0.7/migration/Layout.md | 72 ++ .../version-3.0.7/migration/List.md | 0 .../version-3.0.7/migration/Picker.md | 86 +++ .../version-3.0.7/migration/Radio Button.md | 90 +++ .../version-3.0.7/migration/Searchbar.md | 1 + .../version-3.0.7/migration/Segment.md | 2 + .../version-3.0.7/migration/Spinner.md | 42 ++ .../version-3.0.7/migration/SwipeList.md | 1 + .../version-3.0.7/migration/Tabs.md | 62 ++ .../version-3.0.7/migration/Thumbnail.md | 68 ++ .../version-3.0.7/migration/Toast.md | 79 +++ .../version-3.0.7/migration/Typography.md | 34 + versioned_docs/version-3.0.7/modal.md | 92 +++ .../version-3.0.7/nativebase-factory.md | 146 ++++ .../version-3.0.7/nativebase-formik-ui.md | 83 +++ versioned_docs/version-3.0.7/nativebase.mdx | 93 +++ versioned_docs/version-3.0.7/overlay.md | 97 +++ versioned_docs/version-3.0.7/popOver.md | 94 +++ .../version-3.0.7/presence-transition.md | 63 ++ versioned_docs/version-3.0.7/pressable.md | 32 + versioned_docs/version-3.0.7/progress.md | 62 ++ versioned_docs/version-3.0.7/radio.md | 97 +++ .../version-3.0.7/reactHooksForms.md | 565 +++++++++++++++ versioned_docs/version-3.0.7/responsive.md | 135 ++++ .../version-3.0.7/safe-area-view-props.md | 99 +++ versioned_docs/version-3.0.7/scrollview.md | 18 + versioned_docs/version-3.0.7/sectionList.md | 18 + versioned_docs/version-3.0.7/select.md | 87 +++ .../version-3.0.7/setup-provider.md | 129 ++++ versioned_docs/version-3.0.7/slide.md | 38 + versioned_docs/version-3.0.7/slider.md | 86 +++ versioned_docs/version-3.0.7/spinner.md | 32 + versioned_docs/version-3.0.7/stack.md | 18 + versioned_docs/version-3.0.7/stagger.md | 54 ++ versioned_docs/version-3.0.7/statusBar.md | 18 + versioned_docs/version-3.0.7/swipableList.md | 6 + versioned_docs/version-3.0.7/switch.md | 50 ++ versioned_docs/version-3.0.7/text.md | 44 ++ versioned_docs/version-3.0.7/textArea.md | 38 + versioned_docs/version-3.0.7/textField.md | 130 ++++ versioned_docs/version-3.0.7/theme.md | 191 +++++ versioned_docs/version-3.0.7/toast.md | 80 +++ versioned_docs/version-3.0.7/todo-list.md | 113 +++ versioned_docs/version-3.0.7/tooltip.md | 63 ++ versioned_docs/version-3.0.7/transition.md | 289 ++++++++ .../version-3.0.7/useAccessibleColors.md | 58 ++ .../version-3.0.7/useBreakPointValue.md | 44 ++ versioned_docs/version-3.0.7/useClipboard.md | 74 ++ versioned_docs/version-3.0.7/useColorMode.md | 56 ++ .../version-3.0.7/useColorModeValue.md | 52 ++ .../version-3.0.7/useContrastText.md | 97 +++ versioned_docs/version-3.0.7/useDisclosure.md | 77 ++ versioned_docs/version-3.0.7/useMediaQuery.md | 99 +++ versioned_docs/version-3.0.7/usePopOver.md | 75 ++ versioned_docs/version-3.0.7/useTheme.md | 22 + versioned_docs/version-3.0.7/useToken.md | 44 ++ .../version-3.0.7/utility-first.mdx | 218 ++++++ versioned_docs/version-3.0.7/utilityProps.md | 599 ++++++++++++++++ versioned_docs/version-3.0.7/view.md | 18 + .../version-3.0.7-sidebars.json | 663 ++++++++++++++++++ versions.json | 1 + yarn.lock | 8 +- 149 files changed, 11443 insertions(+), 7 deletions(-) create mode 100644 versioned_docs/version-3.0.7/FAB.md create mode 100644 versioned_docs/version-3.0.7/VStack.md create mode 100644 versioned_docs/version-3.0.7/ZStack.md create mode 100644 versioned_docs/version-3.0.7/accessibility.md create mode 100644 versioned_docs/version-3.0.7/actionSheet.md create mode 100644 versioned_docs/version-3.0.7/alert.md create mode 100644 versioned_docs/version-3.0.7/alertDialog.md create mode 100644 versioned_docs/version-3.0.7/appDrawer.md create mode 100644 versioned_docs/version-3.0.7/avatar.md create mode 100644 versioned_docs/version-3.0.7/badge.md create mode 100644 versioned_docs/version-3.0.7/box.md create mode 100644 versioned_docs/version-3.0.7/breakpoints.md create mode 100644 versioned_docs/version-3.0.7/buildingAppBar.md create mode 100644 versioned_docs/version-3.0.7/buildingDrawerNavigation.md create mode 100644 versioned_docs/version-3.0.7/buildingFooterTabs.md create mode 100644 versioned_docs/version-3.0.7/buildingSearchBar.md create mode 100644 versioned_docs/version-3.0.7/buildingSwipeList.md create mode 100644 versioned_docs/version-3.0.7/buildingTabView.md create mode 100644 versioned_docs/version-3.0.7/builldingCard.md create mode 100644 versioned_docs/version-3.0.7/button.mdx create mode 100644 versioned_docs/version-3.0.7/center.md create mode 100644 versioned_docs/version-3.0.7/changelog.md create mode 100644 versioned_docs/version-3.0.7/checkBox.md create mode 100644 versioned_docs/version-3.0.7/colorMode.md create mode 100644 versioned_docs/version-3.0.7/container.md create mode 100644 versioned_docs/version-3.0.7/customizingComponents.md create mode 100644 versioned_docs/version-3.0.7/customizingFonts.md create mode 100644 versioned_docs/version-3.0.7/customizingTheme.md create mode 100644 versioned_docs/version-3.0.7/darkMode.md create mode 100644 versioned_docs/version-3.0.7/default-theme.md create mode 100644 versioned_docs/version-3.0.7/design-tokens.md create mode 100644 versioned_docs/version-3.0.7/divider.md create mode 100644 versioned_docs/version-3.0.7/faq.md create mode 100644 versioned_docs/version-3.0.7/flatList.md create mode 100644 versioned_docs/version-3.0.7/flex.md create mode 100644 versioned_docs/version-3.0.7/form.md create mode 100644 versioned_docs/version-3.0.7/formControl.md create mode 100644 versioned_docs/version-3.0.7/hStack.md create mode 100644 versioned_docs/version-3.0.7/heading.md create mode 100644 versioned_docs/version-3.0.7/icon.md create mode 100644 versioned_docs/version-3.0.7/iconButton.md create mode 100644 versioned_docs/version-3.0.7/image.md create mode 100644 versioned_docs/version-3.0.7/input.md create mode 100644 versioned_docs/version-3.0.7/install-cra.mdx create mode 100644 versioned_docs/version-3.0.7/install-expo.mdx create mode 100644 versioned_docs/version-3.0.7/install-next.mdx create mode 100644 versioned_docs/version-3.0.7/install-rn.mdx create mode 100644 versioned_docs/version-3.0.7/installation.mdx create mode 100644 versioned_docs/version-3.0.7/interaction-styles.mdx create mode 100644 versioned_docs/version-3.0.7/keyboardAvoidingView.md create mode 100644 versioned_docs/version-3.0.7/kitchen-sink.mdx create mode 100644 versioned_docs/version-3.0.7/link.md create mode 100644 versioned_docs/version-3.0.7/list.md create mode 100644 versioned_docs/version-3.0.7/loginsignupforms.md create mode 100644 versioned_docs/version-3.0.7/menu.md create mode 100644 versioned_docs/version-3.0.7/migration/Accordion.md create mode 100644 versioned_docs/version-3.0.7/migration/Actionsheet.md create mode 100644 versioned_docs/version-3.0.7/migration/Badge.md create mode 100644 versioned_docs/version-3.0.7/migration/Button.md create mode 100644 versioned_docs/version-3.0.7/migration/Button/Screenshot_2021-01-22_at_1.15.34_PM.png create mode 100644 versioned_docs/version-3.0.7/migration/Button/Screenshot_2021-01-22_at_1.16.25_PM.png create mode 100644 versioned_docs/version-3.0.7/migration/Button/Screenshot_2021-01-22_at_1.17.11_PM.png create mode 100644 versioned_docs/version-3.0.7/migration/Button/Screenshot_2021-01-22_at_1.20.36_PM.png create mode 100644 versioned_docs/version-3.0.7/migration/Button/Screenshot_2021-01-22_at_1.22.36_PM.png create mode 100644 versioned_docs/version-3.0.7/migration/Button/Screenshot_2021-01-22_at_1.23.42_PM.png create mode 100644 versioned_docs/version-3.0.7/migration/Button/Screenshot_2021-01-22_at_1.32.47_PM.png create mode 100644 versioned_docs/version-3.0.7/migration/Button/Screenshot_2021-01-22_at_1.38.15_PM.png create mode 100644 versioned_docs/version-3.0.7/migration/Button/Screenshot_2021-01-22_at_12.29.32_PM.png create mode 100644 versioned_docs/version-3.0.7/migration/Button/Screenshot_2021-01-22_at_12.53.09_PM.png create mode 100644 versioned_docs/version-3.0.7/migration/Button/Screenshot_2021-01-22_at_2.37.09_PM.png create mode 100644 versioned_docs/version-3.0.7/migration/Button/Screenshot_2021-01-22_at_2.38.52_PM.png create mode 100644 versioned_docs/version-3.0.7/migration/Card.md create mode 100644 versioned_docs/version-3.0.7/migration/Checkbox.md create mode 100644 versioned_docs/version-3.0.7/migration/Checkbox/Screenshot_2021-01-22_at_3.09.29_PM.png create mode 100644 versioned_docs/version-3.0.7/migration/Checkbox/Screenshot_2021-01-22_at_4.34.08_PM.png create mode 100644 versioned_docs/version-3.0.7/migration/DatePicker.md create mode 100644 versioned_docs/version-3.0.7/migration/DeckSwiper.md create mode 100644 versioned_docs/version-3.0.7/migration/Drawer.md create mode 100644 versioned_docs/version-3.0.7/migration/FABs.md create mode 100644 versioned_docs/version-3.0.7/migration/FooterTab.md create mode 100644 versioned_docs/version-3.0.7/migration/Form.md create mode 100644 versioned_docs/version-3.0.7/migration/Guide.md create mode 100644 versioned_docs/version-3.0.7/migration/Header.md create mode 100644 versioned_docs/version-3.0.7/migration/Icon.md create mode 100644 versioned_docs/version-3.0.7/migration/Layout.md create mode 100644 versioned_docs/version-3.0.7/migration/List.md create mode 100644 versioned_docs/version-3.0.7/migration/Picker.md create mode 100644 versioned_docs/version-3.0.7/migration/Radio Button.md create mode 100644 versioned_docs/version-3.0.7/migration/Searchbar.md create mode 100644 versioned_docs/version-3.0.7/migration/Segment.md create mode 100644 versioned_docs/version-3.0.7/migration/Spinner.md create mode 100644 versioned_docs/version-3.0.7/migration/SwipeList.md create mode 100644 versioned_docs/version-3.0.7/migration/Tabs.md create mode 100644 versioned_docs/version-3.0.7/migration/Thumbnail.md create mode 100644 versioned_docs/version-3.0.7/migration/Toast.md create mode 100644 versioned_docs/version-3.0.7/migration/Typography.md create mode 100644 versioned_docs/version-3.0.7/modal.md create mode 100644 versioned_docs/version-3.0.7/nativebase-factory.md create mode 100644 versioned_docs/version-3.0.7/nativebase-formik-ui.md create mode 100644 versioned_docs/version-3.0.7/nativebase.mdx create mode 100644 versioned_docs/version-3.0.7/overlay.md create mode 100644 versioned_docs/version-3.0.7/popOver.md create mode 100644 versioned_docs/version-3.0.7/presence-transition.md create mode 100644 versioned_docs/version-3.0.7/pressable.md create mode 100644 versioned_docs/version-3.0.7/progress.md create mode 100644 versioned_docs/version-3.0.7/radio.md create mode 100644 versioned_docs/version-3.0.7/reactHooksForms.md create mode 100644 versioned_docs/version-3.0.7/responsive.md create mode 100644 versioned_docs/version-3.0.7/safe-area-view-props.md create mode 100644 versioned_docs/version-3.0.7/scrollview.md create mode 100644 versioned_docs/version-3.0.7/sectionList.md create mode 100644 versioned_docs/version-3.0.7/select.md create mode 100644 versioned_docs/version-3.0.7/setup-provider.md create mode 100644 versioned_docs/version-3.0.7/slide.md create mode 100644 versioned_docs/version-3.0.7/slider.md create mode 100644 versioned_docs/version-3.0.7/spinner.md create mode 100644 versioned_docs/version-3.0.7/stack.md create mode 100644 versioned_docs/version-3.0.7/stagger.md create mode 100644 versioned_docs/version-3.0.7/statusBar.md create mode 100644 versioned_docs/version-3.0.7/swipableList.md create mode 100644 versioned_docs/version-3.0.7/switch.md create mode 100644 versioned_docs/version-3.0.7/text.md create mode 100644 versioned_docs/version-3.0.7/textArea.md create mode 100644 versioned_docs/version-3.0.7/textField.md create mode 100644 versioned_docs/version-3.0.7/theme.md create mode 100644 versioned_docs/version-3.0.7/toast.md create mode 100644 versioned_docs/version-3.0.7/todo-list.md create mode 100644 versioned_docs/version-3.0.7/tooltip.md create mode 100644 versioned_docs/version-3.0.7/transition.md create mode 100644 versioned_docs/version-3.0.7/useAccessibleColors.md create mode 100644 versioned_docs/version-3.0.7/useBreakPointValue.md create mode 100644 versioned_docs/version-3.0.7/useClipboard.md create mode 100644 versioned_docs/version-3.0.7/useColorMode.md create mode 100644 versioned_docs/version-3.0.7/useColorModeValue.md create mode 100644 versioned_docs/version-3.0.7/useContrastText.md create mode 100644 versioned_docs/version-3.0.7/useDisclosure.md create mode 100644 versioned_docs/version-3.0.7/useMediaQuery.md create mode 100644 versioned_docs/version-3.0.7/usePopOver.md create mode 100644 versioned_docs/version-3.0.7/useTheme.md create mode 100644 versioned_docs/version-3.0.7/useToken.md create mode 100644 versioned_docs/version-3.0.7/utility-first.mdx create mode 100644 versioned_docs/version-3.0.7/utilityProps.md create mode 100644 versioned_docs/version-3.0.7/view.md create mode 100644 versioned_sidebars/version-3.0.7-sidebars.json diff --git a/nb-plugins/component-snackplayer/index.js b/nb-plugins/component-snackplayer/index.js index bb9cb98d1..124655c68 100644 --- a/nb-plugins/component-snackplayer/index.js +++ b/nb-plugins/component-snackplayer/index.js @@ -18,7 +18,7 @@ const processNode = (node, parent) => { return new Promise(async (resolve, reject) => { try { const params = parseParams(node.meta); - const NBversion = '3.0.6'; + const NBversion = '3.0.7'; // Gather necessary Params let name = params.name ? decodeURIComponent(params.name) : 'Example'; const description = params.description diff --git a/package.json b/package.json index 2df80a1af..292ccc2c9 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,7 @@ "clsx": "^1.1.1", "dedent": "^0.7.0", "docusaurus-tailwindcss-loader": "file:plugins/docusaurus-tailwindcss-loader", - "native-base": "^3.0.6", + "native-base": "^3.0.7", "object.fromentries": "^2.0.3", "patch-package": "^6.4.7", "postcss": "^7.0.34", diff --git a/remark-snackplayer/index.js b/remark-snackplayer/index.js index dd28ce315..2e9fbbdcd 100644 --- a/remark-snackplayer/index.js +++ b/remark-snackplayer/index.js @@ -32,7 +32,7 @@ const processNode = (node, parent) => { try { const params = parseParams(node.meta); const simplifedMeta = simplifyMeta(node.meta); - const NBversion = '3.0.6'; + const NBversion = '3.0.7'; // Gather necessary Params let name = simplifedMeta.name ? decodeURIComponent(simplifedMeta.name) diff --git a/versioned_docs/version-3.0.7/FAB.md b/versioned_docs/version-3.0.7/FAB.md new file mode 100644 index 000000000..b2da69276 --- /dev/null +++ b/versioned_docs/version-3.0.7/FAB.md @@ -0,0 +1,44 @@ +--- +id: FAB +title: FAB +--- + +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. + +## Import + +```jsx +import { Fab } from 'native-base'; +``` + +## Example + +### Basic + +```ComponentSnackPlayer path=composites,Fab,Basic.tsx + +``` + +### Placement + +```ComponentSnackPlayer path=composites,Fab,Placement.tsx + +``` + +### Custom Position + +```ComponentSnackPlayer path=composites,Fab,CustomPosition.tsx + +``` + +## Styling + + + +## Props + +```ComponentPropTable path=composites,Fab,Fab.tsx + +``` diff --git a/versioned_docs/version-3.0.7/VStack.md b/versioned_docs/version-3.0.7/VStack.md new file mode 100644 index 000000000..837efa53c --- /dev/null +++ b/versioned_docs/version-3.0.7/VStack.md @@ -0,0 +1,24 @@ +--- +id: VStack +title: VStack / Column +--- + +`VStack` aligns items vertically.`Column` is also an alias for `VStack`. + +## Import + +```jsx +import { VStack } from 'native-base'; +``` + +## Usage + +```ComponentSnackPlayer path=primitives,VStack,basic.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Stack,VStack.tsx + +``` diff --git a/versioned_docs/version-3.0.7/ZStack.md b/versioned_docs/version-3.0.7/ZStack.md new file mode 100644 index 000000000..9f6969a7c --- /dev/null +++ b/versioned_docs/version-3.0.7/ZStack.md @@ -0,0 +1,23 @@ +`ZStack` aligns items absolutely in the z-axis. + +## Examples + +### Basic + +```ComponentSnackPlayer path=primitives,ZStack,example.tsx + +``` + +### Items Centered + +You can pass `alignItems="center"` `justifyContent="center"` to vertically and horizontally center the children. + +```ComponentSnackPlayer path=primitives,ZStack,CenterStack.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,ZStack,index.tsx + +``` diff --git a/versioned_docs/version-3.0.7/accessibility.md b/versioned_docs/version-3.0.7/accessibility.md new file mode 100644 index 000000000..a59a76697 --- /dev/null +++ b/versioned_docs/version-3.0.7/accessibility.md @@ -0,0 +1,24 @@ +--- +id: accessibility +title: Accessibility +--- + +NativeBase comes with the latest accessibility standards out of the box including aria and role attributes, focus management, and keyboard navigation. + +## Accessible Roles + +NativeBase uses [React Native ARIA](https://react-native-aria.geekyants.com/) to implements [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.2/) standards to its components. This is designed to provide meaning for controls that aren't built using components provided by the platform. + +## Accessible Labels + +When a view is marked as accessible, it is a good practice to set an `accessibilityLabel` on the view, so that people who use voice-over know what element they have selected. Voice-over will read this string when a user selects the associated element. NativeBase with the use of [React Native ARIA](https://www.notion.so/Accessibility-83852d7c4b094e69a3e4f1047994bd1c) does this for you out of the box. + +## Keyboard Navigation + +Many complex components, like Tabs and Dialog, come with expectations from users on how to interact with their content using a keyboard or other non-mouse input modalities. NativeBase Primitives provide basic keyboard support in accordance with the [WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices-1.2/). + +## Focus Management + +Proper keyboard navigation and good labelling often go hand-in-hand with managing focus. When a user interacts with a component and something changes as a result, it's often helpful to move focus with the interaction. And for screen reader users, moving focus often results in an announcement to convey the new context, which relies on proper labelling. + +In many NativeBase Components, we move focus based on the interactions a user normally takes in a given component. For example, in `Modal`, when the modal is opened, the focus is programmatically moved to the `first focusable element` and trapped inside the modal to anticipate a response to the prompt. diff --git a/versioned_docs/version-3.0.7/actionSheet.md b/versioned_docs/version-3.0.7/actionSheet.md new file mode 100644 index 000000000..c3c21288d --- /dev/null +++ b/versioned_docs/version-3.0.7/actionSheet.md @@ -0,0 +1,78 @@ +--- +id: actionSheet +title: ActionSheet +--- + +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. + +## Import + +NativeBase exports 3 modal-related components: + +- **Actionsheet**: Provides the context and state for all components. +- **Actionsheet.Content**: Component to wrap the list of **Actionsheet.Item** components. +- **Actionsheet.Item**: A button to wrap the options of the Actionsheet. + +```jsx +import { Actionsheet } from 'native-base'; +``` + +## Examples + +### Usage + +```ComponentSnackPlayer path=composites,Actionsheet,Usage.tsx + +``` + +### Composition + +```ComponentSnackPlayer path=composites,Actionsheet,Composition.tsx + +``` + +### DisableOverlay + +```ComponentSnackPlayer path=composites,Actionsheet,DisableOverlay.tsx + +``` + +### Icons + +```ComponentSnackPlayer path=composites,Actionsheet,Icon.tsx + +``` + +## Props + +### Actionsheet + +```ComponentPropTable path=composites,Actionsheet,Actionsheet.tsx + +``` + +### Actionsheet.Content + +```ComponentPropTable path=composites,Actionsheet,ActionsheetContent.tsx + +``` + +### Actionsheet.Item + +ActionsheetItem implements [Button](button.md#props) + +## Styling + + + +## Accessibility + +- ActionSheet has `aria-modal` set to true. +- ActionSheet has `role` set to `dialog`. +- When the ActionSheet opens, focus is trapped within it. +- Pressing Esc closes the ActionSheet. +- When the ActionSheet opens, focus is automatically set to the first enabled element. +- Clicking on the overlay closes the ActionSheet. +- Scrolling is blocked on the elements behind the ActionSheet. diff --git a/versioned_docs/version-3.0.7/alert.md b/versioned_docs/version-3.0.7/alert.md new file mode 100644 index 000000000..a56754e77 --- /dev/null +++ b/versioned_docs/version-3.0.7/alert.md @@ -0,0 +1,87 @@ +--- +id: alert +title: Alert +--- + +import { ComponentTheme } from '../../src/components'; + +`Alerts` are used to communicate a state that affects a system, feature or page. + +## Import + +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. +- `Alert.Title`: The title of the alert to be announced by screen readers. +- `Alert.Description`: The description of the alert to be announced by screen readers. + +```jsx +import { Alert } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=composites,Alert,usage.tsx + +``` + +### Status + +```ComponentSnackPlayer path=composites,Alert,status.tsx + +``` + +### Variant + +```ComponentSnackPlayer path=composites,Alert,variant.tsx + +``` + +### Composition + +```ComponentSnackPlayer path=composites,Alert,composition.tsx + +``` + +### Action + +```ComponentSnackPlayer path=composites,Alert,action.tsx + +``` + +## Props + +### Alert + +```ComponentPropTable path=composites,Alert,Alert.tsx + +``` + +### Alert.Icon + +```ComponentPropTable path=composites,Alert,AlertIcon.tsx + +``` + +### Alert.Title + +```ComponentPropTable path=composites,Alert,AlertTitle.tsx + +``` + +### Alert.Description + +```ComponentPropTable path=composites,Alert,AlertDescription.tsx + +``` + +## Styling + + + +## Accessibility + +Alert has `role` set to `alert`. diff --git a/versioned_docs/version-3.0.7/alertDialog.md b/versioned_docs/version-3.0.7/alertDialog.md new file mode 100644 index 000000000..5e9d0d3d8 --- /dev/null +++ b/versioned_docs/version-3.0.7/alertDialog.md @@ -0,0 +1,157 @@ +--- +id: alertDialog +title: AlertDialog +--- + +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. + +## Import + +- `AlertDialog`: provides context and state for the dialog. +- `AlertDialog.Header`: contains the title announced by screen readers. +- `AlertDialog.Body`: contains the description announced by screen readers. +- `AlertDialog.Footer`: contains the actions of the dialog. +- `AlertDialog.Content`: The wrapper for the alert dialog's content. +- `AlertDialog.CloseButton`: The button that closes the dialog. + +```jsx +import { AlertDialog } from 'native-base'; +``` + +## Examples + +### Basic + +```SnackPlayer name=AlertDialog%20Basic +import React from "react"; +import { + AlertDialog, + Button, + Center, + NativeBaseProvider, +} from "native-base"; + +function AlertDialogComponent() { + const [isOpen, setIsOpen] = React.useState(false); + const onClose = () => setIsOpen(false); + const cancelRef = React.useRef(); + return ( +
+ + + + Delete Customer + + + Are you sure? You can't undo this action afterwards. + + + + + + + + +
+ ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Transition + +```SnackPlayer name=AlertDialog%20Transition +import React from "react"; +import { AlertDialog, Button, Center, NativeBaseProvider } from "native-base"; + +function AlertDialogComponent() { + const [isOpen, setIsOpen] = React.useState(false); + const onClose = () => setIsOpen(false); + const cancelRef = React.useRef(); + return ( +
+ + + + Discard Changes? + + Are you sure you want to discard all of your notes? 44 words will be + deleted. + + + + + + + + +
+ ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Styling + + + +## Props + +AlertDialog and its components compose the **[Modal](modal.md)** component, so all the [`Modal props`](modal.md#props) can be passed to it. The only exception is that it requires `leastDestructiveRef` which is similar to `initialFocusRef` of `Modal`. + +| Name | Type | Description | Default | +| ------------------- | --------- | -------------------------------------------------------------- | ------- | +| 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) + +### Keyboard Interactions + +| Name | Description | +| ----------- | --------------------------------------------------------- | +| Space | Opens/closes the dialog. | +| Enter | Opens/closes the dialog. | +| 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.0.7/appDrawer.md b/versioned_docs/version-3.0.7/appDrawer.md new file mode 100644 index 000000000..21e0defe9 --- /dev/null +++ b/versioned_docs/version-3.0.7/appDrawer.md @@ -0,0 +1,57 @@ +--- +id: appDrawer +title: App drawer +--- + +Creating an app drawer like layout is very common and with NativeBase's SimpleGrid make this extremely simple while still keeping it extremely customisable. Here is an example to illustrate it. + +```SnackPlayer name=AppDrawer +import React from "react"; +import { IconButton, SimpleGrid, Icon, NativeBaseProvider } from "native-base"; +import {MaterialIcons} from '@expo/vector-icons'; + +function AppDrawer(){ + const icons = [ + "bolt", + "build", + "cloud", + "delivery-dining", + "favorite", + "music-note", + "invert-colors-on", + "navigation", + "settings", + "sports-esports", + "shield", + "photo-camera", + "network-wifi", + "nightlight-round", + "flight", + "extension", + "duo", + "album", + "access-alarm", + "forum", + ]; + + return + {icons.map((icon) => ( + } + /> + ))} + +} + +export default function () { + return ( + + + + ); +} +``` diff --git a/versioned_docs/version-3.0.7/avatar.md b/versioned_docs/version-3.0.7/avatar.md new file mode 100644 index 000000000..dff7875cc --- /dev/null +++ b/versioned_docs/version-3.0.7/avatar.md @@ -0,0 +1,76 @@ +--- +id: avatar +title: Avatar +--- + +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. + +## Import + +NativeBase exports 3 avatar-related components: + +- `Avatar`: An image that represents the user. +- `Avatar.Badge`: A wrapper that displays its content on the bottom right corner of the avatar. +- `Avatar.Group`: A wrapper to stack multiple avatars together. + +```jsx +import { Avatar } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=composites,Avatar,usage.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=composites,Avatar,size.tsx + +``` + +### Fallbacks + +```ComponentSnackPlayer path=composites,Avatar,Fallback.tsx + +``` + +### Avatar Badge + +```ComponentSnackPlayer path=composites,Avatar,AvatarBadge.tsx + +``` + +### Avatar Group + +```ComponentSnackPlayer path=composites,Avatar,AvatarGroup.tsx + +``` + +## Props + +### Avatar + +```ComponentPropTable path=composites,Avatar,Avatar.tsx + +``` + +### Avatar.Group + +```ComponentPropTable path=composites,Avatar,Group.tsx + +``` + +### Avatar.Badge + +```ComponentPropTable path=composites,Avatar,Badge.tsx + +``` + +## Styling + + diff --git a/versioned_docs/version-3.0.7/badge.md b/versioned_docs/version-3.0.7/badge.md new file mode 100644 index 000000000..607a80451 --- /dev/null +++ b/versioned_docs/version-3.0.7/badge.md @@ -0,0 +1,50 @@ +--- +id: badge +title: Badge +--- + +import { ComponentTheme } from '../../src/components'; + +`Badges` are used to highlight an item's status for quick recognition. + +## Import + +```jsx +import { Badge } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=composites,Badge,usage.tsx + +``` + +### Color Scheme + +```ComponentSnackPlayer path=composites,Badge,color.tsx + +``` + +### Variants + +```ComponentSnackPlayer path=composites,Badge,variants.tsx + +``` + +### Composition + +```ComponentSnackPlayer path=composites,Badge,composition.tsx + +``` + +## Props + +```ComponentPropTable path=composites,Badge,index.tsx + +``` + +## Styling + + diff --git a/versioned_docs/version-3.0.7/box.md b/versioned_docs/version-3.0.7/box.md new file mode 100644 index 000000000..5c884c1ef --- /dev/null +++ b/versioned_docs/version-3.0.7/box.md @@ -0,0 +1,138 @@ +--- +id: box +title: Box +--- + +This is a generic component for low level layout needs. It is similar to a [`div`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) in HTML. + +## Example + +### Basic + +```ComponentSnackPlayer path=primitives,Box,basic.tsx + +``` + +
+ +### Composition + +```ComponentSnackPlayer path=primitives,Box,composition.tsx + +``` + +
+ +### With Linear gradient + +If you're using [Expo](https://docs.expo.io/) managed or bare workflow, you can install [expo-linear-gradient](https://docs.expo.io/versions/latest/sdk/linear-gradient/) and configure it in the [NativeBaseProvider](setup-provider#add-external-dependencies-optional) as shown below. + +```SnackPlayer name=LinearGradient +import React from "react" +import { Box, Center, NativeBaseProvider } from "native-base" + +export const Example = () => { + return ( + + This is a Box with Linear Gradient + + ) +} + +const config = { + dependencies: { + 'linear-gradient': require('expo-linear-gradient').LinearGradient + } +} + +export default () => { + return ( + +
+ +
+ + ) +} +``` + +
+ +If you're not using Expo, you can install [react-native-linear-gradient](https://www.npmjs.com/package/react-native-linear-gradient) and configure in the [NativeBaseProvider](setup-provider#add-external-dependencies-optional) as shown below. + +```jsx +import React from 'react'; +import { Box, NativeBaseProvider } from 'native-base'; + +const Example = () => { + return ( + + This is a Box with Linear Gradient + + ); +}; + +const config = { + dependencies: { + 'linear-gradient': require('react-native-linear-gradient').default, + }, +}; + +export default () => { + return ( + + + + ); +}; +``` + +
+ +### Basic (With Ref) + +```ComponentSnackPlayer path=primitives,Box,WithRef.tsx + +``` + +
+
+ +:::tip Common use cases for Box component are: + +- Create responsive layouts with ease. +- Provide a shorthand to pass styles via props (`bg` instead of `backgroundColor`). + +::: + +## Props + +```ComponentPropTable path=primitives,Box,index.tsx showStylingProps=true + +``` diff --git a/versioned_docs/version-3.0.7/breakpoints.md b/versioned_docs/version-3.0.7/breakpoints.md new file mode 100644 index 000000000..78b04fa8a --- /dev/null +++ b/versioned_docs/version-3.0.7/breakpoints.md @@ -0,0 +1,37 @@ +--- +id: breakpoint +title: Breakpoints +--- + +Breakpoints are the building blocks of responsive design. Use them to control when your layout can be adapted at a particular viewport or device size. + +NativeBase provides these default breakpoints and you can update with using extendTheme. + +```tsx +breakpoints = { + base: 0, + sm: 480, + md: 768, + lg: 992, + xl: 1280, +}; +``` + +`useBreakpointValue` is a custom hook which returns the value for the current breakpoint from the provided responsive values object. This hook also responds to the window resizing and returning the appropriate value for the new window size. + +```jsx +import React from 'react'; +import { Box, useBreakpointValue } from 'native-base'; +export default () => { + const color = useBreakpointValue({ + base: 'red.200', + sm: 'blue.200', + md: 'blue.200', + }); + return ( + + This is a box + + ); +}; +``` diff --git a/versioned_docs/version-3.0.7/buildingAppBar.md b/versioned_docs/version-3.0.7/buildingAppBar.md new file mode 100644 index 000000000..f41f1b24f --- /dev/null +++ b/versioned_docs/version-3.0.7/buildingAppBar.md @@ -0,0 +1,48 @@ +--- +id: buildingAppBar +title: AppBar +--- + +The top app bar provides content and actions related to the current screen. It’s used for branding, screen titles, navigation, and actions. + +## Example + +We can easily create it using basic layout components from NativeBase. + +```SnackPlayer name=App%20Bar +import React from "react"; +import { VStack, HStack, Button, IconButton, Icon, Text, NativeBaseProvider, Center, Box, StatusBar } from "native-base"; +import { MaterialIcons } from '@expo/vector-icons'; + +function AppBar(){ + return ( + <> + + + + + + + } color="white" />} /> + Home + + + } size='sm' color="white" />} /> + } + color="white" size='sm' />} /> + } size='sm' color="white" />} /> + + + + + ) +} + +export default function () { + return ( + + + + ); +} +``` diff --git a/versioned_docs/version-3.0.7/buildingDrawerNavigation.md b/versioned_docs/version-3.0.7/buildingDrawerNavigation.md new file mode 100644 index 000000000..25f51fff3 --- /dev/null +++ b/versioned_docs/version-3.0.7/buildingDrawerNavigation.md @@ -0,0 +1,174 @@ +--- +id: buildingDrawerNavigation +title: Drawer Navigation +--- + +Common pattern in navigation is to use drawer from left (sometimes right) side for navigating between screens. + +## Example + +Here is an example to show how easily and quickly we can use React Native's [DrawerNavigation](https://reactnavigation.org/docs/drawer-based-navigation/) in NB. + +```SnackPlayer name=Drawer-Navigation dependencies=@react-navigation/stack@5.1.0,@react-navigation/drawer,@react-navigation/native@5.0.8,react-native-vector-icons,react-native-gesture-handler@1.10.2,react-native-linear-gradient,@react-native-community/masked-view@0.1.10,react-native-screens@3.0.0,react-native-reanimated@2.1.0 +import * as React from 'react'; +import { NavigationContainer } from '@react-navigation/native'; +import { + createDrawerNavigator, + DrawerContentScrollView, +} from '@react-navigation/drawer'; +import { + MaterialCommunityIcons +} from '@expo/vector-icons'; +import { + NativeBaseProvider, + Button, + Box, + HamburgerIcon, + Pressable, + Heading, + VStack, + Text, + Center, + HStack, + Divider, + Icon +} from 'native-base'; +const Drawer = createDrawerNavigator(); +function Component(props) { + return ( + + props.navigation.toggleDrawer()} position="absolute" ml={2} zIndex={1}> + + +
+ {props.route.name} +
+ + ); +} + +const getIcon = (screenName) => { + switch (screenName) { + case 'Inbox': + return "email" + case 'Outbox': + return 'send' + case 'Favorites': + return 'heart' + case 'Archive': + return 'archive' + case 'Trash': + return 'trash-can' + case 'Spam': + return 'alert-circle' + default: + return undefined + } +} + +function CustomDrawerContent(props) { + return ( + + + + Mail + john_doe@gmail.com + + } space={4}> + + {props.state.routeNames.map((name, index) => ( + { + props.navigation.navigate(name); + }} + > + + } /> + + {name} + + + + ))} + + + Labels + + + + } /> + + Family + + + + + + } /> + + Friends + + + + + + } /> + + Work + + + + + + + + + ); +} +function MyDrawer() { + return ( + + } + > + + + + + + + + + ); +} +export default function App() { + return ( + + + + + + ); +} +``` diff --git a/versioned_docs/version-3.0.7/buildingFooterTabs.md b/versioned_docs/version-3.0.7/buildingFooterTabs.md new file mode 100644 index 000000000..d7b994e03 --- /dev/null +++ b/versioned_docs/version-3.0.7/buildingFooterTabs.md @@ -0,0 +1,115 @@ +--- +id: buildingFooterTabs +title: Footer +--- + +With NativeBase v3 we have removed FooterTab components because as it's very simple to create it using HStack component. Here is an example of how we can make Footer in our Apps. + +## Example + +```SnackPlayer name=Footer dependencies=react-native-linear-gradient +import React from 'react'; + +import { + NativeBaseProvider, + Box, + Text, + Heading, + VStack, + FormControl, + Input, + Link, + Button, + Icon, + HStack, + Center, + Pressable, +} from 'native-base'; +import { MaterialCommunityIcons , MaterialIcons} from '@expo/vector-icons'; + +export default function App() { + const [selected, setSelected] = React.useState(1); + return ( + + +
+
+ + setSelected(0)} + > +
+ } + color="white" + size="xs" + /> + + Favorites +
+ + setSelected(1)} + > +
+ } + color="white" + size="xs" + /> + + Music +
+ + setSelected(2)} + > +
+ } + color="white" + size="xs" + /> + + Places +
+ + setSelected(3)} + > +
+ } + color="white" + size="xs" + /> + News +
+ + + + + ); +} + +``` diff --git a/versioned_docs/version-3.0.7/buildingSearchBar.md b/versioned_docs/version-3.0.7/buildingSearchBar.md new file mode 100644 index 000000000..00feacf40 --- /dev/null +++ b/versioned_docs/version-3.0.7/buildingSearchBar.md @@ -0,0 +1,72 @@ +--- +id: buildingSearchBar +title: SearchBar +--- + +Search-bar are one of the most commonly seen variation of input. Here are design to make life easier. + +## Example + +Here are some examples to show how easily and quickly we can create so many types of search-bars. + + + +```SnackPlayer name=Search%20Bar +import React from "react"; +import { VStack, Input, Button, IconButton, Icon, Text, NativeBaseProvider, Center, Box } from "native-base"; +import { Ionicons, MaterialIcons } from '@expo/vector-icons'; +import { FontAwesome5 } from '@expo/vector-icons'; + + +function SearchBar(){ + return ( + + + Cupertino + } />} + /> + + + + Material + } />} + InputRightElement={} />} + /> + + + ) +} + +export default function () { + return ( + +
+ +
+ + ); +} +``` diff --git a/versioned_docs/version-3.0.7/buildingSwipeList.md b/versioned_docs/version-3.0.7/buildingSwipeList.md new file mode 100644 index 000000000..a5648058a --- /dev/null +++ b/versioned_docs/version-3.0.7/buildingSwipeList.md @@ -0,0 +1,144 @@ +--- +id: buildingSwipeList +title: Swipe List +--- + +SwipeListView is a vertical ListView with rows that swipe open and closed. Handles default native behavior such as closing rows when ListView is scrolled or when other rows are opened. + +## Example + +Here is an example to show how easily and quickly we can use [react-native-swipe-list](https://www.npmjs.com/package/react-native-swipe-list-view) in NativeBase. + +```SnackPlayer name=SwipeList dependencies=react-native-swipe-list-view + +import React, { useState } from 'react'; +import { + Dimensions, + TouchableOpacity, + View, +} from 'react-native'; + +import {NativeBaseProvider,Box, Text,Pressable,Heading,IconButton,Icon, HStack, Avatar } from 'native-base'; +import { SwipeListView } from 'react-native-swipe-list-view'; +import { MaterialIcons,Ionicons } from '@expo/vector-icons'; + +export default function App() { + const [mode, setMode] = useState('Basic'); + + return ( + + + Swipe list Example + + + + ); +} + + +function Basic() { + const [listData, setListData] = useState( + Array(20) + .fill('') + .map((_, i) => ({ key: `${i}`, text: `item #${i}` })) + ); + + const closeRow = (rowMap, rowKey) => { + if (rowMap[rowKey]) { + rowMap[rowKey].closeRow(); + } + }; + + const deleteRow = (rowMap, rowKey) => { + closeRow(rowMap, rowKey); + const newData = [...listData]; + const prevIndex = listData.findIndex(item => item.key === rowKey); + newData.splice(prevIndex, 1); + setListData(newData); + }; + + const onRowDidOpen = rowKey => { + console.log('This row opened', rowKey); + }; + + const renderItem = ({item, index}) => ( + + console.log('You touched me')} + alignItems= 'center' + bg="white" + borderBottomColor= 'trueGray.200' + borderBottomWidth= {1} + justifyContent= 'center' + height= {50} + underlayColor={'#AAA'} + _pressed={{ + bg:'trueGray.200' + }} + py={8} + > + + + + + {index} + + + {item.text} + + + + + + ); + + const renderHiddenItem = (data, rowMap) => ( + + closeRow(rowMap, data.item.key)} + _pressed={{ + opacity: 0.5 + }} + > + } color='white'/> + + deleteRow(rowMap, data.item.key)} + _pressed={{ + opacity: 0.5 + }} + > + } color="white" /> + + + ); + + return ( + + + + ); +} +``` diff --git a/versioned_docs/version-3.0.7/buildingTabView.md b/versioned_docs/version-3.0.7/buildingTabView.md new file mode 100644 index 000000000..953882d01 --- /dev/null +++ b/versioned_docs/version-3.0.7/buildingTabView.md @@ -0,0 +1,101 @@ +--- +id: buildingTabView +title: Tab View +--- + +A cross-platform Tab View component for React Native + +## Example + +Here is an example to show how easily and quickly we can use [react-native-tab-view](https://www.npmjs.com/package/react-native-tab-view) in NB. + +```SnackPlayer name=TabView dependencies=react-native-linear-gradient,react-native-tab-view,react-native-pager-view@5.0.12 + +import * as React from 'react'; +import { View, StyleSheet, Dimensions, StatusBar,TouchableOpacity,Animated, Pressable} from 'react-native'; +import { TabView, SceneMap } from 'react-native-tab-view'; +import {NativeBaseProvider,Box, Text} from 'native-base'; +import Constants from 'expo-constants'; + +const FirstRoute = () => ( + +); + +const SecondRoute = () => ( + +); + +const ThirdRoute = () => ( + +); + +const initialLayout = { width: Dimensions.get('window').width }; + +const renderScene = SceneMap({ + first: FirstRoute, + second: SecondRoute, + third: ThirdRoute, +}); + +export default function TabViewExample() { + + + + + const [index, setIndex] = React.useState(0); + const [routes] = React.useState([ + { key: 'first', title: 'First' }, + { key: 'second', title: 'Second' }, + { key: 'third', title: 'Third' }, + ]); + + const renderTabBar = (props) => { + const inputRange = props.navigationState.routes.map((x, i) => i); + return ( + + {props.navigationState.routes.map((route, i) => { + const opacity = props.position.interpolate({ + inputRange, + outputRange: inputRange.map((inputIndex) => + inputIndex === i ? 1 : 0.5 + ), + }); + + return ( + + { + console.log(i); + setIndex(i);}}> + {route.title} + + + + ); + })} + + ); + }; + + return ( + + + + ); +} + + +``` diff --git a/versioned_docs/version-3.0.7/builldingCard.md b/versioned_docs/version-3.0.7/builldingCard.md new file mode 100644 index 000000000..0450302ae --- /dev/null +++ b/versioned_docs/version-3.0.7/builldingCard.md @@ -0,0 +1,58 @@ +--- +id: buildingCard +title: Card +--- + +A card is a flexible and extensible content container. It comes in caries shapes and sizes and here we'll make few of them. + +## Most Commonly used design + +This card design widely used where the Header consist of Avatar, accompanied by the Title and Sub-title. + +Followed by the image which flows till the very edge. + +And lastly a description. + +```SnackPlayer name=Card +import React from "react"; +import { VStack, HStack, Avatar, Image, Text, NativeBaseProvider, +AspectRatio, Center, Box, Stack, Heading } from "native-base"; + +function CardComponent(){ + return( + + image base + + NEWS + + + June 22, 2021 + + The Stunning Dawki River in Meghalaya is So Clear That Boats Appear + Floating in Air + + + With lush green meadows, rivers clear as crystal, pine-covered + hills, gorgeous waterfalls, lakes and majestic forests, the + mesmerizing. Meghalaya is truly a Nature lover’s paradise… + + + + ); +} + +export default function () { + return ( + +
+ +
+ + ); +} +``` diff --git a/versioned_docs/version-3.0.7/button.mdx b/versioned_docs/version-3.0.7/button.mdx new file mode 100644 index 000000000..c138b3d29 --- /dev/null +++ b/versioned_docs/version-3.0.7/button.mdx @@ -0,0 +1,84 @@ +--- +id: button +title: Button +--- + +import { ComponentTheme } from '../../src/components'; + +The `Button` component is used to trigger an action or event. + +## Import + +```jsx +import { Button, ButtonGroup } from 'native-base'; +``` + +- **Button** : The button component with support for custom icons, spinners, etc. +- **ButtonGroup** : Used to group buttons whose actions are related, with an option to flush them together. + +## Examples + +### Basic + +```ComponentSnackPlayer path=primitives,Button,basic.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=primitives,Button,sizes.tsx + +``` + +### Variants + +```ComponentSnackPlayer path=primitives,Button,variants.tsx + +``` + +### Loading + +```ComponentSnackPlayer path=primitives,Button,loading.tsx + +``` + +### Icons + +```ComponentSnackPlayer path=primitives,Button,icons.tsx + +``` + +### ButtonGroup + +```ComponentSnackPlayer path=primitives,Button,ButtonGroup.tsx + +``` + +### Basic (With Ref) + +```ComponentSnackPlayer path=primitives,Button,WithRef.tsx + +``` + +## Props + +### Button + +```ComponentPropTable path=primitives,Button,Button.tsx + +``` + +### ButtonGroup + +```ComponentPropTable path=primitives,Button,ButtonGroup.tsx + +``` + +## Styling + + + +## Accessibility + +- Button has `role` set to [button](https://www.w3.org/TR/wai-aria-practices-1.2/#button). +- When Button has focus, Space or Enter activates it. diff --git a/versioned_docs/version-3.0.7/center.md b/versioned_docs/version-3.0.7/center.md new file mode 100644 index 000000000..af1b45de7 --- /dev/null +++ b/versioned_docs/version-3.0.7/center.md @@ -0,0 +1,48 @@ +--- +id: center +title: Center +--- + +`Center` is a layout component that centers its child within itself. + +## **Import** + +```jsx +import { Center, Square, Circle } from 'native-base'; +``` + +- **Center:** Centers its child, pass `width` and `height` +- **Square:** `Center` but we need to pass `size` (width and height) +- **Circle:** `Center` with round `borderRadius`, pass `size` (width and height) + +## Examples + +### Basic + +Put any child element inside it, give it any width or/and height. It'll ensure the child is centered. + +```ComponentSnackPlayer path=composites,Center,Basic.tsx + +``` + +### Icon frames + +Center can be used to nicely position icons in the center and add frames around them. + +```ComponentSnackPlayer path=composites,Center,WithIcons.tsx + +``` + +### Square and Circle + +Square and Circle automatically centers their children. + +```ComponentSnackPlayer path=composites,Center,SquareCircle.tsx + +``` + +## Props + +```ComponentPropTable path=composites,Center,Center.tsx + +``` diff --git a/versioned_docs/version-3.0.7/changelog.md b/versioned_docs/version-3.0.7/changelog.md new file mode 100644 index 000000000..7eb8d4342 --- /dev/null +++ b/versioned_docs/version-3.0.7/changelog.md @@ -0,0 +1,23 @@ +--- +id: changelog +title: Changelog +--- + +## Fixes + +- Version bump from 3.0.3 to 3.0.4 +- Add tokenised fontFamily support in Input #3796 +- Make drag indicator optional in actionsheet #3797 +- Export Toast TS props definition #3795 +- Set fontFamily to heading in Heading component #3788 +- Fix SSR not working #3786 +- Fix box with linear gradient warning #3777 +- Add color prop in Select's TS definition #3779 +- Remove additional wrapper from Checkbox group #3798 +- Add a prop to render FAB outside of portal #3829 +- Fix input padding(top/bottom) not working on android #3825 +- Fix custom fonts not working on android for some cases #3821 +- Fixed bold and italics issue in typography +- Spinner visibility issue fixed + +For more details. Visit [releases](https://github.com/GeekyAnts/NativeBase/releases/tag/v3.0.4). diff --git a/versioned_docs/version-3.0.7/checkBox.md b/versioned_docs/version-3.0.7/checkBox.md new file mode 100644 index 000000000..81a7c5e6c --- /dev/null +++ b/versioned_docs/version-3.0.7/checkBox.md @@ -0,0 +1,104 @@ +--- +id: checkBox +title: CheckBox +--- + +import { ComponentTheme } from '../../src/components'; + +The `Checkbox` component is used in forms when a user needs to select multiple values from several options. + +## Examples + +### Basic + +```ComponentSnackPlayer path=primitives,Checkbox,basic.tsx + +``` + +### Controlled + +```ComponentSnackPlayer path=primitives,Checkbox,controlledCheckbox.tsx + +``` + +### Uncontrolled + +```ComponentSnackPlayer path=primitives,Checkbox,uncontrolledCheckbox.tsx + +``` + +### Disabled + +```ComponentSnackPlayer path=primitives,Checkbox,disabled.tsx + +``` + +### Invalid + +```ComponentSnackPlayer path=primitives,Checkbox,invalid.tsx + +``` + +### Custom Color + +```ComponentSnackPlayer path=primitives,Checkbox,customColor.tsx + +``` + +### Custom Icon + +```ComponentSnackPlayer path=primitives,Checkbox,customIcon.tsx + +``` + +### Size + +```ComponentSnackPlayer path=primitives,Checkbox,size.tsx + +``` + +### Checkbox Group + +```ComponentSnackPlayer path=primitives,Checkbox,checkboxGroup.tsx + +``` + +### Form Controlled + +```ComponentSnackPlayer path=primitives,Checkbox,FormControlled.tsx + +``` + +### Basic (With Ref) + +```ComponentSnackPlayer path=primitives,Checkbox,withRef.tsx + +``` + +## Props + +### Checkbox + +```ComponentPropTable path=primitives,Checkbox,Checkbox.tsx + +``` + +### Checkbox.Group + +```ComponentPropTable path=primitives,Checkbox,CheckboxGroup.tsx + +``` + +## Styling + + + +## Accessibility + +Uses React Native ARIA [@react-native-aria/checkbox](https://react-native-aria.geekyants.com/docs/useCheckbox) which follows the [Checkbox WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#checkbox). + +### Keyboard Interactions + +| Key | Description | +| ------- | ----------------------------- | +| `Space` | Checks/unchecks the checkbox. | diff --git a/versioned_docs/version-3.0.7/colorMode.md b/versioned_docs/version-3.0.7/colorMode.md new file mode 100644 index 000000000..170412cbf --- /dev/null +++ b/versioned_docs/version-3.0.7/colorMode.md @@ -0,0 +1,152 @@ +--- +id: color-mode +title: Color mode (Dark Mode) +--- + +When you use the `NativebaseProvider` at the root of your app, you can automatically use color mode in your apps. + +By default, most components are dark mode compatible. To handle color mode manually in your application, use the `useColorMode` or `useColorModeValue` hooks. + +## useColorMode + +`useColorMode` is a React hook that gives you access to the current color mode, and a function to toggle the color mode. + +Calling toggleColorMode anywhere in your app tree toggles the color mode. + +## useColorModeValue + +`useColorModeValue` is a React hook used to change any value or style based on the color mode. It takes 2 arguments: the value in light mode, and the value in dark mode. + +```SnackPlayer name=ColorMode%20Usage +import React from 'react'; +import { + Heading, + useColorMode, + Button, + HStack, + Avatar, + Center, + useColorModeValue, + NativeBaseProvider +} from 'native-base'; + +function ColorModeExample () { + const { colorMode, toggleColorMode } = useColorMode(); + return ( + <> + I'm a Heading + + + + + + + ); +} + +const LocalWrapper = ({ children }) => { + const bg = useColorModeValue('gray.200', 'gray.800') + return ( +
+ {children} +
+ ); +}; + +export default function () { + return ( + + + + + + ); +} +``` + +## Default color mode + +You can set default color mode. By default, the color mode will be `light`. To support this, extend the default theme with a `config` + +```jsx +import { NativeBaseProvider, extendTheme, Text } from 'native-base'; + +// Define the config +const config = { + useSystemColorMode: false, + initialColorMode: 'dark', +}; + +// extend the theme +const customTheme = extendTheme({ config }); +function App() { + return ( + // pass itto NativeBaseProvider + + // Your component + + ); +} +``` + +## Persisting the color mode + +You can persist the color mode in you app by defining you color mode manager of type `StorageManager` and passing it to the NativeBaseProvider. This will retain the color mode even when the app is refreshed. + +```jsx +import React from 'react'; +import { NativeBaseProvider, StorageManager, ColorMode } from 'native-base'; +import AsyncStorage from '@react-native-async-storage/async-storage'; + +// Define the colorModeManager, +// here we are using react-native-async-storage (https://react-native-async-storage.github.io/async-storage/) +const colorModeManager: StorageManager = { + get: async () => { + try { + let val = await AsyncStorage.getItem('@color-mode'); + return val === 'dark' ? 'dark' : 'light'; + } catch (e) { + return 'light'; + } + }, + set: async (value: ColorMode) => { + try { + await AsyncStorage.setItem('@color-mode', value); + } catch (e) { + console.log(e); + } + }, +}; +export default function () { + return ( + // pass it to NativeBaseProvider + + // Your components + + ); +} +``` diff --git a/versioned_docs/version-3.0.7/container.md b/versioned_docs/version-3.0.7/container.md new file mode 100644 index 000000000..5b34afdc3 --- /dev/null +++ b/versioned_docs/version-3.0.7/container.md @@ -0,0 +1,57 @@ +--- +id: container +title: Container +--- + +The `Container` is used to constrain a content's width to the current breakpoint, while keeping it fluid. + +## Implements + +- [`Box`](box.md) + +## Usage + +To include content, wrap it in the Container component. + +## Example + +```SnackPlayer name=Container%20Example +import React from 'react'; +import { Container, Text, Heading, NativeBaseProvider, Center } from 'native-base'; +function ContainerComponent() { + return ( + + + A component library for the + + React Ecosystem + + + + NativeBase is a simple, modular and accessible component library that gives you building blocks to build you React applications. + + + ); +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Props + +**Container** implements **[Box](box.md)**, so all the Box Props can be passed to it. + +### Container + +| Name | Type | Description | Default | +| ------------- | ------- | --------------------------------------------------------- | ------- | +| centerContent | boolean | It'll center child elements based on their content width. | true | diff --git a/versioned_docs/version-3.0.7/customizingComponents.md b/versioned_docs/version-3.0.7/customizingComponents.md new file mode 100644 index 000000000..5bb08a180 --- /dev/null +++ b/versioned_docs/version-3.0.7/customizingComponents.md @@ -0,0 +1,160 @@ +--- +id: customizingComponents +title: Customising Components +--- + +Theme customisation is at the heart of NativeBase. Using NativeBase's `extendTheme` function, we can customise components. + +Components can be customised by overriding baseStyle/defaultProps or adding a new variant. + +Let's customise a Button component to include rounded borders and red colorScheme. + +## Basic + +```tsx +import React from 'react'; +import { NativeBaseProvider, extendTheme } from 'native-base'; + +export default function () { + const theme = extendTheme({ + components: { + Button: { + // Can simply pass default props to change default behaviour of components. + baseStyle: { + rounded: 'md', + }, + defaultProps: { + colorScheme: 'red', + }, + }, + Heading: { + // Can pass also function, giving you access theming tools + baseStyle: ({ colorMode }) => { + return { + color: colorMode === 'dark' ? 'red.300' : 'blue.300', + fontWeight: 'normal', + }; + }, + }, + }, + }); + return ( + {/* components */} + ); +} +``` + +As shown above, we can customize components by passing the **components** object with the **key** being the **name** of the **component**. Whereas you set `defaultProps` or `baseStyle` to customize the components. + +### Difference between baseStyle and defaultProps? + +#### Base Style + +- As the name suggests, it's used to define the base style of a component. +- Base style can be a function or a plain object. Use function if you want to get access to defaultProps, current colorMode (light/dark) and theme object. + +Take a look at an [example here](https://github.com/GeekyAnts/NativeBase/blob/v3-pre-beta/src/theme/components/button.ts#L5) + +#### Default Props + +- Default props can be used to initialize props of a component. +- For e.g. You have a Button component and it has 2 variants. i.e. outline, solid. You can use it like. + +Take a look at an [example here](https://github.com/GeekyAnts/NativeBase/blob/v3-pre-beta/src/theme/components/button.ts#L201) + +```jsx + + + + + + ); +} + +``` + +
+ +NativeBase ships with default styles for each components. [You can find it here](https://github.com/GeekyAnts/NativeBase/tree/v3-pre-beta/src/theme/components) diff --git a/versioned_docs/version-3.0.7/customizingFonts.md b/versioned_docs/version-3.0.7/customizingFonts.md new file mode 100644 index 000000000..1e2d89ffb --- /dev/null +++ b/versioned_docs/version-3.0.7/customizingFonts.md @@ -0,0 +1,87 @@ +--- +id: customizingFonts +title: Customising Fonts +--- + +Follow 3 simple steps to add a custom font family. + +### Loading fonts in Expo or React Native init project. + +[Refer this guide if you're using Expo](https://docs.expo.io/guides/using-custom-fonts/) + +[Refer this guide if you're using React Native init](https://medium.com/@aravindmnair/add-custom-fonts-to-react-native-0-60-easily-in-3-steps-fcd71459f4c9) + +### Extend NativeBase theme object. + +We extend the theme object and override `fontConfig` and `fonts` properties which define the mappings. + +This mapping is needed to make sure fontWeight, fontStyle properties work in all platforms. + +```jsx +import { NativeBaseProvider, extendTheme } from 'native-base'; + +const theme = extendTheme({ + fontConfig: { + Roboto: { + 100: { + normal: 'Roboto-Light', + italic: 'Roboto-LightItalic', + }, + 200: { + normal: 'Roboto-Light', + italic: 'Roboto-LightItalic', + }, + 300: { + normal: 'Roboto-Light', + italic: 'Roboto-LightItalic', + }, + 400: { + normal: 'Roboto-Regular', + italic: 'Roboto-Italic', + }, + 500: { + normal: 'Roboto-Medium', + }, + 600: { + normal: 'Roboto-Medium', + italic: 'Roboto-MediumItalic', + }, + // Add more variants + // 700: { + // normal: 'Roboto-Bold', + // }, + // 800: { + // normal: 'Roboto-Bold', + // italic: 'Roboto-BoldItalic', + // }, + // 900: { + // normal: 'Roboto-Bold', + // italic: 'Roboto-BoldItalic', + // }, + }, + }, + + // Make sure values below matches any of the keys in `fontConfig` + fonts: { + heading: 'Roboto', + body: 'Roboto', + mono: 'Roboto', + }, +}); + +export default function App() { + return ( + + + + ); +} +``` + +### Using fonts + +Fonts can be used as shown below. The below `Text` will be rendered in `Roboto-MediumItalic` font family. + +```jsx + +``` diff --git a/versioned_docs/version-3.0.7/customizingTheme.md b/versioned_docs/version-3.0.7/customizingTheme.md new file mode 100644 index 000000000..1aca05753 --- /dev/null +++ b/versioned_docs/version-3.0.7/customizingTheme.md @@ -0,0 +1,108 @@ +--- +id: customizingTheme +title: Customising Theme +--- + +import { NativeBaseProvider, Box } from 'native-base'; + +Theme is one core elements of NativeBase. You can customize NativeBase's theme as per your liking. NativeBase theme is complex object which looks like + +```tsx +// theme +{ + colors: {...}, + fontSizes: {...}, + fonts: {...}, + . + . + . + config: {...}, +} +``` + +It has many [other properties](default-theme) but in this recipe, we'll only update few of them (namely colors, fonts, and config) using NativeBase's `extendTheme` function. + +```tsx +import React from 'react'; +import { NativeBaseProvider, extendTheme } from 'native-base'; +import { Content } from './Content'; + +export default function () { + const theme = extendTheme({ + colors: { + // Add new color + primary: { + 50: '#E3F2F9', + 100: '#C5E4F3', + 200: '#A2D4EC', + 300: '#7AC1E4', + 400: '#47A9DA', + 500: '#0088CC', + 600: '#007AB8', + 700: '#006BA1', + 800: '#005885', + 900: '#003F5E', + }, + // Redefinig only one shade, rest of the color will remain same. + amber: { + 400: '#d97706', + }, + }, + config: { + // Changing initialColorMode to 'dark' + initialColorMode: 'dark', + }, + }); + + return ( + + + + ); +} +``` + +In the above example, the following changes have been made: + +- Added a new color named **primary**. +- Updated one of the shade of **amber** color. +- Updated the initial color mode to **dark**. Default is **light**. +- Finally passed the new **theme** object to the **NativeBaseProvider**. + +### Using the new tokens in components + +```jsx live +function App() { + const theme = extendTheme({ + colors: { + // Add new color + primary: { + 50: '#E3F2F9', + 100: '#C5E4F3', + 200: '#A2D4EC', + 300: '#7AC1E4', + 400: '#47A9DA', + 500: '#0088CC', + 600: '#007AB8', + 700: '#006BA1', + 800: '#005885', + 900: '#003F5E', + }, + // Redefinig only one shade, rest of the color will remain same. + amber: { + 400: '#d97706', + }, + }, + config: { + // Changing initialColorMode to 'dark' + initialColorMode: 'dark', + }, + }); + + return ( + + + + ); +} +``` diff --git a/versioned_docs/version-3.0.7/darkMode.md b/versioned_docs/version-3.0.7/darkMode.md new file mode 100644 index 000000000..1f58b9c59 --- /dev/null +++ b/versioned_docs/version-3.0.7/darkMode.md @@ -0,0 +1,89 @@ +--- +id: darkMode +title: Making components dark mode compatible +--- + +By default, most of NativeBase's components are dark mode compatible. In some scenario, you might need to make your component respond to color mode. There are 2 way to achieve this: + +1. By updating component's theme +2. By using useColorModeValue + +## 1. By updating component's theme + +In this approach we use NativeBase's `extendTheme` function to customise the components and the use themeTools to make the component dark mode compatible. + +Note: Changes on the theme will be reflected on the entire application. + +```tsx +import React from 'react'; +import { NativeBaseProvider, themeTools } from 'native-base'; +import { extendTheme } from 'native-base'; +import { Content } from './Content'; + +export default function () { + const theme = extendTheme({ + components: { + Heading: { + baseStyle: (props: any) => { + return { + color: themeTools.mode('red.300', 'blue.300')(props), + }; + }, + }, + }, + }); + return ( + + + + ); +} +``` + +In the above example, the Heading component's color property will now respond to change in color, namely in light mode it will be red (red.300) colored and in dark mode it will blue (blue.300) colored. + +## 2. By using useColorModeValue + +In this approach we use NativeBase's `useColorModeValue` function and update specific props instead of updating the entire theme. + +Note: Changes on the theme will be reflected on the entire application. + +```tsx +import React from 'react'; +import { useColorModeValue, Button } from 'native-base'; + +export default function () { + const colorScheme = useColorModeValue('teal', 'amber'); + const variant = useColorModeValue('solid', 'outline'); + + return ( + + ); +} +``` + +In the above example, you'll get a **solid teal Button** in **light** mode whereas an **outline amber Button** in **dark** mode. You can get creative and make other properties respond to the color mode as well. + +## 3. By using \_ligth and \_dark props + +In this approach we pass the required props inside \_light and \_dark based on the requirement. + +```tsx +import React from 'react'; +import { Button } from 'native-base'; + +export default function () { + return ( + + ); +} +``` + +In the above example, you'll get a **teal Button** in **light** mode whereas an **amber Button** in **dark** mode. You can get creative and make other properties respond to the color mode as well. diff --git a/versioned_docs/version-3.0.7/default-theme.md b/versioned_docs/version-3.0.7/default-theme.md new file mode 100644 index 000000000..6126f0909 --- /dev/null +++ b/versioned_docs/version-3.0.7/default-theme.md @@ -0,0 +1,212 @@ +--- +id: default-theme +title: Default Theme +--- + +import { ColorsBlock, FontBlocks, SpaceBlocks } from "/src/components/index"; + +The theme object is where you define your application's color palette, type scale, font stacks, breakpoints, border radius values, and more. + +Theming in NativeBase is based on the **[Styled System Theme Specification](https://system-ui.com/theme/)** + +## Colors + +You can add a `theme.colors` object to provide colors for your project. By default these colors can be referenced by the `color`, `borderColor`, `backgroundColor`, etc.. props. + +We recommend adding a palette that ranges from `50` to `900`. Tools like **[Smart Swatch](https://smart-swatch.netlify.app/)**, **[Palx](https://palx.jxnblk.com/)** are available to generate these palettes. + + + +## Typography + +To manage Typography options, the theme object supports the following keys: + +- `fonts` (font families) +- `fontSizes` +- `fontWeights` +- `lineHeights` +- `letterSpacings` + +```jsx +const typography = { + letterSpacings: { + xxs: -1.5, + xs: -0.5, + sm: 0, + md: 0.1, + lg: 0.15, + xl: 0.25, + '2xl': 0.4, + '3xl': 0.5, + '4xl': 1.25, + '5xl': 1.5, + }, + lineHeights: { + none: 1, + shorter: 1.25, + short: 1.375, + base: 1.5, + tall: 1.625, + taller: '2', + 3: '12px', + 4: '16px', + 5: '20px', + 6: '24px', + 7: '28px', + 8: '32px', + 9: '36px', + 10: '40px', + }, + fontWeights: { + hairline: 100, + thin: 200, + light: 300, + normal: 400, + medium: 500, + semibold: 600, + bold: 700, + extrabold: 800, + black: 900, + }, + fonts: { + heading: '', + body: '', + mono: '', + }, + fontSizes: { + xxs: 10, + xs: 12, + sm: 14, + md: 16, + lg: 18, + xl: 20, + '2xl': 24, + '3xl': 30, + '4xl': 36, + '5xl': 48, + '6xl': 60, + '7xl': 72, + '8xl': 96, + '9xl': 128, + }, +}; +``` + + + +## Size + +The `size` key allows you to customize the global spacing and sizing scale for your project. By default these spacing value can be referenced by the `padding`, `margin`, and `top`, `left`, `right`, `bottom` props. + + + +## Shadows + +The `shadow` key allows you to customize the global box shadow for your project. + +```jsx +export default { + 0: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 1, + }, + shadowOpacity: 0.18, + shadowRadius: 1.0, + elevation: 1, + }, + 1: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 1, + }, + shadowOpacity: 0.2, + shadowRadius: 1.41, + elevation: 2, + }, + 2: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 1, + }, + shadowOpacity: 0.22, + shadowRadius: 2.22, + elevation: 3, + }, + 3: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 2, + }, + shadowOpacity: 0.23, + shadowRadius: 2.62, + elevation: 4, + }, + 4: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 2, + }, + shadowOpacity: 0.25, + shadowRadius: 3.84, + elevation: 5, + }, + 5: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 3, + }, + shadowOpacity: 0.27, + shadowRadius: 4.65, + elevation: 6, + }, + 6: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 3, + }, + shadowOpacity: 0.29, + shadowRadius: 4.65, + elevation: 7, + }, + 7: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 4, + }, + shadowOpacity: 0.3, + shadowRadius: 4.65, + elevation: 8, + }, + 8: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 4, + }, + shadowOpacity: 0.32, + shadowRadius: 5.46, + elevation: 9, + }, + 9: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 5, + }, + shadowOpacity: 0.34, + shadowRadius: 6.27, + elevation: 10, + }, +}; +``` + +Still confused? You can always explore [here](https://github.com/GeekyAnts/nativebase-v3/tree/development/src/theme/base). diff --git a/versioned_docs/version-3.0.7/design-tokens.md b/versioned_docs/version-3.0.7/design-tokens.md new file mode 100644 index 000000000..8198af8e3 --- /dev/null +++ b/versioned_docs/version-3.0.7/design-tokens.md @@ -0,0 +1,69 @@ +--- +id: design-tokens +title: Design tokens +--- + +Design tokens are the values or constants needed to construct a design system. These values can represent spacing, color, typography etc. Design tokens help to achieve consistency in building user interfaces across all platforms. + +Let's take an example by defining a space and color design tokens. + +```jsx title="colors" +const colors = { + primary: { + 50: '#ecfeff', + 100: '#cffafe', + 200: '#a5f3fc', + 300: '#67e8f9', + 400: '#22d3ee', + 500: '#06b6d4', + 600: '#0891b2', + 700: '#0e7490', + 800: '#155e75', + 900: '#164e63', + }, +}; +``` + +```jsx title="spacing" +export const spacing = { + px: 1, + 1: 4, + 2: 8, + 3: 12, + 4: 16, + 5: 20, + 6: 24, + 7: 28, + 8: 32, + 9: 36, + 10: 40, + 12: 48, + 16: 64, + 20: 80, + 24: 96, + 32: 128, + 40: 160, + 48: 192, + 56: 224, + 64: 256, + 72: 288, + 80: 320, + 96: 384, +}; +``` + +We can use the above tokens in our code instead of using absolute values. + +```jsx title="using the above tokens in Box component" + +``` + +The above Box will be translated to + +```jsx title="actual applied styles" + +``` + +With NativeBase, you can create your own design system. NativeBase follows [styled-system's specification](https://styled-system.com/theme-specification/) to construct design system. + +Checkout the **[default NativeBase theme](default-theme)** and how to customize it **[here](customizingTheme)**. diff --git a/versioned_docs/version-3.0.7/divider.md b/versioned_docs/version-3.0.7/divider.md new file mode 100644 index 000000000..70f897268 --- /dev/null +++ b/versioned_docs/version-3.0.7/divider.md @@ -0,0 +1,56 @@ +--- +id: divider +title: Divider +--- + +import { ComponentTheme } from '../../src/components'; + +`Divider` is used to visually separate content in a list or group. + +## **Import** + +```jsx +import { Divider } from 'native-base'; +``` + +## Examples + +### Basic + +The Divider displays a thin horizontal or vertical line. + +```ComponentSnackPlayer path=composites,Divider,Basic.tsx + +``` + +### Divider Orientation + +Pass the `orientation` prop and set it to either `horizontal` or `vertical`. + +> **Note:** If the horizontal orientation is used, make sure that the parent element is assigned a width and If the vertical orientation is used, make sure that the parent element is assigned a height. + +```ComponentSnackPlayer path=composites,Divider,Orientation.tsx + +``` + +### Composition + +You can use `bg` or `backgroundColor` to change the divider's color and `width` and `height` to change its width and height respectively. + +```ComponentSnackPlayer path=composites,Divider,Composition.tsx + +``` + +## Props + +```ComponentPropTable path=composites,Divider,index.tsx + +``` + +## Styling + + + +## Accessibility + +- Divider has role set to `separator` and `aria-orientation` to either `horizontal` or `vertical`. diff --git a/versioned_docs/version-3.0.7/faq.md b/versioned_docs/version-3.0.7/faq.md new file mode 100644 index 000000000..d366df99c --- /dev/null +++ b/versioned_docs/version-3.0.7/faq.md @@ -0,0 +1,6 @@ +--- +id: faq +title: FAQ's +--- + +NativeBase FAQ's Coming Soon. diff --git a/versioned_docs/version-3.0.7/flatList.md b/versioned_docs/version-3.0.7/flatList.md new file mode 100644 index 000000000..ae9f1392e --- /dev/null +++ b/versioned_docs/version-3.0.7/flatList.md @@ -0,0 +1,18 @@ +--- +id: flatList +title: FlatList +--- + +A component for rendering performant scrollable lists. + +## Example + +```ComponentSnackPlayer path=basic,FlatList,Basic.tsx + +``` + +## Props + +```ComponentPropTable path=basic,FlatList,FlatList.tsx showStylingProps=true + +``` diff --git a/versioned_docs/version-3.0.7/flex.md b/versioned_docs/version-3.0.7/flex.md new file mode 100644 index 000000000..1667dabac --- /dev/null +++ b/versioned_docs/version-3.0.7/flex.md @@ -0,0 +1,44 @@ +--- +id: flex +title: Flex +--- + +`Flex` is a [`Box`](box.md) with `display: flex` and comes with helpful style shorthand. + +## Import + +```jsx +import { Flex, Spacer } from 'native-base'; +``` + +- `Flex`: a **[Box](box.md)** with `display: flex` +- `Spacer`: creates an adjustable, empty space that can be used to tune the spacing between child elements within `Flex` + +## Usage + +Flex components comes with some helpful shorthand props: + +- `flexDirection` is `direction` +- `flexWrap` is `wrap` +- `alignItems` is `align` +- `justifyContent` is `justify` + +While you can pass the verbose props, using the shorthand can save you some time. + +## Example + +```ComponentSnackPlayer path=primitives,Flex,basic.tsx + +``` + +### Using the Spacer + +You can pass Spacer to add Space between Flex items. + +```ComponentSnackPlayer path=primitives,Flex,spacer.tsx + +``` + +## Props + +**Flex** implements **[Box](box.md)**, so all the Box Props can be passed to it, i.e. [`color`](utility-props#color-and-background-color), [`space`](utility-props#margin-and-padding), [`layout`](utility-props#layout-width-and-height), [`flexbox`](utility-props#flexbox) & [`border`](utility-props#borders) props from [style-system](utility-props). diff --git a/versioned_docs/version-3.0.7/form.md b/versioned_docs/version-3.0.7/form.md new file mode 100644 index 000000000..c2b6ca94d --- /dev/null +++ b/versioned_docs/version-3.0.7/form.md @@ -0,0 +1,199 @@ +--- +id: form +title: Form with Validation +--- + +Apps often require users to enter information into a text field. For example, you might require users to log in with an email address and password combination. + +To make apps secure and easy to use, check whether the information the user has provided is valid. If the user has correctly filled out the form, process the information. If the user submits incorrect information, display a friendly error message letting them know what went wrong. + +## Example + +In this example, learn how to add validation to a form that has a single text field using the following steps: + +1. Create an Input wrapped in FormControl. +2. Add validation logic. +3. Create a button to validate and submit the form. + +### Step 1 + +Create an Input wrapped in FormControl. + +```SnackPlayer name=Form%20Example +import React from "react"; +import { + VStack, + FormControl, + Input, + NativeBaseProvider, + Center +} from "native-base"; + +function BuildingAFormExample() { + const [formData, setData] = React.useState({}); + + return ( + + + Name + setData({ ...formData, name: value })} + /> + + Name should contain atleast 3 character. + + Error Name + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Step 2 + +Add validation logic. + +```SnackPlayer name=Form%20Example(Validation) +import React from 'react'; +import { + VStack, + FormControl, + Input, + NativeBaseProvider, + Center +} from 'native-base'; + + +function BuildingAFormExample() { + const [formData, setData] = React.useState({}); + const [errors, setErrors] = React.useState({}); + const validate = () => { + if (formData.name === undefined) { + setErrors({ + ...errors, + name: 'Name is required', + }); + return false; + } else if (formData.name.length < 3) { + setErrors({ + ...errors, + name: 'Name is too short', + }); + return false; + } + return true; + }; + + return ( + + + Name + setData({ ...formData, name: value })} + /> + + Name should contain atleast 3 character. + + Error Name + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Step 3 + +Create a button to validate and submit the form. + +```SnackPlayer name=Form%20Example(Validate%20and%20Submit) +import React from 'react'; +import { + VStack, + Button, + FormControl, + Input, + NativeBaseProvider, + Center +} from 'native-base'; + +function BuildingAFormExample() { + const [formData, setData] = React.useState({}); + const [errors, setErrors] = React.useState({}); + const validate = () => { + if (formData.name === undefined) { + setErrors({ + ...errors, + name: 'Name is required', + }); + return false; + } else if (formData.name.length < 3) { + setErrors({ + ...errors, + name: 'Name is too short', + }); + return false; + } + return true; + }; + + const onSubmit = () => { + validate() ? console.log('Submitted') : console.log('Validation Failed'); + }; + + return ( + + + Name + setData({ ...formData, name: value })} + /> + {'name' in errors ? + Error +: + + + Name should contain atleast 3 character. + + } + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Community Integration + +NativeBase can be used with other popular Form libraries like [`Formik`](nativebase-formik-ui.md) and [`React Hook Forms`](reactHooksForms.md) as well. For more details checkout Community Integration section of the docs. diff --git a/versioned_docs/version-3.0.7/formControl.md b/versioned_docs/version-3.0.7/formControl.md new file mode 100644 index 000000000..560499ffd --- /dev/null +++ b/versioned_docs/version-3.0.7/formControl.md @@ -0,0 +1,52 @@ +--- +id: formControl +title: FormControl +--- + +import { ComponentTheme } from '../../src/components'; + +`FormControl` provides context such as `isInvalid`, `isDisabled`, and `isRequired` to form elements. + +## Examples + +### Basic + +```ComponentSnackPlayer path=composites,FormControl,Usage.tsx + +``` + +### Custom Style + +```ComponentSnackPlayer path=composites,FormControl,CustomStyle.tsx + +``` + +## Props + +### FormControl + +```ComponentPropTable path=composites,FormControl,FormControl.tsx + +``` + +### FormControl.Label + +```ComponentPropTable path=composites,FormControl,FormControlLabel.tsx + +``` + +### FormControl.ErrorMessage + +```ComponentPropTable path=composites,FormControl,FormControlErrorMessage.tsx + +``` + +### FormControl.HelperText + +```ComponentPropTable path=composites,FormControl,FormControlHelperText.tsx + +``` + +## Styling + + diff --git a/versioned_docs/version-3.0.7/hStack.md b/versioned_docs/version-3.0.7/hStack.md new file mode 100644 index 000000000..276f3d442 --- /dev/null +++ b/versioned_docs/version-3.0.7/hStack.md @@ -0,0 +1,24 @@ +--- +id: hStack +title: HStack / Row +--- + +`HStack` aligns items horizontally. `Row` is also an alias for `HStack`. + +## Import + +```jsx +import { HStack } from 'native-base'; +``` + +## Examples + +```ComponentSnackPlayer path=primitives,HStack,basic.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Stack,HStack.tsx + +``` diff --git a/versioned_docs/version-3.0.7/heading.md b/versioned_docs/version-3.0.7/heading.md new file mode 100644 index 000000000..971b44a20 --- /dev/null +++ b/versioned_docs/version-3.0.7/heading.md @@ -0,0 +1,56 @@ +--- +id: heading +title: Heading +--- + +import { ComponentTheme } from '../../src/components'; + +Headings are used for rendering headlines. `Heading` composes [`Text`](text.md) so you can use all the style props. + +## Import + +```jsx +import { Heading } from 'native-base'; +``` + +## Example + +### Basic + +```ComponentSnackPlayer path=primitives,Heading,Basic.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=primitives,Heading,Sizes.tsx + +``` + +### Truncate + +```ComponentSnackPlayer path=primitives,Heading,Truncate.tsx + +``` + +### Override + +```ComponentSnackPlayer path=primitives,Heading,OverridenStyle.tsx + +``` + +### Composition + +```ComponentSnackPlayer path=primitives,Heading,Composition.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Heading,index.tsx + +``` + +## Styling + + diff --git a/versioned_docs/version-3.0.7/icon.md b/versioned_docs/version-3.0.7/icon.md new file mode 100644 index 000000000..b1438011d --- /dev/null +++ b/versioned_docs/version-3.0.7/icon.md @@ -0,0 +1,54 @@ +--- +id: icon +title: Icon +--- + +You can use icons in multiple ways in NativeBase: + +- Create icon by creating an SVG Icon +- Create icon using createIcon function and use it as a component +- Use a third-party icon library ( such as [@expo/vector-icons](https://github.com/expo/vector-icons) ), with `as` prop. + +## Examples + +### NativeBase Icons + +We provides a set of commonly used interface icons. So you can directly use them in your project. All our icons are create using [`createIcon`](icon#createicon) function from NativeBase. + +```ComponentSnackPlayer path=primitives,Icon,AllIcons.tsx + +``` + +### Basic + +```ComponentSnackPlayer path=primitives,Icon,Basic.tsx + +``` + +Apart from the icons provided by [@expo/vector-icon](https://github.com/expo/vector-icons), you can also create custom icons using SVG. You can use all the components from [react-native-svg](https://github.com/react-native-svg/react-native-svg). + +### Custom Icon + +```ComponentSnackPlayer path=primitives,Icon,CustomIcon.tsx + +``` + +### Create Icon + +```ComponentSnackPlayer path=primitives,Icon,CreateIcon.tsx + +``` + +## Props + +### Icon + +```ComponentPropTable path=primitives,Icon,Icon.tsx showStylingProps=true + +``` + +### createIcon + +```ComponentPropTable path=primitives,Icon,createIcon.tsx + +``` diff --git a/versioned_docs/version-3.0.7/iconButton.md b/versioned_docs/version-3.0.7/iconButton.md new file mode 100644 index 000000000..dcf790c3f --- /dev/null +++ b/versioned_docs/version-3.0.7/iconButton.md @@ -0,0 +1,43 @@ +--- +id: iconButton +title: IconButton +--- + +import { ComponentTheme } from '../../src/components'; + +`IconButton` composes the `Button` component. It is generally used to make an Icon pressable. + +## Examples + +### Basic + +```ComponentSnackPlayer path=composites,IconButton,Basic.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=composites,IconButton,Basic.tsx + +``` + +### Variants + +```ComponentSnackPlayer path=composites,IconButton,Basic.tsx + +``` + +## Props + +```ComponentPropTable path=composites,IconButton,index.tsx + +``` + +## Styling + + + +## Accessibility + +- Use accessibilityLabel for labelling icon buttons to make sure it's announced by screen reader devices. +- IconButton has a `role` set to [button](https://www.w3.org/TR/wai-aria-practices-1.2/#button). diff --git a/versioned_docs/version-3.0.7/image.md b/versioned_docs/version-3.0.7/image.md new file mode 100644 index 000000000..550e56ec4 --- /dev/null +++ b/versioned_docs/version-3.0.7/image.md @@ -0,0 +1,49 @@ +--- +id: image +title: Image +--- + +Generic Image components from [React Native](https://reactnative.dev). + +## Implements + +- [`Image`](https://reactnative.dev/docs/image) from [React Native](https://reactnative.dev). +- You can use all props of React native Image. + +## Examples + +### Basic + +```ComponentSnackPlayer path=primitives,Image,Basic.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=primitives,Image,Sizes.tsx + +``` + +### Border Radius + +```ComponentSnackPlayer path=primitives,Image,BorderRadius.tsx + +``` + +### Fallback + +```ComponentSnackPlayer path=primitives,Image,FallbackSupport.tsx + +``` + +### Basic (With Ref) + +```ComponentSnackPlayer path=primitives,Image,WithRef.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Image,index.tsx showStylingProps=true + +``` diff --git a/versioned_docs/version-3.0.7/input.md b/versioned_docs/version-3.0.7/input.md new file mode 100644 index 000000000..9dcf9e138 --- /dev/null +++ b/versioned_docs/version-3.0.7/input.md @@ -0,0 +1,76 @@ +--- +id: input +title: Input +--- + +import { ComponentTheme } from '../../src/components'; + +The `Input` component is a component that is used to get user input in a text field. + +## Examples + +### Basic + +```ComponentSnackPlayer path=primitives,Input,Basic.tsx + +``` + +### Input Sizes + +```ComponentSnackPlayer path=primitives,Input,Size.tsx + +``` + +### Input Variants + +```ComponentSnackPlayer path=primitives,Input,Variant.tsx + +``` + + + +### Input Elements + +```ComponentSnackPlayer path=primitives,Input,Elements.tsx + +``` + +### Password Input + +```ComponentSnackPlayer path=primitives,Input,Masked.tsx + +``` + +### Controlled Input + +```ComponentSnackPlayer path=primitives,Input,Controlled.tsx + +``` + +### Form Controlled + +```ComponentSnackPlayer path=primitives,Input,FormControlled.tsx + +``` + +## Props + +### Input + +```ComponentPropTable path=primitives,Input,Input.tsx showStylingProps=true + +``` + +### Input.Group + +```ComponentPropTable path=primitives,Input,InputGroup.tsx + +``` + +## Styling + + diff --git a/versioned_docs/version-3.0.7/install-cra.mdx b/versioned_docs/version-3.0.7/install-cra.mdx new file mode 100644 index 000000000..545b206a7 --- /dev/null +++ b/versioned_docs/version-3.0.7/install-cra.mdx @@ -0,0 +1,131 @@ +--- +id: install-cra +title: Install in Create React App project +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +import { TileLink } from '../../src/components'; + + + + + +The easiest way to get started with NativeBase in create react app is using NativeBase template. + +### JavaScript + +```bash +npx create-react-app my-app --template nativebase +cd my-app/ +yarn start +``` + +### TypeScript + +```bash +npx create-react-app my-app --template nativebase-typescript +cd my-app/ +yarn start +``` + + + + + +Create a new CRA project If not exist + +```bash +npx create-react-app my-app +cd my-app +``` + +[Refer this guide](https://necolas.github.io/react-native-web/docs/installation/) if you need additional configurations. + +### Install dependencies + + + + +
+ +```bash +yarn add react-native-web native-base react-native-svg styled-components styled-system react-native-safe-area-context +``` + +
+ + + +
+ +```bash +npm install react-native-web native-base react-native-svg styled-components styled-system react-native-safe-area-context +``` + +
+ + + + +### Run the Hello world example + +Put the below code in your App.js + +```jsx +import React from 'react'; +import { NativeBaseProvider, Box } from 'native-base'; + +function App() { + return ( + + Hello world + + ); +} +``` + + + + + +
+ +
+ +
+
+
+ + +
+
+ +
+
+
diff --git a/versioned_docs/version-3.0.7/install-expo.mdx b/versioned_docs/version-3.0.7/install-expo.mdx new file mode 100644 index 000000000..4b77d6efe --- /dev/null +++ b/versioned_docs/version-3.0.7/install-expo.mdx @@ -0,0 +1,103 @@ +--- +id: install-expo +title: Install in Expo project +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +import { TileLink } from '../../src/components'; + +Expo helps you to create universal (iOS, Android and Web) React Native apps with no build configuration. + +### Create a new expo project + +```bash +npm install --global expo-cli +expo init my-project +cd my-project/ +``` + +[Refer this link](https://docs.expo.io/) for additional information on Expo and setting up an Expo starter app. + +### Install dependencies + + + + + +```bash +yarn add native-base styled-components styled-system +``` + + + + + +```bash +npm install native-base styled-components styled-system +``` + + + + + +```bash +expo install react-native-svg +``` + +```bash +expo install react-native-safe-area-context +``` + +### Run the Hello world example + +Put the below code in your App.js + +```jsx +import React from 'react'; +import { NativeBaseProvider, Box } from 'native-base'; + +function App() { + return ( + + Hello world + + ); +} +``` + +
+ minions clapping +
+ +
+
+
+ + +
+
+ +
+
+
diff --git a/versioned_docs/version-3.0.7/install-next.mdx b/versioned_docs/version-3.0.7/install-next.mdx new file mode 100644 index 000000000..dc9dbca16 --- /dev/null +++ b/versioned_docs/version-3.0.7/install-next.mdx @@ -0,0 +1,263 @@ +--- +id: install-next +title: Install in Next.js project +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +import { TileLink } from '../../src/components'; + + + + + +### Create a new project using Next.js CLI with NativeBase template + +
+ + + + +

Choose your preferred setting and start your development swiftly 🚀

+ +

Plain Javascript

+
+ +```bash + yarn create next-app -e https://github.com/GeekyAnts/nativebase-templates/tree/master/nextjs-with-native-base +``` + +
+Yey! you are all set, start editing src/pages/index.js now. + +

With Typescript

+
+ +```bash + yarn create next-app -e https://github.com/GeekyAnts/nativebase-templates/tree/master/nextjs-with-native-base-typescript +``` + +
+Yey! you are all set, start editing src/pages/index.tsx now. + + + + + +

Choose your preferred setting and start your development swiftly 🚀

+ +

Plain Javascript

+
+ +```bash + npx create-next-app -example https://github.com/GeekyAnts/nativebase-templates/tree/master/nextjs-with-native-base +``` + +
+ +Yey! you are all set, start editing src/pages/index.js now. + +

With Typescript

+
+ +```bash + npx create-next-app -example https://github.com/GeekyAnts/nativebase-templates/tree/master/nextjs-with-native-base-typescript +``` + +
+ +Yey! you are all set, start editing src/pages/index.tsx now. + + + +
+ + + + +### Install dependencies + + + + + +
+ +```bash +yarn add react-native-web native-base react-native-svg styled-components styled-system react-native-safe-area-context +``` + +
+ + + + + +
+ +```bash +npm install react-native-web native-base react-native-svg styled-components styled-system react-native-safe-area-context +``` + +
+ + + + + +We'll need 2 more additional steps. + +1. Install dev dependencies. + + + + + +```bash + yarn add next-compose-plugins next-transpile-modules -D +``` + + + + + +```bash + npm i next-compose-plugins next-transpile-modules --save-dev +``` + + + + + +2. Update your next.config.js with the below content. + +```js +const withPlugins = require('next-compose-plugins'); +const withTM = require('next-transpile-modules')([ + 'native-base', + 'react-native-svg', + 'styled-components', + 'react-native-safe-area-context', + '@react-aria/visually-hidden', + '@react-native-aria/button', + '@react-native-aria/checkbox', + '@react-native-aria/combobox', + '@react-native-aria/focus', + '@react-native-aria/interactions', + '@react-native-aria/listbox', + '@react-native-aria/overlays', + '@react-native-aria/radio', + '@react-native-aria/slider', + '@react-native-aria/tabs', + '@react-native-aria/utils', + '@react-stately/combobox', + '@react-stately/radio', +]); + +module.exports = withPlugins( + [ + withTM, + // your plugins go here. + ], + { + webpack: (config) => { + config.resolve.alias = { + ...(config.resolve.alias || {}), + // Transform all direct `react-native` imports to `react-native-web` + 'react-native$': 'react-native-web', + }; + config.resolve.extensions = [ + '.web.js', + '.web.ts', + '.web.tsx', + ...config.resolve.extensions, + ]; + return config; + }, + } +); +``` + +### Run the Hello world example + +Replace the below code in your pages/\_app.js + +```jsx +import '../styles/globals.css'; +import { NativeBaseProvider } from 'native-base'; + +function MyApp({ Component, pageProps }) { + return ( + + + + ); +} + +export default MyApp; +``` + +and put this in your pages/index.js + +```jsx +import React from 'react'; +import { Box } from 'native-base'; + +export default function App() { + return Hello world; +} +``` + + + + +
+ +
+ +
+
+
+ + +
+
+ +
+
+
diff --git a/versioned_docs/version-3.0.7/install-rn.mdx b/versioned_docs/version-3.0.7/install-rn.mdx new file mode 100644 index 000000000..68d0283a3 --- /dev/null +++ b/versioned_docs/version-3.0.7/install-rn.mdx @@ -0,0 +1,97 @@ +--- +id: install-rn +title: Install in React Native project +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +import { TileLink } from '../../src/components'; + +### Create a new project + +```bash +npx react-native init AwesomeNativeBase +cd AwesomeNativeBase +``` + +### Install dependencies + + + + + +```bash +yarn add native-base react-native-svg styled-components styled-system react-native-safe-area-context +``` + + + + + +```bash +npm install native-base react-native-svg styled-components styled-system react-native-safe-area-context +``` + + + + + +### Run pod install + +```bash +cd ios/ +pod install +``` + +### Run the Hello world example + +Put the below code in your App.js + +```jsx +import React from 'react'; +import { NativeBaseProvider, Box } from 'native-base'; + +function App() { + return ( + + Hello world + + ); +} +``` + +
+ +
+ +
+
+
+ + +
+
+ +
+
+
diff --git a/versioned_docs/version-3.0.7/installation.mdx b/versioned_docs/version-3.0.7/installation.mdx new file mode 100644 index 000000000..91616aeed --- /dev/null +++ b/versioned_docs/version-3.0.7/installation.mdx @@ -0,0 +1,30 @@ +--- +id: installation +title: Installation +--- + +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/). + +Refer the guides shown below to setup NativeBase in your React app. + +
+
+ +
+
+ +
+ +### NativeBase VS Code Extensions + +NativeBase VS Code Extensions are specifically designed to quicken your development process using **NativeBase 3.0**. +NativeBase snippets are shorthand for commonly used NativeBase components. + +All snippets start with the prefix `nb-` and are followed by the name of the desired component. + +aang transitioning to avatar state diff --git a/versioned_docs/version-3.0.7/interaction-styles.mdx b/versioned_docs/version-3.0.7/interaction-styles.mdx new file mode 100644 index 000000000..434d9aa04 --- /dev/null +++ b/versioned_docs/version-3.0.7/interaction-styles.mdx @@ -0,0 +1,225 @@ +--- +id: interaction-styles +title: Pseudo props +--- + +import { + Box, + NativeBaseProvider, + HStack, + VStack, + Text, + Pressable, + Image, +} from 'native-base'; + +NativeBase provides a declarative way to add interaction or platform specific props. + +## Hover + +Using `_hover` pseudo prop, we can customize the style of Pressable component on hover. + + + + + + Hover over me + + + + + +```jsx title="Hover example" + + + Hover me + + +``` + +## Pressed + +Using `_pressed` pseudo prop, we can customize the style of Pressable component on pressed. + + + + + + Press me + + + + + +```jsx title="Pressed example" + + + Hover over me + + +``` + +## Focus + +Using `_focus` pseudo prop, we can customize the style of Pressable component on focus. + + + + + + Try focusing me + + + + + +```jsx title="Focus example" + + + Hover over me + + +``` + +## Platform specific styling + +Using `_web`, `_iOS`, `_android` pseudo props, we can customize the style or behaviour of NativeBase components across platforms. + + + + + + + Primary + + + Web + + + + + Primary + + + Android + + + + + Primary + + + iOS + + + + +```jsx title="Platform specific example" + + + + + Primary + + + Web + + + + + Primary + + + Android + + + + + Primary + + + iOS + + +``` diff --git a/versioned_docs/version-3.0.7/keyboardAvoidingView.md b/versioned_docs/version-3.0.7/keyboardAvoidingView.md new file mode 100644 index 000000000..574e474de --- /dev/null +++ b/versioned_docs/version-3.0.7/keyboardAvoidingView.md @@ -0,0 +1,18 @@ +--- +id: keyboardAvoidingView +title: KeyboardAvoidingView +--- + +Provides a view that moves out of the way of virtual keyboard automatically. It is a component to solve the common problem of views that need to move out of the way of the virtual keyboard. It can automatically adjust either its height, position, or bottom padding based on the keyboard height. + +## Example + +```ComponentSnackPlayer path=basic,KeyboardAvoidingView,Basic.tsx + +``` + +## Props + +```ComponentPropTable path=basic,KeyboardAvoidingView,KeyboardAvoidingView.tsx showStylingProps=true + +``` diff --git a/versioned_docs/version-3.0.7/kitchen-sink.mdx b/versioned_docs/version-3.0.7/kitchen-sink.mdx new file mode 100644 index 000000000..7187d2c16 --- /dev/null +++ b/versioned_docs/version-3.0.7/kitchen-sink.mdx @@ -0,0 +1,66 @@ +--- +id: kitchen-sink +title: Kitchen Sink +--- + +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'; + +
+
+
+

+ Kitchen Sink is a comprehensive demo app showcasing all the NativeBase + components in action. It includes buttons, forms, icons and much more! +

+
+
+
+ Scan with the + + + + Expo app on your Android device to see the special dish we cooked + for you! +
+ +
+
+
+ +
+
+
+
+
+ +
+
+
diff --git a/versioned_docs/version-3.0.7/link.md b/versioned_docs/version-3.0.7/link.md new file mode 100644 index 000000000..5e77da915 --- /dev/null +++ b/versioned_docs/version-3.0.7/link.md @@ -0,0 +1,68 @@ +--- +id: link +title: Link +--- + +import { ComponentTheme } from '../../src/components'; + +`Links` are accessible elements used primarily for navigation. This component is styled to resemble a hyperlink. + +## **Import** + +```jsx +import { Link } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=primitives,Link,Basic.tsx + +``` + +### External Link + +```ComponentSnackPlayer path=primitives,Link,ExternalLink.tsx + +``` + +### Link with Underline + +```ComponentSnackPlayer path=primitives,Link,UnderlineLink.tsx + +``` + +### Link custom onPress + +```ComponentSnackPlayer path=primitives,Link,CustomOnPress.tsx + +``` + +### Link around containers + +```ComponentSnackPlayer path=primitives,Link,CompositeLink.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Link,index.tsx + +``` + + + +## Styling + + + +## Accessibility + +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.0.7/list.md b/versioned_docs/version-3.0.7/list.md new file mode 100644 index 000000000..84f8d3dfc --- /dev/null +++ b/versioned_docs/version-3.0.7/list.md @@ -0,0 +1,64 @@ +--- +id: list +title: List +--- + +List is used to display list items. + +## Examples + +### Basic + +```ComponentSnackPlayer path=primitives,List,Basic.tsx + +``` + +### Ordered List + +```ComponentSnackPlayer path=primitives,List,OrderedList.tsx + +``` + +### Unordered List + +```ComponentSnackPlayer path=primitives,List,UnorderedList.tsx + +``` + +### Styled List + +```ComponentSnackPlayer path=primitives,List,StylingList.tsx + +``` + +### Pressable List + +```ComponentSnackPlayer path=primitives,List,PressableList.tsx + +``` + +### List with ListIcon + +```ComponentSnackPlayer path=primitives,List,ListWithIcon.tsx + +``` + +### Virtualized List + +```ComponentSnackPlayer path=primitives,List,VirtualizedList.tsx + +``` + +## Props + +### List + +```ComponentPropTable path=primitives,List,List.tsx + +``` + +### List.Item + +```ComponentPropTable path=primitives,List,ListItem.tsx + +``` \ No newline at end of file diff --git a/versioned_docs/version-3.0.7/loginsignupforms.md b/versioned_docs/version-3.0.7/loginsignupforms.md new file mode 100644 index 000000000..fc403d08f --- /dev/null +++ b/versioned_docs/version-3.0.7/loginsignupforms.md @@ -0,0 +1,219 @@ +--- +id: loginsignupforms +title: Login/Signup Forms +--- + +## Example + +### Login Form + +```SnackPlayer name=login dependencies=react-native-linear-gradient +import * as React from 'react'; +import { MaterialCommunityIcons, Ionicons } from '@expo/vector-icons'; +import { + NativeBaseProvider, + Box, + Text, + Heading, + VStack, + FormControl, + Input, + Link, + Button, + Icon, + IconButton, + HStack, + Divider +} from 'native-base'; + +export default function App() { + + return ( + + + + Welcome + + + Sign in to continue! + + + + + + Email ID + + + + + + Password + + + + Forget Password? + + + + + + + } + color='muted.700' + size='sm' + /> + } + /> + } + color='muted.700' + size="sm" + /> + } + /> + } + color='muted.700' + size="sm" + /> + } + /> + + + + I'm a new user. + + Sign Up + + + + + + ); +} +``` + +### Signup Form + +```SnackPlayer name=Signup dependencies=react-native-linear-gradient +import * as React from 'react'; +import { MaterialCommunityIcons, Ionicons } from '@expo/vector-icons'; +import { + NativeBaseProvider, + Box, + Text, + Heading, + VStack, + FormControl, + Input, + Link, + Button, + Icon, + IconButton, + HStack, + Divider +} from 'native-base'; + +export default function App() { + + return ( + + + + Welcome + + + Sign up to continue! + + + + + + Email + + + + + + Password + + + + + + Confirm Password + + + + + + + + } + color='muted.700' + size='sm' + /> + } + /> + } + color='muted.700' + size="sm" + /> + } + /> + } + color='muted.700' + size="sm" + /> + } + /> + + + + + + ); +} +``` diff --git a/versioned_docs/version-3.0.7/menu.md b/versioned_docs/version-3.0.7/menu.md new file mode 100644 index 000000000..736456663 --- /dev/null +++ b/versioned_docs/version-3.0.7/menu.md @@ -0,0 +1,94 @@ +--- +id: menu +title: Menu +--- + +import { ComponentTheme } from '../../src/components'; + +A dropdown menu for the common dropdown menu button design pattern. + +## Import + +NativeBase uses 5 components for rendering menus: + +- `Menu`: The wrapper component provides context, state, and focus management. +- `Menu.Item`: The trigger that handles menu selection. +- `Menu.Group`: A wrapper to group related menu items. +- `Menu.OptionGroup`: A wrapper for checkable menu items (radio and checkbox). +- `Menu.ItemOption`: The checkable menu item, to be used with `MenuOptionGroup`. + +```jsx +import { Menu } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=composites,Menu,Basic.tsx + +``` + +### Group + +```ComponentSnackPlayer path=composites,Menu,Group.tsx + +``` + +### MenuOptionGroups + +```ComponentSnackPlayer path=composites,Menu,MenuOptionsGroup.tsx + +``` + +### Menu Placement + +```ComponentSnackPlayer path=composites,Menu,MenuPositions.tsx + +``` + +## Props + +### Menu + +```ComponentPropTable path=composites,Menu,Menu.tsx + +``` + +### MenuItem + +```ComponentPropTable path=composites,Menu,MenuItem.tsx + +``` + +MenuItem implements [Pressable] + +### MenuItemOption + +Extends `MenuItem`. + +### MenuItemOption + +```ComponentPropTable path=composites,Menu,MenuItemOption.tsx + +``` + +### MenuGroup + +```ComponentPropTable path=composites,Menu,MenuGroup.tsx + +``` + +### MenuOptionGroup + +```ComponentPropTable path=composites,Menu,MenuOptionGroup.tsx + +``` + +## Styling + + + +## Accessibility + +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.0.7/migration/Accordion.md b/versioned_docs/version-3.0.7/migration/Accordion.md new file mode 100644 index 000000000..9f75bc7ea --- /dev/null +++ b/versioned_docs/version-3.0.7/migration/Accordion.md @@ -0,0 +1,89 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +We have sliced Accordion into multiple smaller component which not only provides more control over the the code but also makes it more readable. + +## Overview + +Migrating Checkbox components can broadly described in these points: + +- **dataArray** is depreciated. +- **expanded** → `defaultIndex`, and now accepts array of index. +- Pros like **headerStyle**, **contentStyle**, **icon**, **expandedIcon**, **iconStyle**, **expandedIconStyle**, **renderHeader**, **renderContent** are _no longer required_ as components like `Accordion.Button`, `Accordion.Panel`, `Accordion.Icon` replaces them. +- **onAccordionOpen,** **onAccordionOpen** → `onChange`, one callback instead of 2. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { Container, Header, Content, Accordion } from 'native-base'; +const dataArray = [ + { + title: 'First Element', + content: 'Lorem ipsum dolor sit amet', + }, + { title: 'Second Element', content: 'Lorem ipsum dolor sit amet' }, + { + title: 'Third Element', + content: 'Lorem ipsum dolor sit amet', + }, +]; +export default class AccordionExample extends Component { + render() { + return ( + +
+ + + + + ); + } +} +``` + + + + +```tsx +import React from 'react'; +import { Accordion } from 'native-base'; +export default function () { + return ( + + + + First Element + + + Lorem ipsum dolor sit amet + + + + Second Element + + + Lorem ipsum dolor sit amet + + + + Third Element + + + Lorem ipsum dolor sit amet + + + ); +} +``` + + + diff --git a/versioned_docs/version-3.0.7/migration/Actionsheet.md b/versioned_docs/version-3.0.7/migration/Actionsheet.md new file mode 100644 index 000000000..9836c69d3 --- /dev/null +++ b/versioned_docs/version-3.0.7/migration/Actionsheet.md @@ -0,0 +1,102 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +We have sliced [`Actionsheet`](actionSheet.md) into multiple smaller component which not only provides more control over the the code but also makes it more readable. + +## Overview + +Migrating Checkbox components can broadly described in these points: + +- **options** (prop) → `Actionsheet.Item` (component). +- Props like **cancelButtonIndex**, **cancelButtonIndex** are _no longer required_ as components like `Actionsheet.Item` can be customised as per need. +- **title** (prop) → NativeBase components such as `Heading` and `Text` can be used inside `ActionSheet.Content` to show the title. +- Declarative approach to show and hide using `isOpen` prop, instead of `show()` and `hide()`. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { + Container, + Header, + Button, + Content, + ActionSheet, + Text, +} from 'native-base'; +var BUTTONS = ['Option 1', 'Option 2', 'Option 3', 'Delete', 'Cancel']; +var DESTRUCTIVE_INDEX = 3; +var CANCEL_INDEX = 4; +export default class ActionSheetExample extends Component { + constructor(props) { + super(props); + this.state = {}; + } + render() { + return ( + + + + + + ); + } +} +``` + + + + +```tsx +import React from 'react'; +import { Button, Actionsheet, useDisclose } from 'native-base'; + +export default function () { + const { isOpen, onOpen, onClose } = useDisclose(); + return ( + <> + + + + + Header + Option 1 + Option 2 + Option 3 + Delete + + + Cancel + + + + ); +} +``` + + + diff --git a/versioned_docs/version-3.0.7/migration/Badge.md b/versioned_docs/version-3.0.7/migration/Badge.md new file mode 100644 index 000000000..3bec509f0 --- /dev/null +++ b/versioned_docs/version-3.0.7/migration/Badge.md @@ -0,0 +1,39 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +Migrating [`Badge`](badge.md) to v3 will provide a lot more **design**, **size, variant**, **color** and **customisation** options. + +## Overview + +Migrating Badge components can be broadly described in these points: + +- No need to wrap you text inside text component anymore. +- In v3 the color is controlled by `colorScheme` prop. And it accepts all the color available in the theme. + +## Code Comparison + + + + +```tsx + + Success + +``` + + + + +```tsx + + Success + +``` + + + diff --git a/versioned_docs/version-3.0.7/migration/Button.md b/versioned_docs/version-3.0.7/migration/Button.md new file mode 100644 index 000000000..5f31c9ba4 --- /dev/null +++ b/versioned_docs/version-3.0.7/migration/Button.md @@ -0,0 +1,191 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +Migrating [`Button`](button.mdx) to v3 will provide a lot more **design**, **size**, **color** and **customisation** options. + +## Overview + +Migrating Button components can broadly described in these points: + +- No need to wrap you text inside `Text` component anymore. +- `isDisabled` prop can be used to disable the button. +- Icons in Button: + `leftIcon` and `rightIcon` are the new alternative to iconLeft and iconRight respectively and they accept **tsx.Element**. +- Colors of the Buttons: + In v3 the color is controlled by `colorScheme` prop. So all the color providing props [ **light**, **info**, **success**, **warning**, **danger** and **dark** ] can be passed as value (and more) to `colorScheme` props. +- Design of the Button: + With v3 we're providing some mostly frequently used designs as `variants` [ **solid**, **outline**, **ghost**, **link** and **unstyled** ] and lot more customisation. +- Sizes of the Button: + In v3 the size is controlled by `size` prop. And it accepts pre-defined sizes [ like xs, sm md, lg ] and also custom values. + +## Code Comparison + +## Colors to the Button + +Besides option like **light**, **info**, **success**, **warning**, **danger** and **dark**. Now you can also provide colors like **red**, **blue**, **cyan**, **teal** and a lot more. + + + + +![Button/Screenshot_2021-01-22_at_12.29.32_PM.png](Button/Screenshot_2021-01-22_at_12.29.32_PM.png) + +```tsx + +``` + + + + +![Button/Screenshot_2021-01-22_at_12.53.09_PM.png](Button/Screenshot_2021-01-22_at_12.53.09_PM.png) + +```tsx + +``` + + + + +### Sizes of the Button: + +Besides option like **light**, **info**, **success**, **warning**, **danger** and **dark**. Now you can also provide colors like **red**, **blue**, **cyan**, **teal** and a lot more. + + + + +![Button/Screenshot_2021-01-22_at_2.37.09_PM.png](Button/Screenshot_2021-01-22_at_2.37.09_PM.png) + +```tsx + +``` + + + + +![Button/Screenshot_2021-01-22_at_2.38.52_PM.png](Button/Screenshot_2021-01-22_at_2.38.52_PM.png) + +```tsx + +``` + + + + +### Designing the Button + +With v3 you can combine variants and style props to create various designs. + + + + +![Button/Screenshot_2021-01-22_at_1.16.25_PM.png](Button/Screenshot_2021-01-22_at_1.16.25_PM.png) + +```tsx + +``` + +![Button/Screenshot_2021-01-22_at_1.23.42_PM.png](Button/Screenshot_2021-01-22_at_1.23.42_PM.png) + +```tsx + +``` + +![Button/Screenshot_2021-01-22_at_1.17.11_PM.png](Button/Screenshot_2021-01-22_at_1.17.11_PM.png) + +```tsx + +``` + + + + +![Button/Screenshot_2021-01-22_at_1.15.34_PM.png](Button/Screenshot_2021-01-22_at_1.15.34_PM.png) + +```tsx + +``` + +![Button/Screenshot_2021-01-22_at_1.22.36_PM.png](Button/Screenshot_2021-01-22_at_1.22.36_PM.png) + +```tsx + +``` + +![Button/Screenshot_2021-01-22_at_1.20.36_PM.png](Button/Screenshot_2021-01-22_at_1.20.36_PM.png) + +```tsx + +``` + + + + +### Icon Button + +With v3 iconLeft and iconRight can now accepts tsx.Element as child and render the element at the appropriate place. + + + + +![Button/Screenshot_2021-01-22_at_1.32.47_PM.png](Button/Screenshot_2021-01-22_at_1.32.47_PM.png) + +```tsx + +``` + + + + +![Button/Screenshot_2021-01-22_at_1.38.15_PM.png](Button/Screenshot_2021-01-22_at_1.38.15_PM.png) + +```tsx + +``` + + + diff --git a/versioned_docs/version-3.0.7/migration/Button/Screenshot_2021-01-22_at_1.15.34_PM.png b/versioned_docs/version-3.0.7/migration/Button/Screenshot_2021-01-22_at_1.15.34_PM.png new file mode 100644 index 0000000000000000000000000000000000000000..1f0a85886576217db343150d2e295264fcfad8fa GIT binary patch literal 9022 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 Yc51Ey+58dy`~Q@ZoSJO4v_;7O0lVT4&j0`b literal 0 HcmV?d00001 diff --git a/versioned_docs/version-3.0.7/migration/Button/Screenshot_2021-01-22_at_1.17.11_PM.png b/versioned_docs/version-3.0.7/migration/Button/Screenshot_2021-01-22_at_1.17.11_PM.png new file mode 100644 index 0000000000000000000000000000000000000000..2c80f15496b1cb3c88a84b637f60b3a5dc1fc2d9 GIT binary patch literal 10048 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 literal 0 HcmV?d00001 diff --git a/versioned_docs/version-3.0.7/migration/Button/Screenshot_2021-01-22_at_1.22.36_PM.png b/versioned_docs/version-3.0.7/migration/Button/Screenshot_2021-01-22_at_1.22.36_PM.png new file mode 100644 index 0000000000000000000000000000000000000000..cd3d19be5125925682daa1702d1bb8a58aef387c GIT binary patch literal 8306 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 literal 0 HcmV?d00001 diff --git a/versioned_docs/version-3.0.7/migration/Button/Screenshot_2021-01-22_at_1.23.42_PM.png b/versioned_docs/version-3.0.7/migration/Button/Screenshot_2021-01-22_at_1.23.42_PM.png new file mode 100644 index 0000000000000000000000000000000000000000..5bef6f3942a96f65ff94287897fa2dc013fc6357 GIT binary patch literal 7841 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 E0C`eO$p8QV literal 0 HcmV?d00001 diff --git a/versioned_docs/version-3.0.7/migration/Button/Screenshot_2021-01-22_at_1.32.47_PM.png b/versioned_docs/version-3.0.7/migration/Button/Screenshot_2021-01-22_at_1.32.47_PM.png new file mode 100644 index 0000000000000000000000000000000000000000..7bb43656da0b713ded795a0025aafb6002a68f46 GIT binary patch literal 9384 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 ZR}i?Ov7)pI`=tONBdH)!DP|P-e*kRRuoM6Q literal 0 HcmV?d00001 diff --git a/versioned_docs/version-3.0.7/migration/Button/Screenshot_2021-01-22_at_12.29.32_PM.png b/versioned_docs/version-3.0.7/migration/Button/Screenshot_2021-01-22_at_12.29.32_PM.png new file mode 100644 index 0000000000000000000000000000000000000000..24f882b52744257850152b4232ac76d98fb4e8dc GIT binary patch literal 8297 zcmZX31ymee67DcSaF^f^Ai>=ScXx*bm*6(IySuv#8YB!(aDoI6POu;oNN{&~Gtxt)?Q2fl7i3001!L<)k!Tc-#vqA-{S#_Rt&0008K=Hjb8yAWjmlkE~BRu0$*ql{R*I5(2J59E$j0 z0xM&i2hLzjT@3vfLNP)DXr?sudN3rWft3(n`j@ht*rNY0-`)G2$-t?+Th(^1>vcG> z#!RMUSg`>B7K>JTit}b1T4kf8fg}dNr0+#lYZuB6BY6E9qX_*fF!P$Ph$pRD1+^|P z;aPWj6U{;hkOYq6y5%$y8JGZU?0e(dzyYMf*Uc1yrGj_GYM8>|Bsvv>8`HfifYyvI zvq8#cLZn+`fJ*iD_cpu$lIx-Z{cmFtLL`N6JaEpX%>dlwZ!lpf?S4@NP{EyDRgDeQ zD2L)M1T!M6laYr6u6w74Y{`fBj#t<^J3Lgj#njofiGqjE%oEQU4??#^SawU55;hi{ z)PZ_m4ck*o@Uu`|GWogQ>8RU9`AYj)uEB{hNO)VM%uw)bjV#p%1i?Yk3Q0*2p*RDZ zTb)@S(?z%x@h5|c>IlJ~DuYsyp&|olhz<1!=@V9eO1;wAnphP_t*S1p+h^c

r!* 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 literal 0 HcmV?d00001 diff --git a/versioned_docs/version-3.0.7/migration/Button/Screenshot_2021-01-22_at_12.53.09_PM.png b/versioned_docs/version-3.0.7/migration/Button/Screenshot_2021-01-22_at_12.53.09_PM.png new file mode 100644 index 0000000000000000000000000000000000000000..17cf494df3626e48fb0851c0b0324b43a9f5bdf2 GIT binary patch literal 8494 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 literal 0 HcmV?d00001 diff --git a/versioned_docs/version-3.0.7/migration/Card.md b/versioned_docs/version-3.0.7/migration/Card.md new file mode 100644 index 000000000..14550a8cf --- /dev/null +++ b/versioned_docs/version-3.0.7/migration/Card.md @@ -0,0 +1,86 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +With NativeBase v3 we have removed Card components because as it's very simple to create various card layout using primitive components. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { + Container, + Header, + Content, + Card, + CardItem, + Text, + Body, +} from 'native-base'; +export default class CardItemBordered extends Component { + render() { + return ( + +

+ + + + NativeBase + + + + + NativeBase is a free and open source framework that enable + developers to build high-quality mobile apps using React + Native iOS and Android apps with a fusion of ES6. + + + + + GeekyAnts + + + + + ); + } +} +``` + + + + +```tsx +import React from 'react'; +import { VStack, Box, Divider } from 'native-base'; + +export default function () { + return ( + + }> + + NativeBase + + + NativeBase is a free and open source framework that enable developers + to build high-quality mobile apps using React Native iOS and Android + apps with a fusion of ES6. + + + GeekyAnts + + + + ); +} +``` + + + diff --git a/versioned_docs/version-3.0.7/migration/Checkbox.md b/versioned_docs/version-3.0.7/migration/Checkbox.md new file mode 100644 index 000000000..ec3666348 --- /dev/null +++ b/versioned_docs/version-3.0.7/migration/Checkbox.md @@ -0,0 +1,49 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +Migrating [`Checkbox`](checkBox.md) to v3 will provide a lot more **design**, **size**, **color** and **customisation** option. + +## Overview + +Migrating Checkbox components can broadly described in these points: + +- **checked** props is deprecated, instead now we provide you with `defaultIsChecked` and `isChecked` prop to better manage your checkbox. For most cases **checked** can be replaced with `isChecked`. +- Colors of the Checkbox: + In v3 the color is controlled by `colorScheme` prop. And it accepts all the color available in the theme. +- onPress props is deprecated, instead v3 provides onChange which provides a callback when state of the checkbox change. + +## Code Comparison + + + + +![Checkbox/Screenshot_2021-01-22_at_3.09.29_PM.png](Checkbox/Screenshot_2021-01-22_at_3.09.29_PM.png) + +```tsx + + + Finish list Screen + +``` + + + + +![Checkbox/Screenshot_2021-01-22_at_4.34.08_PM.png](Checkbox/Screenshot_2021-01-22_at_4.34.08_PM.png) + +```tsx + +Finish list Screen +// alternative: pressing the text will also trigger onChange + + Finish list Screen + +``` + + + diff --git a/versioned_docs/version-3.0.7/migration/Checkbox/Screenshot_2021-01-22_at_3.09.29_PM.png b/versioned_docs/version-3.0.7/migration/Checkbox/Screenshot_2021-01-22_at_3.09.29_PM.png new file mode 100644 index 0000000000000000000000000000000000000000..121ecaa72899fd19e5270f0ef05545eafc2add0d GIT binary patch literal 10808 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

<0X>;T!R$9~6$gERf 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 De@@vF literal 0 HcmV?d00001 diff --git a/versioned_docs/version-3.0.7/migration/Checkbox/Screenshot_2021-01-22_at_4.34.08_PM.png b/versioned_docs/version-3.0.7/migration/Checkbox/Screenshot_2021-01-22_at_4.34.08_PM.png new file mode 100644 index 0000000000000000000000000000000000000000..ef1c1a20da072291a0e4f16f34ec0f2f6b190f2e GIT binary patch literal 9954 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 literal 0 HcmV?d00001 diff --git a/versioned_docs/version-3.0.7/migration/DatePicker.md b/versioned_docs/version-3.0.7/migration/DatePicker.md new file mode 100644 index 000000000..12d26269e --- /dev/null +++ b/versioned_docs/version-3.0.7/migration/DatePicker.md @@ -0,0 +1 @@ +DatePicker is currently in progress and will be coming soon. Till then you can use React Native's [DateTimePicker](https://github.com/react-native-datetimepicker/datetimepicker). diff --git a/versioned_docs/version-3.0.7/migration/DeckSwiper.md b/versioned_docs/version-3.0.7/migration/DeckSwiper.md new file mode 100644 index 000000000..7fec051f2 --- /dev/null +++ b/versioned_docs/version-3.0.7/migration/DeckSwiper.md @@ -0,0 +1,3 @@ +We're still thinking whether we should add a DeckSwiper component, let us know on [discord channel](https://discord.com/invite/TSgCw2UPmb). +Till then you can use [react-native-deck-swiper +](https://www.npmjs.com/package/react-native-deck-swiper). diff --git a/versioned_docs/version-3.0.7/migration/Drawer.md b/versioned_docs/version-3.0.7/migration/Drawer.md new file mode 100644 index 000000000..5244b40b4 --- /dev/null +++ b/versioned_docs/version-3.0.7/migration/Drawer.md @@ -0,0 +1 @@ +Drawer component is still in progress, until it's done you can check out the recipe of integrating React Navigation's [DrawerNavigation](https://reactnavigation.org/docs/drawer-based-navigation/) in NB. diff --git a/versioned_docs/version-3.0.7/migration/FABs.md b/versioned_docs/version-3.0.7/migration/FABs.md new file mode 100644 index 000000000..7c7e20906 --- /dev/null +++ b/versioned_docs/version-3.0.7/migration/FABs.md @@ -0,0 +1,63 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +Migrating [`FAB`](FAB.md) to v3 will provide a lot more **design**, **size**, **color** and **customisation** option. + +## Overview + +Migrating Badge components can broadly described in these points: + +- Instead of Passing Icon as child, use `icon` prop. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { Container, Header, View, Icon, Fab } from 'native-base'; +export default function () { + return ( + +

+ + + + + + + ); +} +``` + + + + +```tsx +import React from 'react'; +import { Fab, Icon } from 'native-base'; + +export default function () { + return ( + } + /> + ); +} +``` + + + diff --git a/versioned_docs/version-3.0.7/migration/FooterTab.md b/versioned_docs/version-3.0.7/migration/FooterTab.md new file mode 100644 index 000000000..f56f01a8d --- /dev/null +++ b/versioned_docs/version-3.0.7/migration/FooterTab.md @@ -0,0 +1 @@ +With NativeBase v3 we have removed FooterTab components because as it's very simple to create using HStack components. You can checkout the [recipe](buildingFooterTabs.md). diff --git a/versioned_docs/version-3.0.7/migration/Form.md b/versioned_docs/version-3.0.7/migration/Form.md new file mode 100644 index 000000000..7d89a15c5 --- /dev/null +++ b/versioned_docs/version-3.0.7/migration/Form.md @@ -0,0 +1,67 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +With NativeBase v3 we have replaced Form with [`FormControl`](formControl.md) and sliced into [`FormControl.Label`](formControl.md#formcontrollabel), [`FormControl.HelperText`](formControl.md#formcontrolhelpertext) and [`FormControl.ErrorMessage`](formControl#formcontrolerrormessage). + +Here an example to show the code comparison. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { Form, Item, Input } from 'native-base'; +export default class FormExample extends Component { + render() { + return ( +
+ + + + + + + + +
+ ); + } +} +// need to re-write +``` + + + + +```tsx +import React from 'react'; +import { Input, Stack, FormControl } from 'native-base'; +export const FormExample = () => { + return ( + + + + Username + + + + Password + + + + + ); +}; + +// v3 version +``` + + + diff --git a/versioned_docs/version-3.0.7/migration/Guide.md b/versioned_docs/version-3.0.7/migration/Guide.md new file mode 100644 index 000000000..2b3095055 --- /dev/null +++ b/versioned_docs/version-3.0.7/migration/Guide.md @@ -0,0 +1,19 @@ +--- +id: Guide +title: Guide to v3 +--- + +`v3` comes with a lot of changes in philosophy as well as the API. We have re-imagined how we should code for React Native as well as web. Keeping this in mind, you might face a lot of changes from v2 to v3. This might be a bit of tedious work but we promise you, it will be worth it! + +If you are looking to upgrade NativeBase from `v2` to `v3` in your application, we recommend looking into the following sections first: + +- Introduction +- Core Concepts +- Features +- Themes + +This will allow you to leverage `v3` to the fullest. We have further divided the migration guide into different components, so that it's easier to search for a specific one. + +We hope that `v3` is able to fulfill all the expectations set by it's predecessor and makes the overall UX and DX of your application better. + +Happy Coding! diff --git a/versioned_docs/version-3.0.7/migration/Header.md b/versioned_docs/version-3.0.7/migration/Header.md new file mode 100644 index 000000000..bcb1f312d --- /dev/null +++ b/versioned_docs/version-3.0.7/migration/Header.md @@ -0,0 +1 @@ +With v3 we have removed the **Header** as it can be easily built using `HStack`. You can checkout its recipe [here](/buildingAppBar). diff --git a/versioned_docs/version-3.0.7/migration/Icon.md b/versioned_docs/version-3.0.7/migration/Icon.md new file mode 100644 index 000000000..12cfe68b2 --- /dev/null +++ b/versioned_docs/version-3.0.7/migration/Icon.md @@ -0,0 +1,75 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +Migrating [`Icon`](icon.md) to v3 will provide a lot more **customisation** option. You can also create custom icons using SVG. + +## Overview + +Migrating Icon components can broadly described in these points: + +- **ios**, **android** and **type** props have been deprecated. +- default Icon type i.e **Ionicons** has been removed, now v3 does not uses any. +- v3 uses a third-party icon library ( such as @expo/vector-icons ), with **as** prop. +- custom colors and size can be added using **color** and **size** props. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { Icon } from 'native-base'; + +export default class IconExample extends Component { + render() { + return ( + <> + + + + + ); + } +} +// need to re-write +``` + + + + +```tsx +import React from 'react'; +import { Platform } from 'react-native'; +import { Icon } from 'native-base'; +import { Ionicons, FontAwesome } from '@expo/vector-icons'; + +export default function () { + return ( + <> + + + + + ); +} + +// v3 version +``` + + + diff --git a/versioned_docs/version-3.0.7/migration/Layout.md b/versioned_docs/version-3.0.7/migration/Layout.md new file mode 100644 index 000000000..5e77d987d --- /dev/null +++ b/versioned_docs/version-3.0.7/migration/Layout.md @@ -0,0 +1,72 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +## Grid + +You can easily design layouts with [Row](hStack.md) or [Column](VStack.md) components. + +## List + +With NativeBase v3 we have removed List components because as it's very simple to create various list layout using primitive components. + +### Code Comparison + + + + +```tsx + + + + Simon Mignolet + + + + + + + + Nathaniel Clyne + + + + + + + + Dejan Lovren + + + + + + +``` + + + + +```tsx +} w="90%"> + + Simon Mignolet + + + + Nathaniel Clyne + + + + Dejan Lovren + + + +``` + + + diff --git a/versioned_docs/version-3.0.7/migration/List.md b/versioned_docs/version-3.0.7/migration/List.md new file mode 100644 index 000000000..e69de29bb diff --git a/versioned_docs/version-3.0.7/migration/Picker.md b/versioned_docs/version-3.0.7/migration/Picker.md new file mode 100644 index 000000000..3d1804beb --- /dev/null +++ b/versioned_docs/version-3.0.7/migration/Picker.md @@ -0,0 +1,86 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +With v3 we have replaced the **Picker** with [`Select`](select.md). + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { Container, Header, Content, Picker, Form } from 'native-base'; + +export default class PickerExample extends Component { + constructor(props) { + super(props); + this.state = { + selected: 'key1', + }; + } + onValueChange(value: string) { + this.setState({ + selected: value, + }); + } + render() { + return ( + +
+ +
+ + + + + + + +
+ + + ); + } +} +``` + + + + +```tsx +import React from 'react'; +import { Icon, Select } from 'native-base'; + +export default function () { + let [language, setLanguage] = React.useState('key0'); + return ( + + ); +} +``` + + + diff --git a/versioned_docs/version-3.0.7/migration/Radio Button.md b/versioned_docs/version-3.0.7/migration/Radio Button.md new file mode 100644 index 000000000..67f137395 --- /dev/null +++ b/versioned_docs/version-3.0.7/migration/Radio Button.md @@ -0,0 +1,90 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +Migrating [`Radio`](radio.md) to v3 will provide a lot more **design**, **size**, **color** and **customisation** option. + +## Overview + +Migrating Radio components can broadly described in these points: + +- In v3 `Radio` can only used along with `Radio.Group`. +- **selected** is deprecated, instead v3 provides with **value** prop in `Radio.Group`. +- Colors of the Radio: + **color** and **selectedColor** props are deprecated, instead now in v3 **color** is controlled by `colorScheme` prop, and it accepts all the color available in the theme. +- **onPress** prop is deprecated, instead v3 provides **onChange** which provides a callback when state of the checkbox change. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { ListItem, Container, Content, Header, Text, Radio } from 'native-base'; +export default class RadioButtonExample extends Component { + constructor() { + super(); + this.state = { + itemSelected: '', + }; + } + render() { + return ( + +
+ + + this.setState({ itemSelected: 'one' })} + selected={this.state.itemSelected == 'one'} + /> + One + + + this.setState({ itemSelected: 'two' })} + selected={this.state.itemSelected == 'two'} + /> + Two + + + + ); + } +} +``` + + + + +```tsx +import React from 'react'; +import { Radio } from 'native-base'; +export default function () { + const [value, setValue] = React.useState('one'); + return ( + { + setValue(nextValue); + }} + > + + One + + + Two + + + ); +} +``` + + + diff --git a/versioned_docs/version-3.0.7/migration/Searchbar.md b/versioned_docs/version-3.0.7/migration/Searchbar.md new file mode 100644 index 000000000..7bc7d3399 --- /dev/null +++ b/versioned_docs/version-3.0.7/migration/Searchbar.md @@ -0,0 +1 @@ +With NativeBase v3 we have removed **Searchbar** components because as it's very simple to create using `Input` components. To view some examples for seachbars, checkout the [searchbar recipe](buildingSearchBar.md). diff --git a/versioned_docs/version-3.0.7/migration/Segment.md b/versioned_docs/version-3.0.7/migration/Segment.md new file mode 100644 index 000000000..806662cee --- /dev/null +++ b/versioned_docs/version-3.0.7/migration/Segment.md @@ -0,0 +1,2 @@ +With NativeBase v3 we have removed the **Segment** component because it's more like a Tab component. You can check out the Tab recipe +[here](buildingTabView.md). diff --git a/versioned_docs/version-3.0.7/migration/Spinner.md b/versioned_docs/version-3.0.7/migration/Spinner.md new file mode 100644 index 000000000..b066b6093 --- /dev/null +++ b/versioned_docs/version-3.0.7/migration/Spinner.md @@ -0,0 +1,42 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +Migrating [`Spinner`](spinner.md) to v3 will provide a lot more **size**, **color** and **customisation** option. + +## Overview + +Migrating Spinner components can broadly described in these points: + +- Get 2 size options, namely **sm/small** and **lg/large** or pass a number as a **size** prop. +- In v3 the color are provided by theme, so the shade for the color should be passed along with the color name. + +## Code Comparison + + + + +```tsx + + + + +``` + + + + +```tsx + + + + + +``` + + + diff --git a/versioned_docs/version-3.0.7/migration/SwipeList.md b/versioned_docs/version-3.0.7/migration/SwipeList.md new file mode 100644 index 000000000..4376cf523 --- /dev/null +++ b/versioned_docs/version-3.0.7/migration/SwipeList.md @@ -0,0 +1 @@ +With NativeBase v3 we have removed **SwipeList** component. To view example for SwipeList built using [react-native-swipe-list](https://www.npmjs.com/package/react-native-swipe-list-view) in NB, checkout this [recipe](buildingSwipeList.md). diff --git a/versioned_docs/version-3.0.7/migration/Tabs.md b/versioned_docs/version-3.0.7/migration/Tabs.md new file mode 100644 index 000000000..f809f9a07 --- /dev/null +++ b/versioned_docs/version-3.0.7/migration/Tabs.md @@ -0,0 +1,62 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +API for Tabs is in progress, in the meantine you can check this [recipe](buildingTabView.md) for building Tabs. + + diff --git a/versioned_docs/version-3.0.7/migration/Thumbnail.md b/versioned_docs/version-3.0.7/migration/Thumbnail.md new file mode 100644 index 000000000..4a2f91bae --- /dev/null +++ b/versioned_docs/version-3.0.7/migration/Thumbnail.md @@ -0,0 +1,68 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +With v3 we have replaced the **Thumbnail** with [`Image`](image.md). And we also provide [`Avatar`](avatar.md) as well. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { Container, Header, Content, Thumbnail, Text } from 'native-base'; +export default class ThumbnailExample extends Component { + render() { + const uri = + 'https://facebook.github.io/react-native/docs/assets/favicon.png'; + return ( + +
+ + Square Thumbnail + + + + Circular Thumbnail + + + + + + ); + } +} +``` + + + + +```tsx +import React from 'react'; +import { Avatar, VStack, Text, Image } from 'native-base'; + +export default function () { + const uri = 'https://facebook.github.io/react-native/docs/assets/favicon.png'; + + return ( + + Square Thumbnail + react-native + react-native + react-native + Circular Thumbnail + + + + + ); +} +``` + + + diff --git a/versioned_docs/version-3.0.7/migration/Toast.md b/versioned_docs/version-3.0.7/migration/Toast.md new file mode 100644 index 000000000..43aa50dea --- /dev/null +++ b/versioned_docs/version-3.0.7/migration/Toast.md @@ -0,0 +1,79 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +In v3, [`Toast`](toast.md) can be created using **useToast** hook + +## Overview + +Migrating Toast components can broadly described in these points: + +- **buttonText** is no longer supported. +- **type** (prop) → **status** prop. +- **position** (prop) → **placement** prop. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { Container, Header, Content, Toast, Button, Text } from 'native-base'; + +export default class ToastExample extends Component { + render() { + return ( + +
+ + + + + ); + } +} +``` + + + + +```tsx +import React from 'react'; +import { Button, useToast } from 'native-base'; + +export default function () { + const toast = useToast(); + + return ( + + ); +} +``` + + + diff --git a/versioned_docs/version-3.0.7/migration/Typography.md b/versioned_docs/version-3.0.7/migration/Typography.md new file mode 100644 index 000000000..eca34dd79 --- /dev/null +++ b/versioned_docs/version-3.0.7/migration/Typography.md @@ -0,0 +1,34 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +**H1**, **H2** and **H3** all have been replaced with [`Heading`](heading.md) component. + +## Code Comparison + + + + +```tsx +

Header One

+

Header Two

+

Header Three

+Default +``` + + + + +```tsx +Header One +Header Two +Header Three +Default +``` + + + diff --git a/versioned_docs/version-3.0.7/modal.md b/versioned_docs/version-3.0.7/modal.md new file mode 100644 index 000000000..df0f0dd3e --- /dev/null +++ b/versioned_docs/version-3.0.7/modal.md @@ -0,0 +1,92 @@ +--- +id: modal +title: Modal +--- + +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. + +## Import + +NativeBase exports Modal Compound component: + +- `Modal`: The wrapper that provides context for its children. +- `Modal.Content`: The container for the modal dialog's content. +- `Modal.Header`: The header that labels the modal dialog. +- `Modal.Footer`: The footer that houses the modal actions. +- `Modal.Body`: The wrapper that houses the modal's main content. +- `Modal.CloseButton`: The button that closes the modal. + +```jsx +import { Modal } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=composites,Modal,Basic.tsx + +``` + +### Modal Sizes + +You can pass `size` prop to NativeBase Modal , it can take `sm`, `md`, `lg`, `full` that maps to **60%**, **75%**, **90%**, **100%**, or a string or a numerical width of the Modal. + +```ComponentSnackPlayer path=composites,Modal,Size.tsx + +``` + +### intialFocusRef and finalFocusRef Example + +```ComponentSnackPlayer path=composites,Modal,ModalRefEg.tsx + +``` + +### Modal with avoidKeyboard + +```ComponentSnackPlayer path=composites,Modal,ModalWithAvoidKeyboard.tsx + +``` + +### Modal Placement + +```ComponentSnackPlayer path=composites,Modal,ModalPlacement.tsx + +``` + +
+ +:::tip Tip +If you want a specifically aligned Modal, pass `justifyContent` and `alignItems` to Modal. +::: + +## Accessibility + +Uses React Native ARIA [@react-native-aria/focus](https://react-native-aria.geekyants.com/docs/FocusScope) which follows the [Dialog Modal WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#dialog_modal). + +### Keyboard Interactions + +| Key | Description | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `Tab` | Moves focus to the next tabbable element inside the dialog. If focus is on the last tabbable element inside the dialog, moves focus to the first tabbable element inside the dialog. | +| `Shift` + `Tab` | Moves focus to the previous tabbable element inside the dialog. If focus is on the first tabbable element inside the dialog, moves focus to the last tabbable element inside the dialog. | +| `Escape` | Closes the dialog | + +## Props + +### Modal + +```ComponentPropTable path=composites,Modal,Modal.tsx + +``` + +### Children components + +- `Modal.Header`, `Modal.Footer` and `Modal.Body` composes the [`Box`](box.md) component. +- `Modal.CloseButton` composes the [`Button`](button.md). + +## Styling + + diff --git a/versioned_docs/version-3.0.7/nativebase-factory.md b/versioned_docs/version-3.0.7/nativebase-factory.md new file mode 100644 index 000000000..69ed5628f --- /dev/null +++ b/versioned_docs/version-3.0.7/nativebase-factory.md @@ -0,0 +1,146 @@ +--- +id: nativebase-factory +title: NativeBase Factory +--- + +NativeBase factory is a function that converts non-nativebase components to nativebase enabled components so you can pass style props to them. + +```jsx +import { Factory } from 'native-base'; +``` + +## Usage + +```SnackPlayer name=NativeBase%20Factory%20Usage +import React from 'react'; +import { Factory, NativeBaseProvider, Center } from 'native-base'; +import { View } from 'react-native'; + +function FactoryViewExample () { + const FactoryView = Factory(View); + return ( + + ); +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Defining component theme + +```SnackPlayer name=NativeBase%20Factory%20Component%20Theme +import React from 'react'; +import { Factory, NativeBaseProvider, Center } from 'native-base'; +import { View } from 'react-native'; + +function FactoryViewExample () { + const FactoryView = Factory(View, { + baseStyle: { + bg: 'cyan.300', + borderRadius: 'md', + }, + }); + return ; +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Using mode in component theme + +```SnackPlayer name=NativeBase%20Factory%20Component%20Theme +import React from 'react'; +import { Factory, themeTools, NativeBaseProvider, Center } from 'native-base'; +import { View } from 'react-native'; + +function FactoryViewModeExample () { + const FactoryView = Factory(View, { + baseStyle: (props) => { + return { + bg: themeTools.mode('rose.500', 'cyan.300')(props), + borderRadius: 'md', + }; + }, + }); + return ; +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Using ref + +```SnackPlayer name=NativeBase%20Factory%20Using%20Ref +import React from 'react'; +import { Factory, Button, Stack, NativeBaseProvider,Center } from 'native-base'; +import { TextInput } from 'react-native'; + +function FactoryViewRefExample () { + const NBInput = Factory(TextInput); + const inputRef = React.useRef(null); + return ( + + + + + ); +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Params + +| Name | Type | Description | Default | +| -------------- | --------------- | ----------------------------------------------------------------------------- | ------- | +| component | React component | Original component to be passed on which nativebase props have to be applied. | - | +| componentTheme | Object | This object can include `baseStyle`, `sizes`, `variants`, `defaultProps` | - | diff --git a/versioned_docs/version-3.0.7/nativebase-formik-ui.md b/versioned_docs/version-3.0.7/nativebase-formik-ui.md new file mode 100644 index 000000000..e1b73f8e8 --- /dev/null +++ b/versioned_docs/version-3.0.7/nativebase-formik-ui.md @@ -0,0 +1,83 @@ +--- +id: nativebase-formik-ui +title: Formik +--- + +NativeBase provides [Form components](button.md) which can be easily integrated with Formik. + +Let's take an example using [FormControl](formControl.md) and [Input](input.md) components + +```SnackPlayer name=Formik-example dependencies=formik@2.2.9 +import { + VStack, + Input, + Button, + FormControl, + NativeBaseProvider, +} from 'native-base'; +import React from 'react'; +import { Formik } from 'formik'; + +const validate = (values) => { + const errors = {}; + + if (!values.firstName) { + errors.firstName = 'Required'; + } + + return errors; + }; + +function FormikExample() { + const onSubmit = (data) => { + console.log('submiting with ', data); + }; + + return ( + + {({ handleChange, handleBlur, handleSubmit, values, errors }) => ( + + + First Name + {console.log("errors" , errors)} + + + {errors.firstName} + + + + + Last Name + + + {errors.lastName} + + + + + + )} + + ); +} + +export default function () { + return ( + + + + ); +} +``` diff --git a/versioned_docs/version-3.0.7/nativebase.mdx b/versioned_docs/version-3.0.7/nativebase.mdx new file mode 100644 index 000000000..67326a804 --- /dev/null +++ b/versioned_docs/version-3.0.7/nativebase.mdx @@ -0,0 +1,93 @@ +--- +id: nativebase +title: Getting Started +slug: / +--- + +import { KitchenSinkIframe, TileLink, NBHistory } from '../../src/components'; +import TOCInline from '@theme/TOCInline'; + +
+
+
+

+ NativeBase is a component library that enables devs to build universal design systems. It is built on top of React Native, allowing you to develop apps for Android, iOS and the Web. +

+
+
+ + +
+
+ + +
+ +
+
+
+ +
+
+

A Brief History of NativeBase

+
+ +
+

What's New with NativeBase v3?

+ +We had clear goals in mind while building version 3. Take a look at some of the new features we added: + +
+

Multiplatform

+
+ NativeBase supports multiple platforms; android, iOS and web. You can also + customise properties using platform-specific props. +
+
+ +
+

Inherently Beautiful

+
+ NativeBase ships with a default theme that provides beautiful components, + out of the box. +
+
+ +
+

Accessible

+
+ This version has out of the box accessibility including focus management, + keyboard navigation and more. +
+
+ +
+

Customisable + +

+
+The default theme can be extended as you desire. You can also customise specific components for your app needs. +
+
+ +
diff --git a/versioned_docs/version-3.0.7/overlay.md b/versioned_docs/version-3.0.7/overlay.md new file mode 100644 index 000000000..4dbcbad8c --- /dev/null +++ b/versioned_docs/version-3.0.7/overlay.md @@ -0,0 +1,97 @@ +--- +id: overlay +title: Overlay +--- + +`Overlay` is the fundamental component for positioning and controlling new components on top of existing ones. + +## Import + +```jsx +import { Overlay, useOverlay } from 'native-base'; +``` + +## Examples + +### Usage + +```SnackPlayer name=Overlay%20Usage +import React from 'react'; +import { Button, useOverlay, NativeBaseProvider, Center } from 'native-base'; + +function OverlayComponent () { + const { closeOverlay, setOverlay } = useOverlay(); + return ( + + ) + }> + Show Overlay + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Customised + +```SnackPlayer name=Overlay%20Customized +import React from 'react'; +import { Button, useOverlay, VStack, NativeBaseProvider, Center } from 'native-base'; + +function OverlayComponent () { + const [disableOverlay, setDisableOverlay] = React.useState(false); + const { closeOverlay, setOverlay } = useOverlay(); + + return ( + + , + { disableOverlay, position: 'center', backgroundColor: '#5511ff44' } + ) + } + > + Show Overlay + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Props + +| Name | Type | Description | Default | +| ---------------------- | ------------------------- | ------------------------------------------------- | ------- | +| disableOverlay | boolean | If true, it disables the overlay. | false | +| position | `bottom`, `center`, `top` | Vertically position the component on the overlay. | - | +| defaultBackgroundColor | string | Set background color of overlay. | - | +| animationDuration | number | Duration for fade animation of the overlay. | - | diff --git a/versioned_docs/version-3.0.7/popOver.md b/versioned_docs/version-3.0.7/popOver.md new file mode 100644 index 000000000..c1908d9f5 --- /dev/null +++ b/versioned_docs/version-3.0.7/popOver.md @@ -0,0 +1,94 @@ +--- +id: popOver +title: Popover +--- + +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. + +## Import + +- `Popover`: The wrapper that provides props, state, and context to its children. +- `Popover.Arrow`: The popover arrow. +- `Popover.Body`: The body of the popover. +- `Popover.Content`: The popover itself. +- `Popover.CloseButton`: A button to close the popover. +- `Popover.Header`: The header of the popover. +- `Popover.Trigger`: Used to wrap the reference (or trigger) element. + +```jsx +import { Popover } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=composites,Popover,Basic.tsx + +``` + +### initialFocusRef + +```ComponentSnackPlayer path=composites,Popover,RefEg.tsx + +``` + +### Positions + +```ComponentSnackPlayer path=composites,Popover,PopoverPositions.tsx + +``` + +:::tip Tip +You can pass custom backgroundColor using `bg` or `backgroundColor`, `borderColor` and `borderWidth` to Popover.Content. +::: + +## Props + +```ComponentPropTable path=composites,Popover,Popover.tsx + +``` + +### Popover.Arrow + +`Popover.Arrow` composes the [`Box`](box.md) component. + +### Popover.Content + +`Popover.Content` composes the [`Box`](box.md) component. + +### Popover.Header + +`Popover.Header` composes the [`Box`](box.md) component. + +### Popover.Footer + +`Popover.Footer` composes the [`Box`](box.md) component. + +### Popover.Body + +`Popover.Body` composes the [`Box`](box.md) component. + +### Popover.CloseButton  + +`Popover.CloseButton` composes the [`Button`](button.md) component. + +## Styling + + + +## Accessibility + +Adheres to the [Dialog WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#dialog_modal) + +### Keyboard Interactions + +| Name | Description | +| ----------- | ------------------------------------------------------ | +| Space | Opens/closes the popover. | +| Enter | Opens/closes the popover. | +| Tab | Moves focus to the next focusable element. | +| Shift + Tab | Moves focus to the previous focusable element. | +| Esc | Closes the popover and moves focus to Popover.Trigger. | diff --git a/versioned_docs/version-3.0.7/presence-transition.md b/versioned_docs/version-3.0.7/presence-transition.md new file mode 100644 index 000000000..2e725036a --- /dev/null +++ b/versioned_docs/version-3.0.7/presence-transition.md @@ -0,0 +1,63 @@ +--- +id: presence-transition +title: PresenceTransition +--- + +PresenceTransition provides a declarative API to add entry and exit transitions. + +### Fade + +```ComponentSnackPlayer path=composites,Transitions,Fade.tsx + +``` + +### ScaleFade + +```ComponentSnackPlayer path=composites,Transitions,ScaleFade.tsx + +``` + +## Props + +```ComponentPropTable path=composites,Transitions,PresenceTransition.tsx showStylingProps=true + +``` + +### ISupportedTransitions + +```js +interface ISupportedTransitions { + opacity?: number; + translateY?: number; + translateX?: number; + scale?: number; + scaleX?: number; + scaleY?: number; + rotate?: string; +} +``` + +### ITransitionStyleProps + +```js +interface ITransitionStyleProps extends ISupportedTransitions { + transition?: { + type?: 'timing' | 'spring', + easing?: (value: number) => number, + overshootClamping?: boolean, + restDisplacementThreshold?: number, + restSpeedThreshold?: number, + velocity?: number | { x: number, y: number }, + bounciness?: number, + speed?: number, + tension?: number, + friction?: number, + stiffness?: number, + mass?: number, + damping?: number, + delay?: number, + duration?: number, + useNativeDriver?: boolean, + }; +} +``` diff --git a/versioned_docs/version-3.0.7/pressable.md b/versioned_docs/version-3.0.7/pressable.md new file mode 100644 index 000000000..4f37c810d --- /dev/null +++ b/versioned_docs/version-3.0.7/pressable.md @@ -0,0 +1,32 @@ +--- +id: pressable +title: Pressable +--- + +Pressable is a lower level primitive if you need more flexibility than a button and access to hover, pressed and focus events. + +## Examples + +### Basic + +Pressable accepts most of the utility style system props. + +```ComponentSnackPlayer path=primitives,Pressable,Basic.tsx + +``` + +### Accessing events (hover, focus and pressed) + +Pressable accepts a render prop children, which receives isHovered, isFocused and isPressed props. + +```ComponentSnackPlayer path=primitives,Pressable,Events.tsx + +``` + +## Props + +### Pressable + +```ComponentPropTable path=primitives,Pressable,Pressable.tsx showStylingProps=true + +``` diff --git a/versioned_docs/version-3.0.7/progress.md b/versioned_docs/version-3.0.7/progress.md new file mode 100644 index 000000000..9fe5ee80c --- /dev/null +++ b/versioned_docs/version-3.0.7/progress.md @@ -0,0 +1,62 @@ +--- +id: progress +title: Progress +--- + +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. + +## Import + +```jsx +import { Progress } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=composites,Progress,Basic.tsx + +``` + +### Progress colorScheme + +```ComponentSnackPlayer path=composites,Progress,ColorScheme.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=composites,Progress,Sizes.tsx + +``` + +### Flat Progress + +```ComponentSnackPlayer path=composites,Progress,Flat.tsx + +``` + +### Custom Track Color + +```ComponentSnackPlayer path=composites,Progress,CustomBgColor.tsx + +``` + +## Props + +```ComponentPropTable path=composites,Progress,index.tsx + +``` + +## Styling + + + +## Accessibility + +- Adheres to the `progressbar` [role requirements.](https://www.w3.org/TR/wai-aria-1.2/#progressbar) +- On web, `aria-valuenow`, `aria-valuemin` and `aria-valuemax` to ensure the progress percent is visible to screen readers. +- On mobile, [accessibilityValue](https://reactnative.dev/docs/accessibility#accessibilityvalue) is used to ensure it's announced by Talkback and VoiceOver. diff --git a/versioned_docs/version-3.0.7/radio.md b/versioned_docs/version-3.0.7/radio.md new file mode 100644 index 000000000..63485030b --- /dev/null +++ b/versioned_docs/version-3.0.7/radio.md @@ -0,0 +1,97 @@ +--- +id: radio +title: Radio +--- + +import { ComponentTheme } from '../../src/components'; + +`Radio` is used when only one choice may be selected in a series of options. + +## Examples + +### Controlled + +```ComponentSnackPlayer path=primitives,Radio,controlledRadio.tsx + +``` + +### Uncontrolled + +```ComponentSnackPlayer path=primitives,Radio,uncontrolledRadio.tsx + +``` + +### Disabled + +```ComponentSnackPlayer path=primitives,Radio,disabled.tsx + +``` + +### Invalid + +```ComponentSnackPlayer path=primitives,Radio,invalid.tsx + +``` + +### Size + +```ComponentSnackPlayer path=primitives,Radio,size.tsx + +``` + +### Custom Color + +```ComponentSnackPlayer path=primitives,Radio,customColor.tsx + +``` + +### Custom Icon + +```ComponentSnackPlayer path=primitives,Radio,customIcon.tsx + +``` + +### Form Controlled + +```ComponentSnackPlayer path=primitives,Radio,formControlled.tsx + +``` + +### Basic (With Ref) + +```ComponentSnackPlayer path=primitives,Radio,withRef.tsx + +``` + +## Props + +### Radio + +```ComponentPropTable path=primitives,Radio,Radio.tsx + +``` + +### Radio Group + +```ComponentPropTable path=primitives,Radio,RadioGroup.tsx + +``` + +## Accessibility + +Uses React Native ARIA [@react-native-aria/radio](https://react-native-aria.geekyants.com/docs/useRadioGroup) which follows the [Radio Group WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#radiobutton). + +### Keyboard Interactions + +| Key | Description | +| ------------ | ---------------------------------------------------------------------------------- | +| `Tab` | Moves focus to either the checked radio item or the first radio item in the group. | +| `Space` | When focus is on an unchecked radio item, checks it. | +| `ArrowDown` | Moves focus to the next radio item in the group. | +| `ArrowRight` | Moves focus to the next radio item in the group. | +| `ArrowUp` | Moves focus to the previous radio item in the group. | +| `ArrowLeft` | Moves focus to the previous radio item in the group. | + +## Styling + + diff --git a/versioned_docs/version-3.0.7/reactHooksForms.md b/versioned_docs/version-3.0.7/reactHooksForms.md new file mode 100644 index 000000000..f4efec13c --- /dev/null +++ b/versioned_docs/version-3.0.7/reactHooksForms.md @@ -0,0 +1,565 @@ +--- +id: react-hook-forms +title: React Hook Forms +--- + +A Performant, flexible and extensible forms with easy-to-use validation. And below are some examples showing its integration with NativeBase. + +## Usage + +```jsx +import { + VStack, + Input, + Button, + FormControl, + NativeBaseProvider, +} from 'native-base'; +import React from 'react'; +import { useForm, Controller } from 'react-hook-form'; + +function FormHookExample() { + const { control, handleSubmit, errors } = useForm(); + const onSubmit = (data) => { + console.log('submiting with ', data); + }; + return ( + + + First Name + ( + onChange(val)} + value={value} + /> + )} + name="firstName" + rules={{ required: 'Field is required', minLength: 3 }} + defaultValue="" + /> + + {errors.firstName?.message} + + + + Last Name + ( + onChange(val)} + value={value} + /> + )} + name="lastName" + defaultValue="" + /> + + {errors.lastName?.message} + + + + Age + ( + onChange(val)} + value={value} + /> + )} + name="age" + rules={{ min: 18, required: 'Age is required' }} + defaultValue="" + /> + + {errors.age?.type === 'required' + ? errors.age?.message + : errors.age?.type === 'min' ?? 'Under age'} + + + + + ); +} +export default function () { + return ( + + + + ); +} +``` + +## Radio and Checkbox + +```jsx +import { + VStack, + Button, + FormControl, + Radio, + Checkbox, + Text, + Icon, + NativeBaseProvider, +} from 'native-base'; +import React from 'react'; +import { useForm, Controller } from 'react-hook-form'; + +function FormHookCheckboxExample() { + const { control, handleSubmit, errors } = useForm(); + const onSubmit = (data) => { + console.log('submiting with ', data); + }; + return ( + + + Hobbies + ( + { + onChange(values); + }} + flexDirection="row" + > + } + > + Darts + + } + > + Movie + + } + > + Camping + + + } + > + Chess + + + )} + rules={{ required: 'Atleast 1 hobbie needed' }} + name="hobbies" + defaultValue="" + /> + + {errors.hobbies?.message} + + + + Gender + ( + onChange(val)} + > + + Male + + + Female + + + )} + name="gender" + rules={{ required: 'Gender is required' }} + /> + + {errors.gender?.message} + + + + + ); +} +export default function () { + return ( + + + + ); +} +``` + +## Select + +```jsx +import { + VStack, + Button, + FormControl, + Select, + Icon, + NativeBaseProvider, +} from 'native-base'; +import React from 'react'; +import { useForm, Controller } from 'react-hook-form'; + +function FormHookSelectExample() { + const { control, handleSubmit, errors } = useForm(); + const onSubmit = (data) => { + console.log('submiting with ', data); + }; + return ( + + + Fav language: + ( + + )} + name="language" + rules={{ required: 'Field is required' }} + defaultValue="js" + /> + + {errors.language?.message} + + + + + ); +} +export default function () { + return ( + + + + ); +} +``` + +## Slider + +```jsx +import { + VStack, + Button, + FormControl, + Slider, + NativeBaseProvider, +} from 'native-base'; +import React from 'react'; +import { useForm, Controller } from 'react-hook-form'; + +function FormHookSliderExample() { + const { control, handleSubmit, errors } = useForm(); + const onSubmit = (data) => { + console.log('submiting with ', data); + }; + return ( + + + Amount you like NativeBase + ( + onChange(val)} defaultValue={value}> + + + + + + )} + name="like" + rules={{ required: 'Field is required', minLength: 3 }} + defaultValue={100} + /> + + {errors.like?.message} + + + + + ); +} +export default function () { + return ( + + + + ); +} +``` + +## Textarea + +```jsx +import { + VStack, + Button, + FormControl, + TextArea, + NativeBaseProvider, +} from 'native-base'; +import React from 'react'; +import { useForm, Controller } from 'react-hook-form'; + +function FormHookTextareaExample() { + const { control, handleSubmit, errors } = useForm(); + const onSubmit = (data) => { + console.log('submiting with ', data); + }; + return ( + + + What do you think? + ( +