From 2327a04fb6a8d3370f2139deeac24d5c7fc7bb09 Mon Sep 17 00:00:00 2001 From: meenu Date: Tue, 3 Aug 2021 12:15:33 +0530 Subject: [PATCH 01/11] box props correction --- docs/more-props.md | 13 +++++ nb-plugins/component-prop-table/index.js | 53 +++++++++++++-------- nb-plugins/component-prop-table/propsMap.js | 5 ++ nb-plugins/utils/index.js | 1 - sidebars.js | 4 ++ 5 files changed, 55 insertions(+), 21 deletions(-) create mode 100644 docs/more-props.md diff --git a/docs/more-props.md b/docs/more-props.md new file mode 100644 index 000000000..935c792be --- /dev/null +++ b/docs/more-props.md @@ -0,0 +1,13 @@ +--- +id: more-props +title: More props +--- + +### ILinearGradientProps + +| Name | Type | Description | Default | +| -------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ------- | +| colors | `Array` | An array of colors that represent stops in the gradient. | - | +| start | `Array` | This means that the gradient will start from first value from the left and second value from the top. Array can contain numbers ranging from 0 to 1. | | +| end | `Array` | This means that the gradient will end at first value from the left and at second value from the bottom. Array can contain numbers ranging from 0 to 1. | | +| location | `Array ` | Each number indicates a color-stop location where each respective color should be located. Array can contain numbers ranging from 0 to 1. | | diff --git a/nb-plugins/component-prop-table/index.js b/nb-plugins/component-prop-table/index.js index c28e297cb..313433466 100644 --- a/nb-plugins/component-prop-table/index.js +++ b/nb-plugins/component-prop-table/index.js @@ -34,34 +34,47 @@ const templateGenerator = (componentDetails) => { for (let prop in propsObject) { const { name, description, type, parent, defaultValue } = propsObject[prop]; - const MapValue = - internalPropsMap[type.name] || - rnPropsMap[type.name] || - StylingPropsMap[type.name]; - let newType = type.name.replace(/\/g, '>'); //for > + const markupWithTypeLinks = type.name + .split('|') + .map((e) => { + return e.trim(); + }) + .map((element) => { + const MapValue = + internalPropsMap[element] || + rnPropsMap[element] || + StylingPropsMap[element]; + const htmlSanatizedElem = element + .replace(/\/g, '>'); //for > + return `${ + MapValue + ? `${element}` + : htmlSanatizedElem + }`; + }) + .join(' | '); if (parent.name === `I${displayName}Props`) { propExists = true; temp = temp + ` - - ${name} - - - ${MapValue ? `${type.name}` : newType} - - - ${description || '-'} - - - ${defaultValue ? defaultValue.value : '-'} - - `; + + ${name} + + + ${markupWithTypeLinks} + + + ${description || '-'} + + + ${defaultValue ? defaultValue.value : '-'} + + `; } } - return temp; }; diff --git a/nb-plugins/component-prop-table/propsMap.js b/nb-plugins/component-prop-table/propsMap.js index 9c61a1807..8dcfd3412 100644 --- a/nb-plugins/component-prop-table/propsMap.js +++ b/nb-plugins/component-prop-table/propsMap.js @@ -4,6 +4,11 @@ const internalProps = { IIconProps: { doc: 'icon.md', name: 'Icon', link: 'icon#props' }, IStackProps: { doc: 'stack.md', name: 'Stack', link: 'stack#props' }, IButtonProps: { doc: 'button.md', name: 'Button', link: 'button#props' }, + ILinearGradientProps: { + doc: 'more-props.md', + name: 'More Props', + link: 'more-props#ilineargradientprops', + }, IPressableProps: { doc: 'pressable.md', name: 'Pressable', diff --git a/nb-plugins/utils/index.js b/nb-plugins/utils/index.js index dddb46b40..a3398e820 100644 --- a/nb-plugins/utils/index.js +++ b/nb-plugins/utils/index.js @@ -78,7 +78,6 @@ const simplifyMeta = (meta) => { const getPropDetail = (meta, repoPath) => { const { path: subPath, ...objectifiedMeta } = simplifyMeta(meta); const filePath = path.resolve(repoPath, 'src', 'components', ...subPath); - // console.log('filepath: ', filePath); const code = docgen.parse(filePath); // NOTE: writing on code for testing diff --git a/sidebars.js b/sidebars.js index 001b6d2dc..6434a5908 100644 --- a/sidebars.js +++ b/sidebars.js @@ -280,6 +280,10 @@ module.exports = { collapsed: false, items: ['changelog', 'faq'], }, + { + type: 'doc', + id: 'more-props', + }, { type: 'doc', id: 'install-expo', From 0a17dd130354167de278ea9c770394ea65de4de0 Mon Sep 17 00:00:00 2001 From: meenu Date: Fri, 6 Aug 2021 16:45:11 +0530 Subject: [PATCH 02/11] moved excess docs to unreleased list --- docs/popOver.md | 16 ++++++++-------- sidebars.js | 2 +- {docs => unreleased-docs}/list.md | 0 {docs => unreleased-docs}/overlay.md | 0 {docs => unreleased-docs}/swipableList.md | 0 {docs => unreleased-docs}/textField.md | 0 {docs => unreleased-docs}/transition.md | 0 {docs => unreleased-docs}/usePopOver.md | 0 8 files changed, 9 insertions(+), 9 deletions(-) rename {docs => unreleased-docs}/list.md (100%) rename {docs => unreleased-docs}/overlay.md (100%) rename {docs => unreleased-docs}/swipableList.md (100%) rename {docs => unreleased-docs}/textField.md (100%) rename {docs => unreleased-docs}/transition.md (100%) rename {docs => unreleased-docs}/usePopOver.md (100%) diff --git a/docs/popOver.md b/docs/popOver.md index 211d69be5..6b6006e7d 100644 --- a/docs/popOver.md +++ b/docs/popOver.md @@ -1,5 +1,5 @@ --- -id: popOver +id: popover title: Popover --- @@ -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. | \ No newline at end of file +| 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/sidebars.js b/sidebars.js index 001b6d2dc..3ec2fc6cc 100644 --- a/sidebars.js +++ b/sidebars.js @@ -132,7 +132,7 @@ module.exports = { 'menu', 'modal', // 'overlay' - 'popOver', + 'popover', 'tooltip', ], }, diff --git a/docs/list.md b/unreleased-docs/list.md similarity index 100% rename from docs/list.md rename to unreleased-docs/list.md diff --git a/docs/overlay.md b/unreleased-docs/overlay.md similarity index 100% rename from docs/overlay.md rename to unreleased-docs/overlay.md diff --git a/docs/swipableList.md b/unreleased-docs/swipableList.md similarity index 100% rename from docs/swipableList.md rename to unreleased-docs/swipableList.md diff --git a/docs/textField.md b/unreleased-docs/textField.md similarity index 100% rename from docs/textField.md rename to unreleased-docs/textField.md diff --git a/docs/transition.md b/unreleased-docs/transition.md similarity index 100% rename from docs/transition.md rename to unreleased-docs/transition.md diff --git a/docs/usePopOver.md b/unreleased-docs/usePopOver.md similarity index 100% rename from docs/usePopOver.md rename to unreleased-docs/usePopOver.md From 620170e0a906dcce25f79920d450d9bc307bcabc Mon Sep 17 00:00:00 2001 From: madhav23bansal Date: Tue, 14 Sep 2021 18:42:55 +0530 Subject: [PATCH 03/11] Changed flex and created v3.2.0 again --- docs/alertDialog.md | 118 +-------------- docs/box.md | 2 +- docs/buildingDrawerNavigation.md | 4 +- docs/buildingFooterTabs.md | 12 +- docs/buildingSearchBar.md | 2 +- docs/buildingTabView.md | 8 +- docs/builldingCard.md | 2 +- docs/container.md | 2 +- docs/customizingComponents.md | 4 +- docs/form.md | 6 +- docs/hidden.md | 2 +- docs/link.md | 2 +- docs/loginsignupforms.md | 4 +- docs/modal.md | 12 ++ docs/nativebase-factory.md | 8 +- docs/overlay.md | 4 +- docs/pseudoProps.md | 2 +- docs/responsive.md | 6 +- docs/setup-provider.md | 2 +- docs/textField.md | 6 +- docs/theme.md | 4 +- docs/todo-list.md | 4 +- docs/transition.md | 12 +- docs/useAccessibleColors.md | 2 +- docs/useBreakPointValue.md | 2 +- docs/useClipboard.md | 2 +- docs/useColorMode.md | 2 +- docs/useColorModeValue.md | 2 +- docs/useContrastText.md | 4 +- docs/useDisclosure.md | 2 +- docs/useMediaQuery.md | 6 +- docs/usePopOver.md | 2 +- docs/useToken.md | 2 +- docs/utilityProps.md | 26 ++-- .../storybook-example-transformer/index.js | 2 +- versioned_docs/version-3.2.0/VStack.md | 2 +- versioned_docs/version-3.2.0/ZStack.md | 5 + versioned_docs/version-3.2.0/accessibility.md | 2 +- versioned_docs/version-3.2.0/alertDialog.md | 5 +- versioned_docs/version-3.2.0/appDrawer.md | 4 +- versioned_docs/version-3.2.0/box.md | 4 +- .../version-3.2.0/buildingAppBar.md | 8 +- .../version-3.2.0/buildingDrawerNavigation.md | 62 ++++---- .../version-3.2.0/buildingFooterTabs.md | 26 ++-- .../version-3.2.0/buildingSearchBar.md | 28 ++-- .../version-3.2.0/buildingSwipeList.md | 24 +-- .../version-3.2.0/buildingTabView.md | 6 +- versioned_docs/version-3.2.0/builldingCard.md | 10 +- .../version-3.2.0/customizingComponents.md | 6 +- versioned_docs/version-3.2.0/darkMode.md | 2 +- versioned_docs/version-3.2.0/default-theme.md | 34 ++--- versioned_docs/version-3.2.0/form.md | 8 +- versioned_docs/version-3.2.0/hStack.md | 2 +- versioned_docs/version-3.2.0/hidden.md | 125 ++++++++++++++++ versioned_docs/version-3.2.0/icon.md | 16 +- versioned_docs/version-3.2.0/iconButton.md | 2 +- versioned_docs/version-3.2.0/install-cra.mdx | 2 +- versioned_docs/version-3.2.0/install-expo.mdx | 50 ++++++- versioned_docs/version-3.2.0/install-next.mdx | 1 + versioned_docs/version-3.2.0/install-rn.mdx | 52 ++++++- versioned_docs/version-3.2.0/link.md | 4 +- .../version-3.2.0/loginsignupforms.md | 140 +++++++++--------- versioned_docs/version-3.2.0/menu.md | 3 +- .../version-3.2.0/migration/Button.md | 2 +- .../version-3.2.0/migration/Guide.md | 2 +- .../version-3.2.0/migration/v31tov32.md | 4 +- .../version-3.2.0/nativebase-formik-ui.md | 2 +- versioned_docs/version-3.2.0/nativebase.mdx | 2 +- versioned_docs/version-3.2.0/popOver.md | 2 +- versioned_docs/version-3.2.0/pseudoProps.md | 86 +++++++++++ versioned_docs/version-3.2.0/psuedoProps.md | 63 -------- .../version-3.2.0/reactHooksForms.md | 26 ++-- versioned_docs/version-3.2.0/slider.md | 5 + versioned_docs/version-3.2.0/todo-list.md | 12 +- versioned_docs/version-3.2.0/tooltip.md | 3 +- .../version-3.2.0/useAccessibleColors.md | 4 +- .../version-3.2.0/useBreakPointValue.md | 2 +- versioned_docs/version-3.2.0/useClipboard.md | 6 +- versioned_docs/version-3.2.0/useColorMode.md | 2 +- .../version-3.2.0/useColorModeValue.md | 2 +- .../version-3.2.0/useContrastText.md | 4 +- versioned_docs/version-3.2.0/useDisclosure.md | 4 +- versioned_docs/version-3.2.0/useMediaQuery.md | 4 +- .../version-3.2.0-sidebars.json | 16 +- 84 files changed, 668 insertions(+), 500 deletions(-) create mode 100644 versioned_docs/version-3.2.0/hidden.md create mode 100644 versioned_docs/version-3.2.0/pseudoProps.md delete mode 100644 versioned_docs/version-3.2.0/psuedoProps.md diff --git a/docs/alertDialog.md b/docs/alertDialog.md index 1d0d8e1a2..0763f1683 100644 --- a/docs/alertDialog.md +++ b/docs/alertDialog.md @@ -24,110 +24,8 @@ import { AlertDialog } from 'native-base'; ### 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 ( - -
- -
- - ); -} -``` +```ComponentSnackPlayer path=composites,AlertDialog,basic.tsx -### 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 @@ -149,12 +47,12 @@ Adheres to the [Alert and Message Dialogs WAI-ARIA design pattern.](https://www. ### 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/docs/box.md b/docs/box.md index e22130f75..22e09f2de 100644 --- a/docs/box.md +++ b/docs/box.md @@ -63,7 +63,7 @@ const config = { export default () => { return ( -
+
diff --git a/docs/buildingDrawerNavigation.md b/docs/buildingDrawerNavigation.md index 4e59c8e32..aa78a13c7 100644 --- a/docs/buildingDrawerNavigation.md +++ b/docs/buildingDrawerNavigation.md @@ -40,7 +40,7 @@ function Component(props) { props.navigation.toggleDrawer()} position="absolute" ml="2" zIndex="1"> -
+
{props.route.name}
@@ -148,7 +148,7 @@ function CustomDrawerContent(props) { } function MyDrawer() { return ( - + } > diff --git a/docs/buildingFooterTabs.md b/docs/buildingFooterTabs.md index b696cf4a0..56c780537 100644 --- a/docs/buildingFooterTabs.md +++ b/docs/buildingFooterTabs.md @@ -31,15 +31,15 @@ export default function App() { const [selected, setSelected] = React.useState(1); return ( - -
+ +
setSelected(0)} >
@@ -57,7 +57,7 @@ export default function App() { cursor="pointer" opacity={selected === 1 ? 1 : 0.5} py="2" - flex="1" + flex={1} onPress={() => setSelected(1)} >
@@ -75,7 +75,7 @@ export default function App() { cursor="pointer" opacity={selected === 2 ? 1 : 0.6} py="2" - flex="1" + flex={1} onPress={() => setSelected(2)} >
@@ -93,7 +93,7 @@ export default function App() { cursor="pointer" opacity={selected === 3 ? 1 : 0.5} py="2" - flex="1" + flex={1} onPress={() => setSelected(3)} >
diff --git a/docs/buildingSearchBar.md b/docs/buildingSearchBar.md index 3949946af..a9cf16cd1 100644 --- a/docs/buildingSearchBar.md +++ b/docs/buildingSearchBar.md @@ -63,7 +63,7 @@ function SearchBar(){ export default function () { return ( -
+
diff --git a/docs/buildingTabView.md b/docs/buildingTabView.md index e8b473e59..d1683e841 100644 --- a/docs/buildingTabView.md +++ b/docs/buildingTabView.md @@ -18,15 +18,15 @@ 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 }; @@ -63,7 +63,7 @@ export default function TabViewExample() { return ( -
+
diff --git a/docs/container.md b/docs/container.md index a09ac47e5..5b34afdc3 100644 --- a/docs/container.md +++ b/docs/container.md @@ -38,7 +38,7 @@ function ContainerComponent() { export default function () { return ( -
+
diff --git a/docs/customizingComponents.md b/docs/customizingComponents.md index 05cde5265..def40ff7a 100644 --- a/docs/customizingComponents.md +++ b/docs/customizingComponents.md @@ -100,7 +100,7 @@ export default function () { }); return ( -
+
NativeBase
@@ -141,7 +141,7 @@ export default function () { return ( -
+
- @@ -142,6 +142,7 @@ 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) @@ -155,3 +156,5 @@ Adheres to the [Alert and Message Dialogs WAI-ARIA design pattern.](https://www. | Tab | Moves focus to the next focusable element. | | Shift + Tab | Moves focus to the previous focusable element. | | Esc | Closes the dialog and moves focus to AlertDialog.Trigger. | + + diff --git a/versioned_docs/version-3.2.0/appDrawer.md b/versioned_docs/version-3.2.0/appDrawer.md index 6890a689e..7e0afecbd 100644 --- a/versioned_docs/version-3.2.0/appDrawer.md +++ b/versioned_docs/version-3.2.0/appDrawer.md @@ -34,13 +34,13 @@ function AppDrawer(){ "forum", ]; - return + return {icons.map((icon) => ( } /> ))} diff --git a/versioned_docs/version-3.2.0/box.md b/versioned_docs/version-3.2.0/box.md index 5c884c1ef..22e09f2de 100644 --- a/versioned_docs/version-3.2.0/box.md +++ b/versioned_docs/version-3.2.0/box.md @@ -41,7 +41,7 @@ export const Example = () => { end: [1, 0], }, }} - p={12} + p="12" rounded="lg" _text={{ fontSize: "md", @@ -89,7 +89,7 @@ const Example = () => { end: [1, 0], }, }} - p={12} + p="12" rounded="lg" _text={{ fontSize: 'md', fontWeight: 'bold', color: 'white' }} > diff --git a/versioned_docs/version-3.2.0/buildingAppBar.md b/versioned_docs/version-3.2.0/buildingAppBar.md index 9f43bfcc8..463c93df3 100644 --- a/versioned_docs/version-3.2.0/buildingAppBar.md +++ b/versioned_docs/version-3.2.0/buildingAppBar.md @@ -21,12 +21,12 @@ function AppBar(){ - - + + } color="white" />} /> - Home + Home - + } size='sm' color="white" />} /> } color="white" size='sm' />} /> diff --git a/versioned_docs/version-3.2.0/buildingDrawerNavigation.md b/versioned_docs/version-3.2.0/buildingDrawerNavigation.md index 5ee14a952..aa78a13c7 100644 --- a/versioned_docs/version-3.2.0/buildingDrawerNavigation.md +++ b/versioned_docs/version-3.2.0/buildingDrawerNavigation.md @@ -36,9 +36,9 @@ import { const Drawer = createDrawerNavigator(); function Component(props) { return ( - - props.navigation.toggleDrawer()} position="absolute" ml={2} zIndex={1}> - + + props.navigation.toggleDrawer()} position="absolute" ml="2" zIndex="1"> +
{props.route.name} @@ -69,72 +69,72 @@ const getIcon = (screenName) => { function CustomDrawerContent(props) { return ( - - + + Mail - john_doe@gmail.com + john_doe@gmail.com - } space={4}> - + } space="4"> + {props.state.routeNames.map((name, index) => ( { props.navigation.navigate(name); }} > - + } /> - + size="5" as={} /> + {name} ))} - - Labels - + + Labels + - + } /> - + size="5" as={} /> + Family - + } /> - + size="5" as={} /> + Friends - + } /> - + size="5" as={} /> + Work diff --git a/versioned_docs/version-3.2.0/buildingFooterTabs.md b/versioned_docs/version-3.2.0/buildingFooterTabs.md index f2d847ae0..56c780537 100644 --- a/versioned_docs/version-3.2.0/buildingFooterTabs.md +++ b/versioned_docs/version-3.2.0/buildingFooterTabs.md @@ -34,76 +34,76 @@ export default function App() {
- + setSelected(0)} >
} color="white" size="xs" /> - Favorites + Favorites
setSelected(1)} >
} color="white" size="xs" /> - Music + Music
setSelected(2)} >
} color="white" size="xs" /> - Places + Places
setSelected(3)} >
} color="white" size="xs" /> - News + News
diff --git a/versioned_docs/version-3.2.0/buildingSearchBar.md b/versioned_docs/version-3.2.0/buildingSearchBar.md index be697f529..a9cf16cd1 100644 --- a/versioned_docs/version-3.2.0/buildingSearchBar.md +++ b/versioned_docs/version-3.2.0/buildingSearchBar.md @@ -21,39 +21,39 @@ import { FontAwesome5 } from '@expo/vector-icons'; function SearchBar(){ return ( - - + + Cupertino } />} + InputLeftElement={} />} /> - + Material } />} - InputRightElement={} />} + InputLeftElement={} />} + InputRightElement={} />} /> @@ -63,7 +63,7 @@ function SearchBar(){ export default function () { return ( -
+
diff --git a/versioned_docs/version-3.2.0/buildingSwipeList.md b/versioned_docs/version-3.2.0/buildingSwipeList.md index e40c81eba..130e14ed4 100644 --- a/versioned_docs/version-3.2.0/buildingSwipeList.md +++ b/versioned_docs/version-3.2.0/buildingSwipeList.md @@ -27,8 +27,8 @@ export default function App() { return ( - - Swipe list Example + + Swipe list Example @@ -68,9 +68,9 @@ function Basic() { alignItems= 'center' bg="white" borderBottomColor= 'trueGray.200' - borderBottomWidth= {1} + borderBottomWidth= "1" justifyContent= 'center' - height= {50} + height= "50" underlayColor={'#AAA'} _pressed={{ bg:'trueGray.200' @@ -78,9 +78,9 @@ function Basic() { py={8} > - - - + + + {index} @@ -94,11 +94,11 @@ function Basic() { const renderHiddenItem = (data, rowMap) => ( } color='white'/> + flex= "1"> - image base - + image base + NEWS - + June 22, 2021 - + The Stunning Dawki River in Meghalaya is So Clear That Boats Appear Floating in Air diff --git a/versioned_docs/version-3.2.0/customizingComponents.md b/versioned_docs/version-3.2.0/customizingComponents.md index c78a88e27..def40ff7a 100644 --- a/versioned_docs/version-3.2.0/customizingComponents.md +++ b/versioned_docs/version-3.2.0/customizingComponents.md @@ -53,14 +53,14 @@ As shown above, we can customize components by passing the **components** object - 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/master/src/theme/components/button.ts#L5) +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/master/src/theme/components/button.ts#L201) +Take a look at an [example here](https://github.com/GeekyAnts/NativeBase/blob/v3-pre-beta/src/theme/components/button.ts#L201) ```jsx diff --git a/versioned_docs/version-3.2.0/hStack.md b/versioned_docs/version-3.2.0/hStack.md index 276f3d442..d8e8c178d 100644 --- a/versioned_docs/version-3.2.0/hStack.md +++ b/versioned_docs/version-3.2.0/hStack.md @@ -1,5 +1,5 @@ --- -id: hStack +id: h-stack title: HStack / Row --- diff --git a/versioned_docs/version-3.2.0/hidden.md b/versioned_docs/version-3.2.0/hidden.md new file mode 100644 index 000000000..0d74cacee --- /dev/null +++ b/versioned_docs/version-3.2.0/hidden.md @@ -0,0 +1,125 @@ +--- +id: hidden +title: Hidden +--- + +import { ComponentTheme } from '../../src/components'; + +Hidden is used to toggle the visibility value of child components responsively, based on the colorMode or based on the platform. It doesn't mount the child components in the restricted values of props. + +## Import + +```jsx +import { Hidden } from 'native-base'; +``` + +## Example + +### Basic + +```jsx + + + This text will be always hidden. + + +``` + +### Hidden according to breakpoints + +```jsx +<> + + + This text will be hidden from sm to lg screens. + + + + + This text will be hidden on sm and lg screens only. + + + +``` + +### Hidden according to colorMode + +```SnackPlayer name=ColorMode%20Usage +import React from 'react'; +import { + useColorMode, + Button, + VStack, + Center, + Box,Text, + Hidden, + useColorModeValue, + NativeBaseProvider +} from 'native-base'; + +function ColorModeExample () { + const { colorMode, toggleColorMode } = useColorMode(); + return ( + <> + + + + + This text will be hidden on light mode + + + + + This text will be hidden on dark mode + + + + + ); +} + +const LocalWrapper = ({ children }) => { + const bg = useColorModeValue('gray.200', 'gray.800') + return ( +
+ {children} +
+ ); +}; + +export default function () { + return ( + + + + + + ); +} +``` + +## Hidden according to platform + +```jsx + + + This text will be hidden on android and web. + + +``` + +## Props + +```ComponentPropTable path=composites,Fab,Fab.tsx + +``` diff --git a/versioned_docs/version-3.2.0/icon.md b/versioned_docs/version-3.2.0/icon.md index b1438011d..4b19156e5 100644 --- a/versioned_docs/version-3.2.0/icon.md +++ b/versioned_docs/version-3.2.0/icon.md @@ -11,14 +11,6 @@ You can use icons in multiple ways in NativeBase: ## 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 @@ -27,6 +19,14 @@ We provides a set of commonly used interface icons. So you can directly use them 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). +### 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 + +``` + ### Custom Icon ```ComponentSnackPlayer path=primitives,Icon,CustomIcon.tsx diff --git a/versioned_docs/version-3.2.0/iconButton.md b/versioned_docs/version-3.2.0/iconButton.md index cc11f8c64..4de337741 100644 --- a/versioned_docs/version-3.2.0/iconButton.md +++ b/versioned_docs/version-3.2.0/iconButton.md @@ -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.2.0/install-cra.mdx b/versioned_docs/version-3.2.0/install-cra.mdx index 545b206a7..853c65e3a 100644 --- a/versioned_docs/version-3.2.0/install-cra.mdx +++ b/versioned_docs/version-3.2.0/install-cra.mdx @@ -86,7 +86,7 @@ Put the below code in your App.js import React from 'react'; import { NativeBaseProvider, Box } from 'native-base'; -function App() { +export default function App() { return ( Hello world diff --git a/versioned_docs/version-3.2.0/install-expo.mdx b/versioned_docs/version-3.2.0/install-expo.mdx index 4b77d6efe..6f80a3508 100644 --- a/versioned_docs/version-3.2.0/install-expo.mdx +++ b/versioned_docs/version-3.2.0/install-expo.mdx @@ -9,7 +9,44 @@ 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 + + + + +### Create a new project using Expo CLI with NativeBase template + +

Plain Javascript

+
+ +```bash +expo init my-app --template expo-template-native-base +``` + +
+ +

With Typescript

+
+ +```bash +expo init my-app --template expo-template-native-base-typescript +``` + +
+ +Yey! you are all set, start editing App.js/App.tsx now. + + + + + + + +### Create a new expo project if not exist ```bash npm install --global expo-cli @@ -28,7 +65,7 @@ cd my-project/ { label: 'npm', value: 'npm' } ]}> - + ```bash yarn add native-base styled-components styled-system @@ -62,7 +99,7 @@ Put the below code in your App.js import React from 'react'; import { NativeBaseProvider, Box } from 'native-base'; -function App() { +export default function App() { return ( Hello world @@ -71,6 +108,13 @@ function App() { } ``` + + + + + + +
minions clapping
diff --git a/versioned_docs/version-3.2.0/install-next.mdx b/versioned_docs/version-3.2.0/install-next.mdx index dc9dbca16..40a4eee9e 100644 --- a/versioned_docs/version-3.2.0/install-next.mdx +++ b/versioned_docs/version-3.2.0/install-next.mdx @@ -52,6 +52,7 @@ Yey! you are all set, start editing src/pages/index.tsx now. +

Choose your preferred setting and start your development swiftly 🚀

diff --git a/versioned_docs/version-3.2.0/install-rn.mdx b/versioned_docs/version-3.2.0/install-rn.mdx index 68d0283a3..b03d00461 100644 --- a/versioned_docs/version-3.2.0/install-rn.mdx +++ b/versioned_docs/version-3.2.0/install-rn.mdx @@ -7,7 +7,50 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import { TileLink } from '../../src/components'; -### Create a new project + + + + + + + + +### Create a new project using ReactNative CLI with NativeBase template + +[Refer this link](https://github.com/react-native-community/cli#about) to get infomation about the React Native CLI. + +

Plain Javascript

+
+ +```bash +npx react-native init MyApp --template react-native-template-native-base +``` + +
+ +

With Typescript

+
+ +```bash +npx react-native init MyApp --template react-native-template-native-base-typescript +``` + +
+ +Yey! you are all set, start editing App.js/App.tsx now. + + + + + + + +### Create a new project if not exist ```bash npx react-native init AwesomeNativeBase @@ -56,7 +99,7 @@ Put the below code in your App.js import React from 'react'; import { NativeBaseProvider, Box } from 'native-base'; -function App() { +export default function App() { return ( Hello world @@ -65,6 +108,11 @@ function App() { } ``` + + + + +
diff --git a/versioned_docs/version-3.2.0/link.md b/versioned_docs/version-3.2.0/link.md index 5e77da915..b3f63120d 100644 --- a/versioned_docs/version-3.2.0/link.md +++ b/versioned_docs/version-3.2.0/link.md @@ -57,7 +57,7 @@ Link implements **[Box](box.md)**, so all the Box Props can be passed to it. | Name | Type | Description | Default | | ---------- | -------- | ----------------------------------------- | ------- | | isExternal | boolean | If true, the link will open in a browser. | - | -| onClick | function | Function called when the link is clicked. | - | --> +| onClick | function | Function called when the link is clicked. | - | --> | ## Styling @@ -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.2.0/loginsignupforms.md b/versioned_docs/version-3.2.0/loginsignupforms.md index dbd302238..8e7b20a54 100644 --- a/versioned_docs/version-3.2.0/loginsignupforms.md +++ b/versioned_docs/version-3.2.0/loginsignupforms.md @@ -33,7 +33,7 @@ export default function App() { @@ -44,14 +44,14 @@ export default function App() { Sign in to continue! - + Email ID - + Password @@ -59,47 +59,47 @@ export default function App() { Forget Password? - + - - } - color='muted.700' - size='sm' - /> - } - /> - } - color='muted.700' - size="sm" - /> - } - /> - } - color='muted.700' - size="sm" - /> - } - /> + + } + color='muted.700' + size='sm' + /> + } + /> + } + color='muted.700' + size="sm" + /> + } + /> + } + color='muted.700' + size="sm" + /> + } + /> @@ -143,7 +143,7 @@ export default function App() { @@ -154,7 +154,7 @@ export default function App() { Sign up to continue! - + Email @@ -173,42 +173,42 @@ export default function App() { - + - - } - color='muted.700' - size='sm' - /> - } - /> - } - color='muted.700' - size="sm" - /> - } - /> - } - color='muted.700' - size="sm" - /> - } - /> + + } + color='muted.700' + size='sm' + /> + } + /> + } + color='muted.700' + size="sm" + /> + } + /> + } + color='muted.700' + size="sm" + /> + } + /> diff --git a/versioned_docs/version-3.2.0/menu.md b/versioned_docs/version-3.2.0/menu.md index 736456663..ba2b694e2 100644 --- a/versioned_docs/version-3.2.0/menu.md +++ b/versioned_docs/version-3.2.0/menu.md @@ -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.2.0/migration/Button.md b/versioned_docs/version-3.2.0/migration/Button.md index 28d7e47de..a33b068df 100644 --- a/versioned_docs/version-3.2.0/migration/Button.md +++ b/versioned_docs/version-3.2.0/migration/Button.md @@ -12,7 +12,7 @@ Migrating [`Button`](button.mdx) to v3 will provide a lot more **design**, **siz Migrating Button components can broadly described in these points: -- No need to wrap you text inside `Text` component anymore. +- No need to wrap your 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**. diff --git a/versioned_docs/version-3.2.0/migration/Guide.md b/versioned_docs/version-3.2.0/migration/Guide.md index 2b3095055..782ee3850 100644 --- a/versioned_docs/version-3.2.0/migration/Guide.md +++ b/versioned_docs/version-3.2.0/migration/Guide.md @@ -1,5 +1,5 @@ --- -id: Guide +id: guide title: Guide to v3 --- diff --git a/versioned_docs/version-3.2.0/migration/v31tov32.md b/versioned_docs/version-3.2.0/migration/v31tov32.md index d46c07a5c..2c27097b3 100644 --- a/versioned_docs/version-3.2.0/migration/v31tov32.md +++ b/versioned_docs/version-3.2.0/migration/v31tov32.md @@ -1,5 +1,5 @@ --- -id: v3.1.0-to-3.2.0 +id: migration-guide title: Upgrading to 3.2.0 --- @@ -10,7 +10,7 @@ But like everything comes at a price, `version 3.2.0` also comes with a few brea To upgrade to 3.2.0 just go into your root directory and run the below command. ```bash -npx upgrade native-base-code-mode +npx upgrade native-base-code-mod ``` :::caution diff --git a/versioned_docs/version-3.2.0/nativebase-formik-ui.md b/versioned_docs/version-3.2.0/nativebase-formik-ui.md index e1b73f8e8..28e5dee4a 100644 --- a/versioned_docs/version-3.2.0/nativebase-formik-ui.md +++ b/versioned_docs/version-3.2.0/nativebase-formik-ui.md @@ -36,7 +36,7 @@ function FormikExample() { return ( {({ handleChange, handleBlur, handleSubmit, values, errors }) => ( - + First Name {console.log("errors" , errors)} diff --git a/versioned_docs/version-3.2.0/nativebase.mdx b/versioned_docs/version-3.2.0/nativebase.mdx index 67326a804..bd0dadf4e 100644 --- a/versioned_docs/version-3.2.0/nativebase.mdx +++ b/versioned_docs/version-3.2.0/nativebase.mdx @@ -37,7 +37,7 @@ import TOCInline from '@theme/TOCInline'; /> diff --git a/versioned_docs/version-3.2.0/popOver.md b/versioned_docs/version-3.2.0/popOver.md index 40a7f4d36..59d6f8049 100644 --- a/versioned_docs/version-3.2.0/popOver.md +++ b/versioned_docs/version-3.2.0/popOver.md @@ -91,4 +91,4 @@ Adheres to the [Dialog WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria- | 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. | +| Esc | Closes the popover and moves focus to Popover.Trigger. | \ No newline at end of file diff --git a/versioned_docs/version-3.2.0/pseudoProps.md b/versioned_docs/version-3.2.0/pseudoProps.md new file mode 100644 index 000000000..5142576f8 --- /dev/null +++ b/versioned_docs/version-3.2.0/pseudoProps.md @@ -0,0 +1,86 @@ +--- +id: pseudo-props +title: Pseudo Props 101 +--- + +Before getting into details of all the common Pseudo Props NativeBase has to offer let's check some key points that these pseudo props follow. + +## Nesting pseudo props: + +In versions before 3.2.0 there was a set order in which pseudo props can be nested, but it had a some learning curve so we have simplified it. Pseudo props can now be nested in any combination with one small thing to keep in mind. + +Example: So assume you want to change the text color of a button on its hover state. + +### Do's + +```jsx + +``` + +### Dont's + +```jsx + +``` + +The above thing translates to a Text(not Button) when hovered changes its color to `secondary.400` . + +## Precedence Order for Pseudo Props: + +Now all the pseudo props follow a specific order that defines which pseudo prop can override the other pseudo prop. You can find the precedence values associated with each pseudo prop. Higher number means higher precedence. + +```jsx +_disabled(100); + +_pressed(70); +_hover(60); +_focus(50); +_focusVisible(55); + +_active(30); +_checked(30); +_readOnly(40); +_invalid(40); + +_web(10); +_android(10); +_ios(10); + +_light(10); +_dark(10); +``` + +```SnackPlayer name=Pseudo%20Props%20Precedence +import React from 'react'; +import { Button, NativeBaseProvider, Center } from 'native-base'; + +function Component() { + return ( + // Here you can see _hover will be overrided by _pressed + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` diff --git a/versioned_docs/version-3.2.0/psuedoProps.md b/versioned_docs/version-3.2.0/psuedoProps.md deleted file mode 100644 index 0a7d6a905..000000000 --- a/versioned_docs/version-3.2.0/psuedoProps.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: psuedo-props -title: Psuedo Props 101 ---- - -Before getting into details of all the common Psuedo Props NativeBase has to offer let's check some key points that these psuedo props follow. - -## Nesting psuedo props: - -In versions before 3.2.0 there was a set order in which psuedo props can be nested, but it had a steep learning curve therefore we decided to remove it now. Any psuedo prop can be now nested to any level. With one small thing to keep in mind. - -Example: So assume you want to change the text color of a button on its hover state. - -### Do's - -```jsx - -``` - -### Dont's - -```jsx - -``` - -The above thing translates to a Text(not Button) when hovered changes its color to `secondary.400` . - -## Precedence Order for Psuedo Props: - -Now all the psuedo props follows a specific order that defines which psuedo prop can override the other psuedo prop. You can find the precedence values associated with each psuedo prop. - -```jsx -_disabled(100); - -_pressed(70); -_hover(60); -_focus(50); -_focusVisible(55); - -_active(30); -_checked(30); -_readOnly(40); -_invalid(40); - -_web(10); -_android(10); -_ios(10); - -_light(10); -_dark(10); -``` diff --git a/versioned_docs/version-3.2.0/reactHooksForms.md b/versioned_docs/version-3.2.0/reactHooksForms.md index f4efec13c..0063ec32e 100644 --- a/versioned_docs/version-3.2.0/reactHooksForms.md +++ b/versioned_docs/version-3.2.0/reactHooksForms.md @@ -24,7 +24,7 @@ function FormHookExample() { console.log('submiting with ', data); }; return ( - + First Name + Hobbies } > - Darts + Darts } > - Movie + Movie } > - Camping + Camping } > - Chess + Chess )} @@ -186,10 +186,10 @@ function FormHookCheckboxExample() { onChange={(val) => onChange(val)} > - Male + Male - Female + Female )} @@ -235,7 +235,7 @@ function FormHookSelectExample() { console.log('submiting with ', data); }; return ( - + Fav language: { onChange(itemValue); }} @@ -303,7 +303,7 @@ function FormHookSliderExample() { console.log('submiting with ', data); }; return ( - + Amount you like NativeBase + What do you think? + Remenber me: + ## Accessibility Adheres to the [Slider WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#slidertwothumb) @@ -84,3 +85,7 @@ Adheres to the [Slider WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria- | ArrowLeft | Increments/decrements by the step value depending on orientation. | | ArrowUp | Increases the value by the step amount. | | ArrowDown | Decreases the value by the step amount. | + + + + diff --git a/versioned_docs/version-3.2.0/todo-list.md b/versioned_docs/version-3.2.0/todo-list.md index 452dedb23..bbfeed2e9 100644 --- a/versioned_docs/version-3.2.0/todo-list.md +++ b/versioned_docs/version-3.2.0/todo-list.md @@ -57,22 +57,22 @@ export default function () { return (
- + Todo App } + icon={} colorScheme="emerald" - ml={1} + ml="1" onPress={() => { addItem(inputValue); setInputValue(""); }} - mr={1}/> + mr="1"/> } onChangeText={(v) => setInputValue(v)} @@ -93,13 +93,13 @@ export default function () { onChange={() => handleStatusChange(itemI)} value={item.title} > - + {item.title} } + icon={} onPress={() => handleDelete(itemI)} /> diff --git a/versioned_docs/version-3.2.0/tooltip.md b/versioned_docs/version-3.2.0/tooltip.md index 32f30f67a..cc02ea407 100644 --- a/versioned_docs/version-3.2.0/tooltip.md +++ b/versioned_docs/version-3.2.0/tooltip.md @@ -52,7 +52,6 @@ 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 | @@ -60,4 +59,4 @@ Adheres to the [Tooltip WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria | 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. | +| Esc | If open, closes the tooltip without delay. | \ No newline at end of file diff --git a/versioned_docs/version-3.2.0/useAccessibleColors.md b/versioned_docs/version-3.2.0/useAccessibleColors.md index edba126e7..fcfc4f4ae 100644 --- a/versioned_docs/version-3.2.0/useAccessibleColors.md +++ b/versioned_docs/version-3.2.0/useAccessibleColors.md @@ -29,13 +29,13 @@ function UseContrastingTextHook () { key={`teal.${key}`} bg={`teal.${key}`} _text={{ color: colorContrast }} - mb={1} + mb="1" > NativeBase ); })} - diff --git a/versioned_docs/version-3.2.0/useBreakPointValue.md b/versioned_docs/version-3.2.0/useBreakPointValue.md index 3e41f90ec..5017f6898 100644 --- a/versioned_docs/version-3.2.0/useBreakPointValue.md +++ b/versioned_docs/version-3.2.0/useBreakPointValue.md @@ -27,7 +27,7 @@ function UseBreakpointValueExample () { md: 'blue.200', }); return ( - + This is a box ); diff --git a/versioned_docs/version-3.2.0/useClipboard.md b/versioned_docs/version-3.2.0/useClipboard.md index 9aa820956..bd3a8d94b 100644 --- a/versioned_docs/version-3.2.0/useClipboard.md +++ b/versioned_docs/version-3.2.0/useClipboard.md @@ -39,8 +39,8 @@ function UseClipboardExample() { const [pasteText, setPasteText] = React.useState(""); const { value, onCopy, hasCopied } = useClipboard(); return ( - - + + - + {hasCopied ? "Copied" : "Press here"} The active color mode is {colorMode} - +
); } diff --git a/versioned_docs/version-3.2.0/useColorModeValue.md b/versioned_docs/version-3.2.0/useColorModeValue.md index 734fb9fc1..65fad698b 100644 --- a/versioned_docs/version-3.2.0/useColorModeValue.md +++ b/versioned_docs/version-3.2.0/useColorModeValue.md @@ -32,7 +32,7 @@ function UseColorMode() { The active color mode is {useColorModeValue('Light', 'Dark')} - +
); } diff --git a/versioned_docs/version-3.2.0/useContrastText.md b/versioned_docs/version-3.2.0/useContrastText.md index 73b9bca1a..169963c35 100644 --- a/versioned_docs/version-3.2.0/useContrastText.md +++ b/versioned_docs/version-3.2.0/useContrastText.md @@ -68,13 +68,13 @@ function UseContrastingTextHook () { key={`teal.${key}`} bg={`teal.${key}`} _text={{ color: colorContrast }} - mb={1} + mb="1" > NativeBase ); })} - diff --git a/versioned_docs/version-3.2.0/useDisclosure.md b/versioned_docs/version-3.2.0/useDisclosure.md index 3abc6c3f4..8c4285d8f 100644 --- a/versioned_docs/version-3.2.0/useDisclosure.md +++ b/versioned_docs/version-3.2.0/useDisclosure.md @@ -39,10 +39,10 @@ function UseDiscloseExample() { cupiditate expedita, ipsa corporis officia totam similique delectus! Debitis esse, ea blanditiis iste enim iure at odit fugiat autem. Accusamus? - + - diff --git a/versioned_docs/version-3.2.0/useMediaQuery.md b/versioned_docs/version-3.2.0/useMediaQuery.md index 6d184579f..9660a207f 100644 --- a/versioned_docs/version-3.2.0/useMediaQuery.md +++ b/versioned_docs/version-3.2.0/useMediaQuery.md @@ -20,7 +20,7 @@ import React from "react"; import { Text, useMediaQuery, NativeBaseProvider, Center } from "native-base"; function UseMediaQueryExample() { - const [isSmaller] = useMediaQuery({ maxHeight: 512 }); + const [isSmaller] = useMediaQuery({ maxHeight: '512' }); return ( {isSmaller ? "Height smaller than 512" : "Height larger than 512"} @@ -45,7 +45,7 @@ import React from "react"; import { Text, useMediaQuery, NativeBaseProvider, Center } from "native-base"; function UseMediaQueryExample() { - const [isLargerThan512] = useMediaQuery({ minWidth: 512 }); + const [isLargerThan512] = useMediaQuery({ minWidth: '512' }); return ( {isLargerThan512 ? "Width larger than 512" : "Width smaller than 512"} diff --git a/versioned_sidebars/version-3.2.0-sidebars.json b/versioned_sidebars/version-3.2.0-sidebars.json index de631cbd1..9ac292995 100644 --- a/versioned_sidebars/version-3.2.0-sidebars.json +++ b/versioned_sidebars/version-3.2.0-sidebars.json @@ -38,7 +38,7 @@ }, { "type": "doc", - "id": "version-3.2.0/psuedo-props" + "id": "version-3.2.0/pseudo-props" }, { "type": "doc", @@ -139,7 +139,7 @@ }, { "type": "doc", - "id": "version-3.2.0/hStack" + "id": "version-3.2.0/h-stack" }, { "type": "doc", @@ -147,11 +147,11 @@ }, { "type": "doc", - "id": "version-3.2.0/VStack" + "id": "version-3.2.0/v-stack" }, { "type": "doc", - "id": "version-3.2.0/ZStack" + "id": "version-3.2.0/z-stack" } ] }, @@ -347,6 +347,10 @@ { "type": "doc", "id": "version-3.2.0/FAB" + }, + { + "type": "doc", + "id": "version-3.2.0/hidden" } ] }, @@ -537,11 +541,11 @@ "items": [ { "type": "doc", - "id": "version-3.2.0/migration/Guide" + "id": "version-3.2.0/migration/guide" }, { "type": "doc", - "id": "version-3.2.0/migration/v3.1.0-to-3.2.0" + "id": "version-3.2.0/migration/migration-guide" }, { "collapsed": true, From d0748f012641a0a586988d1352198a9d6c82621f Mon Sep 17 00:00:00 2001 From: meenu Date: Tue, 21 Sep 2021 11:59:17 +0530 Subject: [PATCH 04/11] using theme file design changes --- docs/theme.md | 70 ++++++++++++++++++++++++++++++--------------------- 1 file changed, 42 insertions(+), 28 deletions(-) diff --git a/docs/theme.md b/docs/theme.md index 0a7501159..db050174c 100644 --- a/docs/theme.md +++ b/docs/theme.md @@ -12,7 +12,7 @@ import React from 'react'; import { NativeBaseProvider, useTheme, - SimpleGrid, + FlatList, Center, Box, } from 'native-base'; @@ -20,11 +20,13 @@ import { function ColorPalete() { const { colors } = useTheme(); return ( - - {Object.keys(colors['emerald']).map((colorKey) => ( - - ))} - + + } + /> + ); } @@ -55,8 +57,9 @@ function Tokens() { 'lightText', ]); return ( -
- Contrast threshold is: +
+ Contrast threshold is:{' '} + {contrastThreshold}
@@ -67,13 +70,14 @@ function Tokens() { export default function () { return ( -
+
); } + ``` ## useContrastText @@ -83,10 +87,16 @@ If you are defining the background yourself and pass a contrasting color to the ```SnackPlayer name=useContrastText import React from 'react'; -import { Button, Stack, useContrastText, NativeBaseProvider, Center } from 'native-base'; -function UseContrastingTextHook () { - const bgDark = 'emerald.700'; - const bgLight = 'emerald.200'; +import { + Button, + Stack, + useContrastText, + NativeBaseProvider, + Center, +} from 'native-base'; +function UseContrastingTextHook() { + const bgDark = 'primary.700'; + const bgLight = 'primary.200'; const colorContrastDark = useContrastText(bgDark); const colorContrastLight = useContrastText(bgLight); @@ -106,12 +116,13 @@ function UseContrastingTextHook () { export default function () { return ( -
+
); } + ``` ## useColorMode @@ -122,7 +133,6 @@ If you want to define some conditionals based on current color mode or change th import React from 'react'; import { NativeBaseProvider, - VStack, useColorMode, Text, Button, @@ -132,23 +142,25 @@ import { function UseColorMode() { const { colorMode, toggleColorMode } = useColorMode(); return ( -
- - The active color mode is {colorMode} +
+ + The active color mode is{' '} + + {colorMode} +
); } -// Example template which wraps component with NativeBaseProvider -export default function () { +export default Example = () => { return ( ); -} +}; ``` @@ -168,24 +180,26 @@ import { } from 'native-base'; function UseColorMode() { - const { colorMode, toggleColorMode } = useColorMode(); + const { toggleColorMode } = useColorMode(); return ( -
- - The active color mode is {useColorModeValue('Light', 'Dark')} +
+ + The active color mode is{' '} + + {useColorModeValue('Light', 'Dark')} +
); } -// Example template which wraps component with NativeBaseProvider -export default function () { +export default Example = () => { return ( ); -} +}; ``` From a87664683034c3b7656a115f31185aa430989425 Mon Sep 17 00:00:00 2001 From: madhav23bansal Date: Tue, 21 Sep 2021 12:13:03 +0530 Subject: [PATCH 05/11] Resolved Conflicts --- versioned_docs/version-3.2.0/install-rn.mdx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/versioned_docs/version-3.2.0/install-rn.mdx b/versioned_docs/version-3.2.0/install-rn.mdx index 9b4343acd..8ed3a885d 100644 --- a/versioned_docs/version-3.2.0/install-rn.mdx +++ b/versioned_docs/version-3.2.0/install-rn.mdx @@ -106,10 +106,6 @@ export default function App() { -<<<<<<< HEAD - -======= ->>>>>>> b8ef628110c534fa82078c0cf9715fa86c29f7d9
From 22acc62fc289d0398de5237b1bd751a8120311a4 Mon Sep 17 00:00:00 2001 From: madhav23bansal Date: Tue, 21 Sep 2021 15:02:22 +0530 Subject: [PATCH 06/11] Changed version for snackplayer --- docs/link.md | 8 -------- nb-plugins/component-snackplayer/index.js | 2 +- 2 files changed, 1 insertion(+), 9 deletions(-) diff --git a/docs/link.md b/docs/link.md index 466d0bc65..96c5d2b60 100644 --- a/docs/link.md +++ b/docs/link.md @@ -51,14 +51,6 @@ import { Link } from 'native-base'; ``` - | - ## Styling diff --git a/nb-plugins/component-snackplayer/index.js b/nb-plugins/component-snackplayer/index.js index a7838a1ce..3fef780fe 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.2.0-rc.0'; + const NBversion = '3.2.0'; // Gather necessary Params let name = params.name ? decodeURIComponent(params.name) : 'Example'; const description = params.description From d82bba2ec31c5f0296453b929e4e99fabe63f043 Mon Sep 17 00:00:00 2001 From: Suraj Ahmed Date: Tue, 21 Sep 2021 15:55:44 +0530 Subject: [PATCH 07/11] Snack player version updated --- remark-snackplayer/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/remark-snackplayer/index.js b/remark-snackplayer/index.js index 2e9fbbdcd..b13669db0 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.7'; + const NBversion = '3.2.0'; // Gather necessary Params let name = simplifedMeta.name ? decodeURIComponent(simplifedMeta.name) From 75db6ffe01caebb09e5c446ef19e5094fc3b5645 Mon Sep 17 00:00:00 2001 From: meenu Date: Tue, 21 Sep 2021 16:55:27 +0530 Subject: [PATCH 08/11] design changes --- docs/box.md | 15 +- docs/buildingSwipeList.md | 3 - docs/colorMode.md | 128 +++---------- docs/container.md | 13 +- docs/flatList.md | 136 ++++++++++++- docs/iconButton.md | 6 +- docs/responsive.md | 92 ++++++--- docs/todo-list.md | 142 ++++++++------ docs/useAccessibleColors.md | 32 ++-- docs/useBreakPointValue.md | 5 +- docs/useClipboard.md | 15 +- docs/useContrastText.md | 32 ++-- docs/useDisclosure.md | 9 +- docs/useMediaQuery.md | 371 ++++++++++++++++++++++++++++++++++-- 14 files changed, 738 insertions(+), 261 deletions(-) diff --git a/docs/box.md b/docs/box.md index e22130f75..203a8fb4d 100644 --- a/docs/box.md +++ b/docs/box.md @@ -33,20 +33,21 @@ import { Box, Center, NativeBaseProvider } from "native-base" export const Example = () => { return ( - This is a Box with Linear Gradient @@ -63,7 +64,7 @@ const config = { export default () => { return ( -
+
diff --git a/docs/buildingSwipeList.md b/docs/buildingSwipeList.md index 95dc270da..4e44901a3 100644 --- a/docs/buildingSwipeList.md +++ b/docs/buildingSwipeList.md @@ -112,12 +112,9 @@ function Basic() { console.log('You touched me')} bg="white"> diff --git a/docs/colorMode.md b/docs/colorMode.md index e7f7ff4a4..e24285266 100644 --- a/docs/colorMode.md +++ b/docs/colorMode.md @@ -27,69 +27,38 @@ import { Avatar, Center, useColorModeValue, - NativeBaseProvider + Text, + NativeBaseProvider, } from 'native-base'; -function ColorModeExample () { +function ColorModeExample() { const { colorMode, toggleColorMode } = useColorMode(); return ( - <> - I'm a Heading - - - - - - - ); -} - -const LocalWrapper = ({ children }) => { - const bg = useColorModeValue('gray.200', 'gray.800') - return ( -
- {children} +
+ + The active color mode is{' '} + + {useColorModeValue('Light', 'Dark')} + + +
); -}; +} export default function () { return ( - - - + ); } + ``` -## _light and _dark Pseudo props -All components accepts _light and _dark props which applies the passed props on dark and light mode. +## \_light and \_dark Pseudo props + +All components accepts \_light and \_dark props which applies the passed props on dark and light mode. ```SnackPlayer name=PseudoProps%20Usage import React from 'react'; @@ -101,70 +70,35 @@ import { Avatar, Center, useColorModeValue, - NativeBaseProvider + Text, + NativeBaseProvider, } from 'native-base'; -function PseduoPropsUsage () { - const { toggleColorMode } = useColorMode(); - return ( - <> - I'm a Heading - - - - - - - ); -} - -const LocalWrapper = ({ children }) => { - const bg = useColorModeValue('gray.200', 'gray.800') +function PseudoPropsUsage() { + const { colorMode, toggleColorMode } = useColorMode(); return ( -
- {children} +
+ + The active color mode is{' '} + + {colorMode} + + +
); -}; +} 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` diff --git a/docs/container.md b/docs/container.md index a09ac47e5..fa8aa79a0 100644 --- a/docs/container.md +++ b/docs/container.md @@ -20,16 +20,15 @@ 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. + React Ecosystem + + NativeBase is a simple, modular and accessible component library that + gives you building blocks to build you React applications. + ); } diff --git a/docs/flatList.md b/docs/flatList.md index 4b6c9e211..ef73e46fe 100644 --- a/docs/flatList.md +++ b/docs/flatList.md @@ -7,7 +7,141 @@ A component for rendering performant scrollable lists. ## Example -```ComponentSnackPlayer path=basic,FlatList,Basic.tsx +```SnackPlayer name=Basic +import React from "react" +import { + Box, + FlatList, + Heading, + Avatar, + HStack, + VStack, + Text, + Spacer, + Center, + NativeBaseProvider, +} from "native-base" +export const Example = () => { + const data = [ + { + id: "bd7acbea-c1b1-46c2-aed5-3ad53abb28ba", + fullName: "Aafreen Khan", + timeStamp: "12:47 PM", + recentText: "Good Day!", + avatarUrl: + "https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500", + }, + { + id: "3ac68afc-c605-48d3-a4f8-fbd91aa97f63", + fullName: "Sujitha Mathur", + timeStamp: "11:11 PM", + recentText: "Cheer up, there!", + avatarUrl: + "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyEaZqT3fHeNrPGcnjLLX1v_W4mvBlgpwxnA&usqp=CAU", + }, + { + id: "58694a0f-3da1-471f-bd96-145571e29d72", + fullName: "Anci Barroco", + timeStamp: "6:22 PM", + recentText: "Good Day!", + avatarUrl: "https://miro.medium.com/max/1400/0*0fClPmIScV5pTLoE.jpg", + }, + { + id: "68694a0f-3da1-431f-bd56-142371e29d72", + fullName: "Aniket Kumar", + timeStamp: "8:56 PM", + recentText: "All the best", + avatarUrl: + "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSr01zI37DYuR8bMV5exWQBSw28C1v_71CAh8d7GP1mplcmTgQA6Q66Oo--QedAN1B4E1k&usqp=CAU", + }, + { + id: "28694a0f-3da1-471f-bd96-142456e29d72", + fullName: "Kiara", + timeStamp: "12:47 PM", + recentText: "I will call today.", + avatarUrl: + "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBwgu1A5zgPSvfE83nurkuzNEoXs9DMNr8Ww&usqp=CAU", + }, + ] + return ( + + + Inbox + + ( + + + + + + {item.fullName} + + + {item.recentText} + + + + + {item.timeStamp} + + + + )} + keyExtractor={(item) => item.id} + /> + + ) +} + +export default () => { + return ( + +
+ +
+ + ) +} + ``` diff --git a/docs/iconButton.md b/docs/iconButton.md index dec5742bc..0767912b5 100644 --- a/docs/iconButton.md +++ b/docs/iconButton.md @@ -17,13 +17,13 @@ import { ComponentTheme } from '../src/components'; ### Sizes -```ComponentSnackPlayer path=composites,IconButton,Basic.tsx +```ComponentSnackPlayer path=composites,IconButton,Sizes.tsx ``` ### Variants -```ComponentSnackPlayer path=composites,IconButton,Basic.tsx +```ComponentSnackPlayer path=composites,IconButton,Variant.tsx ``` @@ -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). \ No newline at end of file +- IconButton has a `role` set to [button](https://www.w3.org/TR/wai-aria-practices-1.2/#button). diff --git a/docs/responsive.md b/docs/responsive.md index 4632e852a..81c11d789 100644 --- a/docs/responsive.md +++ b/docs/responsive.md @@ -83,53 +83,91 @@ Here's a simple example of a component that uses a stacked layout on small scree ```SnackPlayer name=Responsive%20Demo import React from 'react'; -import { NativeBaseProvider, Center, Box, Text, Image, Heading, Stack } from 'native-base'; -function BreakpointExample () { +import { + useToken, + NativeBaseProvider, + Center, + Text, + Box, + HStack, + Image, + Stack, + Heading, +} from 'native-base'; + +function Example() { return ( - - + width={['72', '72', '4/6']} + shadow={1} + _light={{ backgroundColor: 'coolGray.50' }} + _dark={{ backgroundColor: 'gray.700' }}> + Shoes +
+ PHOTOS +
- - - Just In - - - Jordan MA2 - - Older Kids' Shoe - - - 2 colors + + + + The Garden City + + + The Silicon Valley of India. - - $ 150 + + Bengaluru (also called Bangalore) is the center of India's high-tech + industry. The city is also known for its parks and nightlife. + + + + 6 mins ago + + + - + ); -}; +} // Example template which wraps component with NativeBaseProvider export default function () { return ( -
- +
+
); } + + ``` diff --git a/docs/todo-list.md b/docs/todo-list.md index 3db6402e6..dac93257f 100644 --- a/docs/todo-list.md +++ b/docs/todo-list.md @@ -6,7 +6,7 @@ title: Todo-List A simple To Do App made using NativeBase 3.0. ```SnackPlayer name=TodoList%20Examples -import React from "react"; +import React from 'react'; import { Input, Button, @@ -18,18 +18,20 @@ import { Heading, Icon, Center, - NativeBaseProvider -} from "native-base"; -import { FontAwesome5 } from '@expo/vector-icons'; + Box, + NativeBaseProvider, +} from 'native-base'; +import { FontAwesome5, Feather, Entypo } from '@expo/vector-icons'; export default function () { const instState = [ - { title: "code", isCompleted: true }, - { title: "sleep", isCompleted: false }, - { title: "repeat", isCompleted: false }, + { title: 'Code', isCompleted: true }, + { title: 'Meeting with team at 9', isCompleted: false }, + { title: 'Check Emails', isCompleted: false }, + { title: 'Write an article', isCompleted: false }, ]; const [list, setList] = React.useState(instState); - const [inputValue, setInputValue] = React.useState(""); + const [inputValue, setInputValue] = React.useState(''); const addItem = (title: string) => { setList([ ...list, @@ -56,58 +58,78 @@ export default function () { }; return ( -
- - Todo App - } - colorScheme="emerald" - ml="1" - onPress={() => { - addItem(inputValue); - setInputValue(""); - }} - - mr="1"/> - - } - onChangeText={(v) => setInputValue(v)} - value={inputValue} - placeholder="Add Item" - /> - - {list.map((item, itemI) => ( - - handleStatusChange(itemI)} - value={item.title} - > - - {item.title} - - - } - onPress={() => handleDelete(itemI)} - /> - - ))} - - -
- +
+ + Wednesday + + + setInputValue(v)} + value={inputValue} + placeholder="Add Task" + /> + + } + onPress={() => { + addItem(inputValue); + setInputValue(''); + }} + /> + + + {list.map((item, itemI) => ( + + handleStatusChange(itemI)} + value={item.title}> + + {item.title} + + + + } + onPress={() => handleDelete(itemI)} + /> + + ))} + + + +
+ ); } + ``` diff --git a/docs/useAccessibleColors.md b/docs/useAccessibleColors.md index 28bb181a1..cf3d25cc0 100644 --- a/docs/useAccessibleColors.md +++ b/docs/useAccessibleColors.md @@ -17,25 +17,31 @@ import { useAccessibleColors } from 'native-base'; import React from 'react'; import { Button, useContrastText, useTheme, NativeBaseProvider, Center, useAccessibleColors } from 'native-base'; + +const ButtonTemplate = ({ shade }: any) => { + const colorContrast = useContrastText(`yellow.${shade}`); + return ( + + ); +}; + function UseContrastingTextHook () { let [, , toggleAccessibleColors] = useAccessibleColors(); const { colors } = useTheme(); return ( <> - {Object.keys(colors.teal).map((key) => { - const colorContrast = useContrastText(`teal.${key}`); - return ( - - ); + {Object.keys(colors.yellow).map((key, index) => { + if (index > 2 && index < 9) return ; })} - diff --git a/docs/useBreakPointValue.md b/docs/useBreakPointValue.md index 52d1a84a7..08027916e 100644 --- a/docs/useBreakPointValue.md +++ b/docs/useBreakPointValue.md @@ -26,6 +26,7 @@ import { Stack, NativeBaseProvider, Center, + ScrollView } from 'native-base'; import { TextInput } from 'react-native'; @@ -39,7 +40,8 @@ export const UseBreakpointValueExample = () => { lg: 'row', }); return ( - + + Why us? { + ); }; diff --git a/docs/useClipboard.md b/docs/useClipboard.md index bcbe6c6bd..d02d51b17 100644 --- a/docs/useClipboard.md +++ b/docs/useClipboard.md @@ -35,12 +35,12 @@ import { } from "native-base"; function UseClipboardExample() { - const [copyText, setCopyText] = React.useState("Copy Me"); - const [pasteText, setPasteText] = React.useState(""); - const { value, onCopy, hasCopied } = useClipboard(); + const [copyText, setCopyText] = React.useState('Hello'); + const [pasteText, setPasteText] = React.useState(''); + const { value, onCopy } = useClipboard(); return ( - - + + - - {hasCopied ? "Copied" : "Press here"} + setPasteText(v)} value={pasteText} /> diff --git a/docs/useContrastText.md b/docs/useContrastText.md index da3131fe7..7e3161184 100644 --- a/docs/useContrastText.md +++ b/docs/useContrastText.md @@ -56,25 +56,31 @@ By default, NativeBase provides contrasting color based on its theme. You can al import React from 'react'; import { Button, useContrastText, useTheme, NativeBaseProvider, Center, useAccessibleColors } from 'native-base'; + +const ButtonTemplate = ({ shade }: any) => { + const colorContrast = useContrastText(`yellow.${shade}`); + return ( + + ); +}; + function UseContrastingTextHook () { let [, , toggleAccessibleColors] = useAccessibleColors(); const { colors } = useTheme(); return ( <> - {Object.keys(colors.teal).map((key) => { - const colorContrast = useContrastText(`teal.${key}`); - return ( - - ); + {Object.keys(colors.yellow).map((key, index) => { + if (index > 2 && index < 9) return ; })} - diff --git a/docs/useDisclosure.md b/docs/useDisclosure.md index 70a9e2f16..76da9c154 100644 --- a/docs/useDisclosure.md +++ b/docs/useDisclosure.md @@ -32,13 +32,10 @@ function UseDiscloseExample() { - Hello World + Delete Customer - Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos quasi - cupiditate expedita, ipsa corporis officia totam similique delectus! - Debitis esse, ea blanditiis iste enim iure at odit fugiat autem. - Accusamus? + This will remove all data relating to Alex. This action cannot be reversed. Deleted data can not be recovered. @@ -56,7 +53,7 @@ function UseDiscloseExample() { export default function () { return ( -
+
diff --git a/docs/useMediaQuery.md b/docs/useMediaQuery.md index b74c32483..a9f29b433 100644 --- a/docs/useMediaQuery.md +++ b/docs/useMediaQuery.md @@ -20,11 +20,123 @@ import React from "react"; import { Text, useMediaQuery, NativeBaseProvider, Center } from "native-base"; function UseMediaQueryExample() { - const [isSmaller] = useMediaQuery({ maxHeight: '512' }); + const [isSmallScreen] = useMediaQuery({ minHeight: 280, maxHeight: 480 }); return ( - - {isSmaller ? "Height smaller than 512" : "Height larger than 512"} - + + {isSmallScreen ? ( + + + + image + +
+ PHOTOS +
+ + + + + The Garden City + + + The Silicon Valley of India. + + + + Bengaluru (also called Bangalore) is the center of India's + high-tech industry. The city is also known for its parks and + nightlife. + + + + + 6 mins ago + + + + + + ) : ( + + + + + The Garden City + + + The Silicon Valley of India. + + + + Bengaluru (also called Bangalore) is the center of India's + high-tech industry. The city is also known for its parks and + nightlife. + + + + + 6 mins ago + + + + + + )} + ); } export default function () { @@ -45,11 +157,124 @@ import React from "react"; import { Text, useMediaQuery, NativeBaseProvider, Center } from "native-base"; function UseMediaQueryExample() { - const [isLargerThan512] = useMediaQuery({ minWidth: '512' }); + const [isSmallScreen] = useMediaQuery({ minWidth: 280 }); return ( - - {isLargerThan512 ? "Width larger than 512" : "Width smaller than 512"} - + + {isSmallScreen ? ( + + + + image + +
+ PHOTOS +
+ + + + + The Garden City + + + The Silicon Valley of India. + + + + Bengaluru (also called Bangalore) is the center of India's + high-tech industry. The city is also known for its parks and + nightlife. + + + + + 6 mins ago + + + + + + ) : ( + + + + + The Garden City + + + The Silicon Valley of India. + + + + Bengaluru (also called Bangalore) is the center of India's + high-tech industry. The city is also known for its parks and + nightlife. + + + + + 6 mins ago + + + + + + )} + ); } export default function () { @@ -70,15 +295,131 @@ import React from "react"; import { Text, useMediaQuery, NativeBaseProvider, Center } from "native-base"; function UseMediaQueryExample() { - const [isLandScape, isPortrait] = useMediaQuery([ - { orientation: "landscape" }, - { orientation: "portrait" }, + const [isLandScape, isPortrait] = useMediaQuery([ + { orientation: 'landscape' }, + { orientation: 'portrait' }, ]); return ( - <> - {`Landscape Mode: ${isLandScape}`} - {`Portrait Mode: ${isPortrait}`} - + + {isPortrait ? ( + + + + image + +
+ PHOTOS +
+ + + + + The Garden City + + + The Silicon Valley of India. + + + + Bengaluru (also called Bangalore) is the center of India's + high-tech industry. The city is also known for its parks and + nightlife. + + + + + 6 mins ago + + + + + + ) : ( + <> + )} + {isLandScape ? ( + + + + + The Garden City + + + The Silicon Valley of India. + + + + Bengaluru (also called Bangalore) is the center of India's + high-tech industry. The city is also known for its parks and + nightlife. + + + + + 6 mins ago + + + + + + ) : ( + <> + )} + ); } export default function () { From a881d439eee0c88375a8e33fc4cf91594119cf5a Mon Sep 17 00:00:00 2001 From: Suraj Ahmed Date: Tue, 21 Sep 2021 17:54:30 +0530 Subject: [PATCH 09/11] Snack player version updated --- nb-plugins/component-snackplayer/index.js | 8 ++++++-- nb-plugins/utils/index.js | 11 +++++++++++ package.json | 2 +- remark-snackplayer/index.js | 3 ++- yarn.lock | 22 ++++++++++++++++++---- 5 files changed, 38 insertions(+), 8 deletions(-) diff --git a/nb-plugins/component-snackplayer/index.js b/nb-plugins/component-snackplayer/index.js index 3fef780fe..1af1e6315 100644 --- a/nb-plugins/component-snackplayer/index.js +++ b/nb-plugins/component-snackplayer/index.js @@ -3,7 +3,11 @@ const visit = require('unist-util-visit-parents'); const u = require('unist-builder'); const dedent = require('dedent'); const fromEntries = require('object.fromentries'); -const { getSnackPlayerCodeSnippet, getProjectPath } = require('../utils'); +const { + getSnackPlayerCodeSnippet, + getProjectPath, + getNativeBaseVersion, +} = require('../utils'); const parseParams = (paramString = '') => { const params = fromEntries(new URLSearchParams(paramString)); @@ -18,7 +22,7 @@ const processNode = (node, parent) => { return new Promise(async (resolve, reject) => { try { const params = parseParams(node.meta); - const NBversion = '3.2.0'; + const NBversion = getNativeBaseVersion(); // Gather necessary Params let name = params.name ? decodeURIComponent(params.name) : 'Example'; const description = params.description diff --git a/nb-plugins/utils/index.js b/nb-plugins/utils/index.js index dddb46b40..95713803c 100644 --- a/nb-plugins/utils/index.js +++ b/nb-plugins/utils/index.js @@ -96,6 +96,16 @@ const getVersion = (directory) => { return 'next'; }; +const getNativeBaseVersion = () => { + // console.log('mamamam ', directory); + + // if (directory.includes('versioned_docs')) { + // return directory.split('versioned_docs/version-')[1]; + // } + + return '3.2.0'; + // return 'next'; +}; function getProjectPath(directory) { const rootPath = path.resolve(__dirname, '..', '..', 'versioned_repo'); @@ -108,5 +118,6 @@ module.exports = { getPropDetail, getProjectPath, getVersion, + getNativeBaseVersion, }; // getSnackPlayer('primitives', 'Box', 'basic.tsx'); diff --git a/package.json b/package.json index 02d934e65..2b426e0b2 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.1.0", + "native-base": "3.2.0", "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 b13669db0..1d53e4197 100644 --- a/remark-snackplayer/index.js +++ b/remark-snackplayer/index.js @@ -3,6 +3,7 @@ const visit = require('unist-util-visit-parents'); const u = require('unist-builder'); const dedent = require('dedent'); const fromEntries = require('object.fromentries'); +const { getNativeBaseVersion } = require('../nb-plugins/utils'); const parseParams = (paramString = '') => { const params = fromEntries(new URLSearchParams(paramString)); @@ -32,7 +33,7 @@ const processNode = (node, parent) => { try { const params = parseParams(node.meta); const simplifedMeta = simplifyMeta(node.meta); - const NBversion = '3.2.0'; + const NBversion = getNativeBaseVersion(); // Gather necessary Params let name = simplifedMeta.name ? decodeURIComponent(simplifedMeta.name) diff --git a/yarn.lock b/yarn.lock index 2d1c77c07..1101cf790 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2929,6 +2929,18 @@ resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.6.tgz#f4c7ec43e81b319a9815115031709f26987891f0" integrity sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw== +"@types/lodash.has@^4.5.6": + version "4.5.6" + resolved "https://registry.yarnpkg.com/@types/lodash.has/-/lodash.has-4.5.6.tgz#d94d3f0b45ced2ae76d632080daf70e9b76e29eb" + integrity sha512-SpUCvze0uHilQX/mt4K/cak5OQny1pVfz3pJx6H70dE3Tvw9s7EtlMK+vY6UBS+PQgETDfv6vhwoa3FPS2wrhg== + dependencies: + "@types/lodash" "*" + +"@types/lodash@*": + version "4.14.173" + resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.173.tgz#9d3b674c67a26cf673756f6aca7b429f237f91ed" + integrity sha512-vv0CAYoaEjCw/mLy96GBTnRoZrSxkGE0BKzKimdR8P3OzrNYNvBgtW7p055A+E8C31vXNUhWKoFCbhq7gbyhFg== + "@types/mdast@^3.0.0": version "3.0.3" resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.3.tgz#2d7d671b1cd1ea3deb306ea75036c2a0407d2deb" @@ -8400,10 +8412,10 @@ nanomatch@^1.2.9: snapdragon "^0.8.1" to-regex "^3.0.1" -native-base@3.1.0: - version "3.1.0" - resolved "https://registry.yarnpkg.com/native-base/-/native-base-3.1.0.tgz#8cc9d796a67b8f52dc78ac2983c8ba09a4ceb4f9" - integrity sha512-7ow2QyICOonkDgEiHl/clShLPHI17KoLRb8JERzqwsntAGVneFisvz/r/bWvapSNe1aBSGPyHanPZE49detTWw== +native-base@3.2.0: + version "3.2.0" + resolved "https://registry.yarnpkg.com/native-base/-/native-base-3.2.0.tgz#03cc51bf3624141833103330eae8f9b9fd7bbf35" + integrity sha512-s7lM0/xupz3AMVMMl59z8yl15T2cbnR662gwgXXGOpiFk10dR61jP3q8kGap+GRF8lRssKAZkN/a0OqV/JFAHA== dependencies: "@react-aria/focus" "^3.2.3" "@react-aria/utils" "^3.6.0" @@ -8421,9 +8433,11 @@ native-base@3.1.0: "@react-native-aria/utils" "^0.2.7" "@react-stately/combobox" "^3.0.0-alpha.1" "@react-stately/radio" "^3.2.1" + "@types/lodash.has" "^4.5.6" "@types/styled-system" "^5.1.9" lodash.clonedeep "^4.5.0" lodash.get "^4.4.2" + lodash.has "^4.5.2" lodash.isempty "^4.4.0" lodash.isequal "^4.5.0" lodash.isnil "^4.0.0" From 0411511d85f33ea0064df91184155c10c7c8c3d4 Mon Sep 17 00:00:00 2001 From: Suraj Ahmed Date: Tue, 21 Sep 2021 17:59:56 +0530 Subject: [PATCH 10/11] Updated migration guide --- docs/migration/v3xtov32.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/migration/v3xtov32.md b/docs/migration/v3xtov32.md index 6fe59487f..d15108d16 100644 --- a/docs/migration/v3xtov32.md +++ b/docs/migration/v3xtov32.md @@ -35,6 +35,10 @@ Below is a rough account of the breaking API changes as well as the minimal chan * Removed `Alert.Title`. Use `Text` component instead. * Removed `Alert.Description`. Use `Text` component instead. +### Divider: + +* Removed `size`. Use `thickness` prop instead. + ## Note: From 852a71703ec00b833c8714fdf78ff6cc441317f3 Mon Sep 17 00:00:00 2001 From: Suraj Ahmed Date: Tue, 21 Sep 2021 19:36:57 +0530 Subject: [PATCH 11/11] Updated version --- build-init.js | 7 +- nb-plugins/utils/index.js | 2 +- versioned_docs/version-3.2.0/FAB.md | 44 ++ versioned_docs/version-3.2.0/VStack.md | 24 ++ versioned_docs/version-3.2.0/ZStack.md | 28 ++ versioned_docs/version-3.2.0/accessibility.md | 24 ++ versioned_docs/version-3.2.0/actionSheet.md | 78 ++++ versioned_docs/version-3.2.0/alert.md | 87 ++++ versioned_docs/version-3.2.0/alertDialog.md | 104 +---- versioned_docs/version-3.2.0/appDrawer.md | 70 ++++ versioned_docs/version-3.2.0/avatar.md | 76 ++++ versioned_docs/version-3.2.0/badge.md | 50 +++ versioned_docs/version-3.2.0/box.md | 15 +- versioned_docs/version-3.2.0/breakpoints.md | 131 ++++++ .../version-3.2.0/buildingAppBar.md | 48 +++ .../version-3.2.0/buildingDrawerNavigation.md | 4 +- .../version-3.2.0/buildingFooterTabs.md | 68 ++-- .../version-3.2.0/buildingSearchBar.md | 83 +++- .../version-3.2.0/buildingSwipeList.md | 15 +- .../version-3.2.0/buildingTabView.md | 8 +- versioned_docs/version-3.2.0/button.mdx | 84 ++++ versioned_docs/version-3.2.0/center.md | 48 +++ versioned_docs/version-3.2.0/changelog.md | 22 + versioned_docs/version-3.2.0/checkBox.md | 104 +++++ versioned_docs/version-3.2.0/colorMode.md | 163 ++++++++ versioned_docs/version-3.2.0/container.md | 15 +- .../version-3.2.0/customizingComponents.md | 4 +- .../version-3.2.0/customizingFonts.md | 87 ++++ .../version-3.2.0/customizingTheme.md | 108 +++++ versioned_docs/version-3.2.0/darkMode.md | 89 +++++ versioned_docs/version-3.2.0/default-theme.md | 229 +++++++++++ versioned_docs/version-3.2.0/design-tokens.md | 69 ++++ versioned_docs/version-3.2.0/divider.md | 56 +++ versioned_docs/version-3.2.0/faq.md | 6 + versioned_docs/version-3.2.0/flatList.md | 152 +++++++ versioned_docs/version-3.2.0/flex.md | 44 ++ versioned_docs/version-3.2.0/form.md | 6 +- versioned_docs/version-3.2.0/formControl.md | 52 +++ versioned_docs/version-3.2.0/hStack.md | 24 ++ versioned_docs/version-3.2.0/heading.md | 56 +++ versioned_docs/version-3.2.0/icon.md | 54 +++ versioned_docs/version-3.2.0/iconButton.md | 43 ++ versioned_docs/version-3.2.0/image.md | 49 +++ versioned_docs/version-3.2.0/input.md | 76 ++++ versioned_docs/version-3.2.0/install-cra.mdx | 131 ++++++ versioned_docs/version-3.2.0/install-next.mdx | 263 ++++++++++++ versioned_docs/version-3.2.0/installation.mdx | 30 ++ .../version-3.2.0/interaction-styles.mdx | 96 ++--- .../version-3.2.0/keyboardAvoidingView.md | 18 + versioned_docs/version-3.2.0/kitchen-sink.mdx | 66 +++ versioned_docs/version-3.2.0/link.md | 60 +++ versioned_docs/version-3.2.0/list.md | 64 +++ .../version-3.2.0/loginsignupforms.md | 176 +++----- versioned_docs/version-3.2.0/menu.md | 95 +++++ .../version-3.2.0/migration/Accordion.md | 89 +++++ .../version-3.2.0/migration/Actionsheet.md | 107 +++++ .../version-3.2.0/migration/Badge.md | 44 ++ .../version-3.2.0/migration/Button.md | 196 +++++++++ .../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.2.0/migration/Card.md | 91 +++++ .../version-3.2.0/migration/Checkbox.md | 54 +++ .../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.2.0/migration/DatePicker.md | 6 + .../version-3.2.0/migration/DeckSwiper.md | 8 + .../version-3.2.0/migration/Drawer.md | 6 + .../version-3.2.0/migration/FABs.md | 63 +++ .../version-3.2.0/migration/FooterTab.md | 6 + .../version-3.2.0/migration/Form.md | 72 ++++ .../version-3.2.0/migration/Header.md | 6 + .../version-3.2.0/migration/Icon.md | 80 ++++ .../version-3.2.0/migration/Layout.md | 77 ++++ .../version-3.2.0/migration/List.md | 0 .../version-3.2.0/migration/Picker.md | 91 +++++ .../version-3.2.0/migration/Radio Button.md | 95 +++++ .../version-3.2.0/migration/Searchbar.md | 6 + .../version-3.2.0/migration/Segment.md | 7 + .../version-3.2.0/migration/Spinner.md | 47 +++ .../version-3.2.0/migration/SwipeList.md | 6 + .../version-3.2.0/migration/Tabs.md | 67 ++++ .../version-3.2.0/migration/Thumbnail.md | 73 ++++ .../version-3.2.0/migration/Toast.md | 84 ++++ .../version-3.2.0/migration/Typography.md | 39 ++ .../version-3.2.0/migration/v3xtov32.md | 5 +- versioned_docs/version-3.2.0/modal.md | 104 +++++ .../version-3.2.0/nativebase-factory.md | 37 +- versioned_docs/version-3.2.0/overlay.md | 4 +- versioned_docs/version-3.2.0/popOver.md | 2 +- .../version-3.2.0/presence-transition.md | 63 +++ versioned_docs/version-3.2.0/pressable.md | 32 ++ versioned_docs/version-3.2.0/progress.md | 62 +++ versioned_docs/version-3.2.0/radio.md | 97 +++++ versioned_docs/version-3.2.0/responsive.md | 96 +++-- .../version-3.2.0/safe-area-view-props.md | 99 +++++ versioned_docs/version-3.2.0/scrollview.md | 18 + versioned_docs/version-3.2.0/sectionList.md | 18 + versioned_docs/version-3.2.0/select.md | 87 ++++ .../version-3.2.0/setup-provider.md | 2 +- versioned_docs/version-3.2.0/slide.md | 38 ++ versioned_docs/version-3.2.0/slider.md | 12 +- versioned_docs/version-3.2.0/spinner.md | 32 ++ versioned_docs/version-3.2.0/stack.md | 18 + versioned_docs/version-3.2.0/stagger.md | 54 +++ versioned_docs/version-3.2.0/statusBar.md | 18 + versioned_docs/version-3.2.0/swipableList.md | 6 + versioned_docs/version-3.2.0/switch.md | 50 +++ versioned_docs/version-3.2.0/testing.md | 25 ++ versioned_docs/version-3.2.0/text.md | 44 ++ versioned_docs/version-3.2.0/textArea.md | 38 ++ versioned_docs/version-3.2.0/textField.md | 6 +- versioned_docs/version-3.2.0/theme.md | 70 ++-- versioned_docs/version-3.2.0/toast.md | 88 ++++ versioned_docs/version-3.2.0/todo-list.md | 142 ++++--- versioned_docs/version-3.2.0/tooltip.md | 5 +- versioned_docs/version-3.2.0/transition.md | 12 +- .../version-3.2.0/useAccessibleColors.md | 34 +- .../version-3.2.0/useBreakPointValue.md | 111 +++++- versioned_docs/version-3.2.0/useClipboard.md | 17 +- versioned_docs/version-3.2.0/useColorMode.md | 2 +- .../version-3.2.0/useColorModeValue.md | 2 +- .../version-3.2.0/useContrastText.md | 36 +- versioned_docs/version-3.2.0/useDisclosure.md | 9 +- versioned_docs/version-3.2.0/useMediaQuery.md | 377 +++++++++++++++++- versioned_docs/version-3.2.0/usePopOver.md | 2 +- versioned_docs/version-3.2.0/useTheme.md | 22 + versioned_docs/version-3.2.0/useToken.md | 2 +- .../version-3.2.0/utility-first.mdx | 218 ++++++++++ versioned_docs/version-3.2.0/utilityProps.md | 47 ++- .../version-3.2.0/utilityPropsSpecificity.md | 55 +++ versioned_docs/version-3.2.0/view.md | 18 + .../version-3.2.0-sidebars.json | 2 +- versions.json | 3 +- 143 files changed, 6769 insertions(+), 597 deletions(-) create mode 100644 versioned_docs/version-3.2.0/FAB.md create mode 100644 versioned_docs/version-3.2.0/VStack.md create mode 100644 versioned_docs/version-3.2.0/ZStack.md create mode 100644 versioned_docs/version-3.2.0/accessibility.md create mode 100644 versioned_docs/version-3.2.0/actionSheet.md create mode 100644 versioned_docs/version-3.2.0/alert.md create mode 100644 versioned_docs/version-3.2.0/appDrawer.md create mode 100644 versioned_docs/version-3.2.0/avatar.md create mode 100644 versioned_docs/version-3.2.0/badge.md create mode 100644 versioned_docs/version-3.2.0/breakpoints.md create mode 100644 versioned_docs/version-3.2.0/buildingAppBar.md create mode 100644 versioned_docs/version-3.2.0/button.mdx create mode 100644 versioned_docs/version-3.2.0/center.md create mode 100644 versioned_docs/version-3.2.0/changelog.md create mode 100644 versioned_docs/version-3.2.0/checkBox.md create mode 100644 versioned_docs/version-3.2.0/colorMode.md create mode 100644 versioned_docs/version-3.2.0/customizingFonts.md create mode 100644 versioned_docs/version-3.2.0/customizingTheme.md create mode 100644 versioned_docs/version-3.2.0/darkMode.md create mode 100644 versioned_docs/version-3.2.0/default-theme.md create mode 100644 versioned_docs/version-3.2.0/design-tokens.md create mode 100644 versioned_docs/version-3.2.0/divider.md create mode 100644 versioned_docs/version-3.2.0/faq.md create mode 100644 versioned_docs/version-3.2.0/flatList.md create mode 100644 versioned_docs/version-3.2.0/flex.md create mode 100644 versioned_docs/version-3.2.0/formControl.md create mode 100644 versioned_docs/version-3.2.0/hStack.md create mode 100644 versioned_docs/version-3.2.0/heading.md create mode 100644 versioned_docs/version-3.2.0/icon.md create mode 100644 versioned_docs/version-3.2.0/iconButton.md create mode 100644 versioned_docs/version-3.2.0/image.md create mode 100644 versioned_docs/version-3.2.0/input.md create mode 100644 versioned_docs/version-3.2.0/install-cra.mdx create mode 100644 versioned_docs/version-3.2.0/install-next.mdx create mode 100644 versioned_docs/version-3.2.0/installation.mdx create mode 100644 versioned_docs/version-3.2.0/keyboardAvoidingView.md create mode 100644 versioned_docs/version-3.2.0/kitchen-sink.mdx create mode 100644 versioned_docs/version-3.2.0/link.md create mode 100644 versioned_docs/version-3.2.0/list.md create mode 100644 versioned_docs/version-3.2.0/menu.md create mode 100644 versioned_docs/version-3.2.0/migration/Accordion.md create mode 100644 versioned_docs/version-3.2.0/migration/Actionsheet.md create mode 100644 versioned_docs/version-3.2.0/migration/Badge.md create mode 100644 versioned_docs/version-3.2.0/migration/Button.md create mode 100644 versioned_docs/version-3.2.0/migration/Button/Screenshot_2021-01-22_at_1.15.34_PM.png create mode 100644 versioned_docs/version-3.2.0/migration/Button/Screenshot_2021-01-22_at_1.16.25_PM.png create mode 100644 versioned_docs/version-3.2.0/migration/Button/Screenshot_2021-01-22_at_1.17.11_PM.png create mode 100644 versioned_docs/version-3.2.0/migration/Button/Screenshot_2021-01-22_at_1.20.36_PM.png create mode 100644 versioned_docs/version-3.2.0/migration/Button/Screenshot_2021-01-22_at_1.22.36_PM.png create mode 100644 versioned_docs/version-3.2.0/migration/Button/Screenshot_2021-01-22_at_1.23.42_PM.png create mode 100644 versioned_docs/version-3.2.0/migration/Button/Screenshot_2021-01-22_at_1.32.47_PM.png create mode 100644 versioned_docs/version-3.2.0/migration/Button/Screenshot_2021-01-22_at_1.38.15_PM.png create mode 100644 versioned_docs/version-3.2.0/migration/Button/Screenshot_2021-01-22_at_12.29.32_PM.png create mode 100644 versioned_docs/version-3.2.0/migration/Button/Screenshot_2021-01-22_at_12.53.09_PM.png create mode 100644 versioned_docs/version-3.2.0/migration/Button/Screenshot_2021-01-22_at_2.37.09_PM.png create mode 100644 versioned_docs/version-3.2.0/migration/Button/Screenshot_2021-01-22_at_2.38.52_PM.png create mode 100644 versioned_docs/version-3.2.0/migration/Card.md create mode 100644 versioned_docs/version-3.2.0/migration/Checkbox.md create mode 100644 versioned_docs/version-3.2.0/migration/Checkbox/Screenshot_2021-01-22_at_3.09.29_PM.png create mode 100644 versioned_docs/version-3.2.0/migration/Checkbox/Screenshot_2021-01-22_at_4.34.08_PM.png create mode 100644 versioned_docs/version-3.2.0/migration/DatePicker.md create mode 100644 versioned_docs/version-3.2.0/migration/DeckSwiper.md create mode 100644 versioned_docs/version-3.2.0/migration/Drawer.md create mode 100644 versioned_docs/version-3.2.0/migration/FABs.md create mode 100644 versioned_docs/version-3.2.0/migration/FooterTab.md create mode 100644 versioned_docs/version-3.2.0/migration/Form.md create mode 100644 versioned_docs/version-3.2.0/migration/Header.md create mode 100644 versioned_docs/version-3.2.0/migration/Icon.md create mode 100644 versioned_docs/version-3.2.0/migration/Layout.md create mode 100644 versioned_docs/version-3.2.0/migration/List.md create mode 100644 versioned_docs/version-3.2.0/migration/Picker.md create mode 100644 versioned_docs/version-3.2.0/migration/Radio Button.md create mode 100644 versioned_docs/version-3.2.0/migration/Searchbar.md create mode 100644 versioned_docs/version-3.2.0/migration/Segment.md create mode 100644 versioned_docs/version-3.2.0/migration/Spinner.md create mode 100644 versioned_docs/version-3.2.0/migration/SwipeList.md create mode 100644 versioned_docs/version-3.2.0/migration/Tabs.md create mode 100644 versioned_docs/version-3.2.0/migration/Thumbnail.md create mode 100644 versioned_docs/version-3.2.0/migration/Toast.md create mode 100644 versioned_docs/version-3.2.0/migration/Typography.md create mode 100644 versioned_docs/version-3.2.0/modal.md create mode 100644 versioned_docs/version-3.2.0/presence-transition.md create mode 100644 versioned_docs/version-3.2.0/pressable.md create mode 100644 versioned_docs/version-3.2.0/progress.md create mode 100644 versioned_docs/version-3.2.0/radio.md create mode 100644 versioned_docs/version-3.2.0/safe-area-view-props.md create mode 100644 versioned_docs/version-3.2.0/scrollview.md create mode 100644 versioned_docs/version-3.2.0/sectionList.md create mode 100644 versioned_docs/version-3.2.0/select.md create mode 100644 versioned_docs/version-3.2.0/slide.md create mode 100644 versioned_docs/version-3.2.0/spinner.md create mode 100644 versioned_docs/version-3.2.0/stack.md create mode 100644 versioned_docs/version-3.2.0/stagger.md create mode 100644 versioned_docs/version-3.2.0/statusBar.md create mode 100644 versioned_docs/version-3.2.0/swipableList.md create mode 100644 versioned_docs/version-3.2.0/switch.md create mode 100644 versioned_docs/version-3.2.0/testing.md create mode 100644 versioned_docs/version-3.2.0/text.md create mode 100644 versioned_docs/version-3.2.0/textArea.md create mode 100644 versioned_docs/version-3.2.0/toast.md create mode 100644 versioned_docs/version-3.2.0/useTheme.md create mode 100644 versioned_docs/version-3.2.0/utility-first.mdx create mode 100644 versioned_docs/version-3.2.0/utilityPropsSpecificity.md create mode 100644 versioned_docs/version-3.2.0/view.md diff --git a/build-init.js b/build-init.js index 94407a617..4fb2c0cc2 100644 --- a/build-init.js +++ b/build-init.js @@ -18,7 +18,12 @@ const cloneRepos = () => { shellJS.exec('git clone ' + URL); shellJS.cd('NativeBase'); - const a = shellJS.exec('git checkout ' + 'v' + v); + let a = shellJS.exec('git checkout ' + 'v' + v); + + //TODO: 3.2.0-hack + if (v === '3.2.0') { + a = shellJS.exec('git checkout ' + 'master'); + } if (a.code !== 0) { shellJS.exec('git checkout ' + FALLBACK_BRANCH); shellJS.exec('git pull'); diff --git a/nb-plugins/utils/index.js b/nb-plugins/utils/index.js index 95713803c..b2c1f60ab 100644 --- a/nb-plugins/utils/index.js +++ b/nb-plugins/utils/index.js @@ -103,7 +103,7 @@ const getNativeBaseVersion = () => { // return directory.split('versioned_docs/version-')[1]; // } - return '3.2.0'; + return '3.2.1-rc.0'; // return 'next'; }; diff --git a/versioned_docs/version-3.2.0/FAB.md b/versioned_docs/version-3.2.0/FAB.md new file mode 100644 index 000000000..b2da69276 --- /dev/null +++ b/versioned_docs/version-3.2.0/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.2.0/VStack.md b/versioned_docs/version-3.2.0/VStack.md new file mode 100644 index 000000000..94bc25cf0 --- /dev/null +++ b/versioned_docs/version-3.2.0/VStack.md @@ -0,0 +1,24 @@ +--- +id: v-stack +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.2.0/ZStack.md b/versioned_docs/version-3.2.0/ZStack.md new file mode 100644 index 000000000..1daab38f9 --- /dev/null +++ b/versioned_docs/version-3.2.0/ZStack.md @@ -0,0 +1,28 @@ +--- +id: z-stack +title: ZStack +--- + +`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.2.0/accessibility.md b/versioned_docs/version-3.2.0/accessibility.md new file mode 100644 index 000000000..3ccb492bb --- /dev/null +++ b/versioned_docs/version-3.2.0/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://react-native-aria.geekyants.com/) 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.2.0/actionSheet.md b/versioned_docs/version-3.2.0/actionSheet.md new file mode 100644 index 000000000..0035b1242 --- /dev/null +++ b/versioned_docs/version-3.2.0/actionSheet.md @@ -0,0 +1,78 @@ +--- +id: action-sheet +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.2.0/alert.md b/versioned_docs/version-3.2.0/alert.md new file mode 100644 index 000000000..17eeaabb5 --- /dev/null +++ b/versioned_docs/version-3.2.0/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. + + + +```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.2.0/alertDialog.md b/versioned_docs/version-3.2.0/alertDialog.md index 87b605332..0ca6500eb 100644 --- a/versioned_docs/version-3.2.0/alertDialog.md +++ b/versioned_docs/version-3.2.0/alertDialog.md @@ -24,110 +24,8 @@ import { AlertDialog } from 'native-base'; ### 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 ( - -
- -
- - ); -} -``` +```ComponentSnackPlayer path=composites,AlertDialog,basic.tsx -### 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 diff --git a/versioned_docs/version-3.2.0/appDrawer.md b/versioned_docs/version-3.2.0/appDrawer.md new file mode 100644 index 000000000..3fa173b72 --- /dev/null +++ b/versioned_docs/version-3.2.0/appDrawer.md @@ -0,0 +1,70 @@ +--- +id: app-drawer +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, + Box, +} from 'native-base'; +import { MaterialIcons } from '@expo/vector-icons'; + +function AppDrawer() { + const icons = [ + { name: 'bolt', bg: 'amber.600' }, + { name: 'build', bg: 'emerald.600' }, + { name: 'cloud', bg: 'blue.600' }, + { name: 'delivery-dining', bg: 'orange.600' }, + { name: 'favorite', bg: 'rose.600' }, + { name: 'music-note', bg: 'violet.600' }, + { name: 'invert-colors-on', bg: 'lime.600' }, + { name: 'navigation', bg: 'indigo.600' }, + { name: 'settings', bg: 'pink.600' }, + { name: 'sports-esports', bg: 'coolGray.600' }, + { name: 'shield', bg: 'darkBlue.600' }, + { name: 'photo-camera', bg: 'fuchsia.600' }, + { name: 'network-wifi', bg: 'amber.500' }, + { name: 'nightlight-round', bg: 'violet.800' }, + { name: 'flight', bg: 'blue.800' }, + { name: 'extension', bg: 'indigo.600' }, + { name: 'duo', bg: 'orange.600' }, + { name: 'album', bg: 'rose.600' }, + { name: 'access-alarm', bg: 'emerald.600' }, + { name: 'forum', bg: 'indigo.600' }, + ]; + + return ( + + {icons.map((icon) => ( + + } + /> + ))} + + ); +} + +export default function () { + return ( + + + + + + ); +} + +``` diff --git a/versioned_docs/version-3.2.0/avatar.md b/versioned_docs/version-3.2.0/avatar.md new file mode 100644 index 000000000..dff7875cc --- /dev/null +++ b/versioned_docs/version-3.2.0/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.2.0/badge.md b/versioned_docs/version-3.2.0/badge.md new file mode 100644 index 000000000..607a80451 --- /dev/null +++ b/versioned_docs/version-3.2.0/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.2.0/box.md b/versioned_docs/version-3.2.0/box.md index e22130f75..fd38a7ed2 100644 --- a/versioned_docs/version-3.2.0/box.md +++ b/versioned_docs/version-3.2.0/box.md @@ -33,20 +33,21 @@ import { Box, Center, NativeBaseProvider } from "native-base" export const Example = () => { return ( - This is a Box with Linear Gradient @@ -63,7 +64,7 @@ const config = { export default () => { return ( -
+
diff --git a/versioned_docs/version-3.2.0/breakpoints.md b/versioned_docs/version-3.2.0/breakpoints.md new file mode 100644 index 000000000..563075139 --- /dev/null +++ b/versioned_docs/version-3.2.0/breakpoints.md @@ -0,0 +1,131 @@ +--- +id: breakpoints +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. + +```SnackPlayer name=useBreakpointValue +import React from 'react'; +import { + Factory, + Button, + Stack, + NativeBaseProvider, + Center, +} from 'native-base'; +import { TextInput } from 'react-native'; + +import { Icon, useBreakpointValue, Text, VStack, Heading } from 'native-base'; +import { FontAwesome, Foundation, Feather } from '@expo/vector-icons'; +import { View } from 'react-native'; + +export const UseBreakpointValueExample = () => { + const flexDir = useBreakpointValue({ + base: 'column', + lg: 'row', + }); + return ( + + Why us? + + + + + Secure Checkout + + + + + + Secure Checkout + + + + + + Fast Turn Around + + + + + ); +}; + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} + +``` diff --git a/versioned_docs/version-3.2.0/buildingAppBar.md b/versioned_docs/version-3.2.0/buildingAppBar.md new file mode 100644 index 000000000..463c93df3 --- /dev/null +++ b/versioned_docs/version-3.2.0/buildingAppBar.md @@ -0,0 +1,48 @@ +--- +id: building-app-bar +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.2.0/buildingDrawerNavigation.md b/versioned_docs/version-3.2.0/buildingDrawerNavigation.md index 4e59c8e32..aa78a13c7 100644 --- a/versioned_docs/version-3.2.0/buildingDrawerNavigation.md +++ b/versioned_docs/version-3.2.0/buildingDrawerNavigation.md @@ -40,7 +40,7 @@ function Component(props) { props.navigation.toggleDrawer()} position="absolute" ml="2" zIndex="1"> -
+
{props.route.name}
@@ -148,7 +148,7 @@ function CustomDrawerContent(props) { } function MyDrawer() { return ( - + } > diff --git a/versioned_docs/version-3.2.0/buildingFooterTabs.md b/versioned_docs/version-3.2.0/buildingFooterTabs.md index 67877be2b..4a4e7f597 100644 --- a/versioned_docs/version-3.2.0/buildingFooterTabs.md +++ b/versioned_docs/version-3.2.0/buildingFooterTabs.md @@ -8,8 +8,8 @@ With NativeBase v3 we have removed FooterTab components because as it's very sim ## Example ```SnackPlayer name=Footer dependencies=react-native-linear-gradient -import React from 'react'; +import React from 'react'; import { NativeBaseProvider, Box, @@ -25,32 +25,35 @@ import { Center, Pressable, } from 'native-base'; -import { MaterialCommunityIcons , MaterialIcons} from '@expo/vector-icons'; +import { MaterialCommunityIcons, MaterialIcons } from '@expo/vector-icons'; export default function App() { const [selected, setSelected] = React.useState(1); return ( - -
-
- + +
+ setSelected(0)} - > + onPress={() => setSelected(0)}>
} + as={ + + } color="white" - size="xs" + size="sm" /> - - Favorites + + Home +
} + as={} color="white" - size="xs" + size="sm" /> - - Music + + Search +
} + mb={1} + as={ + + } color="white" - size="xs" + size="sm" /> - - Places + + Cart +
} + mb={1} + as={ + + } color="white" - size="xs" + size="sm" /> - News + + Account +
@@ -112,4 +127,5 @@ export default function App() { ); } + ``` diff --git a/versioned_docs/version-3.2.0/buildingSearchBar.md b/versioned_docs/version-3.2.0/buildingSearchBar.md index a9cf16cd1..ee8651d84 100644 --- a/versioned_docs/version-3.2.0/buildingSearchBar.md +++ b/versioned_docs/version-3.2.0/buildingSearchBar.md @@ -13,34 +13,62 @@ Here are some examples to show how easily and quickly we can create so many type ![https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b4c4662d-8a9c-48a2-817d-000ff8f5f6b6/Screenshot_2021-01-18_at_7.51.08_PM.png](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b4c4662d-8a9c-48a2-817d-000ff8f5f6b6/Screenshot_2021-01-18_at_7.51.08_PM.png) --> ```SnackPlayer name=Search%20Bar -import React from "react"; -import { VStack, Input, Button, IconButton, Icon, Text, NativeBaseProvider, Center, Box } from "native-base"; +import React from 'react'; +import { + VStack, + Input, + Button, + IconButton, + Icon, + Text, + NativeBaseProvider, + Center, + Box, + Divider, + Heading, +} from 'native-base'; import { Ionicons, MaterialIcons } from '@expo/vector-icons'; import { FontAwesome5 } from '@expo/vector-icons'; - -function SearchBar(){ +function SearchBar() { return ( - - - Cupertino + + + + }> + + Cupertino } />} + _focus: { style: { boxShadow: 'none' } }, + }} + InputLeftElement={ + } + /> + } /> - - Material + + Material } />} - InputRightElement={} />} + }} + InputLeftElement={ + } + /> + } + InputRightElement={ + } + /> + } /> - - ) + + ); } export default function () { @@ -69,4 +113,5 @@ export default function () { ); } + ``` diff --git a/versioned_docs/version-3.2.0/buildingSwipeList.md b/versioned_docs/version-3.2.0/buildingSwipeList.md index 208a39a7d..4e44901a3 100644 --- a/versioned_docs/version-3.2.0/buildingSwipeList.md +++ b/versioned_docs/version-3.2.0/buildingSwipeList.md @@ -57,7 +57,7 @@ function Basic() { }, { id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63', - fullName: 'Sujitha Alexander', + fullName: 'Sujita Mathur', timeStamp: '11:11 PM', recentText: 'Cheer up, there!', avatarUrl: @@ -82,7 +82,7 @@ function Basic() { id: '28694a0f-3da1-471f-bd96-142456e29d72', fullName: 'Kiara', timeStamp: '12:47 PM', - recentText: 'I will call him today.', + recentText: 'I will call today.', avatarUrl: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBwgu1A5zgPSvfE83nurkuzNEoXs9DMNr8Ww&usqp=CAU', }, @@ -112,21 +112,20 @@ function Basic() { console.log('You touched me')} bg="white"> + py="2" + > - + {item.fullName} - {item.recentText} + {item.recentText} - + {item.timeStamp} diff --git a/versioned_docs/version-3.2.0/buildingTabView.md b/versioned_docs/version-3.2.0/buildingTabView.md index c213fca63..e6ce91847 100644 --- a/versioned_docs/version-3.2.0/buildingTabView.md +++ b/versioned_docs/version-3.2.0/buildingTabView.md @@ -25,13 +25,13 @@ import { TabView, SceneMap } from 'react-native-tab-view'; import { NativeBaseProvider, Box, Text, Center } from 'native-base'; import Constants from 'expo-constants'; -const FirstRoute = () =>
This is Tab 1
; +const FirstRoute = () =>
This is Tab 1
; -const SecondRoute = () =>
This is Tab 2
; +const SecondRoute = () =>
This is Tab 2
; -const ThirdRoute = () =>
This is Tab 3
; +const ThirdRoute = () =>
This is Tab 3
; -const FourthRoute = () =>
This is Tab 4
; +const FourthRoute = () =>
This is Tab 4
; const initialLayout = { width: Dimensions.get('window').width }; diff --git a/versioned_docs/version-3.2.0/button.mdx b/versioned_docs/version-3.2.0/button.mdx new file mode 100644 index 000000000..4d2260a91 --- /dev/null +++ b/versioned_docs/version-3.2.0/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,ButtonGroup,basic.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.2.0/center.md b/versioned_docs/version-3.2.0/center.md new file mode 100644 index 000000000..af1b45de7 --- /dev/null +++ b/versioned_docs/version-3.2.0/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.2.0/changelog.md b/versioned_docs/version-3.2.0/changelog.md new file mode 100644 index 000000000..0e0694315 --- /dev/null +++ b/versioned_docs/version-3.2.0/changelog.md @@ -0,0 +1,22 @@ +--- +id: changelog +title: Changelog +--- + +## Fixes + +- Added a feature to suppress accessible color warning [#3849](https://github.com/GeekyAnts/NativeBase/pull/3849) +- Fixed support for numberOfLines props on Text [#3852](https://github.com/GeekyAnts/NativeBase/pull/3852) +- Fixed \_text not working in Link component's baseStyle/variants [#3854](https://github.com/GeekyAnts/NativeBase/pull/3854) +- Fixed custom id not being passed in a custom toast [#3870](https://github.com/GeekyAnts/NativeBase/pull/3870) +- Exported IPressableProps [#3872](https://github.com/GeekyAnts/NativeBase/pull/3871) +- Fixed Overlay/Backdrop cursor pointer issue. [#3880](https://github.com/GeekyAnts/NativeBase/pull/3880) +- Fixed Avatar.Badge conditional rendering [#3885](https://github.com/GeekyAnts/NativeBase/pull/3885) +- Added \_backdrop prop in actionsheet and modal to apply styles to backrop(overlay) [#3886](https://github.com/GeekyAnts/NativeBase/pull/3886) +- Added typings for left and right for placement prop in Slide. [#3889](https://github.com/GeekyAnts/NativeBase/pull/3889) +- Added xxs typing for fontSize in Text. [#3890](https://github.com/GeekyAnts/NativeBase/pull/3890) +- Added support for React.Fragment as Children in Box. [#3891](https://github.com/GeekyAnts/NativeBase/pull/3891) +- Fixed Stack space extend issue. [#3897](https://github.com/GeekyAnts/NativeBase/pull/3897) +- Fixed Radio Size issue on happening on iOS and Android. [#3913](https://github.com/GeekyAnts/NativeBase/pull/3913) + +For more details. Visit [releases](https://github.com/GeekyAnts/NativeBase/releases/tag/v3.0.7). diff --git a/versioned_docs/version-3.2.0/checkBox.md b/versioned_docs/version-3.2.0/checkBox.md new file mode 100644 index 000000000..10ee1772f --- /dev/null +++ b/versioned_docs/version-3.2.0/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.2.0/colorMode.md b/versioned_docs/version-3.2.0/colorMode.md new file mode 100644 index 000000000..e24285266 --- /dev/null +++ b/versioned_docs/version-3.2.0/colorMode.md @@ -0,0 +1,163 @@ +--- +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, + Text, + NativeBaseProvider, +} from 'native-base'; + +function ColorModeExample() { + const { colorMode, toggleColorMode } = useColorMode(); + return ( +
+ + The active color mode is{' '} + + {useColorModeValue('Light', 'Dark')} + + + +
+ ); +} + +export default function () { + return ( + + + + ); +} + +``` + +## \_light and \_dark Pseudo props + +All components accepts \_light and \_dark props which applies the passed props on dark and light mode. + +```SnackPlayer name=PseudoProps%20Usage +import React from 'react'; +import { + Heading, + useColorMode, + Button, + HStack, + Avatar, + Center, + useColorModeValue, + Text, + NativeBaseProvider, +} from 'native-base'; + +function PseudoPropsUsage() { + const { colorMode, toggleColorMode } = useColorMode(); + return ( +
+ + The active color mode is{' '} + + {colorMode} + + + +
+ ); +} + +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.2.0/container.md b/versioned_docs/version-3.2.0/container.md index a09ac47e5..9938207f4 100644 --- a/versioned_docs/version-3.2.0/container.md +++ b/versioned_docs/version-3.2.0/container.md @@ -20,16 +20,15 @@ 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. + React Ecosystem + + NativeBase is a simple, modular and accessible component library that + gives you building blocks to build you React applications. + ); } @@ -38,7 +37,7 @@ function ContainerComponent() { export default function () { return ( -
+
diff --git a/versioned_docs/version-3.2.0/customizingComponents.md b/versioned_docs/version-3.2.0/customizingComponents.md index 472b38539..da9c028c6 100644 --- a/versioned_docs/version-3.2.0/customizingComponents.md +++ b/versioned_docs/version-3.2.0/customizingComponents.md @@ -100,7 +100,7 @@ export default function () { }); return ( -
+
NativeBase
@@ -141,7 +141,7 @@ export default function () { 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 \_light 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.2.0/default-theme.md b/versioned_docs/version-3.2.0/default-theme.md new file mode 100644 index 000000000..7a6ab70bf --- /dev/null +++ b/versioned_docs/version-3.2.0/default-theme.md @@ -0,0 +1,229 @@ +--- +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: { + xs: '-0.05em', + sm: '-0.025em', + md: 0, + lg: '0.025em', + xl: '0.05em', + '2xl': '0.1em', + }, + lineHeights: { + '2xs': '1em', + xs: '1.125em', + sm: '1.25em', + md: '1.375em', + lg: '1.5em', + xl: '1.75em', + '2xl': '2em', + '3xl': '2.5em', + '4xl': '3em', + '5xl': '4em', + }, + fontWeights: { + hairline: 100, + thin: 200, + light: 300, + normal: 400, + medium: 500, + semibold: 600, + bold: 700, + extrabold: 800, + black: 900, + extrablack: 950, + }, + fonts: { + heading: undefined, + body: undefined, + mono: undefined, + }, + fontSizes: { + '2xs': 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. + + + +## Opacity + +The `opacity` key is used in opacity style object and to define colors opacity using the red-green-blue-alpha (RGBA) model, RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity of the color. + +```jsx +const opacity = { + 0: 0, + 5: 0.05, + 10: 0.1, + 20: 0.2, + 25: 0.25, + 30: 0.3, + 40: 0.4, + 50: 0.5, + 60: 0.6, + 70: 0.7, + 75: 0.75, + 80: 0.8, + 90: 0.9, + 95: 0.95, + 100: 1, +}; +``` + +## 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/tree/master/src/theme/base). diff --git a/versioned_docs/version-3.2.0/design-tokens.md b/versioned_docs/version-3.2.0/design-tokens.md new file mode 100644 index 000000000..8198af8e3 --- /dev/null +++ b/versioned_docs/version-3.2.0/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.2.0/divider.md b/versioned_docs/version-3.2.0/divider.md new file mode 100644 index 000000000..70f897268 --- /dev/null +++ b/versioned_docs/version-3.2.0/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.2.0/faq.md b/versioned_docs/version-3.2.0/faq.md new file mode 100644 index 000000000..d366df99c --- /dev/null +++ b/versioned_docs/version-3.2.0/faq.md @@ -0,0 +1,6 @@ +--- +id: faq +title: FAQ's +--- + +NativeBase FAQ's Coming Soon. diff --git a/versioned_docs/version-3.2.0/flatList.md b/versioned_docs/version-3.2.0/flatList.md new file mode 100644 index 000000000..ef73e46fe --- /dev/null +++ b/versioned_docs/version-3.2.0/flatList.md @@ -0,0 +1,152 @@ +--- +id: flat-list +title: FlatList +--- + +A component for rendering performant scrollable lists. + +## Example + +```SnackPlayer name=Basic +import React from "react" +import { + Box, + FlatList, + Heading, + Avatar, + HStack, + VStack, + Text, + Spacer, + Center, + NativeBaseProvider, +} from "native-base" +export const Example = () => { + const data = [ + { + id: "bd7acbea-c1b1-46c2-aed5-3ad53abb28ba", + fullName: "Aafreen Khan", + timeStamp: "12:47 PM", + recentText: "Good Day!", + avatarUrl: + "https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500", + }, + { + id: "3ac68afc-c605-48d3-a4f8-fbd91aa97f63", + fullName: "Sujitha Mathur", + timeStamp: "11:11 PM", + recentText: "Cheer up, there!", + avatarUrl: + "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyEaZqT3fHeNrPGcnjLLX1v_W4mvBlgpwxnA&usqp=CAU", + }, + { + id: "58694a0f-3da1-471f-bd96-145571e29d72", + fullName: "Anci Barroco", + timeStamp: "6:22 PM", + recentText: "Good Day!", + avatarUrl: "https://miro.medium.com/max/1400/0*0fClPmIScV5pTLoE.jpg", + }, + { + id: "68694a0f-3da1-431f-bd56-142371e29d72", + fullName: "Aniket Kumar", + timeStamp: "8:56 PM", + recentText: "All the best", + avatarUrl: + "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSr01zI37DYuR8bMV5exWQBSw28C1v_71CAh8d7GP1mplcmTgQA6Q66Oo--QedAN1B4E1k&usqp=CAU", + }, + { + id: "28694a0f-3da1-471f-bd96-142456e29d72", + fullName: "Kiara", + timeStamp: "12:47 PM", + recentText: "I will call today.", + avatarUrl: + "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBwgu1A5zgPSvfE83nurkuzNEoXs9DMNr8Ww&usqp=CAU", + }, + ] + return ( + + + Inbox + + ( + + + + + + {item.fullName} + + + {item.recentText} + + + + + {item.timeStamp} + + + + )} + keyExtractor={(item) => item.id} + /> + + ) +} + +export default () => { + return ( + +
+ +
+ + ) +} + + +``` + +## Props + +```ComponentPropTable path=basic,FlatList,FlatList.tsx showStylingProps=true + +``` diff --git a/versioned_docs/version-3.2.0/flex.md b/versioned_docs/version-3.2.0/flex.md new file mode 100644 index 000000000..1667dabac --- /dev/null +++ b/versioned_docs/version-3.2.0/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.2.0/form.md b/versioned_docs/version-3.2.0/form.md index ee421eb0d..6a078af67 100644 --- a/versioned_docs/version-3.2.0/form.md +++ b/versioned_docs/version-3.2.0/form.md @@ -51,7 +51,7 @@ function BuildingAFormExample() { export default function () { return ( -
+
@@ -113,7 +113,7 @@ function BuildingAFormExample() { export default function () { return ( -
+
@@ -186,7 +186,7 @@ function BuildingAFormExample() { export default function () { return ( -
+
diff --git a/versioned_docs/version-3.2.0/formControl.md b/versioned_docs/version-3.2.0/formControl.md new file mode 100644 index 000000000..05b32b0d3 --- /dev/null +++ b/versioned_docs/version-3.2.0/formControl.md @@ -0,0 +1,52 @@ +--- +id: form-control +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.2.0/hStack.md b/versioned_docs/version-3.2.0/hStack.md new file mode 100644 index 000000000..d8e8c178d --- /dev/null +++ b/versioned_docs/version-3.2.0/hStack.md @@ -0,0 +1,24 @@ +--- +id: h-stack +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.2.0/heading.md b/versioned_docs/version-3.2.0/heading.md new file mode 100644 index 000000000..971b44a20 --- /dev/null +++ b/versioned_docs/version-3.2.0/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.2.0/icon.md b/versioned_docs/version-3.2.0/icon.md new file mode 100644 index 000000000..4b19156e5 --- /dev/null +++ b/versioned_docs/version-3.2.0/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 + +### 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). + +### 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 + +``` + +### 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.2.0/iconButton.md b/versioned_docs/version-3.2.0/iconButton.md new file mode 100644 index 000000000..60d5f1741 --- /dev/null +++ b/versioned_docs/version-3.2.0/iconButton.md @@ -0,0 +1,43 @@ +--- +id: icon-button +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,Sizes.tsx + +``` + +### Variants + +```ComponentSnackPlayer path=composites,IconButton,Variant.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.2.0/image.md b/versioned_docs/version-3.2.0/image.md new file mode 100644 index 000000000..550e56ec4 --- /dev/null +++ b/versioned_docs/version-3.2.0/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.2.0/input.md b/versioned_docs/version-3.2.0/input.md new file mode 100644 index 000000000..9dcf9e138 --- /dev/null +++ b/versioned_docs/version-3.2.0/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.2.0/install-cra.mdx b/versioned_docs/version-3.2.0/install-cra.mdx new file mode 100644 index 000000000..853c65e3a --- /dev/null +++ b/versioned_docs/version-3.2.0/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'; + +export default function App() { + return ( + + Hello world + + ); +} +``` + + + + + +
+ +
+ +
+
+
+ + +
+
+ +
+
+
diff --git a/versioned_docs/version-3.2.0/install-next.mdx b/versioned_docs/version-3.2.0/install-next.mdx new file mode 100644 index 000000000..dc9dbca16 --- /dev/null +++ b/versioned_docs/version-3.2.0/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.2.0/installation.mdx b/versioned_docs/version-3.2.0/installation.mdx new file mode 100644 index 000000000..91616aeed --- /dev/null +++ b/versioned_docs/version-3.2.0/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.2.0/interaction-styles.mdx b/versioned_docs/version-3.2.0/interaction-styles.mdx index f1e1bb417..8c07bf6a5 100644 --- a/versioned_docs/version-3.2.0/interaction-styles.mdx +++ b/versioned_docs/version-3.2.0/interaction-styles.mdx @@ -22,15 +22,15 @@ Using `_hover` pseudo prop, we can customize the style of Pressable component on - Hover over me + Hover @@ -38,11 +38,11 @@ Using `_hover` pseudo prop, we can customize the style of Pressable component on ```jsx title="Hover example" @@ -58,15 +58,15 @@ Using `_pressed` pseudo prop, we can customize the style of Pressable component - Press me + Pressed @@ -74,15 +74,15 @@ Using `_pressed` pseudo prop, we can customize the style of Pressable component ```jsx title="Pressed example" - Hover over me + Pressed ``` @@ -94,15 +94,19 @@ Using `_focus` pseudo prop, we can customize the style of Pressable component on - Try focusing me + Focus @@ -110,15 +114,15 @@ Using `_focus` pseudo prop, we can customize the style of Pressable component on ```jsx title="Focus example" - Hover over me + Focus ``` @@ -131,45 +135,45 @@ Using `_web`, `_iOS`, `_android` pseudo props, we can customize the style or beh - Primary + Save Web - - Primary + + Save Android - Primary + Save iOS @@ -181,42 +185,42 @@ Using `_web`, `_iOS`, `_android` pseudo props, we can customize the style or beh - Primary + Save Web - - Primary + + Save Android - Primary + Save iOS diff --git a/versioned_docs/version-3.2.0/keyboardAvoidingView.md b/versioned_docs/version-3.2.0/keyboardAvoidingView.md new file mode 100644 index 000000000..a124d3063 --- /dev/null +++ b/versioned_docs/version-3.2.0/keyboardAvoidingView.md @@ -0,0 +1,18 @@ +--- +id: keyboard-avoiding-view +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.2.0/kitchen-sink.mdx b/versioned_docs/version-3.2.0/kitchen-sink.mdx new file mode 100644 index 000000000..7187d2c16 --- /dev/null +++ b/versioned_docs/version-3.2.0/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.2.0/link.md b/versioned_docs/version-3.2.0/link.md new file mode 100644 index 000000000..7c9c46c7c --- /dev/null +++ b/versioned_docs/version-3.2.0/link.md @@ -0,0 +1,60 @@ +--- +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) \ No newline at end of file diff --git a/versioned_docs/version-3.2.0/list.md b/versioned_docs/version-3.2.0/list.md new file mode 100644 index 000000000..84f8d3dfc --- /dev/null +++ b/versioned_docs/version-3.2.0/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.2.0/loginsignupforms.md b/versioned_docs/version-3.2.0/loginsignupforms.md index 8e7b20a54..9abc14ca3 100644 --- a/versioned_docs/version-3.2.0/loginsignupforms.md +++ b/versioned_docs/version-3.2.0/loginsignupforms.md @@ -23,88 +23,63 @@ import { Icon, IconButton, HStack, - Divider + Divider, } from 'native-base'; export default function App() { - - return ( - - - + return ( + + + Welcome - + Sign in to continue! - + - - Email ID + + Email ID - - - Password + + + Password + mt="1"> Forget Password? - - - - - } - color='muted.700' - size='sm' - /> - } - /> - } - color='muted.700' - size="sm" - /> - } - /> - } - color='muted.700' - size="sm" - /> - } - /> - - - - I'm a new user. - + + + I'm a new user.{' '} + + Sign Up @@ -113,6 +88,7 @@ export default function App() { ); } + ``` ### Signup Form @@ -133,87 +109,49 @@ import { Icon, IconButton, HStack, - Divider + Divider, } from 'native-base'; export default function App() { - - return ( - - - + return ( + + + Welcome - + Sign up to continue! - + - - Email + + Email - - Password + + Password - - Confirm 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.2.0/menu.md b/versioned_docs/version-3.2.0/menu.md new file mode 100644 index 000000000..ba2b694e2 --- /dev/null +++ b/versioned_docs/version-3.2.0/menu.md @@ -0,0 +1,95 @@ +--- +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) \ No newline at end of file diff --git a/versioned_docs/version-3.2.0/migration/Accordion.md b/versioned_docs/version-3.2.0/migration/Accordion.md new file mode 100644 index 000000000..9f75bc7ea --- /dev/null +++ b/versioned_docs/version-3.2.0/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.2.0/migration/Actionsheet.md b/versioned_docs/version-3.2.0/migration/Actionsheet.md new file mode 100644 index 000000000..50e681848 --- /dev/null +++ b/versioned_docs/version-3.2.0/migration/Actionsheet.md @@ -0,0 +1,107 @@ +--- +id: action-sheet +title: ActionSheet +--- + +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.2.0/migration/Badge.md b/versioned_docs/version-3.2.0/migration/Badge.md new file mode 100644 index 000000000..50dad69ac --- /dev/null +++ b/versioned_docs/version-3.2.0/migration/Badge.md @@ -0,0 +1,44 @@ +--- +id: badge +title: Badge +--- + +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.2.0/migration/Button.md b/versioned_docs/version-3.2.0/migration/Button.md new file mode 100644 index 000000000..a33b068df --- /dev/null +++ b/versioned_docs/version-3.2.0/migration/Button.md @@ -0,0 +1,196 @@ +--- +id: button +title: Button +--- + +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 your 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.2.0/migration/Button/Screenshot_2021-01-22_at_1.15.34_PM.png b/versioned_docs/version-3.2.0/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.2.0/migration/Button/Screenshot_2021-01-22_at_1.17.11_PM.png b/versioned_docs/version-3.2.0/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.2.0/migration/Button/Screenshot_2021-01-22_at_1.22.36_PM.png b/versioned_docs/version-3.2.0/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.2.0/migration/Button/Screenshot_2021-01-22_at_1.23.42_PM.png b/versioned_docs/version-3.2.0/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.2.0/migration/Button/Screenshot_2021-01-22_at_1.32.47_PM.png b/versioned_docs/version-3.2.0/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.2.0/migration/Button/Screenshot_2021-01-22_at_12.29.32_PM.png b/versioned_docs/version-3.2.0/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.2.0/migration/Button/Screenshot_2021-01-22_at_12.53.09_PM.png b/versioned_docs/version-3.2.0/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.2.0/migration/Card.md b/versioned_docs/version-3.2.0/migration/Card.md new file mode 100644 index 000000000..c9acc1d07 --- /dev/null +++ b/versioned_docs/version-3.2.0/migration/Card.md @@ -0,0 +1,91 @@ +--- +id: card +title: Card +--- + +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.2.0/migration/Checkbox.md b/versioned_docs/version-3.2.0/migration/Checkbox.md new file mode 100644 index 000000000..f63647256 --- /dev/null +++ b/versioned_docs/version-3.2.0/migration/Checkbox.md @@ -0,0 +1,54 @@ +--- +id: checkbox +title: Checkbox +--- + +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.2.0/migration/Checkbox/Screenshot_2021-01-22_at_3.09.29_PM.png b/versioned_docs/version-3.2.0/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.2.0/migration/Checkbox/Screenshot_2021-01-22_at_4.34.08_PM.png b/versioned_docs/version-3.2.0/migration/Checkbox/Screenshot_2021-01-22_at_4.34.08_PM.png new file mode 100644 index 0000000000000000000000000000000000000000..ef1c1a20da072291a0e4f16f34ec0f2f6b190f2e GIT binary patch literal 9954 zcmZX31yoeg^Dx~FOSeb~yM%O?ba!`mFD>2ONP{#;hjcdxN=Qj}ck`{kKL78XGjHbI zshe|V?u%4XkVHozMuCEYLYI~jSAl|p#)HtDNC=QOf~mzh6cn0`wV0Taw3ryBl8d8- zwVgQ>lvHG@CZd+=D1NSPQbNKH80-WbZ%OY|9MNb>N_DK%1UMX-7-W&bI3Q!I2lil8 zO%(lid|`Y*UAjcw-C$5uJrEyHVn<#|c)@SSXYXluDquSML9vbfZVg(vA^k(*c7YDm zb~I}71vb@0UAeWK3ZgI+27M2TQX79}2!Mb9Js<5hApMRjpChGG0i`A&?oD%M1J#Tl zD#0y+{ejIua9|Q@{m2W)8X8JGbj?I2P&{x?xavbFv}lJ+U_&an6vmR#`R8YO6MmA- zai}uoHa%-jDB`>PTSzAv}gW@d`#QLGEr-@4(b4{e%-d@ zLc9zV=X7p%S`B5}2p>SQU{Ox=yG!}7d zGFYDV_3S2i$&ncUmw4sJOObfFNfB8SLe>;QX*9Z}jW96fX}n~=EsLE)E9NO*#xR#p zpQV11~Qx@_*cv^Psq`5LyDBxN;@|_gSCM4jRV2T&xRJ!ao4v?$dsR z@J&KxK%p9;UOB@W^iaSBv#_8H1c@i0(DpE*Zt$iDF&H6apvnjnX(4C?yBpyyqId)e z7zvdj%CB>CqXR#Wuk*H|YAPavk-zu){0OH+LN1_k8-QY!sKP=VK)(=yNo1iRj+9hM zM57_We&=F_z=p{nra^g>z%0da`N4&dCoWrTDPeg;tQglT*jJP_CF-znsEmUb=0-%@ z3NI@nPO@QU)C!xILO)0&Uwz-95knx(K=@nH$-ZnOB5VflP|pMl-2|ekX`L2vTBvlL zwibg%oVsz7);r%R%{q@N)TansXWprSoOP7Afn+CgL881+(9psL-v#e8jXxkD!gI?I z`C|}vZ{WJ*I@SR>Ce>o6bI)C{p~1wFYH;T2gs z+GcDDTpuZ#BJ_Dbn&**t_mZ4Q;KSePfE+- z;o$vAE@!TBfBFuWqN;kO#4)%{WHkgx)Ejx zM~CAC?gYA8Gq`4>s&{7Hc4EHlSJ}_j!V8(?D(kPKv)TFD#o9Gq!dFQa>G;~?I?>gG zb6H>2%iXn(N;Kj*^_SK8H24gC>TZE2u1nMIQoQrL#=O2c54^hW3j6#erf#UbU#5zt ziyVvc3O)C6-0j_XzVm!H|L)_a>)w9jcFljCbW?Juen>WBYiWdLix8eTtTnbc-P(Kq zaRN+en_;wAXx!9agZ7j!q$i|hm~U9ot@-x-l@7K(I@`MBXy9O!tw%_;-8V!Q3Bv&+7CRd%icg*zo zg816_l}tKJ-n1klp|&5m#J2q8>we)j>iT=vWkG$|J;k=pw&;k2%ZDph z_vUvlieM{-2yoVIZS*kc?%uI-W(E=k zet}&Mo(O6cQ5T61Vh(!fT@KExJJ#ZU)ete#Feu^|5aezIU7&1~evXjWgGek;Wn)Op)%;(pHGF?%bGP3efA-Tk| zq-+t1WKof1tO3uXL5z9~cZneWfQyOd&{}*$D!(L)H4#lx@U_8JKzOeRQT< zYn>~H-HUxn(u@BPIY?ZU`u3$D*l8xC`*T(1a zbft26yIZ+qxlMt86yZ8ZN0%v=#ak}FNy(7dsCfIO!`r3hqs({xu#us0VidOx#TSXT z>Swx#{=S~RvA#8iQB@4Nxm?CvZ|AI+Mv0%ffKY-LHnO~_FKcZ5c0(&fn3nYx4w<17 zW7%_T%OJgcb|DpNDJwec2&&&|1G_iIhSp=7zQk~)+CMgGH$Kd#MKHUo&#Uj~M(U!r2(G4eoJ@cOyVV@I zRt%b7#xXA9ZgVd96g7M_HP6_Vni>(R6Bpc075?~nDemWn>69)p`w;nz-v;_!`hol> z?{9`)%U+lfeKCHKH}bZ=V!bF?lc{i3*R&gG{aH&``r!fowUPGeZAh$}=dHPDw5t3v zVlDBjB!lE0#fgxHTUDv{?20@8)BRRjB(tYtjDYjWc1Ch_X`w=n0Ga>e0MUG=sU_?b zXU-L$=Y7ZY!y~Ez!6DGwfd9IE?<`!WQ|AciWoXlS?9*0fZ?-)1K}0jo5WUm;k$7(@ z^oVs~*@0%Y)t&vt;)(gSdavcmp}R{JTzYnz?Gxhj^{(kOU5Le7=_Y)Y!e_a2DV`tA z4}78ASJWQw6>lh*DDbet`o?f#{lNaya&CGxm&-lO)4-qgRAN|mbiAu3NvP>f?``aM zuD3hr?farYbNg1)wfozbK}YnpQ}EtJ%~!gbz22wiJ3k5;A9Qa||LX_vuIgB+rJt%` zvY@7K-P7zn$Kg@u>+`EWvgR1sJ)p-(tf3wX+yD!u!wBUDb|{Kb&4ovVQ_eL+#JX41 z@-iUB0zugrm)^%(a>3SOavt#{kZ=xyd`(z{S69QcWX!Zr9b|xv{K(kePfve{VTEnr z)}tG{yB);>-qP(^7MGzuDr)4407OG9!zKe!-1LQ9f4n8oPnZ7Lxi`hc!v=q*cnW~d z1;jg`ofcX^ijOFBEolpRc_>B*jRXY;O$-GOp`alk2u<=I`V%xg6zo6RVW6PGt)bxl zC8Gerf1d;h{MGplc9+Zfxn6xwmtD3r)n>)B# zIl39Y+cJVQAUjEEyFx+XzyAx+(ke8N0ttG~T20GMOJ0uG)X^SjZ02ZU4g}jfL8PIe z_`$po(%#(7m=bJn=itf<7NGuz1TTdC+YF+n{D+8}tpK%_yb`6Dql-BuCy)imLM@0w zNlD4?VrIdsBL3-L>X0u1YAZK4CteW9)6)~^$qsaMu>`U5@bG|G*g$M-%n%7?S1$)Q zV=%LW>$`s%`L`W$b5~OrYbQ5rM+eHkc8yIO-Q5JJssB3q&-2fInuD$X>&e0OU&De7 z5cHP=Vg<5*{$m@W%Kx{OSIHV|Zl^77Z4a3itmK#8Wjy>x_NO=)ovH8AvX4zils0@3hWe-{Hi zOKU7KfC@)1p<=M8_x)zqr^c+GMRSB)aEV%jeqt-~M?pgt%4$K?kyJp$YFW`=6;k#~ z^oPo7IH?l1en)ruPbI<#W?njnZRzZm7N_lJz&FpcGrvEcf67W?aLkfWq~MET80qs9 zg_T7lv_sW|87c7+gcET^7%2ft^3ce5bHynDNJ0vOL+^s|SGIzIGO#c!rJlO{vzjoB z#1!;j%mGiMq?W9rK?6uYk;)(8p@iVFlFx8aHY#IL#V{%mJ3NSg@f^gsvb>CTBE-@8 z>}QoQHk!Rss!|#Xn`gZdsiMHxNWk%=eL;axCPX?gth7fKdh8`T&xw@>Lo?|cRV8K4 zXBC~ZL=x*5V@vCJ1rNu*<#NQO<^4nb(ke*T0ZN+C>VbVix^dE7aU)NLR3F}me$(F| zj)KA~scN}RG90khtasnrry8QrxE8~_vBRsukF|`}A$8*h25n}i3sR!0l027mf;yUV zL7mLMAwy$Sf(XHm^{))yZ&gnxq`Z__Fjp##O{qjvwq*X$=1?u*{KvE@8A8Nl27;5h zAJ$0@rz@ZCvOW^OL;Hn3wB6iqmfzgPE|LoZD2YI;e@@cR4*wBwGE@}P&gfR|q0X(< z)H6GE^<$vQ`9vY*>({^Y1Wv?7P_9 zG}+$U(;TUM9$Z-=Eh#CXewwcadxL_bqftLLhUza5oUC?u;l>hkh%PtV+xqabv9V#3 zk)cD5ee3t{zaD*eLP`~ropvXPuFw8pPJZDc_0)dr$LHnIT-)3nn5cZhQ6u|wN$UQ$hYXDz9oybWm(lg=CuHp(X+K%e7g}mp$XHz4 zjq%2>>%i_THEA6$)-~vGcf5EQ%H{GSdwF?fun#NB-81WQ_O7jURh+722Hc(MPh_y- zcKY}j4@T{tJHSa}(vGXv#`Q1Q?OJU2HMVNaWZ+-YDOYcECg3Qf&?aml=)aEe#* zcam|!4HjX+-yIxs2DW!c1GYyDjm*s>XNn||YYC6#I5H0o4(>OjrMUU{iVTI$Y(y-| zh!Msbt=X~g@FEJtju2A@qti{EZkgdyYUt_d^Xp!S@bU2p*)801hCCiF|J1tf0b$gg zVyo!{1dx;}=6y;B>SGZSe&)1aB1{t7cM0ZIa|FCSoS&cfth6<3Y;P9} z4N=5V2nEW2;Y96uc$%(slJmD-MES^_kCb7BO#6M0MR~hD!y6Xy?1CNGCX)sZP!}E@ z8NqUhYHDh-N}qh5m|)ttx(X0ak{(V@N|qp^qpOZcO*x|n>2$&BYHKHR7#X}`ad-7O zsLRMyuso5GkqtiV^s1863knL3jE#w_s3dV~R=QJjRawVYk$ZTJ>C&%YlYgnJL$-O8_`t}mXnP_l!V^IuzFM^Wtsy;vk#&%`u8@9w6iX$t^TR~B3^?S`x8`zN2 zfnzYLb(XXIRhF2+(o0}rVF9=p@0t@yi*vD8YFnJY!{`=vVB(Nn_*Zi3+Bq1b?k%e&LncT#{EXVccUHseik zL$J5^;j+aEVFp_JMt``;*_vM~KftWOBHj)cODB&^+L}8ZzfEVNBhaHI8(IgT z8+zA-tdhP5q~LEhgnV-nctDYniB7S5d8&kwaXMEqh7Jj-dcjmO8MVU{pUxE+7|7*z zhRHnD$=Z)c0vf&p0x=-V01(kSWr8)oJ#O3oS&9h{wu~GdMh!VT{^NHiFeq7q;u*-5 z05t3hfqHyUHHh-0?nt3tdV9iFGt_M@) z*S7b~4?W%-T?_y27Rr9aio4hv?pJzm zR838h4FKiaJx-)Ruw?m626_~}EV5d3{{F5Kemm8y{g#1Ho>_VY%=^C%wOo14pbAu5VGZj^!k-J`uu*1dW19Cc0Bt~kT4A7mWLe~ zCL@`5;8BB+5Ox=v?Mdw2H9LdVaPw>3dr)&*QXw0&{15LQ0!Z&3-|%P97YcbbNU8zB_ft%k4a3lkl@bX&qVDQGA0WaCrem$ zJ^g(i$dzG%ICza%{bA_u#%&Ekb9m;{gGZE=hevsJ>1vW^$tjk_($IC4Df}AsV-iDjmZ9TM81{PBH5OkGExWZ7PRiIJs0%7O2hGORobp;(g7s*2?xTVr$3AMR% zQYs9h?*bqN&fD8ph1hAxPa4v{DdveDq84Bn|Mgp8Py{*y&LnOT;c?V-P@z_Yz+ln< zajd>+zxW_d9zv3q2@dL~2uOpWNi+!Gj@1Sx>XR^4S~&byq$sIyuRS!!Z+fSlA&0{+ z_2Y=`d_KDqnE@WJJbM!rpMC_IkULw)v%bxiN=-_!l}W>*+c6zcGQ7hcJy3Kr`ez3y}HGjtH{GfELOsyOTXwVT+u3Bn3mNH7nX;)_O z@^D2!O-qXaIiry1PqewY$>Md1=;Z2J#G9;CqsPM!K8JeuDMoZUmpntzkC;)Ts%$Pf zCnvVC@uQZO)=2$wi=*lFejOqAIkWG1FP?R@Mh39!)tf^hhd0!*`v!K|;g~z%mA|6{ zf4%Zsm+*KRvpI>Kt%e4^;L`-+?(S~A-AXHRaVae%Z-Mzx$*AN0{GEl|&i3JQ$NXV5 zxwMCOzD7S(qguz>{HlHZRv}Li65V02d>`0wHn+-iDx5t00W~#b>!+u2OHC(DjIHRP zZ(irOuW$n1ZVPE22p|Da5)9_%b+ZBuUkya!ezZUx1%e3?=yH%WxCGLCj$ja((SKk;8|H zNg){W?Mz4Qn*no+x3?#7hEO3iKA!8l`%%T!#4pE>Ulr+zxpiB5+TEWvY)s%V{_qvP z2hb*aB*}Rf=!EWpn3G3$M_!Pk+7dvSEcb&{c;wfffBXSR(G&(HUvWo2cH zLi#|z>&<0%;6^Hq2BT81sSSd<-@MEFu?o%yuJ7LPeQu8>z8MG{z&nO(8rsuH%VkzY z8PKM%nhqH+HI{>~Cb?2fP9C1lT1*ydR?n|=9czW6j6{$^NA32eR<#-|n7_L@7rnL> zI&Te?>9)jS95C=ki_**J)28k3TdhF04;2+vtM3D5r0&lWc^c>Mt&M4gU$`85Pgi}A zK;6DirTgZh+8v9!NqP`|s)-i{W_(WwGA=9loYL*|xa2Cv5v-R6dV|qB+lnVxAEvl7 zzBz2VKNnMs6j?(_Oia}J?go#~lpz`2Z>u9ZIx^7{wKKjAlhQtw7qFIpOV|6;mG|-H z=lk{*mlCl4VaTT4Dvp@JDJJ5T4%W3R%_Bd?pBEwqBE^}huHj>C1Iw` z;pgKZOGr*kMaR@V(jnsm2ItEFWXt)&m4?RCzbodgd7s!XH^cII98-!ugwbXPuepBB zrwr+<=byo(c*UH`<_Q*hZDl;m$<8iD{L$_S`c_&VuPgl$5X* zJNJ|#>9Rx_-%HcWw9C=+C;onCJyXcTX}1{h@`P!$HH7}F<|09%JddIvBsA1`bASQw zHb$&efh?7g*OC@ic6_Y1p&>apF)vRjv|X^asc9~8yse-mOSBhqw0)+hb4zF=Z?M}3%Ggz}_D3pJ z@BELyHHf>76^Y($j3gHI&CSW{wYltoj!KG)BQn`7krk&g;k`bnX&NrYqMz=eXB*h~rdZ*`k}LCyBdHG{JWOm{yAck+T<)Gsflg(#>x zR>hT+ru^1;SK`ac=tbb@Dd6GYl!V%&ju!f_qEN_Dhirb9OnOhF0kZi#4dNu6&dtT* zZ^l~VpSzT#nC^McM5yBT=O@LE|Gbg*cd(Us8;*taB?r`J0Je)H8QYL)6GsL>CY}YO zA;=Rc$e}I>eV(gaK`uz%XPCGKhzkmvcYk1a8VIE66B9ilA&?gv2dBc405`kc$Ft6K zSmC6h!7>0~zwCiU0Mz@DM$`_eMDc9r@1w{C3~)8Sg%RRyN$;PWyrUEFvR4Va#4A+H z^Ea6(9MqW|(a+>3WVMV-kBE;?AAG<@NuE0X?fQO0QbJ&)`jdewo4(y*Yvc%jcuYpw z<6VFl*lUtY3QNv~L|PCCv^0L=!<8xDQ*zN0MYpp~w+z`5=GNsoY>g@ZeXuCOlWItj z{i%86mzPEYi7JMds93*Msa2NTkU|Da9FD)c2yUFm2kPSJxBF33nM3CASb64-kpwzH z!9bkCpJs7^Vl}k##N+z!*HWp^f;=q!3yODCh@#F3L&L&0JMY#?eT4&J$oM|ZH`Le9 zE=Q^iC5yFdH(03l3821{L`&zP$H=ovgqC+YUT(qkxqJN#iM9z{b&c;z3iu^BcOpDg zfP(~L;TXO7BCtC^Jg?8|WPDja*m?!Mujzj~_){syO&VvgTLSg;^ona9Z^+DZ_vfpZ zQxewRU+iM-rD`6IH}gynM&7pkAs3gv;Ifvp>#=tw9LeD3#s_SheBmmv)z8iIlj#_yeCKB zvAP23RtzzR%I=5OJW!I7Rb~lUy3$h6ns7Ua%le7al7NYpHtiB_&brcv`@4sGy6zu4 zl2DlxwA=JH1luE>{lysoyQRW{?5BDrimJTPlq09jtkIAwYHMpEFyRZJ6)zzrOQFqN1yfWvHC{6nD&IyyGQ{?f)>X=3Wu9Q<>l7mEEqSF^v1W7gKIr_j;+^ND~KT<_If3Dt2Ykx#V z-?SZqINT)P^F#5C2;T!VzhM_hQ1j;5+BqE8?Rid8MpKX$AZg3mafnCWe!OvdScRbz zG4vjVuGVdtSHMWy85OVN&*HG96-ZmTdC2PSZ*`?pscC)AiKz?jjIY%EHs-HcZS!7p z$9AD+eA~8CgU3(x(1jvX>-0~2Veth!&xQU7P?zszfF>Emhq12CdA193%Rz4wlj|iJ zj{5^ehu{xRS6j+PI-z)0rq>OhoUSwbC74Ne9r5Qhq{c}Hi{ zz6#~)r@w}w=9d0&(8sIb^+kJ<|cXJJEdI{EqVTi7?r2FL5hqkjgCqJ z=5`YySmqR`1)wbGs_RGyOXRCz(>seQSILjbecDg{5+UsuV)w|fRuD)O%8h~F>{S1V z$oM6*QhIR{x?)}fn;rls6RRXMsH0vU^*Ks7^ONxV6gC0=3TH-`lF-jG^d%ey6-|sV z=ETscN@LgOWkcmi8Tc@a1sU_;^7#s+6l*v&QHG!WMZ~4lMmk7kAtpLoUv(;}l}fOc xkiW`d#@l2^eYU2`$BD9zO}DB3zYcodpte@rR@{C*lm5M=mzGcvuMss0`hU~?b1wh@ literal 0 HcmV?d00001 diff --git a/versioned_docs/version-3.2.0/migration/DatePicker.md b/versioned_docs/version-3.2.0/migration/DatePicker.md new file mode 100644 index 000000000..9d2dcf583 --- /dev/null +++ b/versioned_docs/version-3.2.0/migration/DatePicker.md @@ -0,0 +1,6 @@ +--- +id: date-picker +title: DatePicker +--- + +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.2.0/migration/DeckSwiper.md b/versioned_docs/version-3.2.0/migration/DeckSwiper.md new file mode 100644 index 000000000..9fd590f78 --- /dev/null +++ b/versioned_docs/version-3.2.0/migration/DeckSwiper.md @@ -0,0 +1,8 @@ +--- +id: deck-swiper +title: DeckSwiper +--- + +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.2.0/migration/Drawer.md b/versioned_docs/version-3.2.0/migration/Drawer.md new file mode 100644 index 000000000..1c4f74752 --- /dev/null +++ b/versioned_docs/version-3.2.0/migration/Drawer.md @@ -0,0 +1,6 @@ +--- +id: drawer +title: Drawer +--- + +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.2.0/migration/FABs.md b/versioned_docs/version-3.2.0/migration/FABs.md new file mode 100644 index 000000000..7c7e20906 --- /dev/null +++ b/versioned_docs/version-3.2.0/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.2.0/migration/FooterTab.md b/versioned_docs/version-3.2.0/migration/FooterTab.md new file mode 100644 index 000000000..6262a397a --- /dev/null +++ b/versioned_docs/version-3.2.0/migration/FooterTab.md @@ -0,0 +1,6 @@ +--- +id: footer-tab +title: FooterTab +--- + +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.2.0/migration/Form.md b/versioned_docs/version-3.2.0/migration/Form.md new file mode 100644 index 000000000..c7fe61675 --- /dev/null +++ b/versioned_docs/version-3.2.0/migration/Form.md @@ -0,0 +1,72 @@ +--- +id: form +title: Form +--- + +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.2.0/migration/Header.md b/versioned_docs/version-3.2.0/migration/Header.md new file mode 100644 index 000000000..9ec9f0288 --- /dev/null +++ b/versioned_docs/version-3.2.0/migration/Header.md @@ -0,0 +1,6 @@ +--- +id: header +title: Header +--- + +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.2.0/migration/Icon.md b/versioned_docs/version-3.2.0/migration/Icon.md new file mode 100644 index 000000000..cdaba70a0 --- /dev/null +++ b/versioned_docs/version-3.2.0/migration/Icon.md @@ -0,0 +1,80 @@ +--- +id: icon +title: Icon +--- + +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.2.0/migration/Layout.md b/versioned_docs/version-3.2.0/migration/Layout.md new file mode 100644 index 000000000..40ecc91a0 --- /dev/null +++ b/versioned_docs/version-3.2.0/migration/Layout.md @@ -0,0 +1,77 @@ +--- +id: layout +title: Layout +--- + +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.2.0/migration/List.md b/versioned_docs/version-3.2.0/migration/List.md new file mode 100644 index 000000000..e69de29bb diff --git a/versioned_docs/version-3.2.0/migration/Picker.md b/versioned_docs/version-3.2.0/migration/Picker.md new file mode 100644 index 000000000..87dbb6037 --- /dev/null +++ b/versioned_docs/version-3.2.0/migration/Picker.md @@ -0,0 +1,91 @@ +--- +id: picker +title: Picker +--- + +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.2.0/migration/Radio Button.md b/versioned_docs/version-3.2.0/migration/Radio Button.md new file mode 100644 index 000000000..a2ccedd08 --- /dev/null +++ b/versioned_docs/version-3.2.0/migration/Radio Button.md @@ -0,0 +1,95 @@ +--- +id: radio-button +title: Radio Button +--- + +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.2.0/migration/Searchbar.md b/versioned_docs/version-3.2.0/migration/Searchbar.md new file mode 100644 index 000000000..3f02a608a --- /dev/null +++ b/versioned_docs/version-3.2.0/migration/Searchbar.md @@ -0,0 +1,6 @@ +--- +id: search-bar +title: Search Bar +--- + +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.2.0/migration/Segment.md b/versioned_docs/version-3.2.0/migration/Segment.md new file mode 100644 index 000000000..1f80beece --- /dev/null +++ b/versioned_docs/version-3.2.0/migration/Segment.md @@ -0,0 +1,7 @@ +--- +id: segment +title: Segment +--- + +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.2.0/migration/Spinner.md b/versioned_docs/version-3.2.0/migration/Spinner.md new file mode 100644 index 000000000..a4f8f160d --- /dev/null +++ b/versioned_docs/version-3.2.0/migration/Spinner.md @@ -0,0 +1,47 @@ +--- +id: spinner +title: Spinner +--- + +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.2.0/migration/SwipeList.md b/versioned_docs/version-3.2.0/migration/SwipeList.md new file mode 100644 index 000000000..7f7b0f37b --- /dev/null +++ b/versioned_docs/version-3.2.0/migration/SwipeList.md @@ -0,0 +1,6 @@ +--- +id: swipe-list +title: SwipeList +--- + +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.2.0/migration/Tabs.md b/versioned_docs/version-3.2.0/migration/Tabs.md new file mode 100644 index 000000000..bcbe293cd --- /dev/null +++ b/versioned_docs/version-3.2.0/migration/Tabs.md @@ -0,0 +1,67 @@ +--- +id: tabs +title: Tabs +--- + +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.2.0/migration/Thumbnail.md b/versioned_docs/version-3.2.0/migration/Thumbnail.md new file mode 100644 index 000000000..2f8e46907 --- /dev/null +++ b/versioned_docs/version-3.2.0/migration/Thumbnail.md @@ -0,0 +1,73 @@ +--- +id: thumbnail +title: Thumbnail +--- + +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.2.0/migration/Toast.md b/versioned_docs/version-3.2.0/migration/Toast.md new file mode 100644 index 000000000..3c1aec5ac --- /dev/null +++ b/versioned_docs/version-3.2.0/migration/Toast.md @@ -0,0 +1,84 @@ +--- +id: toast +title: Toast +--- + +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.2.0/migration/Typography.md b/versioned_docs/version-3.2.0/migration/Typography.md new file mode 100644 index 000000000..3f5f0e662 --- /dev/null +++ b/versioned_docs/version-3.2.0/migration/Typography.md @@ -0,0 +1,39 @@ +--- +id: typography +title: Typography +--- + +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.2.0/migration/v3xtov32.md b/versioned_docs/version-3.2.0/migration/v3xtov32.md index a8a5eaff6..d15108d16 100644 --- a/versioned_docs/version-3.2.0/migration/v3xtov32.md +++ b/versioned_docs/version-3.2.0/migration/v3xtov32.md @@ -25,7 +25,6 @@ const yourCustomTheme = { ``` - ## Handling breaking changes Below is a rough account of the breaking API changes as well as the minimal change to migrate @@ -36,6 +35,10 @@ Below is a rough account of the breaking API changes as well as the minimal chan * Removed `Alert.Title`. Use `Text` component instead. * Removed `Alert.Description`. Use `Text` component instead. +### Divider: + +* Removed `size`. Use `thickness` prop instead. + ## Note: diff --git a/versioned_docs/version-3.2.0/modal.md b/versioned_docs/version-3.2.0/modal.md new file mode 100644 index 000000000..cd8f50169 --- /dev/null +++ b/versioned_docs/version-3.2.0/modal.md @@ -0,0 +1,104 @@ +--- +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 + +``` + +### Multiple Modals + +```ComponentSnackPlayer path=composites,Modal,MultipleModal.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 + +``` + +### Custom Backdrop Modal + +```ComponentSnackPlayer path=composites,Modal,CustomBackdrop.tsx + +``` + +
+ +:::tip Development 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.2.0/nativebase-factory.md b/versioned_docs/version-3.2.0/nativebase-factory.md index 56c3a0ed7..242f0bdae 100644 --- a/versioned_docs/version-3.2.0/nativebase-factory.md +++ b/versioned_docs/version-3.2.0/nativebase-factory.md @@ -27,7 +27,7 @@ function FactoryViewExample () { export default function () { return ( -
+
@@ -56,7 +56,7 @@ function FactoryViewExample () { export default function () { return ( -
+
@@ -87,7 +87,7 @@ function FactoryViewModeExample () { export default function () { return ( -
+
@@ -99,27 +99,35 @@ export default function () { ```SnackPlayer name=NativeBase%20Factory%20Using%20Ref import React from 'react'; -import { Factory, Button, Stack, NativeBaseProvider,Center } from 'native-base'; +import { + Factory, + Button, + Stack, + NativeBaseProvider, + Center, +} from 'native-base'; import { TextInput } from 'react-native'; -function FactoryViewRefExample () { +function FactoryViewRefExample() { const NBInput = Factory(TextInput); const inputRef = React.useRef(null); return ( + p="2" + borderWidth="1" + borderColor="muted.200" + borderRadius="md" + placeholderTextColor="muted.400" + /> @@ -130,12 +138,13 @@ function FactoryViewRefExample () { export default function () { return ( -
+
); } + ``` ## Params diff --git a/versioned_docs/version-3.2.0/overlay.md b/versioned_docs/version-3.2.0/overlay.md index f18adee91..4dbcbad8c 100644 --- a/versioned_docs/version-3.2.0/overlay.md +++ b/versioned_docs/version-3.2.0/overlay.md @@ -35,7 +35,7 @@ function OverlayComponent () { export default function () { return ( -
+
@@ -79,7 +79,7 @@ function OverlayComponent () { export default function () { return ( -
+
diff --git a/versioned_docs/version-3.2.0/popOver.md b/versioned_docs/version-3.2.0/popOver.md index 40a7f4d36..a32829822 100644 --- a/versioned_docs/version-3.2.0/popOver.md +++ b/versioned_docs/version-3.2.0/popOver.md @@ -41,7 +41,7 @@ import { Popover } from 'native-base'; ``` -:::tip Tip +:::tip Development Tip You can pass custom backgroundColor using `bg` or `backgroundColor`, `borderColor` and `borderWidth` to Popover.Content. ::: diff --git a/versioned_docs/version-3.2.0/presence-transition.md b/versioned_docs/version-3.2.0/presence-transition.md new file mode 100644 index 000000000..2e725036a --- /dev/null +++ b/versioned_docs/version-3.2.0/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.2.0/pressable.md b/versioned_docs/version-3.2.0/pressable.md new file mode 100644 index 000000000..4f37c810d --- /dev/null +++ b/versioned_docs/version-3.2.0/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.2.0/progress.md b/versioned_docs/version-3.2.0/progress.md new file mode 100644 index 000000000..9fe5ee80c --- /dev/null +++ b/versioned_docs/version-3.2.0/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.2.0/radio.md b/versioned_docs/version-3.2.0/radio.md new file mode 100644 index 000000000..63485030b --- /dev/null +++ b/versioned_docs/version-3.2.0/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.2.0/responsive.md b/versioned_docs/version-3.2.0/responsive.md index 4632e852a..aa66b499a 100644 --- a/versioned_docs/version-3.2.0/responsive.md +++ b/versioned_docs/version-3.2.0/responsive.md @@ -40,7 +40,7 @@ function BreakpointExample () { export default function () { return ( -
+
@@ -69,7 +69,7 @@ function BreakpointExample () { export default function () { return ( -
+
@@ -83,53 +83,91 @@ Here's a simple example of a component that uses a stacked layout on small scree ```SnackPlayer name=Responsive%20Demo import React from 'react'; -import { NativeBaseProvider, Center, Box, Text, Image, Heading, Stack } from 'native-base'; -function BreakpointExample () { +import { + useToken, + NativeBaseProvider, + Center, + Text, + Box, + HStack, + Image, + Stack, + Heading, +} from 'native-base'; + +function Example() { return ( - - + width={['72', '72', '4/6']} + shadow={1} + _light={{ backgroundColor: 'coolGray.50' }} + _dark={{ backgroundColor: 'gray.700' }}> + Shoes +
+ PHOTOS +
- - - Just In - - - Jordan MA2 - - Older Kids' Shoe - - - 2 colors + + + + The Garden City + + + The Silicon Valley of India. - - $ 150 + + Bengaluru (also called Bangalore) is the center of India's high-tech + industry. The city is also known for its parks and nightlife. + + + + 6 mins ago + + + - + ); -}; +} // Example template which wraps component with NativeBaseProvider export default function () { return ( -
- +
+
); } + + ``` diff --git a/versioned_docs/version-3.2.0/safe-area-view-props.md b/versioned_docs/version-3.2.0/safe-area-view-props.md new file mode 100644 index 000000000..a1b0deda8 --- /dev/null +++ b/versioned_docs/version-3.2.0/safe-area-view-props.md @@ -0,0 +1,99 @@ +--- +id: safe-area-view-props +title: SafeAreaView Props +--- + +To make your components respect the [SafeAreaView](https://reactnative.dev/docs/safeareaview) of the device, we have provided some props that you can use with Box component. They apply a safe padding to your component in the parts decided by the passed props. These props accept either a boolean or a number. If boolean is passed then component takes flexible inset and adjusts its children according to the the device. If a number is passed then it provides a fixed inset in the chosen direction. + +- `safeArea`: Apply safe padding to all edges. +- `safeAreaX`: Apply safe padding to x direction. +- `safeAreaY`: Apply safe padding to y direction. +- `safeAreaTop`: Apply safe padding to top. +- `safeAreaBottom`: Apply safe padding to bottom. +- `safeAreaLeft`: Apply safe padding to left. +- `safeAreaRight`: Apply safe padding to right. + +Internally, NativeBase uses [useSafeAreaInsets](https://docs.expo.io/versions/latest/sdk/safe-area-context/#hooks) hook of [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context). + +:::info +SafeAreaView props can only be applied on [Box](box.md) as of now. To make you App SafeArea safe, just wrap your app with a Box and pass safeArea props to it. +::: + +## Examples + +### Flexible SafeArea + +```SnackPlayer name=SafeAreaView%20Boolean +import React from 'react'; +import { NativeBaseProvider, Box, Text } from 'native-base'; +function MyComponent() { + return ( + // This would look different on devices with different insets + + NativeBase + + ); +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + + + + ); +} +``` + +### Fixed SafeArea + +```SnackPlayer name=SafeAreaView%20Boolean +import React from 'react'; +import { NativeBaseProvider, Box, Text } from 'native-base'; +function MyComponent() { + return ( + // This would look same on all devices + + NativeBase + + ); +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + + + + ); +} + +``` + +### Using Hook + +If you want to add the SafeAreaView props to other components, you can use the hook. Since, `SafeAreaView` props add relevant padding to the components, you will need to pass the padding manually that you are applying to the component for it to return the SafeArea adjusted padding. + +```SnackPlayer name=SafeAreaView%20Boolean +import React from 'react'; +import { NativeBaseProvider, Box, Text, useSafeArea } from 'native-base'; +function MyComponent() { + const safeAreaProps = useSafeArea({ safeAreaTop: true, pt: 2 }); + return ( + // This would look same on all devices + + NativeBase + + ); +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + + + + ); +} + +``` diff --git a/versioned_docs/version-3.2.0/scrollview.md b/versioned_docs/version-3.2.0/scrollview.md new file mode 100644 index 000000000..1064515aa --- /dev/null +++ b/versioned_docs/version-3.2.0/scrollview.md @@ -0,0 +1,18 @@ +--- +id: scrollview +title: Scrollview +--- + +Provides a scrolling container that can host multiple components and views. + +## Example + +```ComponentSnackPlayer path=basic,ScrollView,Basic.tsx + +``` + +## Props + +```ComponentPropTable path=basic,ScrollView,ScrollView.tsx showStylingProps=true + +``` diff --git a/versioned_docs/version-3.2.0/sectionList.md b/versioned_docs/version-3.2.0/sectionList.md new file mode 100644 index 000000000..329206a1d --- /dev/null +++ b/versioned_docs/version-3.2.0/sectionList.md @@ -0,0 +1,18 @@ +--- +id: section-list +title: SectionList +--- + +A performant interface for rendering sectioned lists. + +## Example + +```ComponentSnackPlayer path=basic,SectionList,Basic.tsx + +``` + +## Props + +```ComponentPropTable path=basic,SectionList,SectionList.tsx showStylingProps=true + +``` diff --git a/versioned_docs/version-3.2.0/select.md b/versioned_docs/version-3.2.0/select.md new file mode 100644 index 000000000..cfecd7ead --- /dev/null +++ b/versioned_docs/version-3.2.0/select.md @@ -0,0 +1,87 @@ +--- +id: select +title: Select +--- + +import { ComponentTheme } from '../../src/components'; + +import { AndroidBadge } from "/src/components/index"; + +Select creates a dropdown list of items with the selected item in closed view. + +## Import + +```jsx +import { Select } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=primitives,Select,Basic.tsx + +``` + +### FormControlled + +```ComponentSnackPlayer path=primitives,Select,FormControlled.tsx + +``` + +### Select + +## Props + +```ComponentPropTable path=primitives,Select,Select.tsx + +``` + +### Select.Item + +## Props + +```ComponentPropTable path=primitives,Select,SelectItem.tsx + +``` + + + + + +## Styling + + + +## Accessibility + +- use `native` variant. Accessibility improvements on styled variant is in-progress. diff --git a/versioned_docs/version-3.2.0/setup-provider.md b/versioned_docs/version-3.2.0/setup-provider.md index 6f548dfcd..91ab8c8b7 100644 --- a/versioned_docs/version-3.2.0/setup-provider.md +++ b/versioned_docs/version-3.2.0/setup-provider.md @@ -111,7 +111,7 @@ const config = { export default () => { return ( -
+
diff --git a/versioned_docs/version-3.2.0/slide.md b/versioned_docs/version-3.2.0/slide.md new file mode 100644 index 000000000..fb8279ee1 --- /dev/null +++ b/versioned_docs/version-3.2.0/slide.md @@ -0,0 +1,38 @@ +--- +id: slide +title: Slide +--- + +Slide component provides a declarative API to add sliding transitions. + +## Import + +## Examples + +### Slide + +```ComponentSnackPlayer path=composites,Transitions,Slide.tsx + +``` + +### Slide wrapped inside parent + +```ComponentSnackPlayer path=composites,Transitions,SlideWrapped.tsx + +``` + +### Slide Composition + +```ComponentSnackPlayer path=composites,Transitions,SlideComposition.tsx + +``` + +## Props + +### Slide + +| Name | Type | Description | Default | +| --------- | -------------------------------- | ------------------------------------------------------ | -------- | +| in | boolean | Show the component; triggers the enter or exit states. | - | +| duration | number | Duration of animation in mili second. | 500 | +| placement | `top` ,`bottom`, `left`, `right` | The direction to slide drawer from. | `bottom` | diff --git a/versioned_docs/version-3.2.0/slider.md b/versioned_docs/version-3.2.0/slider.md index e82c18e92..8c2d7365d 100644 --- a/versioned_docs/version-3.2.0/slider.md +++ b/versioned_docs/version-3.2.0/slider.md @@ -79,12 +79,12 @@ Adheres to the [Slider WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria- ### Keyboard Interactions -| Name | Description | -| ---------- | ----------------------------------------------------------------- | -| ArrowRight | Increments/decrements by the step value depending on orientation. | -| ArrowLeft | Increments/decrements by the step value depending on orientation. | -| ArrowUp | Increases the value by the step amount. | -| ArrowDown | Decreases the value by the step amount. | +| Name | Description | +| ------------------|-------------| +| ArrowRight | Increments/decrements by the step value depending on orientation.| +| ArrowLeft | Increments/decrements by the step value depending on orientation. +| ArrowUp | Increases the value by the step amount. +| ArrowDown | Decreases the value by the step amount. diff --git a/versioned_docs/version-3.2.0/spinner.md b/versioned_docs/version-3.2.0/spinner.md new file mode 100644 index 000000000..359275a20 --- /dev/null +++ b/versioned_docs/version-3.2.0/spinner.md @@ -0,0 +1,32 @@ +--- +id: spinner +title: Spinner +--- + +## Examples + +### Basic + +```ComponentSnackPlayer path=primitives,Spinner,usage.tsx + +``` + +### Colors + +```ComponentSnackPlayer path=primitives,Spinner,color.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=primitives,Spinner,size.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Spinner,index.tsx + +``` + +Spinner composes [`ActivityIndicator`](https://reactnative.dev/docs/activityindicator) so all `ActivityIndicator` Props can be passed to Spinner. diff --git a/versioned_docs/version-3.2.0/stack.md b/versioned_docs/version-3.2.0/stack.md new file mode 100644 index 000000000..12ac4ecae --- /dev/null +++ b/versioned_docs/version-3.2.0/stack.md @@ -0,0 +1,18 @@ +--- +id: stack +title: Stack +--- + +`Stack` aligns items vertically or horizontally based on the `direction` prop. + +## Example + +```ComponentSnackPlayer path=primitives,Stack,basic.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Stack,Stack.tsx + +``` diff --git a/versioned_docs/version-3.2.0/stagger.md b/versioned_docs/version-3.2.0/stagger.md new file mode 100644 index 000000000..ac8bce5c4 --- /dev/null +++ b/versioned_docs/version-3.2.0/stagger.md @@ -0,0 +1,54 @@ +--- +id: stagger +title: Stagger +--- + +Stagger component provides a declarative API to add Staggered Transitions. + +## Example + +```ComponentSnackPlayer path=composites,Transitions,Stagger.tsx + +``` + +## Props + +```ComponentPropTable path=composites,Transitions,Stagger.tsx showStylingProps=true + +``` + +## IStaggerStyleProps + +```js +interface IStaggerStyleProps extends ISupportedTransition { + transition?: { + stagger?: { + /** + * Delay to add to each child + */ + offset: number, + /** + * When true, delay is added from the last child + */ + reverse?: boolean, + }, + + 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.2.0/statusBar.md b/versioned_docs/version-3.2.0/statusBar.md new file mode 100644 index 000000000..c8769bda1 --- /dev/null +++ b/versioned_docs/version-3.2.0/statusBar.md @@ -0,0 +1,18 @@ +--- +id: status-bar +title: StatusBar +--- + +Component to control the app status bar. + +## Example + +```ComponentSnackPlayer path=basic,StatusBar,Basic.tsx + +``` + +## Props + +```ComponentPropTable path=basic,StatusBar,StatusBar.tsx showStylingProps=true + +``` diff --git a/versioned_docs/version-3.2.0/swipableList.md b/versioned_docs/version-3.2.0/swipableList.md new file mode 100644 index 000000000..e19b2bd22 --- /dev/null +++ b/versioned_docs/version-3.2.0/swipableList.md @@ -0,0 +1,6 @@ +--- +id: swipable-list +title: Swipable List +--- + +## Coming Soon diff --git a/versioned_docs/version-3.2.0/switch.md b/versioned_docs/version-3.2.0/switch.md new file mode 100644 index 000000000..3d1f07574 --- /dev/null +++ b/versioned_docs/version-3.2.0/switch.md @@ -0,0 +1,50 @@ +--- +id: switch +title: Switch +--- + +The `Switch` component is an alternative to the Checkbox component. You can switch between enabled or disabled states. + +## Examples + +### Basic + +```ComponentSnackPlayer path=primitives,Switch,Basic.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=primitives,Switch,Sizes.tsx + +``` + +### Track & Thumb Color + +```ComponentSnackPlayer path=primitives,Switch,SwitchBgColor.tsx + +``` + +### Color Schemes + +```ComponentSnackPlayer path=primitives,Switch,ColorSchemes.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Switch,index.tsx showStylingProps=true + +``` + +## Accessibility + +- On mobile, uses native switch which is fully accessible. +- On web, it uses checkbox with a [role](https://www.w3.org/TR/wai-aria-1.2/#switch) set to `switch`. + + +### Keyboard Interactions + +| Name | Description | +| --------------------|-------------| +| Space | Toggles the component's state. | \ No newline at end of file diff --git a/versioned_docs/version-3.2.0/testing.md b/versioned_docs/version-3.2.0/testing.md new file mode 100644 index 000000000..cfd5b0139 --- /dev/null +++ b/versioned_docs/version-3.2.0/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/versioned_docs/version-3.2.0/text.md b/versioned_docs/version-3.2.0/text.md new file mode 100644 index 000000000..10d3cdfe5 --- /dev/null +++ b/versioned_docs/version-3.2.0/text.md @@ -0,0 +1,44 @@ +--- +id: text +title: Text +--- + +import { ComponentTheme } from '../../src/components'; + +`Text` is used to render text and paragraphs within an interface. + +## Examples + +### ChangingFontSize + +```ComponentSnackPlayer path=primitives,Text,ChangingFontSize.tsx + +``` + +### Truncated + +```ComponentSnackPlayer path=primitives,Text,Truncated.tsx + +``` + +### Nested + +```ComponentSnackPlayer path=primitives,Text,Nested.tsx + +``` + +### Overridden + +```ComponentSnackPlayer path=primitives,Text,Overriden.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Text,index.tsx showStylingProps=true + +``` + +## Styling + + diff --git a/versioned_docs/version-3.2.0/textArea.md b/versioned_docs/version-3.2.0/textArea.md new file mode 100644 index 000000000..31f18b444 --- /dev/null +++ b/versioned_docs/version-3.2.0/textArea.md @@ -0,0 +1,38 @@ +--- +id: textarea +title: TextArea +--- + +import { ComponentTheme } from '../../src/components'; + +The `Textarea` component allows you to easily create multi-line text inputs. + +## Examples + +### Usage + +```ComponentSnackPlayer path=primitives,TextArea,basic.tsx + +``` + +### Invalid and Disabled TextArea + +```ComponentSnackPlayer path=primitives,TextArea,invalid.tsx + +``` + +### Value Controlled TextArea + +```ComponentSnackPlayer path=primitives,TextArea,value.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,TextArea,index.tsx + +``` + +## Styling + + diff --git a/versioned_docs/version-3.2.0/textField.md b/versioned_docs/version-3.2.0/textField.md index c5ef290be..0c98d5b26 100644 --- a/versioned_docs/version-3.2.0/textField.md +++ b/versioned_docs/version-3.2.0/textField.md @@ -30,7 +30,7 @@ function TextFieldComponent () { export default function () { return ( -
+
@@ -63,7 +63,7 @@ function TextFieldComponent () { export default function () { return ( -
+
@@ -110,7 +110,7 @@ function TextFieldComponent () { export default function () { return ( -
+
diff --git a/versioned_docs/version-3.2.0/theme.md b/versioned_docs/version-3.2.0/theme.md index 0a7501159..db050174c 100644 --- a/versioned_docs/version-3.2.0/theme.md +++ b/versioned_docs/version-3.2.0/theme.md @@ -12,7 +12,7 @@ import React from 'react'; import { NativeBaseProvider, useTheme, - SimpleGrid, + FlatList, Center, Box, } from 'native-base'; @@ -20,11 +20,13 @@ import { function ColorPalete() { const { colors } = useTheme(); return ( - - {Object.keys(colors['emerald']).map((colorKey) => ( - - ))} - + + } + /> + ); } @@ -55,8 +57,9 @@ function Tokens() { 'lightText', ]); return ( -
- Contrast threshold is: +
+ Contrast threshold is:{' '} + {contrastThreshold}
@@ -67,13 +70,14 @@ function Tokens() { export default function () { return ( -
+
); } + ``` ## useContrastText @@ -83,10 +87,16 @@ If you are defining the background yourself and pass a contrasting color to the ```SnackPlayer name=useContrastText import React from 'react'; -import { Button, Stack, useContrastText, NativeBaseProvider, Center } from 'native-base'; -function UseContrastingTextHook () { - const bgDark = 'emerald.700'; - const bgLight = 'emerald.200'; +import { + Button, + Stack, + useContrastText, + NativeBaseProvider, + Center, +} from 'native-base'; +function UseContrastingTextHook() { + const bgDark = 'primary.700'; + const bgLight = 'primary.200'; const colorContrastDark = useContrastText(bgDark); const colorContrastLight = useContrastText(bgLight); @@ -106,12 +116,13 @@ function UseContrastingTextHook () { export default function () { return ( -
+
); } + ``` ## useColorMode @@ -122,7 +133,6 @@ If you want to define some conditionals based on current color mode or change th import React from 'react'; import { NativeBaseProvider, - VStack, useColorMode, Text, Button, @@ -132,23 +142,25 @@ import { function UseColorMode() { const { colorMode, toggleColorMode } = useColorMode(); return ( -
- - The active color mode is {colorMode} +
+ + The active color mode is{' '} + + {colorMode} +
); } -// Example template which wraps component with NativeBaseProvider -export default function () { +export default Example = () => { return ( ); -} +}; ``` @@ -168,24 +180,26 @@ import { } from 'native-base'; function UseColorMode() { - const { colorMode, toggleColorMode } = useColorMode(); + const { toggleColorMode } = useColorMode(); return ( -
- - The active color mode is {useColorModeValue('Light', 'Dark')} +
+ + The active color mode is{' '} + + {useColorModeValue('Light', 'Dark')} +
); } -// Example template which wraps component with NativeBaseProvider -export default function () { +export default Example = () => { return ( ); -} +}; ``` diff --git a/versioned_docs/version-3.2.0/toast.md b/versioned_docs/version-3.2.0/toast.md new file mode 100644 index 000000000..af50b7379 --- /dev/null +++ b/versioned_docs/version-3.2.0/toast.md @@ -0,0 +1,88 @@ +--- +id: toast +title: Toast +--- + +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. + +Toasts can be configured to appear at either the top or the bottom of an application window, and it is possible to have more than one toast onscreen at a time. + +## Import + +```jsx +import { useToast } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=composites,Toast,Basic.tsx + +``` + +### Position + +```ComponentSnackPlayer path=composites,Toast,ToastPositions.tsx + +``` + +### Custom component + +Display a custom component instead of the default Toast UI. + +```ComponentSnackPlayer path=composites,Toast,CustomComponent.tsx + +``` + +### Closing Toasts + +Toasts can be closed imperatively, individually (via the close instance method) or all together (via the closeAll instance method). + +```ComponentSnackPlayer path=composites,Toast,CloseToast.tsx + +``` + +### Status + +You can use status to change the color of your toasts. +`Toast` uses the same variants as the [Alert](alert.md) component. + +```ComponentSnackPlayer path=composites,Toast,ToastStatus.tsx + +``` + +### Preventing Duplicate Toast + +In some cases you might need to prevent duplicate of specific toasts. To achieve you need to pass an id and use the toast.isActive method to determine when to call toast.show(...). + +```ComponentSnackPlayer path=composites,Toast,PreventDuplicate.tsx + +``` + +### Standalone Toast + +You can use standalone toast where you don't have access to `useToast` hook. e.g. in a different file, out of a React component. + +```ComponentSnackPlayer path=composites,Toast,StandaloneToast.tsx + +``` + +## Props + +Below props can be passed while calling toast.show. + +```ComponentPropTable path=composites,Toast,ToastDummy.tsx + +``` + +## Accessibility + +- On Android and Web, Toast renders under a View with accessibilityLiveRegion which announces the content rendered inside it to screen reader devices. +- On iOS, accessibilityLiveRegion is not supported yet, so we use the [accessibilityAnnouncement](https://reactnative.dev/docs/accessibilityinfo#announceforaccessibility) to announce the content. + +## Styling + + diff --git a/versioned_docs/version-3.2.0/todo-list.md b/versioned_docs/version-3.2.0/todo-list.md index bbfeed2e9..d6b9632ff 100644 --- a/versioned_docs/version-3.2.0/todo-list.md +++ b/versioned_docs/version-3.2.0/todo-list.md @@ -6,7 +6,7 @@ title: Todo-List A simple To Do App made using NativeBase 3.0. ```SnackPlayer name=TodoList%20Examples -import React from "react"; +import React from 'react'; import { Input, Button, @@ -18,18 +18,20 @@ import { Heading, Icon, Center, - NativeBaseProvider -} from "native-base"; -import { FontAwesome5 } from '@expo/vector-icons'; + Box, + NativeBaseProvider, +} from 'native-base'; +import { FontAwesome5, Feather, Entypo } from '@expo/vector-icons'; export default function () { const instState = [ - { title: "code", isCompleted: true }, - { title: "sleep", isCompleted: false }, - { title: "repeat", isCompleted: false }, + { title: 'Code', isCompleted: true }, + { title: 'Meeting with team at 9', isCompleted: false }, + { title: 'Check Emails', isCompleted: false }, + { title: 'Write an article', isCompleted: false }, ]; const [list, setList] = React.useState(instState); - const [inputValue, setInputValue] = React.useState(""); + const [inputValue, setInputValue] = React.useState(''); const addItem = (title: string) => { setList([ ...list, @@ -56,58 +58,78 @@ export default function () { }; return ( -
- - Todo App - } - colorScheme="emerald" - ml="1" - onPress={() => { - addItem(inputValue); - setInputValue(""); - }} - - mr="1"/> - - } - onChangeText={(v) => setInputValue(v)} - value={inputValue} - placeholder="Add Item" - /> - - {list.map((item, itemI) => ( - - handleStatusChange(itemI)} - value={item.title} - > - - {item.title} - - - } - onPress={() => handleDelete(itemI)} - /> - - ))} - - -
- +
+ + Wednesday + + + setInputValue(v)} + value={inputValue} + placeholder="Add Task" + /> + + } + onPress={() => { + addItem(inputValue); + setInputValue(''); + }} + /> + + + {list.map((item, itemI) => ( + + handleStatusChange(itemI)} + value={item.title}> + + {item.title} + + + + } + onPress={() => handleDelete(itemI)} + /> + + ))} + + + +
+ ); } + ``` diff --git a/versioned_docs/version-3.2.0/tooltip.md b/versioned_docs/version-3.2.0/tooltip.md index 0b13d53ca..5723d66e1 100644 --- a/versioned_docs/version-3.2.0/tooltip.md +++ b/versioned_docs/version-3.2.0/tooltip.md @@ -35,7 +35,9 @@ Tooltip is a wrapper around [Box](box.md). So, it also accepts all the [Box](box ``` -:::tip Tip +
+ +:::tip Development Tip You can pass custom backgroundColor using `bg` or `backgroundColor`, `borderColor` and `borderWidth` to Tooltip. ::: @@ -52,6 +54,7 @@ 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 | diff --git a/versioned_docs/version-3.2.0/transition.md b/versioned_docs/version-3.2.0/transition.md index 6988f86b7..21c5ba47b 100644 --- a/versioned_docs/version-3.2.0/transition.md +++ b/versioned_docs/version-3.2.0/transition.md @@ -52,7 +52,7 @@ function FadeExample () { export default function () { return ( -
+
@@ -84,7 +84,7 @@ function ScaleFadeExample () { export default function () { return ( -
+
@@ -116,7 +116,7 @@ function SlideExample () { export default function () { return ( -
+
@@ -164,7 +164,7 @@ function SlideExample () { export default function () { return ( -
+
@@ -214,7 +214,7 @@ function SlideExample () { export default function () { return ( -
+
@@ -246,7 +246,7 @@ function SlideFadeExample () { export default function () { return ( -
+
diff --git a/versioned_docs/version-3.2.0/useAccessibleColors.md b/versioned_docs/version-3.2.0/useAccessibleColors.md index 28bb181a1..1fa0dfd75 100644 --- a/versioned_docs/version-3.2.0/useAccessibleColors.md +++ b/versioned_docs/version-3.2.0/useAccessibleColors.md @@ -17,25 +17,31 @@ import { useAccessibleColors } from 'native-base'; import React from 'react'; import { Button, useContrastText, useTheme, NativeBaseProvider, Center, useAccessibleColors } from 'native-base'; + +const ButtonTemplate = ({ shade }: any) => { + const colorContrast = useContrastText(`yellow.${shade}`); + return ( + + ); +}; + function UseContrastingTextHook () { let [, , toggleAccessibleColors] = useAccessibleColors(); const { colors } = useTheme(); return ( <> - {Object.keys(colors.teal).map((key) => { - const colorContrast = useContrastText(`teal.${key}`); - return ( - - ); + {Object.keys(colors.yellow).map((key, index) => { + if (index > 2 && index < 9) return ; })} - @@ -45,7 +51,7 @@ function UseContrastingTextHook () { export default function () { return ( -
+
diff --git a/versioned_docs/version-3.2.0/useBreakPointValue.md b/versioned_docs/version-3.2.0/useBreakPointValue.md index 525e7ce96..edb6501e9 100644 --- a/versioned_docs/version-3.2.0/useBreakPointValue.md +++ b/versioned_docs/version-3.2.0/useBreakPointValue.md @@ -17,28 +17,117 @@ The `useBreakpointValue` hook returns the value for the current breakpoint. ## Usage -```SnackPlayer name=useBreakpoint%20Usage +```SnackPlayer name=useBreakpointValue + import React from 'react'; -import { Box, useBreakpointValue, NativeBaseProvider, Center } from 'native-base'; -function UseBreakpointValueExample () { - const color = useBreakpointValue({ - base: 'red.200', - sm: 'blue.200', - md: 'blue.200', +import { + Factory, + Button, + Stack, + NativeBaseProvider, + Center, + ScrollView +} from 'native-base'; +import { TextInput } from 'react-native'; + +import { Icon, useBreakpointValue, Text, VStack, Heading } from 'native-base'; +import { FontAwesome, Foundation, Feather } from '@expo/vector-icons'; +import { View } from 'react-native'; + +export const UseBreakpointValueExample = () => { + const flexDir = useBreakpointValue({ + base: 'column', + lg: 'row', }); return ( - - This is a box - + + + Why us? + + + + + Secure Checkout + + + + + + Secure Checkout + + + + + + Fast Turn Around + + + + + ); }; + +// Example template which wraps component with NativeBaseProvider export default function () { return ( -
+
); } + ``` diff --git a/versioned_docs/version-3.2.0/useClipboard.md b/versioned_docs/version-3.2.0/useClipboard.md index bcbe6c6bd..fa916f05a 100644 --- a/versioned_docs/version-3.2.0/useClipboard.md +++ b/versioned_docs/version-3.2.0/useClipboard.md @@ -35,12 +35,12 @@ import { } from "native-base"; function UseClipboardExample() { - const [copyText, setCopyText] = React.useState("Copy Me"); - const [pasteText, setPasteText] = React.useState(""); - const { value, onCopy, hasCopied } = useClipboard(); + const [copyText, setCopyText] = React.useState('Hello'); + const [pasteText, setPasteText] = React.useState(''); + const { value, onCopy } = useClipboard(); return ( - - + + - - {hasCopied ? "Copied" : "Press here"} + setPasteText(v)} value={pasteText} /> @@ -65,7 +64,7 @@ function UseClipboardExample() { export default function () { return ( -
+
diff --git a/versioned_docs/version-3.2.0/useColorMode.md b/versioned_docs/version-3.2.0/useColorMode.md index 5aff666af..adb23b90d 100644 --- a/versioned_docs/version-3.2.0/useColorMode.md +++ b/versioned_docs/version-3.2.0/useColorMode.md @@ -27,7 +27,7 @@ import { function UseColorMode() { const { colorMode, toggleColorMode } = useColorMode(); return ( -
+
The active color mode is {colorMode} diff --git a/versioned_docs/version-3.2.0/useColorModeValue.md b/versioned_docs/version-3.2.0/useColorModeValue.md index 2ce63428c..65fad698b 100644 --- a/versioned_docs/version-3.2.0/useColorModeValue.md +++ b/versioned_docs/version-3.2.0/useColorModeValue.md @@ -27,7 +27,7 @@ import { function UseColorMode() { const { colorMode, toggleColorMode } = useColorMode(); return ( -
+
The active color mode is {useColorModeValue('Light', 'Dark')} diff --git a/versioned_docs/version-3.2.0/useContrastText.md b/versioned_docs/version-3.2.0/useContrastText.md index da3131fe7..4497c3b17 100644 --- a/versioned_docs/version-3.2.0/useContrastText.md +++ b/versioned_docs/version-3.2.0/useContrastText.md @@ -40,7 +40,7 @@ function UseContrastingTextHook () { export default function () { return ( -
+
@@ -56,25 +56,31 @@ By default, NativeBase provides contrasting color based on its theme. You can al import React from 'react'; import { Button, useContrastText, useTheme, NativeBaseProvider, Center, useAccessibleColors } from 'native-base'; + +const ButtonTemplate = ({ shade }: any) => { + const colorContrast = useContrastText(`yellow.${shade}`); + return ( + + ); +}; + function UseContrastingTextHook () { let [, , toggleAccessibleColors] = useAccessibleColors(); const { colors } = useTheme(); return ( <> - {Object.keys(colors.teal).map((key) => { - const colorContrast = useContrastText(`teal.${key}`); - return ( - - ); + {Object.keys(colors.yellow).map((key, index) => { + if (index > 2 && index < 9) return ; })} - @@ -84,7 +90,7 @@ function UseContrastingTextHook () { export default function () { return ( -
+
diff --git a/versioned_docs/version-3.2.0/useDisclosure.md b/versioned_docs/version-3.2.0/useDisclosure.md index 70a9e2f16..4e5cd4cdd 100644 --- a/versioned_docs/version-3.2.0/useDisclosure.md +++ b/versioned_docs/version-3.2.0/useDisclosure.md @@ -32,13 +32,10 @@ function UseDiscloseExample() { - Hello World + Delete Customer - Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos quasi - cupiditate expedita, ipsa corporis officia totam similique delectus! - Debitis esse, ea blanditiis iste enim iure at odit fugiat autem. - Accusamus? + This will remove all data relating to Alex. This action cannot be reversed. Deleted data can not be recovered. @@ -56,7 +53,7 @@ function UseDiscloseExample() { export default function () { return ( -
+
diff --git a/versioned_docs/version-3.2.0/useMediaQuery.md b/versioned_docs/version-3.2.0/useMediaQuery.md index b74c32483..7edf8d5fb 100644 --- a/versioned_docs/version-3.2.0/useMediaQuery.md +++ b/versioned_docs/version-3.2.0/useMediaQuery.md @@ -20,17 +20,129 @@ import React from "react"; import { Text, useMediaQuery, NativeBaseProvider, Center } from "native-base"; function UseMediaQueryExample() { - const [isSmaller] = useMediaQuery({ maxHeight: '512' }); + const [isSmallScreen] = useMediaQuery({ minHeight: 280, maxHeight: 480 }); return ( - - {isSmaller ? "Height smaller than 512" : "Height larger than 512"} - + + {isSmallScreen ? ( + + + + image + +
+ PHOTOS +
+ + + + + The Garden City + + + The Silicon Valley of India. + + + + Bengaluru (also called Bangalore) is the center of India's + high-tech industry. The city is also known for its parks and + nightlife. + + + + + 6 mins ago + + + + + + ) : ( + + + + + The Garden City + + + The Silicon Valley of India. + + + + Bengaluru (also called Bangalore) is the center of India's + high-tech industry. The city is also known for its parks and + nightlife. + + + + + 6 mins ago + + + + + + )} + ); } export default function () { return ( -
+
@@ -45,17 +157,130 @@ import React from "react"; import { Text, useMediaQuery, NativeBaseProvider, Center } from "native-base"; function UseMediaQueryExample() { - const [isLargerThan512] = useMediaQuery({ minWidth: '512' }); + const [isSmallScreen] = useMediaQuery({ minWidth: 280 }); return ( - - {isLargerThan512 ? "Width larger than 512" : "Width smaller than 512"} - + + {isSmallScreen ? ( + + + + image + +
+ PHOTOS +
+ + + + + The Garden City + + + The Silicon Valley of India. + + + + Bengaluru (also called Bangalore) is the center of India's + high-tech industry. The city is also known for its parks and + nightlife. + + + + + 6 mins ago + + + + + + ) : ( + + + + + The Garden City + + + The Silicon Valley of India. + + + + Bengaluru (also called Bangalore) is the center of India's + high-tech industry. The city is also known for its parks and + nightlife. + + + + + 6 mins ago + + + + + + )} + ); } export default function () { return ( -
+
@@ -70,21 +295,137 @@ import React from "react"; import { Text, useMediaQuery, NativeBaseProvider, Center } from "native-base"; function UseMediaQueryExample() { - const [isLandScape, isPortrait] = useMediaQuery([ - { orientation: "landscape" }, - { orientation: "portrait" }, + const [isLandScape, isPortrait] = useMediaQuery([ + { orientation: 'landscape' }, + { orientation: 'portrait' }, ]); return ( - <> - {`Landscape Mode: ${isLandScape}`} - {`Portrait Mode: ${isPortrait}`} - + + {isPortrait ? ( + + + + image + +
+ PHOTOS +
+ + + + + The Garden City + + + The Silicon Valley of India. + + + + Bengaluru (also called Bangalore) is the center of India's + high-tech industry. The city is also known for its parks and + nightlife. + + + + + 6 mins ago + + + + + + ) : ( + <> + )} + {isLandScape ? ( + + + + + The Garden City + + + The Silicon Valley of India. + + + + Bengaluru (also called Bangalore) is the center of India's + high-tech industry. The city is also known for its parks and + nightlife. + + + + + 6 mins ago + + + + + + ) : ( + <> + )} + ); } export default function () { return ( -
+
diff --git a/versioned_docs/version-3.2.0/usePopOver.md b/versioned_docs/version-3.2.0/usePopOver.md index af604254e..35bdb98a6 100644 --- a/versioned_docs/version-3.2.0/usePopOver.md +++ b/versioned_docs/version-3.2.0/usePopOver.md @@ -42,7 +42,7 @@ function UsePopoverExample() { export default function () { return ( -
+
diff --git a/versioned_docs/version-3.2.0/useTheme.md b/versioned_docs/version-3.2.0/useTheme.md new file mode 100644 index 000000000..71ac99174 --- /dev/null +++ b/versioned_docs/version-3.2.0/useTheme.md @@ -0,0 +1,22 @@ +--- +id: use-theme +title: useTheme +--- + +`useTheme` is a custom hook used to get the theme object from context. + +## Import + +```jsx +import { useTheme } from "native-base"; +``` + +## Example + +```jsx +function Example() { + const theme = useTheme(); + + return {/* Do something with the theme */}; +} +``` diff --git a/versioned_docs/version-3.2.0/useToken.md b/versioned_docs/version-3.2.0/useToken.md index 51f5400a6..29b824ec2 100644 --- a/versioned_docs/version-3.2.0/useToken.md +++ b/versioned_docs/version-3.2.0/useToken.md @@ -42,7 +42,7 @@ function UseTokenHookExample() { export default function () { return ( -
+
diff --git a/versioned_docs/version-3.2.0/utility-first.mdx b/versioned_docs/version-3.2.0/utility-first.mdx new file mode 100644 index 000000000..9de7d2ddb --- /dev/null +++ b/versioned_docs/version-3.2.0/utility-first.mdx @@ -0,0 +1,218 @@ +--- +id: utility-first +title: Utility First +--- + +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. + +To understand utility props, let's take an example. + + + +
+ +## With React Native + +Let's try the traditional way of building the above card in React Native. + +
+ +```jsx +import * as React from 'react'; +import { Text, View, StyleSheet, Image, Pressable } from 'react-native'; + +export default function App() { + return ( + + + + + Today @ 9PM + Let's talk about avatar! + + + Remind me + + + + + + ); +} + +const styles = StyleSheet.create({ + container: { + backgroundColor: '#0891b2', + paddingVertical: 16, + paddingHorizontal: 12, + borderRadius: 5, + alignSelf: 'center', + width: 375, + maxWidth: '100%', + }, + timings: { + color: '#fff', + fontSize: 14, + }, + metaContainer: { + justifyContent: 'space-between', + }, + topContainer: { + flexDirection: 'row', + justifyContent: 'space-between', + }, + avatar: { + height: 100, + width: 100, + borderRadius: 100, + }, + description: { + color: 'white', + marginTop: 5, + fontSize: 20, + }, + button: { + backgroundColor: '#22d3ee', + alignSelf: 'flex-start', + paddingHorizontal: 10, + paddingVertical: 5, + borderRadius: 3, + }, + buttonText: { + fontWeight: 'bold', + color: 'white', + textTransform: 'uppercase', + fontSize: 14, + }, +}); +``` + +
+ + + +
+ +## With NativeBase + +Now let's try to build the same card using NativeBase. + +With NativeBase, you can apply styles directly in the layout using shorthands. + +
+ +```jsx +import * as React from 'react'; +import { + NativeBaseProvider, + Box, + HStack, + VStack, + Text, + Pressable, + Image, +} from 'native-base'; + +export function UtilityFirstExample() { + return ( + + + + + + + Today @ 9PM + + + Let's talk about avatar! + + + + + Remind me + + + + Aang flying and surrounded by clouds + + + + ); +} +``` + +
+ +The above example demonstrates the usage of [utility props](utility-props) alongwith [VStack](vstack), [HStack](hstack) components. This approach allows us to style components without using StyleSheet API. + +Apart from productivity boost and saving time there are other benefits by styling components using utility props. +No need to name styles anymore, no need to define an object and think about naming them. + +Using utility-first props, you can focus on creating reusable components instead of reusable stylesheets. + +Once you start writing styles this way, any other way will feel cumbersome. + +> Put simply, utility first approach opens up the Avatar state within developers. + +
+ aang transitioning to avatar state +
+ +
+ +Once you had a cup of tea, let's proceed to the next section! + +
+
+ +
+ uncle iroh holding cup of tea + +
diff --git a/versioned_docs/version-3.2.0/utilityProps.md b/versioned_docs/version-3.2.0/utilityProps.md index 6eb0b4a94..8cf57537b 100644 --- a/versioned_docs/version-3.2.0/utilityProps.md +++ b/versioned_docs/version-3.2.0/utilityProps.md @@ -16,7 +16,7 @@ import React from 'react'; import { Box as NBBox, NativeBaseProvider, Center } from 'native-base'; const Box = (props) => { - return + return } function Component() { @@ -34,7 +34,7 @@ function Component() { export default function () { return ( -
+
@@ -117,10 +117,12 @@ export default function () { :::tip Note -Above props can be written in the format: {color}:alpha-{opacityToken}, this gets converted into RGBA color format and the opacityToken is mapped to [`Opacity`](default-theme#opacity) +Above props can be written in the format: {color}:alpha.{opacityToken}, this gets converted into RGBA color format and the opacityToken is mapped to [`Opacity`](default-theme#opacity) ::: +
+ ```SnackPlayer name=Alpha%20Opacity%20Usage import React from "react" @@ -131,7 +133,7 @@ export function Example() {
Box 2
+
+ Box 3 +
) @@ -159,7 +172,7 @@ export function Example() { export default () => { return ( -
+
@@ -196,7 +209,7 @@ function Component() { export default function () { return ( -
+
@@ -226,7 +239,7 @@ import React from 'react'; import { Box as NBBox, NativeBaseProvider, Center } from 'native-base'; const Box = (props) => { - return + return } function Component() { @@ -250,7 +263,7 @@ function Component() { export default function () { return ( -
+
@@ -283,7 +296,7 @@ import React from 'react'; import { Box as NBBox, Flex, NativeBaseProvider, Center } from 'native-base'; const Box = (props) => { - return + return } function Component() { @@ -306,7 +319,7 @@ function Component() { export default function () { return ( -
+
@@ -417,7 +430,7 @@ function Component() { export default function () { return ( -
+
@@ -462,7 +475,7 @@ function Component() { export default function () { return ( -
+
@@ -507,7 +520,7 @@ function Component() { export default function () { return ( -
+
@@ -551,7 +564,7 @@ function Example() { export default function () { return ( -
+
@@ -595,7 +608,7 @@ function Example() { export default function () { return ( -
+
@@ -648,7 +661,7 @@ function Example() { export default function () { return ( -
+
diff --git a/versioned_docs/version-3.2.0/utilityPropsSpecificity.md b/versioned_docs/version-3.2.0/utilityPropsSpecificity.md new file mode 100644 index 000000000..70e42236a --- /dev/null +++ b/versioned_docs/version-3.2.0/utilityPropsSpecificity.md @@ -0,0 +1,55 @@ +--- +id: utility-props-specificity +title: Utility Props Specificity +--- + +- If we have two similar props for a particular component, the more specific prop will be applied when the component is rendered. + + ```jsx + + ``` + + In the above example, we have two similar props for the Input component, but as you might have noticed `px={2}` is more specific than `p={0}` in terms of providing padding to the Input. This follows React Native's specificity precedence while applying utility style props to a component, order does not matter. So, `px={2}` will be applied when the Input component is rendered. + +- If we have a similar prop which is also defined in the baseStyle of that component, the value of the prop will override the value of the prop defined in the baseStyle. + + Let's take an example of `Input` to understand better. + + ```jsx + + + // baseStyle for Input component + return { + ... + px: 4, + py: 2, + ... + } + ``` + + As you can see, we have `px:2` and `py:2` defined in the baseStyle of Input component, but if we pass `p={0}` in the props of an Input, it will override the the baseStyle and apply `p={0}` to that component. **Similar happens with other utility props.** + +Now, here is an example to analyze both the cases together: + +```jsx + + +// baseStyle for Input component + return { + ... + px: 4, + py: 2, + ... + } + +``` +In the above example, what do you think should be the padding of the rendered Input component? + +Let's see. + +We have `p={0}` which will override the value of padding coming from the baseStyle of Input component, then we have `px={3}` which is a more specific prop. So, the padding of the rendered Input will be `padding : { paddingTop:0, paddingRight:3, paddingBottom:0, paddingLeft:3 }`. + + + + + diff --git a/versioned_docs/version-3.2.0/view.md b/versioned_docs/version-3.2.0/view.md new file mode 100644 index 000000000..dd1890b6f --- /dev/null +++ b/versioned_docs/version-3.2.0/view.md @@ -0,0 +1,18 @@ +--- +id: view +title: View +--- + +The most fundamental component for building a UI. + +## Example + +```ComponentSnackPlayer path=basic,View,Basic.tsx + +``` + +## Props + +```ComponentPropTable path=basic,View,View.tsx showStylingProps=true + +``` diff --git a/versioned_sidebars/version-3.2.0-sidebars.json b/versioned_sidebars/version-3.2.0-sidebars.json index 6609cafe5..696584afe 100644 --- a/versioned_sidebars/version-3.2.0-sidebars.json +++ b/versioned_sidebars/version-3.2.0-sidebars.json @@ -669,4 +669,4 @@ "id": "version-3.2.0/install-next" } ] -} \ No newline at end of file +} diff --git a/versions.json b/versions.json index 8ff1cfbc0..b82e5df0f 100644 --- a/versions.json +++ b/versions.json @@ -1,4 +1,5 @@ [ + "3.2.0", "3.1.0", "3.0.7", "3.0.6", @@ -8,4 +9,4 @@ "3.0.0-next.38", "3.0.0-next.37", "3.0.0-next.36" -] \ No newline at end of file +]