diff --git a/versioned_docs/version-3.0.4/FAB.md b/versioned_docs/version-3.0.4/FAB.md new file mode 100644 index 000000000..b2da69276 --- /dev/null +++ b/versioned_docs/version-3.0.4/FAB.md @@ -0,0 +1,44 @@ +--- +id: FAB +title: FAB +--- + +import { ComponentTheme } from '../../src/components'; + +A floating action button is a circular icon button that hovers over content to promote a primary action in the application. + +## Import + +```jsx +import { Fab } from 'native-base'; +``` + +## Example + +### Basic + +```ComponentSnackPlayer path=composites,Fab,Basic.tsx + +``` + +### Placement + +```ComponentSnackPlayer path=composites,Fab,Placement.tsx + +``` + +### Custom Position + +```ComponentSnackPlayer path=composites,Fab,CustomPosition.tsx + +``` + +## Styling + + + +## Props + +```ComponentPropTable path=composites,Fab,Fab.tsx + +``` diff --git a/versioned_docs/version-3.0.4/Kbd.md b/versioned_docs/version-3.0.4/Kbd.md new file mode 100644 index 000000000..2d76d3459 --- /dev/null +++ b/versioned_docs/version-3.0.4/Kbd.md @@ -0,0 +1,54 @@ +--- +id: Kbd +title: KBD +--- + +The keyboard key component exists to show which key or combination of keys performs a given action. + +## Implements + +- [`Box`](box.md) + +## Examples + +### Basic + +```SnackPlayer name=KBD%20Example +import React from 'react'; +import { VStack, HStack, Kbd, Text, NativeBaseProvider, Center } from 'native-base'; + +function KbdComponent () { + return ( + + + shift + + + C + + + shift + then + H + + + alt + or + option + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Props + +`Kbd` implements **[Box](box.md)**, so all the Box Props can be passed to it. diff --git a/versioned_docs/version-3.0.4/VStack.md b/versioned_docs/version-3.0.4/VStack.md new file mode 100644 index 000000000..837efa53c --- /dev/null +++ b/versioned_docs/version-3.0.4/VStack.md @@ -0,0 +1,24 @@ +--- +id: VStack +title: VStack / Column +--- + +`VStack` aligns items vertically.`Column` is also an alias for `VStack`. + +## Import + +```jsx +import { VStack } from 'native-base'; +``` + +## Usage + +```ComponentSnackPlayer path=primitives,VStack,basic.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Stack,VStack.tsx + +``` diff --git a/versioned_docs/version-3.0.4/ZStack.md b/versioned_docs/version-3.0.4/ZStack.md new file mode 100644 index 000000000..9f6969a7c --- /dev/null +++ b/versioned_docs/version-3.0.4/ZStack.md @@ -0,0 +1,23 @@ +`ZStack` aligns items absolutely in the z-axis. + +## Examples + +### Basic + +```ComponentSnackPlayer path=primitives,ZStack,example.tsx + +``` + +### Items Centered + +You can pass `alignItems="center"` `justifyContent="center"` to vertically and horizontally center the children. + +```ComponentSnackPlayer path=primitives,ZStack,CenterStack.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,ZStack,index.tsx + +``` diff --git a/versioned_docs/version-3.0.4/accessibility.md b/versioned_docs/version-3.0.4/accessibility.md new file mode 100644 index 000000000..a59a76697 --- /dev/null +++ b/versioned_docs/version-3.0.4/accessibility.md @@ -0,0 +1,24 @@ +--- +id: accessibility +title: Accessibility +--- + +NativeBase comes with the latest accessibility standards out of the box including aria and role attributes, focus management, and keyboard navigation. + +## Accessible Roles + +NativeBase uses [React Native ARIA](https://react-native-aria.geekyants.com/) to implements [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.2/) standards to its components. This is designed to provide meaning for controls that aren't built using components provided by the platform. + +## Accessible Labels + +When a view is marked as accessible, it is a good practice to set an `accessibilityLabel` on the view, so that people who use voice-over know what element they have selected. Voice-over will read this string when a user selects the associated element. NativeBase with the use of [React Native ARIA](https://www.notion.so/Accessibility-83852d7c4b094e69a3e4f1047994bd1c) does this for you out of the box. + +## Keyboard Navigation + +Many complex components, like Tabs and Dialog, come with expectations from users on how to interact with their content using a keyboard or other non-mouse input modalities. NativeBase Primitives provide basic keyboard support in accordance with the [WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices-1.2/). + +## Focus Management + +Proper keyboard navigation and good labelling often go hand-in-hand with managing focus. When a user interacts with a component and something changes as a result, it's often helpful to move focus with the interaction. And for screen reader users, moving focus often results in an announcement to convey the new context, which relies on proper labelling. + +In many NativeBase Components, we move focus based on the interactions a user normally takes in a given component. For example, in `Modal`, when the modal is opened, the focus is programmatically moved to the `first focusable element` and trapped inside the modal to anticipate a response to the prompt. diff --git a/versioned_docs/version-3.0.4/accordion.md b/versioned_docs/version-3.0.4/accordion.md new file mode 100755 index 000000000..b3544f71a --- /dev/null +++ b/versioned_docs/version-3.0.4/accordion.md @@ -0,0 +1,419 @@ +--- +id: accordion +title: Accordion +--- + +## Implements + +- [`Collapse`](collapse.md), [`Box`](box.md) + +## Import + +```jsx +import { Accordion } from 'native-base'; +``` + +## Examples + +### Basic + +```SnackPlayer name=Basic +import React from 'react'; +import { ScrollView } from 'react-native'; +import { Accordion, NativeBaseProvider, Center, Box } from 'native-base'; + +function AccordionComponent() { + return ( + + + + + Section 1 title + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. + + + + + Section 2 title + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. + + + + + Section 3 title + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. + + + + + ); +} +export default function () { + return ( + +
+ + + +
+ + ); +} + +``` + +### Multiple + +```SnackPlayer name=Multilple +import React from 'react'; +import { Accordion, Box, NativeBaseProvider, Center } from 'native-base'; + +function AccordionComponent() { + return ( + + + + + Section 1 title + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. + + + + + Section 2 title + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. + + + + + Section 3 title + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +### Default Index + +```SnackPlayer name=DefaultIndex +import React from 'react'; +import { ScrollView } from 'react-native'; +import { Accordion, Box, NativeBaseProvider, Center } from 'native-base'; + +function AccordionComponent() { + return ( + + + + + Section 1 title + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. + + + + + Section 2 title + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. + + + + + Section 3 title + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. + + + + + ); +} +export default function () { + return ( + +
+ + + +
+ + ); +} + +``` + +### Toggle + +```SnackPlayer name=Toggle +import React from 'react'; +import { Accordion, Box, NativeBaseProvider, Center } from 'native-base'; + +function AccordionComponent() { + return ( + + + + + Section 1 title + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. + + + + + Section 2 title + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. + + + + + Section 3 title + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +### Expanded Style + +```SnackPlayer name=Style +import React from 'react'; +import { Accordion, Box, NativeBaseProvider, Center } from 'native-base'; + +function AccordionComponent() { + return ( + + + + + Click me to see a different style + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. + + + + + I'm Disabled 😢 + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +### Accessing Internal State + +```SnackPlayer name=InternalState +import React from 'react'; +import { Accordion, Box, NativeBaseProvider, Center, Icon } from 'native-base'; + +function AccordionComponent() { + return ( + + + + + Section 1 title + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. + + + + + {({ isExpanded }: any) => ( + <> + + {isExpanded ? 'Fire' : 'Snow'} + {isExpanded ? ( + + ) : ( + + )} + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut + enim ad minim veniam, quis nostrud exercitation ullamco laboris + nisi ut aliquip ex ea commodo consequat. + + + )} + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Props + +### Accordion + +| Name | Type | Description | Default | +| ------------- | ---------------- | -------------------------------------------------------------------------------------------------------- | ------- | +| allowMultiple | boolean | If true, multiple accordion items can be expanded at once. | - | +| allowToggle | boolean | If true, any expanded accordion item can be collapsed again. | - | +| index | Number[], number | The index(es) of the expanded accordion item. | - | +| defaultIndex | Number[], number | The initial index(es) of the expanded accordion item. Must be an array for allowMultiple={true} to work. | - | +| onChange | function | The callback invoked when accordion items are expanded or collapsed. | - | + +**Accordion** uses **[Collapse](collapse.md)** to provide height animation. + +### AccordionItem + +| Name | Type | Description | Default | +| ---------- | ------- | ----------------------------------------------- | ------- | +| id | string | A unique id for the accordion item. | - | +| isDisabled | boolean | If true, the accordion header will be disabled. | - | + +### Accordion.Summary + +**Accrodion.Summary** renders a button and composes **[Box](box.md)**. All the **Box** props can be passed to **Accrodion.Summary** and you can style it by passing pseudo style props like `_expanded`, `_disabled`, `_hover`, etc. + +### Accordion.Details + +**AccordionDetails** composes **[Collapse](collapse.md)** to provide height animation. + +### Accordion.Icon + +**AccordionIcon** renders an Icon and composes **[Icon](icon.md)**. + +## Accessibility + +WIP (Work in progress) diff --git a/versioned_docs/version-3.0.4/actionSheet.md b/versioned_docs/version-3.0.4/actionSheet.md new file mode 100644 index 000000000..c3c21288d --- /dev/null +++ b/versioned_docs/version-3.0.4/actionSheet.md @@ -0,0 +1,78 @@ +--- +id: actionSheet +title: ActionSheet +--- + +import { ComponentTheme } from '../../src/components'; + +An Action Sheet is a dialog that displays a set of options. It appears on top of the app's content. + +## Import + +NativeBase exports 3 modal-related components: + +- **Actionsheet**: Provides the context and state for all components. +- **Actionsheet.Content**: Component to wrap the list of **Actionsheet.Item** components. +- **Actionsheet.Item**: A button to wrap the options of the Actionsheet. + +```jsx +import { Actionsheet } from 'native-base'; +``` + +## Examples + +### Usage + +```ComponentSnackPlayer path=composites,Actionsheet,Usage.tsx + +``` + +### Composition + +```ComponentSnackPlayer path=composites,Actionsheet,Composition.tsx + +``` + +### DisableOverlay + +```ComponentSnackPlayer path=composites,Actionsheet,DisableOverlay.tsx + +``` + +### Icons + +```ComponentSnackPlayer path=composites,Actionsheet,Icon.tsx + +``` + +## Props + +### Actionsheet + +```ComponentPropTable path=composites,Actionsheet,Actionsheet.tsx + +``` + +### Actionsheet.Content + +```ComponentPropTable path=composites,Actionsheet,ActionsheetContent.tsx + +``` + +### Actionsheet.Item + +ActionsheetItem implements [Button](button.md#props) + +## Styling + + + +## Accessibility + +- ActionSheet has `aria-modal` set to true. +- ActionSheet has `role` set to `dialog`. +- When the ActionSheet opens, focus is trapped within it. +- Pressing Esc closes the ActionSheet. +- When the ActionSheet opens, focus is automatically set to the first enabled element. +- Clicking on the overlay closes the ActionSheet. +- Scrolling is blocked on the elements behind the ActionSheet. diff --git a/versioned_docs/version-3.0.4/alert.md b/versioned_docs/version-3.0.4/alert.md new file mode 100644 index 000000000..a56754e77 --- /dev/null +++ b/versioned_docs/version-3.0.4/alert.md @@ -0,0 +1,87 @@ +--- +id: alert +title: Alert +--- + +import { ComponentTheme } from '../../src/components'; + +`Alerts` are used to communicate a state that affects a system, feature or page. + +## Import + +NativeBase exports 5 Alert related components: + +- `Alert`: The wrapper for alert components. +- `Alert.Icon`: The visual icon for the alert that changes based on the `status` prop. +- `Alert.Title`: The title of the alert to be announced by screen readers. +- `Alert.Description`: The description of the alert to be announced by screen readers. + +```jsx +import { Alert } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=composites,Alert,usage.tsx + +``` + +### Status + +```ComponentSnackPlayer path=composites,Alert,status.tsx + +``` + +### Variant + +```ComponentSnackPlayer path=composites,Alert,variant.tsx + +``` + +### Composition + +```ComponentSnackPlayer path=composites,Alert,composition.tsx + +``` + +### Action + +```ComponentSnackPlayer path=composites,Alert,action.tsx + +``` + +## Props + +### Alert + +```ComponentPropTable path=composites,Alert,Alert.tsx + +``` + +### Alert.Icon + +```ComponentPropTable path=composites,Alert,AlertIcon.tsx + +``` + +### Alert.Title + +```ComponentPropTable path=composites,Alert,AlertTitle.tsx + +``` + +### Alert.Description + +```ComponentPropTable path=composites,Alert,AlertDescription.tsx + +``` + +## Styling + + + +## Accessibility + +Alert has `role` set to `alert`. diff --git a/versioned_docs/version-3.0.4/alertDialog.md b/versioned_docs/version-3.0.4/alertDialog.md new file mode 100644 index 000000000..5e9d0d3d8 --- /dev/null +++ b/versioned_docs/version-3.0.4/alertDialog.md @@ -0,0 +1,157 @@ +--- +id: alertDialog +title: AlertDialog +--- + +import { ComponentTheme } from '../../src/components'; + +`AlertDialog` component is used to interrupt the user with a mandatory confirmation or action. AlertDialog composes [`Modal`](modal.md) so you can use all its props. + +## Import + +- `AlertDialog`: provides context and state for the dialog. +- `AlertDialog.Header`: contains the title announced by screen readers. +- `AlertDialog.Body`: contains the description announced by screen readers. +- `AlertDialog.Footer`: contains the actions of the dialog. +- `AlertDialog.Content`: The wrapper for the alert dialog's content. +- `AlertDialog.CloseButton`: The button that closes the dialog. + +```jsx +import { AlertDialog } from 'native-base'; +``` + +## Examples + +### Basic + +```SnackPlayer name=AlertDialog%20Basic +import React from "react"; +import { + AlertDialog, + Button, + Center, + NativeBaseProvider, +} from "native-base"; + +function AlertDialogComponent() { + const [isOpen, setIsOpen] = React.useState(false); + const onClose = () => setIsOpen(false); + const cancelRef = React.useRef(); + return ( +
+ + + + Delete Customer + + + Are you sure? You can't undo this action afterwards. + + + + + + + + +
+ ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Transition + +```SnackPlayer name=AlertDialog%20Transition +import React from "react"; +import { AlertDialog, Button, Center, NativeBaseProvider } from "native-base"; + +function AlertDialogComponent() { + const [isOpen, setIsOpen] = React.useState(false); + const onClose = () => setIsOpen(false); + const cancelRef = React.useRef(); + return ( +
+ + + + Discard Changes? + + Are you sure you want to discard all of your notes? 44 words will be + deleted. + + + + + + + + +
+ ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Styling + + + +## Props + +AlertDialog and its components compose the **[Modal](modal.md)** component, so all the [`Modal props`](modal.md#props) can be passed to it. The only exception is that it requires `leastDestructiveRef` which is similar to `initialFocusRef` of `Modal`. + +| Name | Type | Description | Default | +| ------------------- | --------- | -------------------------------------------------------------- | ------- | +| leastDestructiveRef | React.Ref | The least destructive action to get focus when dialog is open. | - | + +## Accessibility + +Adheres to the [Alert and Message Dialogs WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#alertdialog) + +### Keyboard Interactions + +| Name | Description | +| ----------- | --------------------------------------------------------- | +| Space | Opens/closes the dialog. | +| Enter | Opens/closes the dialog. | +| Tab | Moves focus to the next focusable element. | +| Shift + Tab | Moves focus to the previous focusable element. | +| Esc | Closes the dialog and moves focus to AlertDialog.Trigger. | diff --git a/versioned_docs/version-3.0.4/appBar.md b/versioned_docs/version-3.0.4/appBar.md new file mode 100644 index 000000000..583007a50 --- /dev/null +++ b/versioned_docs/version-3.0.4/appBar.md @@ -0,0 +1,89 @@ +--- +id: appBar +title: AppBar +--- + +`AppBar` component can be used to create app headers. + +## Examples + +### Usage + +```SnackPlayer name=AppBar%20Usage +import React from "react"; +import { + AppBar, + IconButton, + Icon, + Text, + VStack, + NativeBaseProvider +} from "native-base"; + +function AppBarComponent() { + return ( + + + + } + /> + + + + + + Title + + + Subtitle + + + + + + } + /> + } + /> + + + ); +} +export default function () { + return ( + + + + ); +} +``` + +## Props + +`AppBar` implements **[Box](box.md)**, so all the Box Props can be passed to it. + +### AppBar Props + +| Name | Type | Description | Default | +| --------------- | ------ | ---------------------------------------------------------------------- | ------- | +| statusBarHeight | number | Defaults to SafeAreaView on iOS and Statusbar.height on android. | - | +| space | number | Space between AppBar.Left, AppBar.Content and AppBar.Right components. | 2 | + +### AppBar.Left + +Implements [`HStack`](hStack.md), all the props of HStack can be passed. + +### AppBar.Content + +Implements [`HStack`](hStack.md), all the props of HStack can be passed. + +### AppBar.Right + +Implements [`HStack`](hStack.md), all the props of HStack can be passed. diff --git a/versioned_docs/version-3.0.4/appDrawer.md b/versioned_docs/version-3.0.4/appDrawer.md new file mode 100644 index 000000000..21e0defe9 --- /dev/null +++ b/versioned_docs/version-3.0.4/appDrawer.md @@ -0,0 +1,57 @@ +--- +id: appDrawer +title: App drawer +--- + +Creating an app drawer like layout is very common and with NativeBase's SimpleGrid make this extremely simple while still keeping it extremely customisable. Here is an example to illustrate it. + +```SnackPlayer name=AppDrawer +import React from "react"; +import { IconButton, SimpleGrid, Icon, NativeBaseProvider } from "native-base"; +import {MaterialIcons} from '@expo/vector-icons'; + +function AppDrawer(){ + const icons = [ + "bolt", + "build", + "cloud", + "delivery-dining", + "favorite", + "music-note", + "invert-colors-on", + "navigation", + "settings", + "sports-esports", + "shield", + "photo-camera", + "network-wifi", + "nightlight-round", + "flight", + "extension", + "duo", + "album", + "access-alarm", + "forum", + ]; + + return + {icons.map((icon) => ( + } + /> + ))} + +} + +export default function () { + return ( + + + + ); +} +``` diff --git a/versioned_docs/version-3.0.4/aspectRatio.md b/versioned_docs/version-3.0.4/aspectRatio.md new file mode 100644 index 000000000..036dfc3f8 --- /dev/null +++ b/versioned_docs/version-3.0.4/aspectRatio.md @@ -0,0 +1,74 @@ +--- +id: aspectRatio +title: AspectRatio +--- + +## Implements + +- [`Box`](box.md) + +## Example + +### Basic + +```SnackPlayer name=AspectRatio%20Example +import React from "react"; +import { AspectRatio, Box, NativeBaseProvider, Center } from "native-base"; +function Component() { + return ( + + + + ); +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Embed Image + +```SnackPlayer name=AspectRatio%20ExampleEmbedImage +import React from "react"; +import { AspectRatio, Image, NativeBaseProvider, Center } from "native-base"; +function Component() { + return ( + + + + ); +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +## Props + +`AspectRatio` implements **[Box](box.md)**, so all the Box props can be passed to it. + +| Name | Type | Description | Default | +| ----- | ------ | ---------------------------------------------- | ------- | +| ratio | number | The aspect ratio(width/height) of the content. | `4/3` | diff --git a/versioned_docs/version-3.0.4/avatar.md b/versioned_docs/version-3.0.4/avatar.md new file mode 100644 index 000000000..dff7875cc --- /dev/null +++ b/versioned_docs/version-3.0.4/avatar.md @@ -0,0 +1,76 @@ +--- +id: avatar +title: Avatar +--- + +import { ComponentTheme } from '../../src/components'; + +`Avatar` component is used to represent a user and it can display a profile picture, initials or a fallback icon. + +## Import + +NativeBase exports 3 avatar-related components: + +- `Avatar`: An image that represents the user. +- `Avatar.Badge`: A wrapper that displays its content on the bottom right corner of the avatar. +- `Avatar.Group`: A wrapper to stack multiple avatars together. + +```jsx +import { Avatar } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=composites,Avatar,usage.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=composites,Avatar,size.tsx + +``` + +### Fallbacks + +```ComponentSnackPlayer path=composites,Avatar,Fallback.tsx + +``` + +### Avatar Badge + +```ComponentSnackPlayer path=composites,Avatar,AvatarBadge.tsx + +``` + +### Avatar Group + +```ComponentSnackPlayer path=composites,Avatar,AvatarGroup.tsx + +``` + +## Props + +### Avatar + +```ComponentPropTable path=composites,Avatar,Avatar.tsx + +``` + +### Avatar.Group + +```ComponentPropTable path=composites,Avatar,Group.tsx + +``` + +### Avatar.Badge + +```ComponentPropTable path=composites,Avatar,Badge.tsx + +``` + +## Styling + + diff --git a/versioned_docs/version-3.0.4/badge.md b/versioned_docs/version-3.0.4/badge.md new file mode 100644 index 000000000..607a80451 --- /dev/null +++ b/versioned_docs/version-3.0.4/badge.md @@ -0,0 +1,50 @@ +--- +id: badge +title: Badge +--- + +import { ComponentTheme } from '../../src/components'; + +`Badges` are used to highlight an item's status for quick recognition. + +## Import + +```jsx +import { Badge } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=composites,Badge,usage.tsx + +``` + +### Color Scheme + +```ComponentSnackPlayer path=composites,Badge,color.tsx + +``` + +### Variants + +```ComponentSnackPlayer path=composites,Badge,variants.tsx + +``` + +### Composition + +```ComponentSnackPlayer path=composites,Badge,composition.tsx + +``` + +## Props + +```ComponentPropTable path=composites,Badge,index.tsx + +``` + +## Styling + + diff --git a/versioned_docs/version-3.0.4/box.md b/versioned_docs/version-3.0.4/box.md new file mode 100644 index 000000000..5c884c1ef --- /dev/null +++ b/versioned_docs/version-3.0.4/box.md @@ -0,0 +1,138 @@ +--- +id: box +title: Box +--- + +This is a generic component for low level layout needs. It is similar to a [`div`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) in HTML. + +## Example + +### Basic + +```ComponentSnackPlayer path=primitives,Box,basic.tsx + +``` + +
+ +### Composition + +```ComponentSnackPlayer path=primitives,Box,composition.tsx + +``` + +
+ +### With Linear gradient + +If you're using [Expo](https://docs.expo.io/) managed or bare workflow, you can install [expo-linear-gradient](https://docs.expo.io/versions/latest/sdk/linear-gradient/) and configure it in the [NativeBaseProvider](setup-provider#add-external-dependencies-optional) as shown below. + +```SnackPlayer name=LinearGradient +import React from "react" +import { Box, Center, NativeBaseProvider } from "native-base" + +export const Example = () => { + return ( + + This is a Box with Linear Gradient + + ) +} + +const config = { + dependencies: { + 'linear-gradient': require('expo-linear-gradient').LinearGradient + } +} + +export default () => { + return ( + +
+ +
+ + ) +} +``` + +
+ +If you're not using Expo, you can install [react-native-linear-gradient](https://www.npmjs.com/package/react-native-linear-gradient) and configure in the [NativeBaseProvider](setup-provider#add-external-dependencies-optional) as shown below. + +```jsx +import React from 'react'; +import { Box, NativeBaseProvider } from 'native-base'; + +const Example = () => { + return ( + + This is a Box with Linear Gradient + + ); +}; + +const config = { + dependencies: { + 'linear-gradient': require('react-native-linear-gradient').default, + }, +}; + +export default () => { + return ( + + + + ); +}; +``` + +
+ +### Basic (With Ref) + +```ComponentSnackPlayer path=primitives,Box,WithRef.tsx + +``` + +
+
+ +:::tip Common use cases for Box component are: + +- Create responsive layouts with ease. +- Provide a shorthand to pass styles via props (`bg` instead of `backgroundColor`). + +::: + +## Props + +```ComponentPropTable path=primitives,Box,index.tsx showStylingProps=true + +``` diff --git a/versioned_docs/version-3.0.4/breadCrumb.md b/versioned_docs/version-3.0.4/breadCrumb.md new file mode 100644 index 000000000..a0c567378 --- /dev/null +++ b/versioned_docs/version-3.0.4/breadCrumb.md @@ -0,0 +1,249 @@ +--- +id: breadcrumb +title: Breadcrumb +--- + +## Implements + +- [`Link`](link.md), [`Flex`](flex.md). + +## Import + +```jsx +import { Breadcrumb } from 'nativebase'; +``` + +## Examples + +### Basic + +Add `isCurrentPage` prop to the `Breadcrumb.Item` that matches the current path. + +```SnackPlayer name=Breadcrumb%20Basic +import React from 'react'; +import { + Breadcrumb, + Box, + Heading, + NativeBaseProvider, + Center +} from 'native-base'; +function BreadcrumbComponent () { + return ( + + Default Breadcrumb + + + Home (This is currently active) + + + + Docs + + + + + Github + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Icon Separators + +Change the `separator` used in the breadcrumb by passing a string, like `'-'` or any Component. + +```SnackPlayer name=Breadcrumb%20Component%20Separator +import React from 'react'; +import { + Breadcrumb, + Box, + Heading, + NativeBaseProvider, + Center, + Icon +} from 'native-base'; +function BreadcrumbComponent () { + return ( + + Breadcrumb with Custom Separator + } + > + + Home (This is currently active) + + + + Docs + + + + + Github + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Text Separators + +```SnackPlayer name=Breadcrumb%20String%20Separator +import React from 'react'; +import { + Breadcrumb, + Box, + Heading, + Icon, + NativeBaseProvider, + Center +} from 'native-base'; +function BreadcrumbComponent () { + return ( + + Breadcrumb with String Separator + + + Home (This is currently active) + + + + Docs + + + + + Github + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Composition + +Breadcrumb composes Box so you can pass all Box props to change the style of the breadcrumbs. Let's say we need to increase the fontSize and change color of the breadcrumbs. + +```SnackPlayer name=Breadcrumb%20Composition +import React from 'react'; +import { NativeBaseProvider, Breadcrumb, Box, Heading, Icon, Center, HStack, Text } from 'native-base'; +function BreadcrumbComponent () { + return ( + + Breadcrumb Composition + + + + + + Home + + + + + + + + Docs + + + + + + + + + Github (This is currently active) + + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Props + +### Breadcrumb + +| Name | Type | Description | Default | +| --------- | ----------------------------------------------------- | ------------------------------------------------- | ------- | +| separator | JSX.Element, string | The visual separator between the breadcrumb item. | - | +| spacing | [`MarginProps`](https://styled-system.com/api/#space) | The space between each stack item. | - | + +### Breadcrumb.Item + +| Name | Type | Description | Default | +| ------------- | ------- | -------------------------------------------------------------- | ------- | +| isCurrentPage | boolean | If true, it indicates that the breadcrumb link is active page. | - | + +### Breadcrumb.Link + +`Breadcrumb.Link` composes the [`Link`](link.md) component so you can use all Link props. + +## Accessibility + +[Breadcrumbs ARIA Spec](https://www.w3.org/TR/wai-aria-practices/examples/breadcrumb/index.html) + +- The Breadcrumbs are rendered in a nav to denote that it is a navigation landmark. +- The Breadcrumb nav has aria-label set to breadcrumb. +- The BreadcrumbItem with isCurrentPage prop adds the aria-current=page to the BreadcrumbLink. + The separator has role set to presentation to denote that its for presentation purposes. diff --git a/versioned_docs/version-3.0.4/breakpoints.md b/versioned_docs/version-3.0.4/breakpoints.md new file mode 100644 index 000000000..78b04fa8a --- /dev/null +++ b/versioned_docs/version-3.0.4/breakpoints.md @@ -0,0 +1,37 @@ +--- +id: breakpoint +title: Breakpoints +--- + +Breakpoints are the building blocks of responsive design. Use them to control when your layout can be adapted at a particular viewport or device size. + +NativeBase provides these default breakpoints and you can update with using extendTheme. + +```tsx +breakpoints = { + base: 0, + sm: 480, + md: 768, + lg: 992, + xl: 1280, +}; +``` + +`useBreakpointValue` is a custom hook which returns the value for the current breakpoint from the provided responsive values object. This hook also responds to the window resizing and returning the appropriate value for the new window size. + +```jsx +import React from 'react'; +import { Box, useBreakpointValue } from 'native-base'; +export default () => { + const color = useBreakpointValue({ + base: 'red.200', + sm: 'blue.200', + md: 'blue.200', + }); + return ( + + This is a box + + ); +}; +``` diff --git a/versioned_docs/version-3.0.4/buildingAppBar.md b/versioned_docs/version-3.0.4/buildingAppBar.md new file mode 100644 index 000000000..f41f1b24f --- /dev/null +++ b/versioned_docs/version-3.0.4/buildingAppBar.md @@ -0,0 +1,48 @@ +--- +id: buildingAppBar +title: AppBar +--- + +The top app bar provides content and actions related to the current screen. It’s used for branding, screen titles, navigation, and actions. + +## Example + +We can easily create it using basic layout components from NativeBase. + +```SnackPlayer name=App%20Bar +import React from "react"; +import { VStack, HStack, Button, IconButton, Icon, Text, NativeBaseProvider, Center, Box, StatusBar } from "native-base"; +import { MaterialIcons } from '@expo/vector-icons'; + +function AppBar(){ + return ( + <> + + + + + + + } color="white" />} /> + Home + + + } size='sm' color="white" />} /> + } + color="white" size='sm' />} /> + } size='sm' color="white" />} /> + + + + + ) +} + +export default function () { + return ( + + + + ); +} +``` diff --git a/versioned_docs/version-3.0.4/buildingDrawerNavigation.md b/versioned_docs/version-3.0.4/buildingDrawerNavigation.md new file mode 100644 index 000000000..25f51fff3 --- /dev/null +++ b/versioned_docs/version-3.0.4/buildingDrawerNavigation.md @@ -0,0 +1,174 @@ +--- +id: buildingDrawerNavigation +title: Drawer Navigation +--- + +Common pattern in navigation is to use drawer from left (sometimes right) side for navigating between screens. + +## Example + +Here is an example to show how easily and quickly we can use React Native's [DrawerNavigation](https://reactnavigation.org/docs/drawer-based-navigation/) in NB. + +```SnackPlayer name=Drawer-Navigation dependencies=@react-navigation/stack@5.1.0,@react-navigation/drawer,@react-navigation/native@5.0.8,react-native-vector-icons,react-native-gesture-handler@1.10.2,react-native-linear-gradient,@react-native-community/masked-view@0.1.10,react-native-screens@3.0.0,react-native-reanimated@2.1.0 +import * as React from 'react'; +import { NavigationContainer } from '@react-navigation/native'; +import { + createDrawerNavigator, + DrawerContentScrollView, +} from '@react-navigation/drawer'; +import { + MaterialCommunityIcons +} from '@expo/vector-icons'; +import { + NativeBaseProvider, + Button, + Box, + HamburgerIcon, + Pressable, + Heading, + VStack, + Text, + Center, + HStack, + Divider, + Icon +} from 'native-base'; +const Drawer = createDrawerNavigator(); +function Component(props) { + return ( + + props.navigation.toggleDrawer()} position="absolute" ml={2} zIndex={1}> + + +
+ {props.route.name} +
+ + ); +} + +const getIcon = (screenName) => { + switch (screenName) { + case 'Inbox': + return "email" + case 'Outbox': + return 'send' + case 'Favorites': + return 'heart' + case 'Archive': + return 'archive' + case 'Trash': + return 'trash-can' + case 'Spam': + return 'alert-circle' + default: + return undefined + } +} + +function CustomDrawerContent(props) { + return ( + + + + Mail + john_doe@gmail.com + + } space={4}> + + {props.state.routeNames.map((name, index) => ( + { + props.navigation.navigate(name); + }} + > + + } /> + + {name} + + + + ))} + + + Labels + + + + } /> + + Family + + + + + + } /> + + Friends + + + + + + } /> + + Work + + + + + + + + + ); +} +function MyDrawer() { + return ( + + } + > + + + + + + + + + ); +} +export default function App() { + return ( + + + + + + ); +} +``` diff --git a/versioned_docs/version-3.0.4/buildingFooterTabs.md b/versioned_docs/version-3.0.4/buildingFooterTabs.md new file mode 100644 index 000000000..d7b994e03 --- /dev/null +++ b/versioned_docs/version-3.0.4/buildingFooterTabs.md @@ -0,0 +1,115 @@ +--- +id: buildingFooterTabs +title: Footer +--- + +With NativeBase v3 we have removed FooterTab components because as it's very simple to create it using HStack component. Here is an example of how we can make Footer in our Apps. + +## Example + +```SnackPlayer name=Footer dependencies=react-native-linear-gradient +import React from 'react'; + +import { + NativeBaseProvider, + Box, + Text, + Heading, + VStack, + FormControl, + Input, + Link, + Button, + Icon, + HStack, + Center, + Pressable, +} from 'native-base'; +import { MaterialCommunityIcons , MaterialIcons} from '@expo/vector-icons'; + +export default function App() { + const [selected, setSelected] = React.useState(1); + return ( + + +
+
+ + setSelected(0)} + > +
+ } + color="white" + size="xs" + /> + + Favorites +
+ + setSelected(1)} + > +
+ } + color="white" + size="xs" + /> + + Music +
+ + setSelected(2)} + > +
+ } + color="white" + size="xs" + /> + + Places +
+ + setSelected(3)} + > +
+ } + color="white" + size="xs" + /> + News +
+ + + + + ); +} + +``` diff --git a/versioned_docs/version-3.0.4/buildingSearchBar.md b/versioned_docs/version-3.0.4/buildingSearchBar.md new file mode 100644 index 000000000..00feacf40 --- /dev/null +++ b/versioned_docs/version-3.0.4/buildingSearchBar.md @@ -0,0 +1,72 @@ +--- +id: buildingSearchBar +title: SearchBar +--- + +Search-bar are one of the most commonly seen variation of input. Here are design to make life easier. + +## Example + +Here are some examples to show how easily and quickly we can create so many types of search-bars. + + + +```SnackPlayer name=Search%20Bar +import React from "react"; +import { VStack, Input, Button, IconButton, Icon, Text, NativeBaseProvider, Center, Box } from "native-base"; +import { Ionicons, MaterialIcons } from '@expo/vector-icons'; +import { FontAwesome5 } from '@expo/vector-icons'; + + +function SearchBar(){ + return ( + + + Cupertino + } />} + /> + + + + Material + } />} + InputRightElement={} />} + /> + + + ) +} + +export default function () { + return ( + +
+ +
+ + ); +} +``` diff --git a/versioned_docs/version-3.0.4/buildingSwipeList.md b/versioned_docs/version-3.0.4/buildingSwipeList.md new file mode 100644 index 000000000..a5648058a --- /dev/null +++ b/versioned_docs/version-3.0.4/buildingSwipeList.md @@ -0,0 +1,144 @@ +--- +id: buildingSwipeList +title: Swipe List +--- + +SwipeListView is a vertical ListView with rows that swipe open and closed. Handles default native behavior such as closing rows when ListView is scrolled or when other rows are opened. + +## Example + +Here is an example to show how easily and quickly we can use [react-native-swipe-list](https://www.npmjs.com/package/react-native-swipe-list-view) in NativeBase. + +```SnackPlayer name=SwipeList dependencies=react-native-swipe-list-view + +import React, { useState } from 'react'; +import { + Dimensions, + TouchableOpacity, + View, +} from 'react-native'; + +import {NativeBaseProvider,Box, Text,Pressable,Heading,IconButton,Icon, HStack, Avatar } from 'native-base'; +import { SwipeListView } from 'react-native-swipe-list-view'; +import { MaterialIcons,Ionicons } from '@expo/vector-icons'; + +export default function App() { + const [mode, setMode] = useState('Basic'); + + return ( + + + Swipe list Example + + + + ); +} + + +function Basic() { + const [listData, setListData] = useState( + Array(20) + .fill('') + .map((_, i) => ({ key: `${i}`, text: `item #${i}` })) + ); + + const closeRow = (rowMap, rowKey) => { + if (rowMap[rowKey]) { + rowMap[rowKey].closeRow(); + } + }; + + const deleteRow = (rowMap, rowKey) => { + closeRow(rowMap, rowKey); + const newData = [...listData]; + const prevIndex = listData.findIndex(item => item.key === rowKey); + newData.splice(prevIndex, 1); + setListData(newData); + }; + + const onRowDidOpen = rowKey => { + console.log('This row opened', rowKey); + }; + + const renderItem = ({item, index}) => ( + + console.log('You touched me')} + alignItems= 'center' + bg="white" + borderBottomColor= 'trueGray.200' + borderBottomWidth= {1} + justifyContent= 'center' + height= {50} + underlayColor={'#AAA'} + _pressed={{ + bg:'trueGray.200' + }} + py={8} + > + + + + + {index} + + + {item.text} + + + + + + ); + + const renderHiddenItem = (data, rowMap) => ( + + closeRow(rowMap, data.item.key)} + _pressed={{ + opacity: 0.5 + }} + > + } color='white'/> + + deleteRow(rowMap, data.item.key)} + _pressed={{ + opacity: 0.5 + }} + > + } color="white" /> + + + ); + + return ( + + + + ); +} +``` diff --git a/versioned_docs/version-3.0.4/buildingTabView.md b/versioned_docs/version-3.0.4/buildingTabView.md new file mode 100644 index 000000000..953882d01 --- /dev/null +++ b/versioned_docs/version-3.0.4/buildingTabView.md @@ -0,0 +1,101 @@ +--- +id: buildingTabView +title: Tab View +--- + +A cross-platform Tab View component for React Native + +## Example + +Here is an example to show how easily and quickly we can use [react-native-tab-view](https://www.npmjs.com/package/react-native-tab-view) in NB. + +```SnackPlayer name=TabView dependencies=react-native-linear-gradient,react-native-tab-view,react-native-pager-view@5.0.12 + +import * as React from 'react'; +import { View, StyleSheet, Dimensions, StatusBar,TouchableOpacity,Animated, Pressable} from 'react-native'; +import { TabView, SceneMap } from 'react-native-tab-view'; +import {NativeBaseProvider,Box, Text} from 'native-base'; +import Constants from 'expo-constants'; + +const FirstRoute = () => ( + +); + +const SecondRoute = () => ( + +); + +const ThirdRoute = () => ( + +); + +const initialLayout = { width: Dimensions.get('window').width }; + +const renderScene = SceneMap({ + first: FirstRoute, + second: SecondRoute, + third: ThirdRoute, +}); + +export default function TabViewExample() { + + + + + const [index, setIndex] = React.useState(0); + const [routes] = React.useState([ + { key: 'first', title: 'First' }, + { key: 'second', title: 'Second' }, + { key: 'third', title: 'Third' }, + ]); + + const renderTabBar = (props) => { + const inputRange = props.navigationState.routes.map((x, i) => i); + return ( + + {props.navigationState.routes.map((route, i) => { + const opacity = props.position.interpolate({ + inputRange, + outputRange: inputRange.map((inputIndex) => + inputIndex === i ? 1 : 0.5 + ), + }); + + return ( + + { + console.log(i); + setIndex(i);}}> + {route.title} + + + + ); + })} + + ); + }; + + return ( + + + + ); +} + + +``` diff --git a/versioned_docs/version-3.0.4/builldingCard.md b/versioned_docs/version-3.0.4/builldingCard.md new file mode 100644 index 000000000..0bf3d9b8f --- /dev/null +++ b/versioned_docs/version-3.0.4/builldingCard.md @@ -0,0 +1,57 @@ +--- +id: buildingCard +title: Card +--- + +A card is a flexible and extensible content container. It comes in caries shapes and sizes and here we'll make few of them. + +## Most Commonly used design + +This card design widely used where the Header consist of Avatar, accompanied by the Title and Sub-title. + +Followed by the image which flows till the very edge. + +And lastly a description. + +```SnackPlayer name=Card +import React from "react"; +import { VStack, HStack, Avatar, Image, Text, NativeBaseProvider, +AspectRatio, Center, Box, Stack, Heading } from "native-base"; + +function CardComponent(){ + return( + + image base + + NEWS + + + June 22, 2021 + + The Stunning Dawki River in Meghalaya is So Clear That Boats Appear + Floating in Air + + + With lush green meadows, rivers clear as crystal, pine-covered + hills, gorgeous waterfalls, lakes and majestic forests, the + mesmerizing. Meghalaya is truly a Nature lover’s paradise… + + + + ); +} + +export default function () { + return ( + +
+ +
+ + ); +} +``` diff --git a/versioned_docs/version-3.0.4/button.mdx b/versioned_docs/version-3.0.4/button.mdx new file mode 100644 index 000000000..c138b3d29 --- /dev/null +++ b/versioned_docs/version-3.0.4/button.mdx @@ -0,0 +1,84 @@ +--- +id: button +title: Button +--- + +import { ComponentTheme } from '../../src/components'; + +The `Button` component is used to trigger an action or event. + +## Import + +```jsx +import { Button, ButtonGroup } from 'native-base'; +``` + +- **Button** : The button component with support for custom icons, spinners, etc. +- **ButtonGroup** : Used to group buttons whose actions are related, with an option to flush them together. + +## Examples + +### Basic + +```ComponentSnackPlayer path=primitives,Button,basic.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=primitives,Button,sizes.tsx + +``` + +### Variants + +```ComponentSnackPlayer path=primitives,Button,variants.tsx + +``` + +### Loading + +```ComponentSnackPlayer path=primitives,Button,loading.tsx + +``` + +### Icons + +```ComponentSnackPlayer path=primitives,Button,icons.tsx + +``` + +### ButtonGroup + +```ComponentSnackPlayer path=primitives,Button,ButtonGroup.tsx + +``` + +### Basic (With Ref) + +```ComponentSnackPlayer path=primitives,Button,WithRef.tsx + +``` + +## Props + +### Button + +```ComponentPropTable path=primitives,Button,Button.tsx + +``` + +### ButtonGroup + +```ComponentPropTable path=primitives,Button,ButtonGroup.tsx + +``` + +## Styling + + + +## Accessibility + +- Button has `role` set to [button](https://www.w3.org/TR/wai-aria-practices-1.2/#button). +- When Button has focus, Space or Enter activates it. diff --git a/versioned_docs/version-3.0.4/cascader.md b/versioned_docs/version-3.0.4/cascader.md new file mode 100644 index 000000000..a18591ea6 --- /dev/null +++ b/versioned_docs/version-3.0.4/cascader.md @@ -0,0 +1,6 @@ +--- +id: cascader +title: Cascader +--- + +## Coming Soon diff --git a/versioned_docs/version-3.0.4/center.md b/versioned_docs/version-3.0.4/center.md new file mode 100644 index 000000000..af1b45de7 --- /dev/null +++ b/versioned_docs/version-3.0.4/center.md @@ -0,0 +1,48 @@ +--- +id: center +title: Center +--- + +`Center` is a layout component that centers its child within itself. + +## **Import** + +```jsx +import { Center, Square, Circle } from 'native-base'; +``` + +- **Center:** Centers its child, pass `width` and `height` +- **Square:** `Center` but we need to pass `size` (width and height) +- **Circle:** `Center` with round `borderRadius`, pass `size` (width and height) + +## Examples + +### Basic + +Put any child element inside it, give it any width or/and height. It'll ensure the child is centered. + +```ComponentSnackPlayer path=composites,Center,Basic.tsx + +``` + +### Icon frames + +Center can be used to nicely position icons in the center and add frames around them. + +```ComponentSnackPlayer path=composites,Center,WithIcons.tsx + +``` + +### Square and Circle + +Square and Circle automatically centers their children. + +```ComponentSnackPlayer path=composites,Center,SquareCircle.tsx + +``` + +## Props + +```ComponentPropTable path=composites,Center,Center.tsx + +``` diff --git a/versioned_docs/version-3.0.4/changelog.md b/versioned_docs/version-3.0.4/changelog.md new file mode 100644 index 000000000..3c65f2d9b --- /dev/null +++ b/versioned_docs/version-3.0.4/changelog.md @@ -0,0 +1,21 @@ +--- +id: changelog +title: Changelog +--- + +## Fixes + +- Version bump from 3.0.3 to 3.0.4 +- Add tokenised fontFamily support in Input #3796 +- Make drag indicator optional in actionsheet #3797 +- Export Toast TS props definition #3795 +- Set fontFamily to heading in Heading component #3788 +- Fix SSR not working #3786 +- Fix box with linear gradient warning #3777 +- Add color prop in Select's TS definition #3779 +- Remove additional wrapper from Checkbox group #3798 +- Add a prop to render FAB outside of portal #3829 +- Fix input padding(top/bottom) not working on android #3825 +- Fix custom fonts not working on android for some cases #3821 + +For more details. Visit [releases](https://github.com/GeekyAnts/NativeBase/releases/tag/v3.0.4). diff --git a/versioned_docs/version-3.0.4/checkBox.md b/versioned_docs/version-3.0.4/checkBox.md new file mode 100644 index 000000000..81a7c5e6c --- /dev/null +++ b/versioned_docs/version-3.0.4/checkBox.md @@ -0,0 +1,104 @@ +--- +id: checkBox +title: CheckBox +--- + +import { ComponentTheme } from '../../src/components'; + +The `Checkbox` component is used in forms when a user needs to select multiple values from several options. + +## Examples + +### Basic + +```ComponentSnackPlayer path=primitives,Checkbox,basic.tsx + +``` + +### Controlled + +```ComponentSnackPlayer path=primitives,Checkbox,controlledCheckbox.tsx + +``` + +### Uncontrolled + +```ComponentSnackPlayer path=primitives,Checkbox,uncontrolledCheckbox.tsx + +``` + +### Disabled + +```ComponentSnackPlayer path=primitives,Checkbox,disabled.tsx + +``` + +### Invalid + +```ComponentSnackPlayer path=primitives,Checkbox,invalid.tsx + +``` + +### Custom Color + +```ComponentSnackPlayer path=primitives,Checkbox,customColor.tsx + +``` + +### Custom Icon + +```ComponentSnackPlayer path=primitives,Checkbox,customIcon.tsx + +``` + +### Size + +```ComponentSnackPlayer path=primitives,Checkbox,size.tsx + +``` + +### Checkbox Group + +```ComponentSnackPlayer path=primitives,Checkbox,checkboxGroup.tsx + +``` + +### Form Controlled + +```ComponentSnackPlayer path=primitives,Checkbox,FormControlled.tsx + +``` + +### Basic (With Ref) + +```ComponentSnackPlayer path=primitives,Checkbox,withRef.tsx + +``` + +## Props + +### Checkbox + +```ComponentPropTable path=primitives,Checkbox,Checkbox.tsx + +``` + +### Checkbox.Group + +```ComponentPropTable path=primitives,Checkbox,CheckboxGroup.tsx + +``` + +## Styling + + + +## Accessibility + +Uses React Native ARIA [@react-native-aria/checkbox](https://react-native-aria.geekyants.com/docs/useCheckbox) which follows the [Checkbox WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#checkbox). + +### Keyboard Interactions + +| Key | Description | +| ------- | ----------------------------- | +| `Space` | Checks/unchecks the checkbox. | diff --git a/versioned_docs/version-3.0.4/circularProgress.md b/versioned_docs/version-3.0.4/circularProgress.md new file mode 100644 index 000000000..961e5b1a0 --- /dev/null +++ b/versioned_docs/version-3.0.4/circularProgress.md @@ -0,0 +1,297 @@ +--- +id: circularProgress +title: CircularProgress +--- + +Circular Progress is used to indicate the progress for determinate and indeterminate processes. + +## Import + +```jsx +import { CircularProgress } from 'native-base'; +``` + +## Examples + +### Usage + +```SnackPlayer name=CircularProgress%20Usage +import React from 'react'; +import { + CircularProgress, + Heading, + Center, + NativeBaseProvider, +} from 'native-base'; +function CircularProgressComponent() { + return ( +
+ Default CircularProgress + +
+ ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### CircularProgress Sizes + +You can add a size prop to the CircularProgress to add a custom size or choose from defined sizes. + +```SnackPlayer name=CircularProgress%20Sizes +import React from 'react'; +import { + CircularProgress, + Heading, + Center, + NativeBaseProvider, +} from 'native-base'; +function CircularProgressComponent() { + return ( +
+ Changing the size + +
+ ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### CircularProgress Thickness + +You can add the thickness prop to update the thickness of the progress ring. + +```SnackPlayer name=CircularProgress%20Thickness +import React from 'react'; +import { + CircularProgress, + Heading, + Center, + NativeBaseProvider, +} from 'native-base'; +function CircularProgressComponent() { + return ( +
+ Changing the thickness + +
+ ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### CircularProgress Color + +You can add the color prop to apply any color that the theme contains. + +```SnackPlayer name=CircularProgress%20Color +import React from 'react'; +import { + CircularProgress, + Heading, + Center, + NativeBaseProvider, +} from 'native-base'; +function CircularProgressComponent() { + return ( +
+ Changing the color + +
+ ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### CircularProgress TrackColor + +You can add the trackColor prop to apply any color that the theme contains to the CircularProgress track. + +```SnackPlayer name=CircularProgress%20TrackColor +import React from 'react'; +import { + CircularProgress, + Heading, + Center, + NativeBaseProvider, +} from 'native-base'; +function CircularProgressComponent() { + return ( +
+ Changing the Track Color + +
+ ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### CircularProgress Min and Max + +You can add min and max props to manage what is the start and end value of your CircularProgress. + +```SnackPlayer name=CircularProgress%20min%20max +import React from 'react'; +import { + CircularProgress, + Heading, + Center, + NativeBaseProvider, +} from 'native-base'; +function CircularProgressComponent() { + return ( +
+ Min and Max + + 550% + +
+ ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### CircularProgress Label + +```SnackPlayer name=CircularProgress%20Label +import React from 'react'; +import { + CircularProgress, + Heading, + NativeBaseProvider, + Center, +} from 'native-base'; +function CircularProgressComponent() { + return ( +
+ Adding label + + 45% + +
+ ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Indeterminate Progress + +Setting the progress to indeterminate means that the value can't be determined upfront. Pass the isIndeterminate prop to activate this state. + +```SnackPlayer name=CircularProgress%20Indeterminate Progress +import React from 'react'; +import { + CircularProgress, + Center, + Heading, + NativeBaseProvider, +} from 'native-base'; +function CircularProgressComponent() { + return ( +
+ Indeterminate Progress + + 50% + +
+ ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Props + +| Name | Type | Description | Default | +| --------------- | ------------------------------------------------------ | ------------------------------------------------------------------------------------- | ------- | +| size | `4xl`,`3xl`,`2xl`, `xl`,`lg`, `md`, `sm`, `xs`, number | The size of circular progress. | `lg` | +| max | number | Maximum value defining 100% progress made (must be higher than 'min') | - | +| min | number | Minimum value defining 'no progress' (must be lower than 'max') | - | +| value | number | Current progress (must be between min/max) | - | +| isIndeterminate | boolean | Puts the component into indeterminate state. When passed, the 'value' prop is ignored | - | +| thickness | number, string | The thickness of the progress indicator | - | +| trackColor | string | The color name of the progress track. Use a color key from the theme object | - | +| color | string | The color of the progress indicator. Use a color key from the theme object | - | +| \_text | [TextProps](text.md#props) | Text styling for Label Text. | - | + +## Accessibility + +- On web and mobile, Progress has `role` set to `progressbar` to denote that it is a progress bar. +- On web, `aria-valuenow`, `aria-valuemin` and `aria-valuemax` to ensure the progress percent is visible to screen readers. +- On mobile, [accessibilityValue](https://reactnative.dev/docs/accessibility#accessibilityvalue) is used to ensure it's announced by Talkback and VoiceOver. diff --git a/versioned_docs/version-3.0.4/closeButton.md b/versioned_docs/version-3.0.4/closeButton.md new file mode 100644 index 000000000..eaea3b4cb --- /dev/null +++ b/versioned_docs/version-3.0.4/closeButton.md @@ -0,0 +1,69 @@ +--- +id: closeButton +title: CloseButton +--- + +`CloseButton` is essentially an IconButton with a close icon. It is used to handle the close functionality in feedback and overlay components like [`Alerts`](alert.md), [`Toasts`](toast.md), `Drawers` and [`Modals`](modal.md). + +## Import + +```jsx +import { CloseButton } from 'native-base'; +``` + +## Examples + +### Basic + +```SnackPlayer name=CloseButton%20Example +import React from 'react'; +import { CloseButton, NativeBaseProvider, Center } from 'native-base'; +function CloseButtonComponent () { + return ; +} + +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Sizes + +```SnackPlayer name=CloseButton%20Example(Sizes) +import React from 'react'; +import { CloseButton, Stack, NativeBaseProvider, Center } from 'native-base'; +function CloseButtonComponent () { + return ( + + + + + + ); +} + +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Props + +| Name | Type | Description | Default | +| ---------- | ---------------- | ----------------------------------------- | ------- | +| aria-label | string | An accessible label for the close button. | - | +| isDisabled | boolean | If true, the button will be disabled. | - | +| color | string | The color of the close icon. | - | +| size | `lg`, `md`, `sm` | The size of the close button. | `md` | diff --git a/versioned_docs/version-3.0.4/code.md b/versioned_docs/version-3.0.4/code.md new file mode 100644 index 000000000..661db1b6a --- /dev/null +++ b/versioned_docs/version-3.0.4/code.md @@ -0,0 +1,68 @@ +--- +id: code +title: Code +--- + +`Code` is a component used to display inline code. It is composed from the Box component with a mono font family (_Courier_ on ios) for displaying code. + +## Import + +```jsx +import { Code } from 'native-base'; +``` + +## Examples + +### Basic + +```SnackPlayer name=Code%20Basic +import React from 'react'; +import { Code, NativeBaseProvider, Center } from 'native-base'; +function CodeComponent () { + return Hello World!; +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Colors + +```SnackPlayer name=Code%20Example(Colors) +import React from 'react'; +import { Code, Stack, NativeBaseProvider, Center } from 'native-base'; +function CodeComponent () { + return ( + + let direction = "row"; + console.log('Hey there!'); + yarn add native-base + React Native + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Props + +`Code` implements **[Box](box.md)**, so all the Box Props can be passed to it. + +| Name | Type | Description | Default | +| ----------- | --------- | ----------------------------------------------------------------------------------------------------------------- | ------- | +| children | ReactNode | The content of the code. | - | +| colorScheme | string | The color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red"). | - | diff --git a/versioned_docs/version-3.0.4/collapse.md b/versioned_docs/version-3.0.4/collapse.md new file mode 100644 index 000000000..c8825c3ad --- /dev/null +++ b/versioned_docs/version-3.0.4/collapse.md @@ -0,0 +1,158 @@ +--- +id: collapse +title: Collapse +--- + +`Collapse` is used to create regions of content that can expand or collapse with a simple animation. + +## Implements + +- [`Box`](box.md) +- [`LayoutAnimation`](https://reactnative.dev/docs/layoutanimation) from [`React Native`](https://reactnative.dev) + +## Import + +```jsx +import { Collapse } from 'native-base'; +``` + +## Examples + +### Basic + +```SnackPlayer name=Collapse%20Usage +import React from 'react'; +import { NativeBaseProvider, Collapse, Text, Stack, Heading, Button, Center } from 'native-base'; +function CollapseComponent() { + const [show, setShow] = React.useState(false); + const handleToggle = () => setShow(!show); + return ( + + Default Collapse + + Candy canes macaroon croissant carrot cake soufflé toffee topping + pastry. Brownie lollipop brownie sesame snaps. Pastry gingerbread + biscuit sweet I love macaroon bear claw fruitcake oat cake. Jelly sweet + roll I love. Pastry pastry powder pie lemon drops chocolate topping + dessert. + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Animation Duration + +```SnackPlayer name=Collapse%20Animation Duration +import React from 'react'; +import { Collapse, Stack, Text, Heading, Button, NativeBaseProvider, Center } from 'native-base'; + +function CollapseComponent () { + const [show, setShow] = React.useState(false); + const handleToggle = () => setShow(!show); + return ( + + Collapse with duration + + Candy canes macaroon croissant carrot cake soufflé toffee topping + pastry. Brownie lollipop brownie sesame snaps. Pastry gingerbread + biscuit sweet I love macaroon bear claw fruitcake oat cake. Jelly sweet + roll I love. Pastry pastry powder pie lemon drops chocolate topping + dessert. + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### With Callbacks(onAnimationStart & onAnimationEnd) + +```SnackPlayer name=Collapse%20onAnimationStart & onAnimationEnd +import React from 'react'; +import { Collapse, Stack, Heading, Button, Text, NativeBaseProvider, Center } from 'native-base'; +function CollapseComponent () { + const [show, setShow] = React.useState(false); + const handleToggle = () => setShow(!show); + const [text, setText] = React.useState( + 'This text would change when the collapse animation start' + ); + const handleText = () => + setText( + show + ? 'Collapse is open' + : 'This text would change when the collapse animation start' + ); + const [color, setColor] = React.useState('emerald'); + const handleColorToggle = () => + setColor(color === 'emerald' ? 'indigo' : 'emerald'); + return ( + + Collapse with callbacks + {text} + + Candy canes macaroon croissant carrot cake soufflé toffee topping + pastry. Brownie lollipop brownie sesame snaps. Pastry gingerbread + biscuit sweet I love macaroon bear claw fruitcake oat cake. Jelly sweet + roll I love. Pastry pastry powder pie lemon drops chocolate topping + dessert. + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Props + +| Name | Type | Description | Default | +| ---------------- | -------- | ------------------------------------------------------------------------------- | ------- | +| isOpen | boolean | If true, the content will be visible. | - | +| duration | number | The animation duration(in ms) as it expands. | - | +| startingHeight | number | The height you want the content in it's collapsed state. Set to 0 by default. | - | +| endingHeight | number | The height you want the content in it's expanded state. Set to auto by default. | - | +| onAnimationStart | function | The function to be called when the collapse animation starts. | - | +| onAnimationEnd | function | The function to be called when the collapse animation starts. | - | + +## Accessibility +Collapse currently just provides a way to hide/show component. + +Make sure you follow the [disclosure accessibility spec](https://www.w3.org/TR/wai-aria-practices/examples/disclosure/disclosure-img-long-description.html) while implementing a collapse. \ No newline at end of file diff --git a/versioned_docs/version-3.0.4/colorMode.md b/versioned_docs/version-3.0.4/colorMode.md new file mode 100644 index 000000000..170412cbf --- /dev/null +++ b/versioned_docs/version-3.0.4/colorMode.md @@ -0,0 +1,152 @@ +--- +id: color-mode +title: Color mode (Dark Mode) +--- + +When you use the `NativebaseProvider` at the root of your app, you can automatically use color mode in your apps. + +By default, most components are dark mode compatible. To handle color mode manually in your application, use the `useColorMode` or `useColorModeValue` hooks. + +## useColorMode + +`useColorMode` is a React hook that gives you access to the current color mode, and a function to toggle the color mode. + +Calling toggleColorMode anywhere in your app tree toggles the color mode. + +## useColorModeValue + +`useColorModeValue` is a React hook used to change any value or style based on the color mode. It takes 2 arguments: the value in light mode, and the value in dark mode. + +```SnackPlayer name=ColorMode%20Usage +import React from 'react'; +import { + Heading, + useColorMode, + Button, + HStack, + Avatar, + Center, + useColorModeValue, + NativeBaseProvider +} from 'native-base'; + +function ColorModeExample () { + const { colorMode, toggleColorMode } = useColorMode(); + return ( + <> + I'm a Heading + + + + + + + ); +} + +const LocalWrapper = ({ children }) => { + const bg = useColorModeValue('gray.200', 'gray.800') + return ( +
+ {children} +
+ ); +}; + +export default function () { + return ( + + + + + + ); +} +``` + +## Default color mode + +You can set default color mode. By default, the color mode will be `light`. To support this, extend the default theme with a `config` + +```jsx +import { NativeBaseProvider, extendTheme, Text } from 'native-base'; + +// Define the config +const config = { + useSystemColorMode: false, + initialColorMode: 'dark', +}; + +// extend the theme +const customTheme = extendTheme({ config }); +function App() { + return ( + // pass itto NativeBaseProvider + + // Your component + + ); +} +``` + +## Persisting the color mode + +You can persist the color mode in you app by defining you color mode manager of type `StorageManager` and passing it to the NativeBaseProvider. This will retain the color mode even when the app is refreshed. + +```jsx +import React from 'react'; +import { NativeBaseProvider, StorageManager, ColorMode } from 'native-base'; +import AsyncStorage from '@react-native-async-storage/async-storage'; + +// Define the colorModeManager, +// here we are using react-native-async-storage (https://react-native-async-storage.github.io/async-storage/) +const colorModeManager: StorageManager = { + get: async () => { + try { + let val = await AsyncStorage.getItem('@color-mode'); + return val === 'dark' ? 'dark' : 'light'; + } catch (e) { + return 'light'; + } + }, + set: async (value: ColorMode) => { + try { + await AsyncStorage.setItem('@color-mode', value); + } catch (e) { + console.log(e); + } + }, +}; +export default function () { + return ( + // pass it to NativeBaseProvider + + // Your components + + ); +} +``` diff --git a/versioned_docs/version-3.0.4/container.md b/versioned_docs/version-3.0.4/container.md new file mode 100644 index 000000000..5b34afdc3 --- /dev/null +++ b/versioned_docs/version-3.0.4/container.md @@ -0,0 +1,57 @@ +--- +id: container +title: Container +--- + +The `Container` is used to constrain a content's width to the current breakpoint, while keeping it fluid. + +## Implements + +- [`Box`](box.md) + +## Usage + +To include content, wrap it in the Container component. + +## Example + +```SnackPlayer name=Container%20Example +import React from 'react'; +import { Container, Text, Heading, NativeBaseProvider, Center } from 'native-base'; +function ContainerComponent() { + return ( + + + A component library for the + + React Ecosystem + + + + NativeBase is a simple, modular and accessible component library that gives you building blocks to build you React applications. + + + ); +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Props + +**Container** implements **[Box](box.md)**, so all the Box Props can be passed to it. + +### Container + +| Name | Type | Description | Default | +| ------------- | ------- | --------------------------------------------------------- | ------- | +| centerContent | boolean | It'll center child elements based on their content width. | true | diff --git a/versioned_docs/version-3.0.4/customizingComponents.md b/versioned_docs/version-3.0.4/customizingComponents.md new file mode 100644 index 000000000..5bb08a180 --- /dev/null +++ b/versioned_docs/version-3.0.4/customizingComponents.md @@ -0,0 +1,160 @@ +--- +id: customizingComponents +title: Customising Components +--- + +Theme customisation is at the heart of NativeBase. Using NativeBase's `extendTheme` function, we can customise components. + +Components can be customised by overriding baseStyle/defaultProps or adding a new variant. + +Let's customise a Button component to include rounded borders and red colorScheme. + +## Basic + +```tsx +import React from 'react'; +import { NativeBaseProvider, extendTheme } from 'native-base'; + +export default function () { + const theme = extendTheme({ + components: { + Button: { + // Can simply pass default props to change default behaviour of components. + baseStyle: { + rounded: 'md', + }, + defaultProps: { + colorScheme: 'red', + }, + }, + Heading: { + // Can pass also function, giving you access theming tools + baseStyle: ({ colorMode }) => { + return { + color: colorMode === 'dark' ? 'red.300' : 'blue.300', + fontWeight: 'normal', + }; + }, + }, + }, + }); + return ( + {/* components */} + ); +} +``` + +As shown above, we can customize components by passing the **components** object with the **key** being the **name** of the **component**. Whereas you set `defaultProps` or `baseStyle` to customize the components. + +### Difference between baseStyle and defaultProps? + +#### Base Style + +- As the name suggests, it's used to define the base style of a component. +- Base style can be a function or a plain object. Use function if you want to get access to defaultProps, current colorMode (light/dark) and theme object. + +Take a look at an [example here](https://github.com/GeekyAnts/NativeBase/blob/v3-pre-beta/src/theme/components/button.ts#L5) + +#### Default Props + +- Default props can be used to initialize props of a component. +- For e.g. You have a Button component and it has 2 variants. i.e. outline, solid. You can use it like. + +Take a look at an [example here](https://github.com/GeekyAnts/NativeBase/blob/v3-pre-beta/src/theme/components/button.ts#L201) + +```jsx + + + + + + ); +} + +``` + +
+ +NativeBase ships with default styles for each components. [You can find it here](https://github.com/GeekyAnts/NativeBase/tree/v3-pre-beta/src/theme/components) diff --git a/versioned_docs/version-3.0.4/customizingFonts.md b/versioned_docs/version-3.0.4/customizingFonts.md new file mode 100644 index 000000000..1e2d89ffb --- /dev/null +++ b/versioned_docs/version-3.0.4/customizingFonts.md @@ -0,0 +1,87 @@ +--- +id: customizingFonts +title: Customising Fonts +--- + +Follow 3 simple steps to add a custom font family. + +### Loading fonts in Expo or React Native init project. + +[Refer this guide if you're using Expo](https://docs.expo.io/guides/using-custom-fonts/) + +[Refer this guide if you're using React Native init](https://medium.com/@aravindmnair/add-custom-fonts-to-react-native-0-60-easily-in-3-steps-fcd71459f4c9) + +### Extend NativeBase theme object. + +We extend the theme object and override `fontConfig` and `fonts` properties which define the mappings. + +This mapping is needed to make sure fontWeight, fontStyle properties work in all platforms. + +```jsx +import { NativeBaseProvider, extendTheme } from 'native-base'; + +const theme = extendTheme({ + fontConfig: { + Roboto: { + 100: { + normal: 'Roboto-Light', + italic: 'Roboto-LightItalic', + }, + 200: { + normal: 'Roboto-Light', + italic: 'Roboto-LightItalic', + }, + 300: { + normal: 'Roboto-Light', + italic: 'Roboto-LightItalic', + }, + 400: { + normal: 'Roboto-Regular', + italic: 'Roboto-Italic', + }, + 500: { + normal: 'Roboto-Medium', + }, + 600: { + normal: 'Roboto-Medium', + italic: 'Roboto-MediumItalic', + }, + // Add more variants + // 700: { + // normal: 'Roboto-Bold', + // }, + // 800: { + // normal: 'Roboto-Bold', + // italic: 'Roboto-BoldItalic', + // }, + // 900: { + // normal: 'Roboto-Bold', + // italic: 'Roboto-BoldItalic', + // }, + }, + }, + + // Make sure values below matches any of the keys in `fontConfig` + fonts: { + heading: 'Roboto', + body: 'Roboto', + mono: 'Roboto', + }, +}); + +export default function App() { + return ( + + + + ); +} +``` + +### Using fonts + +Fonts can be used as shown below. The below `Text` will be rendered in `Roboto-MediumItalic` font family. + +```jsx + +``` diff --git a/versioned_docs/version-3.0.4/customizingTheme.md b/versioned_docs/version-3.0.4/customizingTheme.md new file mode 100644 index 000000000..1aca05753 --- /dev/null +++ b/versioned_docs/version-3.0.4/customizingTheme.md @@ -0,0 +1,108 @@ +--- +id: customizingTheme +title: Customising Theme +--- + +import { NativeBaseProvider, Box } from 'native-base'; + +Theme is one core elements of NativeBase. You can customize NativeBase's theme as per your liking. NativeBase theme is complex object which looks like + +```tsx +// theme +{ + colors: {...}, + fontSizes: {...}, + fonts: {...}, + . + . + . + config: {...}, +} +``` + +It has many [other properties](default-theme) but in this recipe, we'll only update few of them (namely colors, fonts, and config) using NativeBase's `extendTheme` function. + +```tsx +import React from 'react'; +import { NativeBaseProvider, extendTheme } from 'native-base'; +import { Content } from './Content'; + +export default function () { + const theme = extendTheme({ + colors: { + // Add new color + primary: { + 50: '#E3F2F9', + 100: '#C5E4F3', + 200: '#A2D4EC', + 300: '#7AC1E4', + 400: '#47A9DA', + 500: '#0088CC', + 600: '#007AB8', + 700: '#006BA1', + 800: '#005885', + 900: '#003F5E', + }, + // Redefinig only one shade, rest of the color will remain same. + amber: { + 400: '#d97706', + }, + }, + config: { + // Changing initialColorMode to 'dark' + initialColorMode: 'dark', + }, + }); + + return ( + + + + ); +} +``` + +In the above example, the following changes have been made: + +- Added a new color named **primary**. +- Updated one of the shade of **amber** color. +- Updated the initial color mode to **dark**. Default is **light**. +- Finally passed the new **theme** object to the **NativeBaseProvider**. + +### Using the new tokens in components + +```jsx live +function App() { + const theme = extendTheme({ + colors: { + // Add new color + primary: { + 50: '#E3F2F9', + 100: '#C5E4F3', + 200: '#A2D4EC', + 300: '#7AC1E4', + 400: '#47A9DA', + 500: '#0088CC', + 600: '#007AB8', + 700: '#006BA1', + 800: '#005885', + 900: '#003F5E', + }, + // Redefinig only one shade, rest of the color will remain same. + amber: { + 400: '#d97706', + }, + }, + config: { + // Changing initialColorMode to 'dark' + initialColorMode: 'dark', + }, + }); + + return ( + + + + ); +} +``` diff --git a/versioned_docs/version-3.0.4/darkMode.md b/versioned_docs/version-3.0.4/darkMode.md new file mode 100644 index 000000000..1f58b9c59 --- /dev/null +++ b/versioned_docs/version-3.0.4/darkMode.md @@ -0,0 +1,89 @@ +--- +id: darkMode +title: Making components dark mode compatible +--- + +By default, most of NativeBase's components are dark mode compatible. In some scenario, you might need to make your component respond to color mode. There are 2 way to achieve this: + +1. By updating component's theme +2. By using useColorModeValue + +## 1. By updating component's theme + +In this approach we use NativeBase's `extendTheme` function to customise the components and the use themeTools to make the component dark mode compatible. + +Note: Changes on the theme will be reflected on the entire application. + +```tsx +import React from 'react'; +import { NativeBaseProvider, themeTools } from 'native-base'; +import { extendTheme } from 'native-base'; +import { Content } from './Content'; + +export default function () { + const theme = extendTheme({ + components: { + Heading: { + baseStyle: (props: any) => { + return { + color: themeTools.mode('red.300', 'blue.300')(props), + }; + }, + }, + }, + }); + return ( + + + + ); +} +``` + +In the above example, the Heading component's color property will now respond to change in color, namely in light mode it will be red (red.300) colored and in dark mode it will blue (blue.300) colored. + +## 2. By using useColorModeValue + +In this approach we use NativeBase's `useColorModeValue` function and update specific props instead of updating the entire theme. + +Note: Changes on the theme will be reflected on the entire application. + +```tsx +import React from 'react'; +import { useColorModeValue, Button } from 'native-base'; + +export default function () { + const colorScheme = useColorModeValue('teal', 'amber'); + const variant = useColorModeValue('solid', 'outline'); + + return ( + + ); +} +``` + +In the above example, you'll get a **solid teal Button** in **light** mode whereas an **outline amber Button** in **dark** mode. You can get creative and make other properties respond to the color mode as well. + +## 3. By using \_ligth and \_dark props + +In this approach we pass the required props inside \_light and \_dark based on the requirement. + +```tsx +import React from 'react'; +import { Button } from 'native-base'; + +export default function () { + return ( + + ); +} +``` + +In the above example, you'll get a **teal Button** in **light** mode whereas an **amber Button** in **dark** mode. You can get creative and make other properties respond to the color mode as well. diff --git a/versioned_docs/version-3.0.4/datePicker.md b/versioned_docs/version-3.0.4/datePicker.md new file mode 100644 index 000000000..2d6c48701 --- /dev/null +++ b/versioned_docs/version-3.0.4/datePicker.md @@ -0,0 +1,6 @@ +--- +id: date-picker +title: DatePicker +--- + +## Coming Soon diff --git a/versioned_docs/version-3.0.4/default-theme.md b/versioned_docs/version-3.0.4/default-theme.md new file mode 100644 index 000000000..6126f0909 --- /dev/null +++ b/versioned_docs/version-3.0.4/default-theme.md @@ -0,0 +1,212 @@ +--- +id: default-theme +title: Default Theme +--- + +import { ColorsBlock, FontBlocks, SpaceBlocks } from "/src/components/index"; + +The theme object is where you define your application's color palette, type scale, font stacks, breakpoints, border radius values, and more. + +Theming in NativeBase is based on the **[Styled System Theme Specification](https://system-ui.com/theme/)** + +## Colors + +You can add a `theme.colors` object to provide colors for your project. By default these colors can be referenced by the `color`, `borderColor`, `backgroundColor`, etc.. props. + +We recommend adding a palette that ranges from `50` to `900`. Tools like **[Smart Swatch](https://smart-swatch.netlify.app/)**, **[Palx](https://palx.jxnblk.com/)** are available to generate these palettes. + + + +## Typography + +To manage Typography options, the theme object supports the following keys: + +- `fonts` (font families) +- `fontSizes` +- `fontWeights` +- `lineHeights` +- `letterSpacings` + +```jsx +const typography = { + letterSpacings: { + xxs: -1.5, + xs: -0.5, + sm: 0, + md: 0.1, + lg: 0.15, + xl: 0.25, + '2xl': 0.4, + '3xl': 0.5, + '4xl': 1.25, + '5xl': 1.5, + }, + lineHeights: { + none: 1, + shorter: 1.25, + short: 1.375, + base: 1.5, + tall: 1.625, + taller: '2', + 3: '12px', + 4: '16px', + 5: '20px', + 6: '24px', + 7: '28px', + 8: '32px', + 9: '36px', + 10: '40px', + }, + fontWeights: { + hairline: 100, + thin: 200, + light: 300, + normal: 400, + medium: 500, + semibold: 600, + bold: 700, + extrabold: 800, + black: 900, + }, + fonts: { + heading: '', + body: '', + mono: '', + }, + fontSizes: { + xxs: 10, + xs: 12, + sm: 14, + md: 16, + lg: 18, + xl: 20, + '2xl': 24, + '3xl': 30, + '4xl': 36, + '5xl': 48, + '6xl': 60, + '7xl': 72, + '8xl': 96, + '9xl': 128, + }, +}; +``` + + + +## Size + +The `size` key allows you to customize the global spacing and sizing scale for your project. By default these spacing value can be referenced by the `padding`, `margin`, and `top`, `left`, `right`, `bottom` props. + + + +## Shadows + +The `shadow` key allows you to customize the global box shadow for your project. + +```jsx +export default { + 0: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 1, + }, + shadowOpacity: 0.18, + shadowRadius: 1.0, + elevation: 1, + }, + 1: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 1, + }, + shadowOpacity: 0.2, + shadowRadius: 1.41, + elevation: 2, + }, + 2: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 1, + }, + shadowOpacity: 0.22, + shadowRadius: 2.22, + elevation: 3, + }, + 3: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 2, + }, + shadowOpacity: 0.23, + shadowRadius: 2.62, + elevation: 4, + }, + 4: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 2, + }, + shadowOpacity: 0.25, + shadowRadius: 3.84, + elevation: 5, + }, + 5: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 3, + }, + shadowOpacity: 0.27, + shadowRadius: 4.65, + elevation: 6, + }, + 6: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 3, + }, + shadowOpacity: 0.29, + shadowRadius: 4.65, + elevation: 7, + }, + 7: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 4, + }, + shadowOpacity: 0.3, + shadowRadius: 4.65, + elevation: 8, + }, + 8: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 4, + }, + shadowOpacity: 0.32, + shadowRadius: 5.46, + elevation: 9, + }, + 9: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 5, + }, + shadowOpacity: 0.34, + shadowRadius: 6.27, + elevation: 10, + }, +}; +``` + +Still confused? You can always explore [here](https://github.com/GeekyAnts/nativebase-v3/tree/development/src/theme/base). diff --git a/versioned_docs/version-3.0.4/design-tokens.md b/versioned_docs/version-3.0.4/design-tokens.md new file mode 100644 index 000000000..8198af8e3 --- /dev/null +++ b/versioned_docs/version-3.0.4/design-tokens.md @@ -0,0 +1,69 @@ +--- +id: design-tokens +title: Design tokens +--- + +Design tokens are the values or constants needed to construct a design system. These values can represent spacing, color, typography etc. Design tokens help to achieve consistency in building user interfaces across all platforms. + +Let's take an example by defining a space and color design tokens. + +```jsx title="colors" +const colors = { + primary: { + 50: '#ecfeff', + 100: '#cffafe', + 200: '#a5f3fc', + 300: '#67e8f9', + 400: '#22d3ee', + 500: '#06b6d4', + 600: '#0891b2', + 700: '#0e7490', + 800: '#155e75', + 900: '#164e63', + }, +}; +``` + +```jsx title="spacing" +export const spacing = { + px: 1, + 1: 4, + 2: 8, + 3: 12, + 4: 16, + 5: 20, + 6: 24, + 7: 28, + 8: 32, + 9: 36, + 10: 40, + 12: 48, + 16: 64, + 20: 80, + 24: 96, + 32: 128, + 40: 160, + 48: 192, + 56: 224, + 64: 256, + 72: 288, + 80: 320, + 96: 384, +}; +``` + +We can use the above tokens in our code instead of using absolute values. + +```jsx title="using the above tokens in Box component" + +``` + +The above Box will be translated to + +```jsx title="actual applied styles" + +``` + +With NativeBase, you can create your own design system. NativeBase follows [styled-system's specification](https://styled-system.com/theme-specification/) to construct design system. + +Checkout the **[default NativeBase theme](default-theme)** and how to customize it **[here](customizingTheme)**. diff --git a/versioned_docs/version-3.0.4/divider.md b/versioned_docs/version-3.0.4/divider.md new file mode 100644 index 000000000..70f897268 --- /dev/null +++ b/versioned_docs/version-3.0.4/divider.md @@ -0,0 +1,56 @@ +--- +id: divider +title: Divider +--- + +import { ComponentTheme } from '../../src/components'; + +`Divider` is used to visually separate content in a list or group. + +## **Import** + +```jsx +import { Divider } from 'native-base'; +``` + +## Examples + +### Basic + +The Divider displays a thin horizontal or vertical line. + +```ComponentSnackPlayer path=composites,Divider,Basic.tsx + +``` + +### Divider Orientation + +Pass the `orientation` prop and set it to either `horizontal` or `vertical`. + +> **Note:** If the horizontal orientation is used, make sure that the parent element is assigned a width and If the vertical orientation is used, make sure that the parent element is assigned a height. + +```ComponentSnackPlayer path=composites,Divider,Orientation.tsx + +``` + +### Composition + +You can use `bg` or `backgroundColor` to change the divider's color and `width` and `height` to change its width and height respectively. + +```ComponentSnackPlayer path=composites,Divider,Composition.tsx + +``` + +## Props + +```ComponentPropTable path=composites,Divider,index.tsx + +``` + +## Styling + + + +## Accessibility + +- Divider has role set to `separator` and `aria-orientation` to either `horizontal` or `vertical`. diff --git a/versioned_docs/version-3.0.4/faq.md b/versioned_docs/version-3.0.4/faq.md new file mode 100644 index 000000000..d366df99c --- /dev/null +++ b/versioned_docs/version-3.0.4/faq.md @@ -0,0 +1,6 @@ +--- +id: faq +title: FAQ's +--- + +NativeBase FAQ's Coming Soon. diff --git a/versioned_docs/version-3.0.4/flatList.md b/versioned_docs/version-3.0.4/flatList.md new file mode 100644 index 000000000..ae9f1392e --- /dev/null +++ b/versioned_docs/version-3.0.4/flatList.md @@ -0,0 +1,18 @@ +--- +id: flatList +title: FlatList +--- + +A component for rendering performant scrollable lists. + +## Example + +```ComponentSnackPlayer path=basic,FlatList,Basic.tsx + +``` + +## Props + +```ComponentPropTable path=basic,FlatList,FlatList.tsx showStylingProps=true + +``` diff --git a/versioned_docs/version-3.0.4/flex.md b/versioned_docs/version-3.0.4/flex.md new file mode 100644 index 000000000..1667dabac --- /dev/null +++ b/versioned_docs/version-3.0.4/flex.md @@ -0,0 +1,44 @@ +--- +id: flex +title: Flex +--- + +`Flex` is a [`Box`](box.md) with `display: flex` and comes with helpful style shorthand. + +## Import + +```jsx +import { Flex, Spacer } from 'native-base'; +``` + +- `Flex`: a **[Box](box.md)** with `display: flex` +- `Spacer`: creates an adjustable, empty space that can be used to tune the spacing between child elements within `Flex` + +## Usage + +Flex components comes with some helpful shorthand props: + +- `flexDirection` is `direction` +- `flexWrap` is `wrap` +- `alignItems` is `align` +- `justifyContent` is `justify` + +While you can pass the verbose props, using the shorthand can save you some time. + +## Example + +```ComponentSnackPlayer path=primitives,Flex,basic.tsx + +``` + +### Using the Spacer + +You can pass Spacer to add Space between Flex items. + +```ComponentSnackPlayer path=primitives,Flex,spacer.tsx + +``` + +## Props + +**Flex** implements **[Box](box.md)**, so all the Box Props can be passed to it, i.e. [`color`](utility-props#color-and-background-color), [`space`](utility-props#margin-and-padding), [`layout`](utility-props#layout-width-and-height), [`flexbox`](utility-props#flexbox) & [`border`](utility-props#borders) props from [style-system](utility-props). diff --git a/versioned_docs/version-3.0.4/form.md b/versioned_docs/version-3.0.4/form.md new file mode 100644 index 000000000..726d11383 --- /dev/null +++ b/versioned_docs/version-3.0.4/form.md @@ -0,0 +1,199 @@ +--- +id: form +title: Form with Validation +--- + +Apps often require users to enter information into a text field. For example, you might require users to log in with an email address and password combination. + +To make apps secure and easy to use, check whether the information the user has provided is valid. If the user has correctly filled out the form, process the information. If the user submits incorrect information, display a friendly error message letting them know what went wrong. + +## Example + +In this example, learn how to add validation to a form that has a single text field using the following steps: + +1. Create an Input wrapped in FormControl. +2. Add validation logic. +3. Create a button to validate and submit the form. + +### Step 1 + +Create an Input wrapped in FormControl. + +```SnackPlayer name=Form%20Example +import React from "react"; +import { + VStack, + FormControl, + Input, + NativeBaseProvider, + Center +} from "native-base"; + +function BuildingAFormExample() { + const [formData, setData] = React.useState({}); + + return ( + + + Name + setData({ ...formData, name: value })} + /> + + Name should contain atleast 3 character. + + Error Name + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Step 2 + +Add validation logic. + +```SnackPlayer name=Form%20Example(Validation) +import React from 'react'; +import { + VStack, + FormControl, + Input, + NativeBaseProvider, + Center +} from 'native-base'; + + +function BuildingAFormExample() { + const [formData, setData] = React.useState({}); + const [errors, setErrors] = React.useState({}); + const validate = () => { + if (formData.name === undefined) { + setErrors({ + ...errors, + name: 'Name is required', + }); + return false; + } else if (formData.name.length < 3) { + setErrors({ + ...errors, + name: 'Name is too short', + }); + return false; + } + return true; + }; + + return ( + + + Name + setData({ ...formData, name: value })} + /> + + Name should contain atleast 3 character. + + Error Name + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Step 3 + +Create a button to validate and submit the form. + +```SnackPlayer name=Form%20Example(Validate and Submit) +import React from 'react'; +import { + VStack, + Button, + FormControl, + Input, + NativeBaseProvider, + Center +} from 'native-base'; + +function BuildingAFormExample() { + const [formData, setData] = React.useState({}); + const [errors, setErrors] = React.useState({}); + const validate = () => { + if (formData.name === undefined) { + setErrors({ + ...errors, + name: 'Name is required', + }); + return false; + } else if (formData.name.length < 3) { + setErrors({ + ...errors, + name: 'Name is too short', + }); + return false; + } + return true; + }; + + const onSubmit = () => { + validate() ? console.log('Submitted') : console.log('Validation Failed'); + }; + + return ( + + + Name + setData({ ...formData, name: value })} + /> + {'name' in errors ? + Error +: + + + Name should contain atleast 3 character. + + } + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Community Integration + +NativeBase can be used with other popular Form libraries like [`Formik`](nativebase-formik-ui.md) and [`React Hook Forms`](reactHooksForm.md) as well. For more details checkout Community Integration section of the docs. diff --git a/versioned_docs/version-3.0.4/formControl.md b/versioned_docs/version-3.0.4/formControl.md new file mode 100644 index 000000000..560499ffd --- /dev/null +++ b/versioned_docs/version-3.0.4/formControl.md @@ -0,0 +1,52 @@ +--- +id: formControl +title: FormControl +--- + +import { ComponentTheme } from '../../src/components'; + +`FormControl` provides context such as `isInvalid`, `isDisabled`, and `isRequired` to form elements. + +## Examples + +### Basic + +```ComponentSnackPlayer path=composites,FormControl,Usage.tsx + +``` + +### Custom Style + +```ComponentSnackPlayer path=composites,FormControl,CustomStyle.tsx + +``` + +## Props + +### FormControl + +```ComponentPropTable path=composites,FormControl,FormControl.tsx + +``` + +### FormControl.Label + +```ComponentPropTable path=composites,FormControl,FormControlLabel.tsx + +``` + +### FormControl.ErrorMessage + +```ComponentPropTable path=composites,FormControl,FormControlErrorMessage.tsx + +``` + +### FormControl.HelperText + +```ComponentPropTable path=composites,FormControl,FormControlHelperText.tsx + +``` + +## Styling + + diff --git a/versioned_docs/version-3.0.4/hStack.md b/versioned_docs/version-3.0.4/hStack.md new file mode 100644 index 000000000..276f3d442 --- /dev/null +++ b/versioned_docs/version-3.0.4/hStack.md @@ -0,0 +1,24 @@ +--- +id: hStack +title: HStack / Row +--- + +`HStack` aligns items horizontally. `Row` is also an alias for `HStack`. + +## Import + +```jsx +import { HStack } from 'native-base'; +``` + +## Examples + +```ComponentSnackPlayer path=primitives,HStack,basic.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Stack,HStack.tsx + +``` diff --git a/versioned_docs/version-3.0.4/heading.md b/versioned_docs/version-3.0.4/heading.md new file mode 100644 index 000000000..971b44a20 --- /dev/null +++ b/versioned_docs/version-3.0.4/heading.md @@ -0,0 +1,56 @@ +--- +id: heading +title: Heading +--- + +import { ComponentTheme } from '../../src/components'; + +Headings are used for rendering headlines. `Heading` composes [`Text`](text.md) so you can use all the style props. + +## Import + +```jsx +import { Heading } from 'native-base'; +``` + +## Example + +### Basic + +```ComponentSnackPlayer path=primitives,Heading,Basic.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=primitives,Heading,Sizes.tsx + +``` + +### Truncate + +```ComponentSnackPlayer path=primitives,Heading,Truncate.tsx + +``` + +### Override + +```ComponentSnackPlayer path=primitives,Heading,OverridenStyle.tsx + +``` + +### Composition + +```ComponentSnackPlayer path=primitives,Heading,Composition.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Heading,index.tsx + +``` + +## Styling + + diff --git a/versioned_docs/version-3.0.4/icon.md b/versioned_docs/version-3.0.4/icon.md new file mode 100644 index 000000000..b1438011d --- /dev/null +++ b/versioned_docs/version-3.0.4/icon.md @@ -0,0 +1,54 @@ +--- +id: icon +title: Icon +--- + +You can use icons in multiple ways in NativeBase: + +- Create icon by creating an SVG Icon +- Create icon using createIcon function and use it as a component +- Use a third-party icon library ( such as [@expo/vector-icons](https://github.com/expo/vector-icons) ), with `as` prop. + +## Examples + +### NativeBase Icons + +We provides a set of commonly used interface icons. So you can directly use them in your project. All our icons are create using [`createIcon`](icon#createicon) function from NativeBase. + +```ComponentSnackPlayer path=primitives,Icon,AllIcons.tsx + +``` + +### Basic + +```ComponentSnackPlayer path=primitives,Icon,Basic.tsx + +``` + +Apart from the icons provided by [@expo/vector-icon](https://github.com/expo/vector-icons), you can also create custom icons using SVG. You can use all the components from [react-native-svg](https://github.com/react-native-svg/react-native-svg). + +### Custom Icon + +```ComponentSnackPlayer path=primitives,Icon,CustomIcon.tsx + +``` + +### Create Icon + +```ComponentSnackPlayer path=primitives,Icon,CreateIcon.tsx + +``` + +## Props + +### Icon + +```ComponentPropTable path=primitives,Icon,Icon.tsx showStylingProps=true + +``` + +### createIcon + +```ComponentPropTable path=primitives,Icon,createIcon.tsx + +``` diff --git a/versioned_docs/version-3.0.4/iconButton.md b/versioned_docs/version-3.0.4/iconButton.md new file mode 100644 index 000000000..dcf790c3f --- /dev/null +++ b/versioned_docs/version-3.0.4/iconButton.md @@ -0,0 +1,43 @@ +--- +id: iconButton +title: IconButton +--- + +import { ComponentTheme } from '../../src/components'; + +`IconButton` composes the `Button` component. It is generally used to make an Icon pressable. + +## Examples + +### Basic + +```ComponentSnackPlayer path=composites,IconButton,Basic.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=composites,IconButton,Basic.tsx + +``` + +### Variants + +```ComponentSnackPlayer path=composites,IconButton,Basic.tsx + +``` + +## Props + +```ComponentPropTable path=composites,IconButton,index.tsx + +``` + +## Styling + + + +## Accessibility + +- Use accessibilityLabel for labelling icon buttons to make sure it's announced by screen reader devices. +- IconButton has a `role` set to [button](https://www.w3.org/TR/wai-aria-practices-1.2/#button). diff --git a/versioned_docs/version-3.0.4/image.md b/versioned_docs/version-3.0.4/image.md new file mode 100644 index 000000000..550e56ec4 --- /dev/null +++ b/versioned_docs/version-3.0.4/image.md @@ -0,0 +1,49 @@ +--- +id: image +title: Image +--- + +Generic Image components from [React Native](https://reactnative.dev). + +## Implements + +- [`Image`](https://reactnative.dev/docs/image) from [React Native](https://reactnative.dev). +- You can use all props of React native Image. + +## Examples + +### Basic + +```ComponentSnackPlayer path=primitives,Image,Basic.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=primitives,Image,Sizes.tsx + +``` + +### Border Radius + +```ComponentSnackPlayer path=primitives,Image,BorderRadius.tsx + +``` + +### Fallback + +```ComponentSnackPlayer path=primitives,Image,FallbackSupport.tsx + +``` + +### Basic (With Ref) + +```ComponentSnackPlayer path=primitives,Image,WithRef.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Image,index.tsx showStylingProps=true + +``` diff --git a/versioned_docs/version-3.0.4/input.md b/versioned_docs/version-3.0.4/input.md new file mode 100644 index 000000000..9dcf9e138 --- /dev/null +++ b/versioned_docs/version-3.0.4/input.md @@ -0,0 +1,76 @@ +--- +id: input +title: Input +--- + +import { ComponentTheme } from '../../src/components'; + +The `Input` component is a component that is used to get user input in a text field. + +## Examples + +### Basic + +```ComponentSnackPlayer path=primitives,Input,Basic.tsx + +``` + +### Input Sizes + +```ComponentSnackPlayer path=primitives,Input,Size.tsx + +``` + +### Input Variants + +```ComponentSnackPlayer path=primitives,Input,Variant.tsx + +``` + + + +### Input Elements + +```ComponentSnackPlayer path=primitives,Input,Elements.tsx + +``` + +### Password Input + +```ComponentSnackPlayer path=primitives,Input,Masked.tsx + +``` + +### Controlled Input + +```ComponentSnackPlayer path=primitives,Input,Controlled.tsx + +``` + +### Form Controlled + +```ComponentSnackPlayer path=primitives,Input,FormControlled.tsx + +``` + +## Props + +### Input + +```ComponentPropTable path=primitives,Input,Input.tsx showStylingProps=true + +``` + +### Input.Group + +```ComponentPropTable path=primitives,Input,InputGroup.tsx + +``` + +## Styling + + diff --git a/versioned_docs/version-3.0.4/install-cra.mdx b/versioned_docs/version-3.0.4/install-cra.mdx new file mode 100644 index 000000000..ba24220f0 --- /dev/null +++ b/versioned_docs/version-3.0.4/install-cra.mdx @@ -0,0 +1,127 @@ +--- +id: install-cra +title: Install in Create React App project +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +import { TileLink } from '../../src/components'; + + + + + +The easiest way to get started with NativeBase in create react app is using NativeBase template. + +### JavaScript + +```bash +npx create-react-app my-app --template nativebase +cd my-app/ +yarn start +``` + +### TypeScript + +```bash +npx create-react-app my-app --template nativebase-typescript +cd my-app/ +yarn start +``` + + + + + +Create a new CRA project If not exist + +```bash +npx create-react-app my-app +cd my-app +``` + +[Refer this guide](https://necolas.github.io/react-native-web/docs/installation/) if you need additional configurations. + +### Install dependencies + + + + + +```bash +yarn add react-native-web native-base react-native-svg styled-components styled-system react-native-safe-area-context +``` + + + + + +```bash +npm install react-native-web native-base react-native-svg styled-components styled-system react-native-safe-area-context +``` + + + + + +### Run the Hello world example + +Put the below code in your App.js + +```jsx +import React from 'react'; +import { NativeBaseProvider, Box } from 'native-base'; + +function App() { + return ( + + Hello world + + ); +} +``` + + + + + +
+ +
+ +
+
+
+ + +
+
+ +
+
+
diff --git a/versioned_docs/version-3.0.4/install-expo.mdx b/versioned_docs/version-3.0.4/install-expo.mdx new file mode 100644 index 000000000..4b77d6efe --- /dev/null +++ b/versioned_docs/version-3.0.4/install-expo.mdx @@ -0,0 +1,103 @@ +--- +id: install-expo +title: Install in Expo project +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +import { TileLink } from '../../src/components'; + +Expo helps you to create universal (iOS, Android and Web) React Native apps with no build configuration. + +### Create a new expo project + +```bash +npm install --global expo-cli +expo init my-project +cd my-project/ +``` + +[Refer this link](https://docs.expo.io/) for additional information on Expo and setting up an Expo starter app. + +### Install dependencies + + + + + +```bash +yarn add native-base styled-components styled-system +``` + + + + + +```bash +npm install native-base styled-components styled-system +``` + + + + + +```bash +expo install react-native-svg +``` + +```bash +expo install react-native-safe-area-context +``` + +### Run the Hello world example + +Put the below code in your App.js + +```jsx +import React from 'react'; +import { NativeBaseProvider, Box } from 'native-base'; + +function App() { + return ( + + Hello world + + ); +} +``` + +
+ minions clapping +
+ +
+
+
+ + +
+
+ +
+
+
diff --git a/versioned_docs/version-3.0.4/install-next.mdx b/versioned_docs/version-3.0.4/install-next.mdx new file mode 100644 index 000000000..dc9dbca16 --- /dev/null +++ b/versioned_docs/version-3.0.4/install-next.mdx @@ -0,0 +1,263 @@ +--- +id: install-next +title: Install in Next.js project +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +import { TileLink } from '../../src/components'; + + + + + +### Create a new project using Next.js CLI with NativeBase template + +
+ + + + +

Choose your preferred setting and start your development swiftly 🚀

+ +

Plain Javascript

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

With Typescript

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

Choose your preferred setting and start your development swiftly 🚀

+ +

Plain Javascript

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

With Typescript

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

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

+
+
+
+ Scan with the + + + + Expo app on your Android device to see the special dish we cooked + for you! +
+ +
+
+
+ +
+
+
+
+
+ +
+
+
diff --git a/versioned_docs/version-3.0.4/link.md b/versioned_docs/version-3.0.4/link.md new file mode 100644 index 000000000..5e77da915 --- /dev/null +++ b/versioned_docs/version-3.0.4/link.md @@ -0,0 +1,68 @@ +--- +id: link +title: Link +--- + +import { ComponentTheme } from '../../src/components'; + +`Links` are accessible elements used primarily for navigation. This component is styled to resemble a hyperlink. + +## **Import** + +```jsx +import { Link } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=primitives,Link,Basic.tsx + +``` + +### External Link + +```ComponentSnackPlayer path=primitives,Link,ExternalLink.tsx + +``` + +### Link with Underline + +```ComponentSnackPlayer path=primitives,Link,UnderlineLink.tsx + +``` + +### Link custom onPress + +```ComponentSnackPlayer path=primitives,Link,CustomOnPress.tsx + +``` + +### Link around containers + +```ComponentSnackPlayer path=primitives,Link,CompositeLink.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Link,index.tsx + +``` + + + +## Styling + + + +## Accessibility + +Adheres to the [Link WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#link) diff --git a/versioned_docs/version-3.0.4/list.md b/versioned_docs/version-3.0.4/list.md new file mode 100644 index 000000000..84f8d3dfc --- /dev/null +++ b/versioned_docs/version-3.0.4/list.md @@ -0,0 +1,64 @@ +--- +id: list +title: List +--- + +List is used to display list items. + +## Examples + +### Basic + +```ComponentSnackPlayer path=primitives,List,Basic.tsx + +``` + +### Ordered List + +```ComponentSnackPlayer path=primitives,List,OrderedList.tsx + +``` + +### Unordered List + +```ComponentSnackPlayer path=primitives,List,UnorderedList.tsx + +``` + +### Styled List + +```ComponentSnackPlayer path=primitives,List,StylingList.tsx + +``` + +### Pressable List + +```ComponentSnackPlayer path=primitives,List,PressableList.tsx + +``` + +### List with ListIcon + +```ComponentSnackPlayer path=primitives,List,ListWithIcon.tsx + +``` + +### Virtualized List + +```ComponentSnackPlayer path=primitives,List,VirtualizedList.tsx + +``` + +## Props + +### List + +```ComponentPropTable path=primitives,List,List.tsx + +``` + +### List.Item + +```ComponentPropTable path=primitives,List,ListItem.tsx + +``` \ No newline at end of file diff --git a/versioned_docs/version-3.0.4/loginsignupforms.md b/versioned_docs/version-3.0.4/loginsignupforms.md new file mode 100644 index 000000000..ea7c4c056 --- /dev/null +++ b/versioned_docs/version-3.0.4/loginsignupforms.md @@ -0,0 +1,217 @@ +--- +id: loginsignupforms +title: Login/Signup Forms +--- + +## Example + +### Login Form + +```SnackPlayer name=login dependencies=react-native-linear-gradient +import * as React from 'react'; +import { MaterialCommunityIcons, Ionicons } from '@expo/vector-icons'; +import { + NativeBaseProvider, + Box, + Text, + Heading, + VStack, + FormControl, + Input, + Link, + Button, + Icon, + IconButton, + HStack, + Divider +} from 'native-base'; + +export default function App() { + + return ( + + + + Welcome + + + Sign in to continue! + + + + + + Email ID + + + + + + Password + + + + Forget Password? + + + + + + + } + color='muted.700' + size='sm' + /> + } + /> + } + color='muted.700' + size="sm" + /> + } + /> + } + color='muted.700' + size="sm" + /> + } + /> + + + + I'm a new user. + + Sign Up + + + + + + ); +} +``` + +### Signup Form + +```SnackPlayer name=Signup dependencies=react-native-linear-gradient +import * as React from 'react'; +import { MaterialCommunityIcons, Ionicons } from '@expo/vector-icons'; +import { + NativeBaseProvider, + Box, + Text, + Heading, + VStack, + FormControl, + Input, + Link, + Button, + Icon, + IconButton, + HStack, + Divider +} from 'native-base'; + +export default function App() { + + return ( + + + + Welcome + + + Sign up to continue! + + + + + + Email + + + + + + Password + + + + + + Confirm Password + + + + + + + + } + color='muted.700' + size='sm' + /> + } + /> + } + color='muted.700' + size="sm" + /> + } + /> + } + color='muted.700' + size="sm" + /> + } + /> + + + + + + ); +} +``` diff --git a/versioned_docs/version-3.0.4/menu.md b/versioned_docs/version-3.0.4/menu.md new file mode 100644 index 000000000..736456663 --- /dev/null +++ b/versioned_docs/version-3.0.4/menu.md @@ -0,0 +1,94 @@ +--- +id: menu +title: Menu +--- + +import { ComponentTheme } from '../../src/components'; + +A dropdown menu for the common dropdown menu button design pattern. + +## Import + +NativeBase uses 5 components for rendering menus: + +- `Menu`: The wrapper component provides context, state, and focus management. +- `Menu.Item`: The trigger that handles menu selection. +- `Menu.Group`: A wrapper to group related menu items. +- `Menu.OptionGroup`: A wrapper for checkable menu items (radio and checkbox). +- `Menu.ItemOption`: The checkable menu item, to be used with `MenuOptionGroup`. + +```jsx +import { Menu } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=composites,Menu,Basic.tsx + +``` + +### Group + +```ComponentSnackPlayer path=composites,Menu,Group.tsx + +``` + +### MenuOptionGroups + +```ComponentSnackPlayer path=composites,Menu,MenuOptionsGroup.tsx + +``` + +### Menu Placement + +```ComponentSnackPlayer path=composites,Menu,MenuPositions.tsx + +``` + +## Props + +### Menu + +```ComponentPropTable path=composites,Menu,Menu.tsx + +``` + +### MenuItem + +```ComponentPropTable path=composites,Menu,MenuItem.tsx + +``` + +MenuItem implements [Pressable] + +### MenuItemOption + +Extends `MenuItem`. + +### MenuItemOption + +```ComponentPropTable path=composites,Menu,MenuItemOption.tsx + +``` + +### MenuGroup + +```ComponentPropTable path=composites,Menu,MenuGroup.tsx + +``` + +### MenuOptionGroup + +```ComponentPropTable path=composites,Menu,MenuOptionGroup.tsx + +``` + +## Styling + + + +## Accessibility + +Adheres to the [Menu WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#menu) diff --git a/versioned_docs/version-3.0.4/migration/Accordion.md b/versioned_docs/version-3.0.4/migration/Accordion.md new file mode 100644 index 000000000..9f75bc7ea --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/Accordion.md @@ -0,0 +1,89 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +We have sliced Accordion into multiple smaller component which not only provides more control over the the code but also makes it more readable. + +## Overview + +Migrating Checkbox components can broadly described in these points: + +- **dataArray** is depreciated. +- **expanded** → `defaultIndex`, and now accepts array of index. +- Pros like **headerStyle**, **contentStyle**, **icon**, **expandedIcon**, **iconStyle**, **expandedIconStyle**, **renderHeader**, **renderContent** are _no longer required_ as components like `Accordion.Button`, `Accordion.Panel`, `Accordion.Icon` replaces them. +- **onAccordionOpen,** **onAccordionOpen** → `onChange`, one callback instead of 2. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { Container, Header, Content, Accordion } from 'native-base'; +const dataArray = [ + { + title: 'First Element', + content: 'Lorem ipsum dolor sit amet', + }, + { title: 'Second Element', content: 'Lorem ipsum dolor sit amet' }, + { + title: 'Third Element', + content: 'Lorem ipsum dolor sit amet', + }, +]; +export default class AccordionExample extends Component { + render() { + return ( + +
+ + + + + ); + } +} +``` + + + + +```tsx +import React from 'react'; +import { Accordion } from 'native-base'; +export default function () { + return ( + + + + First Element + + + Lorem ipsum dolor sit amet + + + + Second Element + + + Lorem ipsum dolor sit amet + + + + Third Element + + + Lorem ipsum dolor sit amet + + + ); +} +``` + + + diff --git a/versioned_docs/version-3.0.4/migration/Actionsheet.md b/versioned_docs/version-3.0.4/migration/Actionsheet.md new file mode 100644 index 000000000..9836c69d3 --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/Actionsheet.md @@ -0,0 +1,102 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +We have sliced [`Actionsheet`](actionSheet.md) into multiple smaller component which not only provides more control over the the code but also makes it more readable. + +## Overview + +Migrating Checkbox components can broadly described in these points: + +- **options** (prop) → `Actionsheet.Item` (component). +- Props like **cancelButtonIndex**, **cancelButtonIndex** are _no longer required_ as components like `Actionsheet.Item` can be customised as per need. +- **title** (prop) → NativeBase components such as `Heading` and `Text` can be used inside `ActionSheet.Content` to show the title. +- Declarative approach to show and hide using `isOpen` prop, instead of `show()` and `hide()`. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { + Container, + Header, + Button, + Content, + ActionSheet, + Text, +} from 'native-base'; +var BUTTONS = ['Option 1', 'Option 2', 'Option 3', 'Delete', 'Cancel']; +var DESTRUCTIVE_INDEX = 3; +var CANCEL_INDEX = 4; +export default class ActionSheetExample extends Component { + constructor(props) { + super(props); + this.state = {}; + } + render() { + return ( + + + + + + ); + } +} +``` + + + + +```tsx +import React from 'react'; +import { Button, Actionsheet, useDisclose } from 'native-base'; + +export default function () { + const { isOpen, onOpen, onClose } = useDisclose(); + return ( + <> + + + + + Header + Option 1 + Option 2 + Option 3 + Delete + + + Cancel + + + + ); +} +``` + + + diff --git a/versioned_docs/version-3.0.4/migration/Badge.md b/versioned_docs/version-3.0.4/migration/Badge.md new file mode 100644 index 000000000..3bec509f0 --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/Badge.md @@ -0,0 +1,39 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +Migrating [`Badge`](badge.md) to v3 will provide a lot more **design**, **size, variant**, **color** and **customisation** options. + +## Overview + +Migrating Badge components can be broadly described in these points: + +- No need to wrap you text inside text component anymore. +- In v3 the color is controlled by `colorScheme` prop. And it accepts all the color available in the theme. + +## Code Comparison + + + + +```tsx + + Success + +``` + + + + +```tsx + + Success + +``` + + + diff --git a/versioned_docs/version-3.0.4/migration/Button.md b/versioned_docs/version-3.0.4/migration/Button.md new file mode 100644 index 000000000..5f31c9ba4 --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/Button.md @@ -0,0 +1,191 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +Migrating [`Button`](button.mdx) to v3 will provide a lot more **design**, **size**, **color** and **customisation** options. + +## Overview + +Migrating Button components can broadly described in these points: + +- No need to wrap you text inside `Text` component anymore. +- `isDisabled` prop can be used to disable the button. +- Icons in Button: + `leftIcon` and `rightIcon` are the new alternative to iconLeft and iconRight respectively and they accept **tsx.Element**. +- Colors of the Buttons: + In v3 the color is controlled by `colorScheme` prop. So all the color providing props [ **light**, **info**, **success**, **warning**, **danger** and **dark** ] can be passed as value (and more) to `colorScheme` props. +- Design of the Button: + With v3 we're providing some mostly frequently used designs as `variants` [ **solid**, **outline**, **ghost**, **link** and **unstyled** ] and lot more customisation. +- Sizes of the Button: + In v3 the size is controlled by `size` prop. And it accepts pre-defined sizes [ like xs, sm md, lg ] and also custom values. + +## Code Comparison + +## Colors to the Button + +Besides option like **light**, **info**, **success**, **warning**, **danger** and **dark**. Now you can also provide colors like **red**, **blue**, **cyan**, **teal** and a lot more. + + + + +![Button/Screenshot_2021-01-22_at_12.29.32_PM.png](Button/Screenshot_2021-01-22_at_12.29.32_PM.png) + +```tsx + +``` + + + + +![Button/Screenshot_2021-01-22_at_12.53.09_PM.png](Button/Screenshot_2021-01-22_at_12.53.09_PM.png) + +```tsx + +``` + + + + +### Sizes of the Button: + +Besides option like **light**, **info**, **success**, **warning**, **danger** and **dark**. Now you can also provide colors like **red**, **blue**, **cyan**, **teal** and a lot more. + + + + +![Button/Screenshot_2021-01-22_at_2.37.09_PM.png](Button/Screenshot_2021-01-22_at_2.37.09_PM.png) + +```tsx + +``` + + + + +![Button/Screenshot_2021-01-22_at_2.38.52_PM.png](Button/Screenshot_2021-01-22_at_2.38.52_PM.png) + +```tsx + +``` + + + + +### Designing the Button + +With v3 you can combine variants and style props to create various designs. + + + + +![Button/Screenshot_2021-01-22_at_1.16.25_PM.png](Button/Screenshot_2021-01-22_at_1.16.25_PM.png) + +```tsx + +``` + +![Button/Screenshot_2021-01-22_at_1.23.42_PM.png](Button/Screenshot_2021-01-22_at_1.23.42_PM.png) + +```tsx + +``` + +![Button/Screenshot_2021-01-22_at_1.17.11_PM.png](Button/Screenshot_2021-01-22_at_1.17.11_PM.png) + +```tsx + +``` + + + + +![Button/Screenshot_2021-01-22_at_1.15.34_PM.png](Button/Screenshot_2021-01-22_at_1.15.34_PM.png) + +```tsx + +``` + +![Button/Screenshot_2021-01-22_at_1.22.36_PM.png](Button/Screenshot_2021-01-22_at_1.22.36_PM.png) + +```tsx + +``` + +![Button/Screenshot_2021-01-22_at_1.20.36_PM.png](Button/Screenshot_2021-01-22_at_1.20.36_PM.png) + +```tsx + +``` + + + + +### Icon Button + +With v3 iconLeft and iconRight can now accepts tsx.Element as child and render the element at the appropriate place. + + + + +![Button/Screenshot_2021-01-22_at_1.32.47_PM.png](Button/Screenshot_2021-01-22_at_1.32.47_PM.png) + +```tsx + +``` + + + + +![Button/Screenshot_2021-01-22_at_1.38.15_PM.png](Button/Screenshot_2021-01-22_at_1.38.15_PM.png) + +```tsx + +``` + + + diff --git a/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.15.34_PM.png b/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.15.34_PM.png new file mode 100644 index 000000000..1f0a85886 Binary files /dev/null and b/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.15.34_PM.png differ diff --git a/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.16.25_PM.png b/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.16.25_PM.png new file mode 100644 index 000000000..58cfd0c39 Binary files /dev/null and b/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.16.25_PM.png differ diff --git a/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.17.11_PM.png b/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.17.11_PM.png new file mode 100644 index 000000000..2c80f1549 Binary files /dev/null and b/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.17.11_PM.png differ diff --git a/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.20.36_PM.png b/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.20.36_PM.png new file mode 100644 index 000000000..f4c8f4781 Binary files /dev/null and b/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.20.36_PM.png differ diff --git a/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.22.36_PM.png b/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.22.36_PM.png new file mode 100644 index 000000000..cd3d19be5 Binary files /dev/null and b/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.22.36_PM.png differ diff --git a/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.23.42_PM.png b/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.23.42_PM.png new file mode 100644 index 000000000..5bef6f394 Binary files /dev/null and b/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.23.42_PM.png differ diff --git a/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.32.47_PM.png b/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.32.47_PM.png new file mode 100644 index 000000000..7bb43656d Binary files /dev/null and b/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.32.47_PM.png differ diff --git a/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.38.15_PM.png b/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.38.15_PM.png new file mode 100644 index 000000000..1ba9b546d Binary files /dev/null and b/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_1.38.15_PM.png differ diff --git a/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_12.29.32_PM.png b/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_12.29.32_PM.png new file mode 100644 index 000000000..24f882b52 Binary files /dev/null and b/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_12.29.32_PM.png differ diff --git a/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_12.53.09_PM.png b/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_12.53.09_PM.png new file mode 100644 index 000000000..17cf494df Binary files /dev/null and b/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_12.53.09_PM.png differ diff --git a/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_2.37.09_PM.png b/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_2.37.09_PM.png new file mode 100644 index 000000000..44c565e8f Binary files /dev/null and b/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_2.37.09_PM.png differ diff --git a/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_2.38.52_PM.png b/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_2.38.52_PM.png new file mode 100644 index 000000000..c46eaa452 Binary files /dev/null and b/versioned_docs/version-3.0.4/migration/Button/Screenshot_2021-01-22_at_2.38.52_PM.png differ diff --git a/versioned_docs/version-3.0.4/migration/Card.md b/versioned_docs/version-3.0.4/migration/Card.md new file mode 100644 index 000000000..14550a8cf --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/Card.md @@ -0,0 +1,86 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +With NativeBase v3 we have removed Card components because as it's very simple to create various card layout using primitive components. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { + Container, + Header, + Content, + Card, + CardItem, + Text, + Body, +} from 'native-base'; +export default class CardItemBordered extends Component { + render() { + return ( + +
+ + + + NativeBase + + + + + NativeBase is a free and open source framework that enable + developers to build high-quality mobile apps using React + Native iOS and Android apps with a fusion of ES6. + + + + + GeekyAnts + + + + + ); + } +} +``` + + + + +```tsx +import React from 'react'; +import { VStack, Box, Divider } from 'native-base'; + +export default function () { + return ( + + }> + + NativeBase + + + NativeBase is a free and open source framework that enable developers + to build high-quality mobile apps using React Native iOS and Android + apps with a fusion of ES6. + + + GeekyAnts + + + + ); +} +``` + + + diff --git a/versioned_docs/version-3.0.4/migration/Checkbox.md b/versioned_docs/version-3.0.4/migration/Checkbox.md new file mode 100644 index 000000000..ec3666348 --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/Checkbox.md @@ -0,0 +1,49 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +Migrating [`Checkbox`](checkBox.md) to v3 will provide a lot more **design**, **size**, **color** and **customisation** option. + +## Overview + +Migrating Checkbox components can broadly described in these points: + +- **checked** props is deprecated, instead now we provide you with `defaultIsChecked` and `isChecked` prop to better manage your checkbox. For most cases **checked** can be replaced with `isChecked`. +- Colors of the Checkbox: + In v3 the color is controlled by `colorScheme` prop. And it accepts all the color available in the theme. +- onPress props is deprecated, instead v3 provides onChange which provides a callback when state of the checkbox change. + +## Code Comparison + + + + +![Checkbox/Screenshot_2021-01-22_at_3.09.29_PM.png](Checkbox/Screenshot_2021-01-22_at_3.09.29_PM.png) + +```tsx + + + Finish list Screen + +``` + + + + +![Checkbox/Screenshot_2021-01-22_at_4.34.08_PM.png](Checkbox/Screenshot_2021-01-22_at_4.34.08_PM.png) + +```tsx + +Finish list Screen +// alternative: pressing the text will also trigger onChange + + Finish list Screen + +``` + + + diff --git a/versioned_docs/version-3.0.4/migration/Checkbox/Screenshot_2021-01-22_at_3.09.29_PM.png b/versioned_docs/version-3.0.4/migration/Checkbox/Screenshot_2021-01-22_at_3.09.29_PM.png new file mode 100644 index 000000000..121ecaa72 Binary files /dev/null and b/versioned_docs/version-3.0.4/migration/Checkbox/Screenshot_2021-01-22_at_3.09.29_PM.png differ diff --git a/versioned_docs/version-3.0.4/migration/Checkbox/Screenshot_2021-01-22_at_4.34.08_PM.png b/versioned_docs/version-3.0.4/migration/Checkbox/Screenshot_2021-01-22_at_4.34.08_PM.png new file mode 100644 index 000000000..ef1c1a20d Binary files /dev/null and b/versioned_docs/version-3.0.4/migration/Checkbox/Screenshot_2021-01-22_at_4.34.08_PM.png differ diff --git a/versioned_docs/version-3.0.4/migration/DatePicker.md b/versioned_docs/version-3.0.4/migration/DatePicker.md new file mode 100644 index 000000000..12d26269e --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/DatePicker.md @@ -0,0 +1 @@ +DatePicker is currently in progress and will be coming soon. Till then you can use React Native's [DateTimePicker](https://github.com/react-native-datetimepicker/datetimepicker). diff --git a/versioned_docs/version-3.0.4/migration/DeckSwiper.md b/versioned_docs/version-3.0.4/migration/DeckSwiper.md new file mode 100644 index 000000000..7fec051f2 --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/DeckSwiper.md @@ -0,0 +1,3 @@ +We're still thinking whether we should add a DeckSwiper component, let us know on [discord channel](https://discord.com/invite/TSgCw2UPmb). +Till then you can use [react-native-deck-swiper +](https://www.npmjs.com/package/react-native-deck-swiper). diff --git a/versioned_docs/version-3.0.4/migration/Drawer.md b/versioned_docs/version-3.0.4/migration/Drawer.md new file mode 100644 index 000000000..5244b40b4 --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/Drawer.md @@ -0,0 +1 @@ +Drawer component is still in progress, until it's done you can check out the recipe of integrating React Navigation's [DrawerNavigation](https://reactnavigation.org/docs/drawer-based-navigation/) in NB. diff --git a/versioned_docs/version-3.0.4/migration/FABs.md b/versioned_docs/version-3.0.4/migration/FABs.md new file mode 100644 index 000000000..7c7e20906 --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/FABs.md @@ -0,0 +1,63 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +Migrating [`FAB`](FAB.md) to v3 will provide a lot more **design**, **size**, **color** and **customisation** option. + +## Overview + +Migrating Badge components can broadly described in these points: + +- Instead of Passing Icon as child, use `icon` prop. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { Container, Header, View, Icon, Fab } from 'native-base'; +export default function () { + return ( + +
+ + + + + + + ); +} +``` + + + + +```tsx +import React from 'react'; +import { Fab, Icon } from 'native-base'; + +export default function () { + return ( + } + /> + ); +} +``` + + + diff --git a/versioned_docs/version-3.0.4/migration/FooterTab.md b/versioned_docs/version-3.0.4/migration/FooterTab.md new file mode 100644 index 000000000..f56f01a8d --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/FooterTab.md @@ -0,0 +1 @@ +With NativeBase v3 we have removed FooterTab components because as it's very simple to create using HStack components. You can checkout the [recipe](buildingFooterTabs.md). diff --git a/versioned_docs/version-3.0.4/migration/Form.md b/versioned_docs/version-3.0.4/migration/Form.md new file mode 100644 index 000000000..7d89a15c5 --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/Form.md @@ -0,0 +1,67 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +With NativeBase v3 we have replaced Form with [`FormControl`](formControl.md) and sliced into [`FormControl.Label`](formControl.md#formcontrollabel), [`FormControl.HelperText`](formControl.md#formcontrolhelpertext) and [`FormControl.ErrorMessage`](formControl#formcontrolerrormessage). + +Here an example to show the code comparison. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { Form, Item, Input } from 'native-base'; +export default class FormExample extends Component { + render() { + return ( +
+ + + + + + + + +
+ ); + } +} +// need to re-write +``` + + + + +```tsx +import React from 'react'; +import { Input, Stack, FormControl } from 'native-base'; +export const FormExample = () => { + return ( + + + + Username + + + + Password + + + + + ); +}; + +// v3 version +``` + + + diff --git a/versioned_docs/version-3.0.4/migration/Guide.md b/versioned_docs/version-3.0.4/migration/Guide.md new file mode 100644 index 000000000..2b3095055 --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/Guide.md @@ -0,0 +1,19 @@ +--- +id: Guide +title: Guide to v3 +--- + +`v3` comes with a lot of changes in philosophy as well as the API. We have re-imagined how we should code for React Native as well as web. Keeping this in mind, you might face a lot of changes from v2 to v3. This might be a bit of tedious work but we promise you, it will be worth it! + +If you are looking to upgrade NativeBase from `v2` to `v3` in your application, we recommend looking into the following sections first: + +- Introduction +- Core Concepts +- Features +- Themes + +This will allow you to leverage `v3` to the fullest. We have further divided the migration guide into different components, so that it's easier to search for a specific one. + +We hope that `v3` is able to fulfill all the expectations set by it's predecessor and makes the overall UX and DX of your application better. + +Happy Coding! diff --git a/versioned_docs/version-3.0.4/migration/Header.md b/versioned_docs/version-3.0.4/migration/Header.md new file mode 100644 index 000000000..bcb1f312d --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/Header.md @@ -0,0 +1 @@ +With v3 we have removed the **Header** as it can be easily built using `HStack`. You can checkout its recipe [here](/buildingAppBar). diff --git a/versioned_docs/version-3.0.4/migration/Icon.md b/versioned_docs/version-3.0.4/migration/Icon.md new file mode 100644 index 000000000..12cfe68b2 --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/Icon.md @@ -0,0 +1,75 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +Migrating [`Icon`](icon.md) to v3 will provide a lot more **customisation** option. You can also create custom icons using SVG. + +## Overview + +Migrating Icon components can broadly described in these points: + +- **ios**, **android** and **type** props have been deprecated. +- default Icon type i.e **Ionicons** has been removed, now v3 does not uses any. +- v3 uses a third-party icon library ( such as @expo/vector-icons ), with **as** prop. +- custom colors and size can be added using **color** and **size** props. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { Icon } from 'native-base'; + +export default class IconExample extends Component { + render() { + return ( + <> + + + + + ); + } +} +// need to re-write +``` + + + + +```tsx +import React from 'react'; +import { Platform } from 'react-native'; +import { Icon } from 'native-base'; +import { Ionicons, FontAwesome } from '@expo/vector-icons'; + +export default function () { + return ( + <> + + + + + ); +} + +// v3 version +``` + + + diff --git a/versioned_docs/version-3.0.4/migration/Layout.md b/versioned_docs/version-3.0.4/migration/Layout.md new file mode 100644 index 000000000..5e77d987d --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/Layout.md @@ -0,0 +1,72 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +## Grid + +You can easily design layouts with [Row](hStack.md) or [Column](VStack.md) components. + +## List + +With NativeBase v3 we have removed List components because as it's very simple to create various list layout using primitive components. + +### Code Comparison + + + + +```tsx + + + + Simon Mignolet + + + + + + + + Nathaniel Clyne + + + + + + + + Dejan Lovren + + + + + + +``` + + + + +```tsx +} w="90%"> + + Simon Mignolet + + + + Nathaniel Clyne + + + + Dejan Lovren + + + +``` + + + diff --git a/versioned_docs/version-3.0.4/migration/List.md b/versioned_docs/version-3.0.4/migration/List.md new file mode 100644 index 000000000..e69de29bb diff --git a/versioned_docs/version-3.0.4/migration/Picker.md b/versioned_docs/version-3.0.4/migration/Picker.md new file mode 100644 index 000000000..3d1804beb --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/Picker.md @@ -0,0 +1,86 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +With v3 we have replaced the **Picker** with [`Select`](select.md). + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { Container, Header, Content, Picker, Form } from 'native-base'; + +export default class PickerExample extends Component { + constructor(props) { + super(props); + this.state = { + selected: 'key1', + }; + } + onValueChange(value: string) { + this.setState({ + selected: value, + }); + } + render() { + return ( + +
+ +
+ + + + + + + +
+ + + ); + } +} +``` + + + + +```tsx +import React from 'react'; +import { Icon, Select } from 'native-base'; + +export default function () { + let [language, setLanguage] = React.useState('key0'); + return ( + + ); +} +``` + + + diff --git a/versioned_docs/version-3.0.4/migration/Radio Button.md b/versioned_docs/version-3.0.4/migration/Radio Button.md new file mode 100644 index 000000000..67f137395 --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/Radio Button.md @@ -0,0 +1,90 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +Migrating [`Radio`](radio.md) to v3 will provide a lot more **design**, **size**, **color** and **customisation** option. + +## Overview + +Migrating Radio components can broadly described in these points: + +- In v3 `Radio` can only used along with `Radio.Group`. +- **selected** is deprecated, instead v3 provides with **value** prop in `Radio.Group`. +- Colors of the Radio: + **color** and **selectedColor** props are deprecated, instead now in v3 **color** is controlled by `colorScheme` prop, and it accepts all the color available in the theme. +- **onPress** prop is deprecated, instead v3 provides **onChange** which provides a callback when state of the checkbox change. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { ListItem, Container, Content, Header, Text, Radio } from 'native-base'; +export default class RadioButtonExample extends Component { + constructor() { + super(); + this.state = { + itemSelected: '', + }; + } + render() { + return ( + +
+ + + this.setState({ itemSelected: 'one' })} + selected={this.state.itemSelected == 'one'} + /> + One + + + this.setState({ itemSelected: 'two' })} + selected={this.state.itemSelected == 'two'} + /> + Two + + + + ); + } +} +``` + + + + +```tsx +import React from 'react'; +import { Radio } from 'native-base'; +export default function () { + const [value, setValue] = React.useState('one'); + return ( + { + setValue(nextValue); + }} + > + + One + + + Two + + + ); +} +``` + + + diff --git a/versioned_docs/version-3.0.4/migration/Searchbar.md b/versioned_docs/version-3.0.4/migration/Searchbar.md new file mode 100644 index 000000000..7bc7d3399 --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/Searchbar.md @@ -0,0 +1 @@ +With NativeBase v3 we have removed **Searchbar** components because as it's very simple to create using `Input` components. To view some examples for seachbars, checkout the [searchbar recipe](buildingSearchBar.md). diff --git a/versioned_docs/version-3.0.4/migration/Segment.md b/versioned_docs/version-3.0.4/migration/Segment.md new file mode 100644 index 000000000..806662cee --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/Segment.md @@ -0,0 +1,2 @@ +With NativeBase v3 we have removed the **Segment** component because it's more like a Tab component. You can check out the Tab recipe +[here](buildingTabView.md). diff --git a/versioned_docs/version-3.0.4/migration/Spinner.md b/versioned_docs/version-3.0.4/migration/Spinner.md new file mode 100644 index 000000000..b066b6093 --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/Spinner.md @@ -0,0 +1,42 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +Migrating [`Spinner`](spinner.md) to v3 will provide a lot more **size**, **color** and **customisation** option. + +## Overview + +Migrating Spinner components can broadly described in these points: + +- Get 2 size options, namely **sm/small** and **lg/large** or pass a number as a **size** prop. +- In v3 the color are provided by theme, so the shade for the color should be passed along with the color name. + +## Code Comparison + + + + +```tsx + + + + +``` + + + + +```tsx + + + + + +``` + + + diff --git a/versioned_docs/version-3.0.4/migration/SwipeList.md b/versioned_docs/version-3.0.4/migration/SwipeList.md new file mode 100644 index 000000000..4376cf523 --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/SwipeList.md @@ -0,0 +1 @@ +With NativeBase v3 we have removed **SwipeList** component. To view example for SwipeList built using [react-native-swipe-list](https://www.npmjs.com/package/react-native-swipe-list-view) in NB, checkout this [recipe](buildingSwipeList.md). diff --git a/versioned_docs/version-3.0.4/migration/Tabs.md b/versioned_docs/version-3.0.4/migration/Tabs.md new file mode 100644 index 000000000..f809f9a07 --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/Tabs.md @@ -0,0 +1,62 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +API for Tabs is in progress, in the meantine you can check this [recipe](buildingTabView.md) for building Tabs. + + diff --git a/versioned_docs/version-3.0.4/migration/Thumbnail.md b/versioned_docs/version-3.0.4/migration/Thumbnail.md new file mode 100644 index 000000000..4a2f91bae --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/Thumbnail.md @@ -0,0 +1,68 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +With v3 we have replaced the **Thumbnail** with [`Image`](image.md). And we also provide [`Avatar`](avatar.md) as well. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { Container, Header, Content, Thumbnail, Text } from 'native-base'; +export default class ThumbnailExample extends Component { + render() { + const uri = + 'https://facebook.github.io/react-native/docs/assets/favicon.png'; + return ( + +
+ + Square Thumbnail + + + + Circular Thumbnail + + + + + + ); + } +} +``` + + + + +```tsx +import React from 'react'; +import { Avatar, VStack, Text, Image } from 'native-base'; + +export default function () { + const uri = 'https://facebook.github.io/react-native/docs/assets/favicon.png'; + + return ( + + Square Thumbnail + react-native + react-native + react-native + Circular Thumbnail + + + + + ); +} +``` + + + diff --git a/versioned_docs/version-3.0.4/migration/Toast.md b/versioned_docs/version-3.0.4/migration/Toast.md new file mode 100644 index 000000000..43aa50dea --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/Toast.md @@ -0,0 +1,79 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +In v3, [`Toast`](toast.md) can be created using **useToast** hook + +## Overview + +Migrating Toast components can broadly described in these points: + +- **buttonText** is no longer supported. +- **type** (prop) → **status** prop. +- **position** (prop) → **placement** prop. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { Container, Header, Content, Toast, Button, Text } from 'native-base'; + +export default class ToastExample extends Component { + render() { + return ( + +
+ + + + + ); + } +} +``` + + + + +```tsx +import React from 'react'; +import { Button, useToast } from 'native-base'; + +export default function () { + const toast = useToast(); + + return ( + + ); +} +``` + + + diff --git a/versioned_docs/version-3.0.4/migration/Typography.md b/versioned_docs/version-3.0.4/migration/Typography.md new file mode 100644 index 000000000..eca34dd79 --- /dev/null +++ b/versioned_docs/version-3.0.4/migration/Typography.md @@ -0,0 +1,34 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +**H1**, **H2** and **H3** all have been replaced with [`Heading`](heading.md) component. + +## Code Comparison + + + + +```tsx +

Header One

+

Header Two

+

Header Three

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

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

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

A Brief History of NativeBase

+
+ +
+

What's New with NativeBase v3?

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

Multiplatform

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

Inherently Beautiful

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

Accessible

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

Customisable + +

+
+The default theme can be extended as you desire. You can also customise specific components for your app needs. +
+
+ +
diff --git a/versioned_docs/version-3.0.4/numberInput.md b/versioned_docs/version-3.0.4/numberInput.md new file mode 100644 index 000000000..5f44f069a --- /dev/null +++ b/versioned_docs/version-3.0.4/numberInput.md @@ -0,0 +1,231 @@ +--- +id: numberInput +title: NumberInput +--- + +The `NumberInput` component is similar to the [`Input`](input.md) component, but it has controls for incrementing or decrementing numeric values. + +## Implements + +- [`Input`](input.md) + +## Examples + +## Basic + +```SnackPlayer name=NumberInput%20Usage +import React from 'react'; +import { + NumberInput, + NumberInputField, + NumberInputStepper, + NumberIncrementStepper, + NumberDecrementStepper, + NativeBaseProvider, + Center +} from 'native-base'; + +function NumberInputComponent () { + return ( + + + + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Default Value + +```SnackPlayer name=NumberInput%20Default Value +import React from 'react'; +import { + NumberInput, + NumberInputField, + NumberInputStepper, + NumberIncrementStepper, + NumberDecrementStepper, + NativeBaseProvider, + Center +} from 'native-base'; +function NumberInputComponent () { + return ( + + + + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Min Max + +```SnackPlayer name=NumberInput%20Min Max +import React from 'react'; +import { + NumberInput, + NumberInputField, + NumberInputStepper, + NumberIncrementStepper, + NumberDecrementStepper, + NativeBaseProvider, + Center +} from 'native-base'; +function NumberInputComponent () { + return ( + + + + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Steps + +```SnackPlayer name=NumberInput%20Steps +import React from 'react'; +import { + NumberInput, + NumberInputField, + NumberInputStepper, + NumberIncrementStepper, + NumberDecrementStepper, + NativeBaseProvider, + Center +} from 'native-base'; +function NumberInputComponent () { + return ( + + + + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Form Controlled + +```SnackPlayer name=NumberInput%20Form Controlled +import React from 'react'; +import { + FormControl, + NumberInput, + NumberInputField, + NumberInputStepper, + NumberIncrementStepper, + NumberDecrementStepper, + Container, + NativeBaseProvider, + Center +} from 'native-base'; + +function NumberInputComponent () { + return ( + + + Number of components? + + + + + + + + You can make a guess. + Don't worry, it's just an example. + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Props + +### NumberInputField + +| Name | Type | Description | Default | +| ------------------ | -------- | -------------------------------------------------------------------------------------------------------------- | ------- | +| value | number | The value of the input for controlled usage. Should be less than max and greater than min. | - | +| defaultValue | number | The initial value of the input. Should be less than max and greater than min. | - | +| onChange | function | The callback fired when the value changes. | | +| min | number | The minimum value of the input. | | +| max | number | The maximum value of the input. | | +| step | number | The step used to increment or decrement the value. | | +| isDisabled | boolean | If true, the input will be disabled. | | +| keepWithinRange | boolean | If true and you use the stepper or up/down arrow keys, the value will not exceed the max or go lower than min. | | +| focusInputOnChange | boolean | If true, the input will be focused as you increment or decrement the value with the stepper. | | + +`NumberInput` composes [`Input`](input.md) so you can pass all the [`Input props`](input.md#props). + +### NumberInputStepper + +`NumberInputStepper` composes [`VStack`](VStack.md) so you can pass all the [`VStack props`](VStack.md#props). + +### NumberDecrementStepper and NumberIncrementStepper + +`NumberDecrementStepper` and `NumberIncrementStepper` composes the [`Box`](box.md) props so you can pass all the [`Box props`](box.md#props). + +### NumberDecrementStepper and NumberIncrementStepper + +| Name | Type | Description | Default | +| ---------- | ---------- | ------------------------------------------- | ------- | +| \_disabled | StyleProps | Pass custom style object for disabled state | - | +| \_active | StyleProps | Pass custom style object for active state | - | diff --git a/versioned_docs/version-3.0.4/overlay.md b/versioned_docs/version-3.0.4/overlay.md new file mode 100644 index 000000000..4dbcbad8c --- /dev/null +++ b/versioned_docs/version-3.0.4/overlay.md @@ -0,0 +1,97 @@ +--- +id: overlay +title: Overlay +--- + +`Overlay` is the fundamental component for positioning and controlling new components on top of existing ones. + +## Import + +```jsx +import { Overlay, useOverlay } from 'native-base'; +``` + +## Examples + +### Usage + +```SnackPlayer name=Overlay%20Usage +import React from 'react'; +import { Button, useOverlay, NativeBaseProvider, Center } from 'native-base'; + +function OverlayComponent () { + const { closeOverlay, setOverlay } = useOverlay(); + return ( + + ) + }> + Show Overlay + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Customised + +```SnackPlayer name=Overlay%20Customized +import React from 'react'; +import { Button, useOverlay, VStack, NativeBaseProvider, Center } from 'native-base'; + +function OverlayComponent () { + const [disableOverlay, setDisableOverlay] = React.useState(false); + const { closeOverlay, setOverlay } = useOverlay(); + + return ( + + , + { disableOverlay, position: 'center', backgroundColor: '#5511ff44' } + ) + } + > + Show Overlay + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Props + +| Name | Type | Description | Default | +| ---------------------- | ------------------------- | ------------------------------------------------- | ------- | +| disableOverlay | boolean | If true, it disables the overlay. | false | +| position | `bottom`, `center`, `top` | Vertically position the component on the overlay. | - | +| defaultBackgroundColor | string | Set background color of overlay. | - | +| animationDuration | number | Duration for fade animation of the overlay. | - | diff --git a/versioned_docs/version-3.0.4/pagination.md b/versioned_docs/version-3.0.4/pagination.md new file mode 100644 index 000000000..e4ed470d1 --- /dev/null +++ b/versioned_docs/version-3.0.4/pagination.md @@ -0,0 +1,6 @@ +--- +id: pagination +title: Pagination +--- + +## Coming Soon diff --git a/versioned_docs/version-3.0.4/pinInput.md b/versioned_docs/version-3.0.4/pinInput.md new file mode 100644 index 000000000..953f20c73 --- /dev/null +++ b/versioned_docs/version-3.0.4/pinInput.md @@ -0,0 +1,285 @@ +--- +id: pinInput +title: PinInput +--- + +The `PinInput` component is similar to the [`Input`](input.md) component, but it is optimized for entering sequences of digits. + +## Implements + +- [`Input`](input.md) + +## Examples + +### Usage + +```SnackPlayer name=PinInput%20Usage +import React from 'react'; +import { PinInput, NativeBaseProvider, Center } from 'native-base'; + +function PinInputComponent () { + return ( + + + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Size + +```SnackPlayer name=PinInput%20Sizes +import React from 'react'; +import { PinInput, Stack, NativeBaseProvider, Center } from 'native-base'; + +function PinInputComponent () { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Default Value + +```SnackPlayer name=PinInput%20DefaultValue +import React from 'react'; +import { PinInput, Stack, NativeBaseProvider, Center } from 'native-base'; + +function PinInputComponent () { + return ( + + + + + + + + + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Placeholder + +```SnackPlayer name=PinInput%20Placeholder +import React from 'react'; +import { PinInput, NativeBaseProvider, Center } from 'native-base'; + +function PinInputComponent () { + return ( + + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Manage Focus + +```SnackPlayer name=PinInput%20Manage Focus +import React from 'react'; +import { PinInput, NativeBaseProvider, Center } from 'native-base'; + +function PinInputComponent () { + return ( + + + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Variants + +```SnackPlayer name=PinInput%20Variants +import React from 'react'; +import { PinInput, Stack, NativeBaseProvider, Center } from 'native-base'; + +function PinInputComponent () { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Form Controlled + +```SnackPlayer name=PinInput%20Form +import React from 'react'; +import { + PinInput, + Center, + FormControl, + NativeBaseProvider +} from 'native-base'; + +function PinInputComponent () { + return ( +
+ + OTP + + + + + + + + OTP will be sent to the number. + + Please Retry. + +
+ ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## **Props** + +### PinInput + +PinInput passes all the props to its children (`PinInput.Field`) only. + +| Name | Type | Description | Default | +| ------------ | ----------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ------- | +| manageFocus | boolean | The style variant of the badge. | true | +| defaultValue | string | The default value of the pin input. Example '32'. | - | +| value | string | The value of the the pin input. This is the value that will be returned when the pin input is filled. | - | +| space | [`MarginProps`](https://styled-system.com/api/#space) | The space between each stack item. | - | +| onChange | function | Function called on input change | - | + +### PinInput.Field + +PinInput.Field composes [`Input`](input.md) so you can pass all the [`Input props`](input.md#props). diff --git a/versioned_docs/version-3.0.4/popOver.md b/versioned_docs/version-3.0.4/popOver.md new file mode 100644 index 000000000..c1908d9f5 --- /dev/null +++ b/versioned_docs/version-3.0.4/popOver.md @@ -0,0 +1,94 @@ +--- +id: popOver +title: Popover +--- + +import { ComponentTheme } from '../../src/components'; + +`Popover` is a non-modal dialog that floats around a trigger. It's used to display contextual information to the user, and should be paired with a pressable trigger element. + +## Import + +- `Popover`: The wrapper that provides props, state, and context to its children. +- `Popover.Arrow`: The popover arrow. +- `Popover.Body`: The body of the popover. +- `Popover.Content`: The popover itself. +- `Popover.CloseButton`: A button to close the popover. +- `Popover.Header`: The header of the popover. +- `Popover.Trigger`: Used to wrap the reference (or trigger) element. + +```jsx +import { Popover } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=composites,Popover,Basic.tsx + +``` + +### initialFocusRef + +```ComponentSnackPlayer path=composites,Popover,RefEg.tsx + +``` + +### Positions + +```ComponentSnackPlayer path=composites,Popover,PopoverPositions.tsx + +``` + +:::tip Tip +You can pass custom backgroundColor using `bg` or `backgroundColor`, `borderColor` and `borderWidth` to Popover.Content. +::: + +## Props + +```ComponentPropTable path=composites,Popover,Popover.tsx + +``` + +### Popover.Arrow + +`Popover.Arrow` composes the [`Box`](box.md) component. + +### Popover.Content + +`Popover.Content` composes the [`Box`](box.md) component. + +### Popover.Header + +`Popover.Header` composes the [`Box`](box.md) component. + +### Popover.Footer + +`Popover.Footer` composes the [`Box`](box.md) component. + +### Popover.Body + +`Popover.Body` composes the [`Box`](box.md) component. + +### Popover.CloseButton  + +`Popover.CloseButton` composes the [`Button`](button.md) component. + +## Styling + + + +## Accessibility + +Adheres to the [Dialog WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#dialog_modal) + +### Keyboard Interactions + +| Name | Description | +| ----------- | ------------------------------------------------------ | +| Space | Opens/closes the popover. | +| Enter | Opens/closes the popover. | +| Tab | Moves focus to the next focusable element. | +| Shift + Tab | Moves focus to the previous focusable element. | +| Esc | Closes the popover and moves focus to Popover.Trigger. | diff --git a/versioned_docs/version-3.0.4/presence-transition.md b/versioned_docs/version-3.0.4/presence-transition.md new file mode 100644 index 000000000..2e725036a --- /dev/null +++ b/versioned_docs/version-3.0.4/presence-transition.md @@ -0,0 +1,63 @@ +--- +id: presence-transition +title: PresenceTransition +--- + +PresenceTransition provides a declarative API to add entry and exit transitions. + +### Fade + +```ComponentSnackPlayer path=composites,Transitions,Fade.tsx + +``` + +### ScaleFade + +```ComponentSnackPlayer path=composites,Transitions,ScaleFade.tsx + +``` + +## Props + +```ComponentPropTable path=composites,Transitions,PresenceTransition.tsx showStylingProps=true + +``` + +### ISupportedTransitions + +```js +interface ISupportedTransitions { + opacity?: number; + translateY?: number; + translateX?: number; + scale?: number; + scaleX?: number; + scaleY?: number; + rotate?: string; +} +``` + +### ITransitionStyleProps + +```js +interface ITransitionStyleProps extends ISupportedTransitions { + transition?: { + type?: 'timing' | 'spring', + easing?: (value: number) => number, + overshootClamping?: boolean, + restDisplacementThreshold?: number, + restSpeedThreshold?: number, + velocity?: number | { x: number, y: number }, + bounciness?: number, + speed?: number, + tension?: number, + friction?: number, + stiffness?: number, + mass?: number, + damping?: number, + delay?: number, + duration?: number, + useNativeDriver?: boolean, + }; +} +``` diff --git a/versioned_docs/version-3.0.4/pressable.md b/versioned_docs/version-3.0.4/pressable.md new file mode 100644 index 000000000..4f37c810d --- /dev/null +++ b/versioned_docs/version-3.0.4/pressable.md @@ -0,0 +1,32 @@ +--- +id: pressable +title: Pressable +--- + +Pressable is a lower level primitive if you need more flexibility than a button and access to hover, pressed and focus events. + +## Examples + +### Basic + +Pressable accepts most of the utility style system props. + +```ComponentSnackPlayer path=primitives,Pressable,Basic.tsx + +``` + +### Accessing events (hover, focus and pressed) + +Pressable accepts a render prop children, which receives isHovered, isFocused and isPressed props. + +```ComponentSnackPlayer path=primitives,Pressable,Events.tsx + +``` + +## Props + +### Pressable + +```ComponentPropTable path=primitives,Pressable,Pressable.tsx showStylingProps=true + +``` diff --git a/versioned_docs/version-3.0.4/progress.md b/versioned_docs/version-3.0.4/progress.md new file mode 100644 index 000000000..9fe5ee80c --- /dev/null +++ b/versioned_docs/version-3.0.4/progress.md @@ -0,0 +1,62 @@ +--- +id: progress +title: Progress +--- + +import { ComponentTheme } from '../../src/components'; + +`Progress` is used to display the progress status for a task that takes a long time or consists of several steps. + +## Import + +```jsx +import { Progress } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=composites,Progress,Basic.tsx + +``` + +### Progress colorScheme + +```ComponentSnackPlayer path=composites,Progress,ColorScheme.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=composites,Progress,Sizes.tsx + +``` + +### Flat Progress + +```ComponentSnackPlayer path=composites,Progress,Flat.tsx + +``` + +### Custom Track Color + +```ComponentSnackPlayer path=composites,Progress,CustomBgColor.tsx + +``` + +## Props + +```ComponentPropTable path=composites,Progress,index.tsx + +``` + +## Styling + + + +## Accessibility + +- Adheres to the `progressbar` [role requirements.](https://www.w3.org/TR/wai-aria-1.2/#progressbar) +- On web, `aria-valuenow`, `aria-valuemin` and `aria-valuemax` to ensure the progress percent is visible to screen readers. +- On mobile, [accessibilityValue](https://reactnative.dev/docs/accessibility#accessibilityvalue) is used to ensure it's announced by Talkback and VoiceOver. diff --git a/versioned_docs/version-3.0.4/radio.md b/versioned_docs/version-3.0.4/radio.md new file mode 100644 index 000000000..63485030b --- /dev/null +++ b/versioned_docs/version-3.0.4/radio.md @@ -0,0 +1,97 @@ +--- +id: radio +title: Radio +--- + +import { ComponentTheme } from '../../src/components'; + +`Radio` is used when only one choice may be selected in a series of options. + +## Examples + +### Controlled + +```ComponentSnackPlayer path=primitives,Radio,controlledRadio.tsx + +``` + +### Uncontrolled + +```ComponentSnackPlayer path=primitives,Radio,uncontrolledRadio.tsx + +``` + +### Disabled + +```ComponentSnackPlayer path=primitives,Radio,disabled.tsx + +``` + +### Invalid + +```ComponentSnackPlayer path=primitives,Radio,invalid.tsx + +``` + +### Size + +```ComponentSnackPlayer path=primitives,Radio,size.tsx + +``` + +### Custom Color + +```ComponentSnackPlayer path=primitives,Radio,customColor.tsx + +``` + +### Custom Icon + +```ComponentSnackPlayer path=primitives,Radio,customIcon.tsx + +``` + +### Form Controlled + +```ComponentSnackPlayer path=primitives,Radio,formControlled.tsx + +``` + +### Basic (With Ref) + +```ComponentSnackPlayer path=primitives,Radio,withRef.tsx + +``` + +## Props + +### Radio + +```ComponentPropTable path=primitives,Radio,Radio.tsx + +``` + +### Radio Group + +```ComponentPropTable path=primitives,Radio,RadioGroup.tsx + +``` + +## Accessibility + +Uses React Native ARIA [@react-native-aria/radio](https://react-native-aria.geekyants.com/docs/useRadioGroup) which follows the [Radio Group WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#radiobutton). + +### Keyboard Interactions + +| Key | Description | +| ------------ | ---------------------------------------------------------------------------------- | +| `Tab` | Moves focus to either the checked radio item or the first radio item in the group. | +| `Space` | When focus is on an unchecked radio item, checks it. | +| `ArrowDown` | Moves focus to the next radio item in the group. | +| `ArrowRight` | Moves focus to the next radio item in the group. | +| `ArrowUp` | Moves focus to the previous radio item in the group. | +| `ArrowLeft` | Moves focus to the previous radio item in the group. | + +## Styling + + diff --git a/versioned_docs/version-3.0.4/reactHooksForms.md b/versioned_docs/version-3.0.4/reactHooksForms.md new file mode 100644 index 000000000..f4efec13c --- /dev/null +++ b/versioned_docs/version-3.0.4/reactHooksForms.md @@ -0,0 +1,565 @@ +--- +id: react-hook-forms +title: React Hook Forms +--- + +A Performant, flexible and extensible forms with easy-to-use validation. And below are some examples showing its integration with NativeBase. + +## Usage + +```jsx +import { + VStack, + Input, + Button, + FormControl, + NativeBaseProvider, +} from 'native-base'; +import React from 'react'; +import { useForm, Controller } from 'react-hook-form'; + +function FormHookExample() { + const { control, handleSubmit, errors } = useForm(); + const onSubmit = (data) => { + console.log('submiting with ', data); + }; + return ( + + + First Name + ( + onChange(val)} + value={value} + /> + )} + name="firstName" + rules={{ required: 'Field is required', minLength: 3 }} + defaultValue="" + /> + + {errors.firstName?.message} + + + + Last Name + ( + onChange(val)} + value={value} + /> + )} + name="lastName" + defaultValue="" + /> + + {errors.lastName?.message} + + + + Age + ( + onChange(val)} + value={value} + /> + )} + name="age" + rules={{ min: 18, required: 'Age is required' }} + defaultValue="" + /> + + {errors.age?.type === 'required' + ? errors.age?.message + : errors.age?.type === 'min' ?? 'Under age'} + + + + + ); +} +export default function () { + return ( + + + + ); +} +``` + +## Radio and Checkbox + +```jsx +import { + VStack, + Button, + FormControl, + Radio, + Checkbox, + Text, + Icon, + NativeBaseProvider, +} from 'native-base'; +import React from 'react'; +import { useForm, Controller } from 'react-hook-form'; + +function FormHookCheckboxExample() { + const { control, handleSubmit, errors } = useForm(); + const onSubmit = (data) => { + console.log('submiting with ', data); + }; + return ( + + + Hobbies + ( + { + onChange(values); + }} + flexDirection="row" + > + } + > + Darts + + } + > + Movie + + } + > + Camping + + + } + > + Chess + + + )} + rules={{ required: 'Atleast 1 hobbie needed' }} + name="hobbies" + defaultValue="" + /> + + {errors.hobbies?.message} + + + + Gender + ( + onChange(val)} + > + + Male + + + Female + + + )} + name="gender" + rules={{ required: 'Gender is required' }} + /> + + {errors.gender?.message} + + + + + ); +} +export default function () { + return ( + + + + ); +} +``` + +## Select + +```jsx +import { + VStack, + Button, + FormControl, + Select, + Icon, + NativeBaseProvider, +} from 'native-base'; +import React from 'react'; +import { useForm, Controller } from 'react-hook-form'; + +function FormHookSelectExample() { + const { control, handleSubmit, errors } = useForm(); + const onSubmit = (data) => { + console.log('submiting with ', data); + }; + return ( + + + Fav language: + ( + + )} + name="language" + rules={{ required: 'Field is required' }} + defaultValue="js" + /> + + {errors.language?.message} + + + + + ); +} +export default function () { + return ( + + + + ); +} +``` + +## Slider + +```jsx +import { + VStack, + Button, + FormControl, + Slider, + NativeBaseProvider, +} from 'native-base'; +import React from 'react'; +import { useForm, Controller } from 'react-hook-form'; + +function FormHookSliderExample() { + const { control, handleSubmit, errors } = useForm(); + const onSubmit = (data) => { + console.log('submiting with ', data); + }; + return ( + + + Amount you like NativeBase + ( + onChange(val)} defaultValue={value}> + + + + + + )} + name="like" + rules={{ required: 'Field is required', minLength: 3 }} + defaultValue={100} + /> + + {errors.like?.message} + + + + + ); +} +export default function () { + return ( + + + + ); +} +``` + +## Textarea + +```jsx +import { + VStack, + Button, + FormControl, + TextArea, + NativeBaseProvider, +} from 'native-base'; +import React from 'react'; +import { useForm, Controller } from 'react-hook-form'; + +function FormHookTextareaExample() { + const { control, handleSubmit, errors } = useForm(); + const onSubmit = (data) => { + console.log('submiting with ', data); + }; + return ( + + + What do you think? + ( +