diff --git a/blog/2019-05-28-hola.md b/blog/2019-05-28-hola.md deleted file mode 100644 index 4adbc327f..000000000 --- a/blog/2019-05-28-hola.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -slug: hola -title: Hola -author: Gao Wei -author_title: Docusaurus Core Team -author_url: https://github.com/wgao19 -author_image_url: https://avatars1.githubusercontent.com/u/2055384?v=4 -tags: [hola, docusaurus] ---- - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet diff --git a/blog/2019-05-29-hello-world.md b/blog/2019-05-29-hello-world.md deleted file mode 100644 index 151671f02..000000000 --- a/blog/2019-05-29-hello-world.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -slug: hello-world -title: Hello -author: Endilie Yacop Sucipto -author_title: Maintainer of Docusaurus -author_url: https://github.com/endiliey -author_image_url: https://avatars1.githubusercontent.com/u/17883920?s=460&v=4 -tags: [hello, docusaurus] ---- - -Welcome to this blog. This blog is created with [**Docusaurus 2 alpha**](https://v2.docusaurus.io/). - - - -This is a test post. - -A whole bunch of other information. diff --git a/blog/2019-05-30-welcome.md b/blog/2019-05-30-welcome.md deleted file mode 100644 index d35d57b7d..000000000 --- a/blog/2019-05-30-welcome.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -slug: welcome -title: Welcome -author: Yangshun Tay -author_title: Front End Engineer @ Facebook -author_url: https://github.com/yangshun -author_image_url: https://avatars0.githubusercontent.com/u/1315101?s=400&v=4 -tags: [facebook, hello, docusaurus] ---- - -Blog features are powered by the blog plugin. Simply add files to the `blog` directory. It supports tags as well! - -Delete the whole directory if you don't want the blog features. As simple as that! diff --git a/docs/FAB.md b/docs/FAB.md index 1dddda32b..d4b42bd41 100644 --- a/docs/FAB.md +++ b/docs/FAB.md @@ -17,19 +17,19 @@ import { Fab } from 'native-base'; ### Basic -```ComponentSnackPlayer path=composites,Fab,Basic.tsx +```ComponentSnackPlayer path=components,composites,Fab,Basic.tsx ``` ### Placement -```ComponentSnackPlayer path=composites,Fab,Placement.tsx +```ComponentSnackPlayer path=components,composites,Fab,Placement.tsx ``` ### Custom Position -```ComponentSnackPlayer path=composites,Fab,CustomPosition.tsx +```ComponentSnackPlayer path=components,composites,Fab,CustomPosition.tsx ``` diff --git a/docs/VStack.md b/docs/VStack.md index 94bc25cf0..55de9baec 100644 --- a/docs/VStack.md +++ b/docs/VStack.md @@ -13,7 +13,7 @@ import { VStack } from 'native-base'; ## Usage -```ComponentSnackPlayer path=primitives,VStack,basic.tsx +```ComponentSnackPlayer path=components,primitives,VStack,basic.tsx ``` diff --git a/docs/ZStack.md b/docs/ZStack.md index 1daab38f9..6ca6e145d 100644 --- a/docs/ZStack.md +++ b/docs/ZStack.md @@ -9,7 +9,7 @@ title: ZStack ### Basic -```ComponentSnackPlayer path=primitives,ZStack,example.tsx +```ComponentSnackPlayer path=components,primitives,ZStack,example.tsx ``` @@ -17,7 +17,7 @@ title: ZStack You can pass `alignItems="center"` `justifyContent="center"` to vertically and horizontally center the children. -```ComponentSnackPlayer path=primitives,ZStack,CenterStack.tsx +```ComponentSnackPlayer path=components,primitives,ZStack,CenterStack.tsx ``` diff --git a/docs/actionSheet.md b/docs/actionSheet.md index 940d5c246..4ecac02ff 100644 --- a/docs/actionSheet.md +++ b/docs/actionSheet.md @@ -23,25 +23,25 @@ import { Actionsheet } from 'native-base'; ### Usage -```ComponentSnackPlayer path=composites,Actionsheet,Usage.tsx +```ComponentSnackPlayer path=components,composites,Actionsheet,Usage.tsx ``` ### Composition -```ComponentSnackPlayer path=composites,Actionsheet,Composition.tsx +```ComponentSnackPlayer path=components,composites,Actionsheet,Composition.tsx ``` ### DisableOverlay -```ComponentSnackPlayer path=composites,Actionsheet,DisableOverlay.tsx +```ComponentSnackPlayer path=components,composites,Actionsheet,DisableOverlay.tsx ``` ### Icons -```ComponentSnackPlayer path=composites,Actionsheet,Icon.tsx +```ComponentSnackPlayer path=components,composites,Actionsheet,Icon.tsx ``` diff --git a/docs/alert.md b/docs/alert.md index 8c3d0b47a..79bfd174f 100644 --- a/docs/alert.md +++ b/docs/alert.md @@ -13,8 +13,8 @@ NativeBase exports 5 Alert related components: - `Alert`: The wrapper for alert components. - `Alert.Icon`: The visual icon for the alert that changes based on the `status` prop. - - + + ```jsx import { Alert } from 'native-base'; @@ -24,31 +24,31 @@ import { Alert } from 'native-base'; ### Basic -```ComponentSnackPlayer path=composites,Alert,usage.tsx +```ComponentSnackPlayer path=components,composites,Alert,usage.tsx ``` ### Status -```ComponentSnackPlayer path=composites,Alert,status.tsx +```ComponentSnackPlayer path=components,composites,Alert,status.tsx ``` ### Variant -```ComponentSnackPlayer path=composites,Alert,variant.tsx +```ComponentSnackPlayer path=components,composites,Alert,variant.tsx ``` ### Composition -```ComponentSnackPlayer path=composites,Alert,composition.tsx +```ComponentSnackPlayer path=components,composites,Alert,composition.tsx ``` ### Action -```ComponentSnackPlayer path=composites,Alert,action.tsx +```ComponentSnackPlayer path=components,composites,Alert,action.tsx ``` diff --git a/docs/alertDialog.md b/docs/alertDialog.md index 138554305..1ebcdf253 100644 --- a/docs/alertDialog.md +++ b/docs/alertDialog.md @@ -24,7 +24,7 @@ import { AlertDialog } from 'native-base'; ### Basic -```ComponentSnackPlayer path=composites,AlertDialog,Basic.tsx +```ComponentSnackPlayer path=components,composites,AlertDialog,Basic.tsx ``` @@ -40,7 +40,6 @@ AlertDialog and its components compose the **[Modal](modal.md)** component, so a | ------------------- | --------- | -------------------------------------------------------------- | ------- | | leastDestructiveRef | React.Ref | The least destructive action to get focus when dialog is open. | - | - ## Accessibility Adheres to the [Alert and Message Dialogs WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#alertdialog) @@ -54,5 +53,3 @@ Adheres to the [Alert and Message Dialogs WAI-ARIA design pattern.](https://www. | Tab | Moves focus to the next focusable element. | | Shift + Tab | Moves focus to the previous focusable element. | | Esc | Closes the dialog and moves focus to AlertDialog.Trigger. | - - diff --git a/docs/appDrawer.md b/docs/appDrawer.md index 3fa173b72..4001d9dda 100644 --- a/docs/appDrawer.md +++ b/docs/appDrawer.md @@ -3,13 +3,13 @@ id: app-drawer title: App drawer --- -Creating an app drawer like layout is very common and with NativeBase's SimpleGrid make this extremely simple while still keeping it extremely customisable. Here is an example to illustrate it. +Creating an app drawer like layout is very common using FlatList. Here is an example to illustrate it. ```SnackPlayer name=AppDrawer import React from 'react'; import { IconButton, - SimpleGrid, + FlatList, Icon, NativeBaseProvider, Box, @@ -41,19 +41,22 @@ function AppDrawer() { ]; return ( - - {icons.map((icon) => ( - - } - /> - ))} - + { + return ( + + } + /> + ) + }} /> ); } diff --git a/docs/avatar.md b/docs/avatar.md index a0b5f1913..8a20c62b0 100644 --- a/docs/avatar.md +++ b/docs/avatar.md @@ -23,31 +23,31 @@ import { Avatar } from 'native-base'; ### Basic -```ComponentSnackPlayer path=composites,Avatar,usage.tsx +```ComponentSnackPlayer path=components,composites,Avatar,usage.tsx ``` ### Sizes -```ComponentSnackPlayer path=composites,Avatar,size.tsx +```ComponentSnackPlayer path=components,composites,Avatar,size.tsx ``` ### Fallbacks -```ComponentSnackPlayer path=composites,Avatar,Fallback.tsx +```ComponentSnackPlayer path=components,composites,Avatar,Fallback.tsx ``` ### Avatar Badge -```ComponentSnackPlayer path=composites,Avatar,AvatarBadge.tsx +```ComponentSnackPlayer path=components,composites,Avatar,AvatarBadge.tsx ``` ### Avatar Group -```ComponentSnackPlayer path=composites,Avatar,AvatarGroup.tsx +```ComponentSnackPlayer path=components,composites,Avatar,AvatarGroup.tsx ``` diff --git a/docs/badge.md b/docs/badge.md index 23636b2ae..c071d6b07 100644 --- a/docs/badge.md +++ b/docs/badge.md @@ -17,25 +17,25 @@ import { Badge } from 'native-base'; ### Basic -```ComponentSnackPlayer path=composites,Badge,usage.tsx +```ComponentSnackPlayer path=components,composites,Badge,usage.tsx ``` ### Color Scheme -```ComponentSnackPlayer path=composites,Badge,color.tsx +```ComponentSnackPlayer path=components,composites,Badge,color.tsx ``` ### Variants -```ComponentSnackPlayer path=composites,Badge,variants.tsx +```ComponentSnackPlayer path=components,composites,Badge,variants.tsx ``` ### Composition -```ComponentSnackPlayer path=composites,Badge,composition.tsx +```ComponentSnackPlayer path=components,composites,Badge,composition.tsx ``` diff --git a/docs/box.md b/docs/box.md index fd38a7ed2..46b5259f7 100644 --- a/docs/box.md +++ b/docs/box.md @@ -9,7 +9,7 @@ This is a generic component for low level layout needs. It is similar to a [`div ### Basic -```ComponentSnackPlayer path=primitives,Box,basic.tsx +```ComponentSnackPlayer path=components,primitives,Box,basic.tsx ``` @@ -17,7 +17,7 @@ This is a generic component for low level layout needs. It is similar to a [`div ### Composition -```ComponentSnackPlayer path=primitives,Box,composition.tsx +```ComponentSnackPlayer path=components,primitives,Box,composition.tsx ``` @@ -118,7 +118,7 @@ export default () => { ### Basic (With Ref) -```ComponentSnackPlayer path=primitives,Box,WithRef.tsx +```ComponentSnackPlayer path=components,primitives,Box,WithRef.tsx ``` diff --git a/docs/breakpoints.md b/docs/breakpoints.md index 563075139..d30fb4cf1 100644 --- a/docs/breakpoints.md +++ b/docs/breakpoints.md @@ -19,113 +19,6 @@ breakpoints = { `useBreakpointValue` is a custom hook which returns the value for the current breakpoint from the provided responsive values object. This hook also responds to the window resizing and returning the appropriate value for the new window size. -```SnackPlayer name=useBreakpointValue -import React from 'react'; -import { - Factory, - Button, - Stack, - NativeBaseProvider, - Center, -} from 'native-base'; -import { TextInput } from 'react-native'; - -import { Icon, useBreakpointValue, Text, VStack, Heading } from 'native-base'; -import { FontAwesome, Foundation, Feather } from '@expo/vector-icons'; -import { View } from 'react-native'; - -export const UseBreakpointValueExample = () => { - const flexDir = useBreakpointValue({ - base: 'column', - lg: 'row', - }); - return ( - - Why us? - - - - - Secure Checkout - - - - - - Secure Checkout - - - - - - Fast Turn Around - - - - - ); -}; - -// Example template which wraps component with NativeBaseProvider -export default function () { - return ( - -
- -
- - ); -} +```ComponentSnackPlayer path=hooks,useBreakpointValue,usage.tsx ``` diff --git a/docs/buildingDrawerNavigation.md b/docs/buildingDrawerNavigation.md index aa78a13c7..af34bc3d7 100644 --- a/docs/buildingDrawerNavigation.md +++ b/docs/buildingDrawerNavigation.md @@ -9,16 +9,14 @@ Common pattern in navigation is to use drawer from left (sometimes right) side f 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 +```SnackPlayer name=Drawer-Navigation dependencies=@react-navigation/drawer,@react-navigation/native@6.0.6,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.8.0,react-native-reanimated@~2.2.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 { MaterialCommunityIcons } from '@expo/vector-icons'; import { NativeBaseProvider, Button, @@ -31,110 +29,119 @@ import { Center, HStack, Divider, - Icon + Icon, } from 'native-base'; const Drawer = createDrawerNavigator(); function Component(props) { return ( - - props.navigation.toggleDrawer()} position="absolute" ml="2" zIndex="1"> - - -
- {props.route.name} -
- +
+ This is {props.route.name} page. +
); } const getIcon = (screenName) => { switch (screenName) { case 'Inbox': - return "email" + return 'email'; case 'Outbox': - return 'send' + return 'send'; case 'Favorites': - return 'heart' + return 'heart'; case 'Archive': - return 'archive' + return 'archive'; case 'Trash': - return 'trash-can' + return 'trash-can'; case 'Spam': - return 'alert-circle' + return 'alert-circle'; default: - return undefined + return undefined; } -} +}; function CustomDrawerContent(props) { return ( - - - Mail - john_doe@gmail.com - - } space="4"> - - {props.state.routeNames.map((name, index) => ( - { - props.navigation.navigate(name); - }} - > + + + + Mail + + + john_doe@gmail.com + + + } space="4"> + + {props.state.routeNames.map((name, index) => ( + { + props.navigation.navigate(name); + }}> } /> - - {name} + color={ + index === props.state.index ? 'primary.500' : 'gray.500' + } + size="5" + as={} + /> + + {name} ))} - Labels + + Labels + - + } /> - + color="gray.500" + size="5" + as={} + /> + Family - + } /> - + color="gray.500" + size="5" + as={} + /> + Friends - + } /> - + color="gray.500" + size="5" + as={} + /> + Work @@ -148,17 +155,16 @@ function CustomDrawerContent(props) { } function MyDrawer() { return ( - - } - > - - - - - - - + + }> + + + + + + + ); } diff --git a/docs/buildingFooterTabs.md b/docs/buildingFooterTabs.md index 4a4e7f597..a81d29f34 100644 --- a/docs/buildingFooterTabs.md +++ b/docs/buildingFooterTabs.md @@ -84,7 +84,7 @@ export default function App() { >
- + Cart
@@ -107,7 +107,7 @@ export default function App() { >
- - - image - -
- PHOTOS -
- - - - - The Garden City - - - The Silicon Valley of India. - - - - Bengaluru (also called Bangalore) is the center of India's high-tech - industry. The city is also known for its parks and nightlife. - - - - - 6 mins ago - - - - - - ); -} - -export default function () { - return ( - -
- -
- - ); -} ``` diff --git a/docs/button.mdx b/docs/button.mdx index 9e25eaec8..3f49995b5 100644 --- a/docs/button.mdx +++ b/docs/button.mdx @@ -10,53 +10,59 @@ The `Button` component is used to trigger an action or event. ## Import ```jsx -import { Button, ButtonGroup } from 'native-base'; +import { Button } 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. +- **Button.Group** : Used to group buttons whose actions are related, with an option to flush them together. ## Examples ### Basic -```ComponentSnackPlayer path=primitives,Button,basic.tsx +```ComponentSnackPlayer path=components,primitives,Button,basic.tsx ``` ### Sizes -```ComponentSnackPlayer path=primitives,Button,sizes.tsx +```ComponentSnackPlayer path=components,primitives,Button,sizes.tsx ``` ### Variants -```ComponentSnackPlayer path=primitives,Button,variants.tsx +```ComponentSnackPlayer path=components,primitives,Button,variants.tsx ``` ### Loading -```ComponentSnackPlayer path=primitives,Button,loading.tsx +```ComponentSnackPlayer path=components,primitives,Button,loading.tsx ``` ### Icons -```ComponentSnackPlayer path=primitives,Button,icons.tsx +```ComponentSnackPlayer path=components,primitives,Button,icons.tsx ``` ### ButtonGroup -```ComponentSnackPlayer path=primitives,ButtonGroup,basic.tsx +When you use the ButtonGroup component, it allows you to: + +- Set some common properties such as size & colorSchemes of all buttons within it. +- Add spacing between the buttons. +- Flush the buttons together by removing the border radius of the its children as needed. + +```ComponentSnackPlayer path=components,primitives,ButtonGroup,basic.tsx ``` ### Basic (With Ref) -```ComponentSnackPlayer path=primitives,Button,WithRef.tsx +```ComponentSnackPlayer path=components,primitives,Button,WithRef.tsx ``` diff --git a/docs/center.md b/docs/center.md index af1b45de7..032cac0ea 100644 --- a/docs/center.md +++ b/docs/center.md @@ -21,7 +21,7 @@ import { Center, Square, Circle } from 'native-base'; 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 +```ComponentSnackPlayer path=components,composites,Center,Basic.tsx ``` @@ -29,7 +29,7 @@ Put any child element inside it, give it any width or/and height. It'll ensure t Center can be used to nicely position icons in the center and add frames around them. -```ComponentSnackPlayer path=composites,Center,WithIcons.tsx +```ComponentSnackPlayer path=components,composites,Center,WithIcons.tsx ``` @@ -37,7 +37,7 @@ Center can be used to nicely position icons in the center and add frames around Square and Circle automatically centers their children. -```ComponentSnackPlayer path=composites,Center,SquareCircle.tsx +```ComponentSnackPlayer path=components,composites,Center,SquareCircle.tsx ``` diff --git a/docs/checkBox.md b/docs/checkBox.md index 933b5cc30..2d4130982 100644 --- a/docs/checkBox.md +++ b/docs/checkBox.md @@ -11,67 +11,67 @@ The `Checkbox` component is used in forms when a user needs to select multiple v ### Basic -```ComponentSnackPlayer path=primitives,Checkbox,basic.tsx +```ComponentSnackPlayer path=components,primitives,Checkbox,basic.tsx ``` ### Controlled -```ComponentSnackPlayer path=primitives,Checkbox,controlledCheckbox.tsx +```ComponentSnackPlayer path=components,primitives,Checkbox,controlledCheckbox.tsx ``` ### Uncontrolled -```ComponentSnackPlayer path=primitives,Checkbox,uncontrolledCheckbox.tsx +```ComponentSnackPlayer path=components,primitives,Checkbox,uncontrolledCheckbox.tsx ``` ### Disabled -```ComponentSnackPlayer path=primitives,Checkbox,disabled.tsx +```ComponentSnackPlayer path=components,primitives,Checkbox,disabled.tsx ``` ### Invalid -```ComponentSnackPlayer path=primitives,Checkbox,invalid.tsx +```ComponentSnackPlayer path=components,primitives,Checkbox,invalid.tsx ``` ### Custom Color -```ComponentSnackPlayer path=primitives,Checkbox,customColor.tsx +```ComponentSnackPlayer path=components,primitives,Checkbox,customColor.tsx ``` ### Custom Icon -```ComponentSnackPlayer path=primitives,Checkbox,customIcon.tsx +```ComponentSnackPlayer path=components,primitives,Checkbox,customIcon.tsx ``` ### Size -```ComponentSnackPlayer path=primitives,Checkbox,size.tsx +```ComponentSnackPlayer path=components,primitives,Checkbox,size.tsx ``` ### Checkbox Group -```ComponentSnackPlayer path=primitives,Checkbox,checkboxGroup.tsx +```ComponentSnackPlayer path=components,primitives,Checkbox,checkboxGroup.tsx ``` ### Form Controlled -```ComponentSnackPlayer path=primitives,Checkbox,FormControlled.tsx +```ComponentSnackPlayer path=components,primitives,Checkbox,FormControlled.tsx ``` ### Basic (With Ref) -```ComponentSnackPlayer path=primitives,Checkbox,withRef.tsx +```ComponentSnackPlayer path=components,primitives,Checkbox,withRef.tsx ``` diff --git a/docs/colorMode.md b/docs/colorMode.md index e24285266..a06ef175e 100644 --- a/docs/colorMode.md +++ b/docs/colorMode.md @@ -17,42 +17,7 @@ Calling toggleColorMode anywhere in your app tree toggles the color mode. `useColorModeValue` is a React hook used to change any value or style based on the color mode. It takes 2 arguments: the value in light mode, and the value in dark mode. -```SnackPlayer name=ColorMode%20Usage -import React from 'react'; -import { - Heading, - useColorMode, - Button, - HStack, - Avatar, - Center, - useColorModeValue, - Text, - NativeBaseProvider, -} from 'native-base'; - -function ColorModeExample() { - const { colorMode, toggleColorMode } = useColorMode(); - return ( -
- - The active color mode is{' '} - - {useColorModeValue('Light', 'Dark')} - - - -
- ); -} - -export default function () { - return ( - - - - ); -} +```ComponentSnackPlayer path=hooks,useColorModeValue,Basic.tsx ``` diff --git a/docs/container.md b/docs/container.md index 9938207f4..9884d0d18 100644 --- a/docs/container.md +++ b/docs/container.md @@ -15,34 +15,8 @@ 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 ( - -
- -
- - ); -} +```ComponentSnackPlayer path=components,composites,Container,usage.tsx + ``` ## Props diff --git a/docs/customizingComponents.md b/docs/customizingComponents.md index da9c028c6..3042b4c08 100644 --- a/docs/customizingComponents.md +++ b/docs/customizingComponents.md @@ -113,45 +113,7 @@ export default function () { You can also add the variants to the components and use it across project. -```SnackPlayer name=Customizing%20Variants -import React from 'react'; -import { - NativeBaseProvider, - Button, - extendTheme, - Center, - VStack, -} from 'native-base'; - -export default function () { - const theme = extendTheme({ - components: { - Button: { - variants: { - rounded: ({ colorScheme }: any) => { - return { - bg: `${colorScheme}.500`, - rounded: 'full', - }; - }, - }, - }, - }, - }); - - return ( - -
- - - - -
- - ); -} +```ComponentSnackPlayer path=theme,Custom,CustomizingVariant.tsx ``` diff --git a/docs/customizingTheme.md b/docs/customizingTheme.md index 34e5bd136..87d58b620 100644 --- a/docs/customizingTheme.md +++ b/docs/customizingTheme.md @@ -101,7 +101,7 @@ function App() { return ( - + ); } diff --git a/docs/default-theme.md b/docs/default-theme.md index 7a6ab70bf..8b46edddd 100644 --- a/docs/default-theme.md +++ b/docs/default-theme.md @@ -12,6 +12,8 @@ Theming in NativeBase is based on the **[Styled System Theme Specification](htt ## 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. +You can also add `.alpha:{number}` to add levels of opacity to a colour. The number can also be added in the theme file. +Ex: `red.300:alpha.30`, You can read more about this in [`opacity section`](default-theme#opacity) 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. diff --git a/docs/design-tokens.md b/docs/design-tokens.md index 8198af8e3..fd63b015c 100644 --- a/docs/design-tokens.md +++ b/docs/design-tokens.md @@ -55,7 +55,7 @@ export const spacing = { 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 @@ -66,4 +66,4 @@ The above Box will be translated to 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)**. +Checkout the **[default NativeBase theme](default-theme)** and how to customize it **[here](customizingTheme.md)**. diff --git a/docs/divider.md b/docs/divider.md index a6bd0c33c..c61868898 100644 --- a/docs/divider.md +++ b/docs/divider.md @@ -19,7 +19,7 @@ import { Divider } from 'native-base'; The Divider displays a thin horizontal or vertical line. -```ComponentSnackPlayer path=composites,Divider,Basic.tsx +```ComponentSnackPlayer path=components,composites,Divider,Basic.tsx ``` @@ -29,7 +29,7 @@ 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 +```ComponentSnackPlayer path=components,composites,Divider,Orientation.tsx ``` @@ -37,7 +37,7 @@ Pass the `orientation` prop and set it to either `horizontal` or `vertical`. 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 +```ComponentSnackPlayer path=components,composites,Divider,Composition.tsx ``` diff --git a/docs/faq.md b/docs/faq.md index d366df99c..0dd5a4173 100644 --- a/docs/faq.md +++ b/docs/faq.md @@ -3,4 +3,6 @@ id: faq title: FAQ's --- -NativeBase FAQ's Coming Soon. +#### 1. (Web) Modal not appearing on center or ScrollView not working properly + +This can happen if the root element styles are not set as [recommended here](https://necolas.github.io/react-native-web/docs/setup/#root-element). Feel free to [open an issue](https://github.com/GeekyAnts/NativeBase/issues) in case it doesn't work. diff --git a/docs/flatList.md b/docs/flatList.md index ef73e46fe..d0cd17068 100644 --- a/docs/flatList.md +++ b/docs/flatList.md @@ -7,141 +7,7 @@ A component for rendering performant scrollable lists. ## Example -```SnackPlayer name=Basic -import React from "react" -import { - Box, - FlatList, - Heading, - Avatar, - HStack, - VStack, - Text, - Spacer, - Center, - NativeBaseProvider, -} from "native-base" -export const Example = () => { - const data = [ - { - id: "bd7acbea-c1b1-46c2-aed5-3ad53abb28ba", - fullName: "Aafreen Khan", - timeStamp: "12:47 PM", - recentText: "Good Day!", - avatarUrl: - "https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500", - }, - { - id: "3ac68afc-c605-48d3-a4f8-fbd91aa97f63", - fullName: "Sujitha Mathur", - timeStamp: "11:11 PM", - recentText: "Cheer up, there!", - avatarUrl: - "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyEaZqT3fHeNrPGcnjLLX1v_W4mvBlgpwxnA&usqp=CAU", - }, - { - id: "58694a0f-3da1-471f-bd96-145571e29d72", - fullName: "Anci Barroco", - timeStamp: "6:22 PM", - recentText: "Good Day!", - avatarUrl: "https://miro.medium.com/max/1400/0*0fClPmIScV5pTLoE.jpg", - }, - { - id: "68694a0f-3da1-431f-bd56-142371e29d72", - fullName: "Aniket Kumar", - timeStamp: "8:56 PM", - recentText: "All the best", - avatarUrl: - "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSr01zI37DYuR8bMV5exWQBSw28C1v_71CAh8d7GP1mplcmTgQA6Q66Oo--QedAN1B4E1k&usqp=CAU", - }, - { - id: "28694a0f-3da1-471f-bd96-142456e29d72", - fullName: "Kiara", - timeStamp: "12:47 PM", - recentText: "I will call today.", - avatarUrl: - "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBwgu1A5zgPSvfE83nurkuzNEoXs9DMNr8Ww&usqp=CAU", - }, - ] - return ( - - - Inbox - - ( - - - - - - {item.fullName} - - - {item.recentText} - - - - - {item.timeStamp} - - - - )} - keyExtractor={(item) => item.id} - /> - - ) -} - -export default () => { - return ( - -
- -
- - ) -} - +```ComponentSnackPlayer path=components,basic,FlatList,Basic.tsx ``` diff --git a/docs/flex.md b/docs/flex.md index 1667dabac..5609e9b80 100644 --- a/docs/flex.md +++ b/docs/flex.md @@ -27,7 +27,7 @@ While you can pass the verbose props, using the shorthand can save you some time ## Example -```ComponentSnackPlayer path=primitives,Flex,basic.tsx +```ComponentSnackPlayer path=components,primitives,Flex,basic.tsx ``` @@ -35,7 +35,7 @@ While you can pass the verbose props, using the shorthand can save you some time You can pass Spacer to add Space between Flex items. -```ComponentSnackPlayer path=primitives,Flex,spacer.tsx +```ComponentSnackPlayer path=components,primitives,Flex,spacer.tsx ``` diff --git a/docs/formControl.md b/docs/formControl.md index 931133b29..7ebbaed9f 100644 --- a/docs/formControl.md +++ b/docs/formControl.md @@ -11,13 +11,13 @@ import { ComponentTheme } from '../src/components'; ### Basic -```ComponentSnackPlayer path=composites,FormControl,Usage.tsx +```ComponentSnackPlayer path=components,composites,FormControl,Usage.tsx ``` ### Custom Style -```ComponentSnackPlayer path=composites,FormControl,CustomStyle.tsx +```ComponentSnackPlayer path=components,composites,FormControl,CustomStyle.tsx ``` diff --git a/docs/hStack.md b/docs/hStack.md index d8e8c178d..de0d33d06 100644 --- a/docs/hStack.md +++ b/docs/hStack.md @@ -13,7 +13,7 @@ import { HStack } from 'native-base'; ## Examples -```ComponentSnackPlayer path=primitives,HStack,basic.tsx +```ComponentSnackPlayer path=components,primitives,HStack,basic.tsx ``` diff --git a/docs/heading.md b/docs/heading.md index 40a96a759..2708936f7 100644 --- a/docs/heading.md +++ b/docs/heading.md @@ -17,31 +17,31 @@ import { Heading } from 'native-base'; ### Basic -```ComponentSnackPlayer path=primitives,Heading,Basic.tsx +```ComponentSnackPlayer path=components,primitives,Heading,Basic.tsx ``` ### Sizes -```ComponentSnackPlayer path=primitives,Heading,Sizes.tsx +```ComponentSnackPlayer path=components,primitives,Heading,Sizes.tsx ``` ### Truncate -```ComponentSnackPlayer path=primitives,Heading,Truncate.tsx +```ComponentSnackPlayer path=components,primitives,Heading,Truncate.tsx ``` ### Override -```ComponentSnackPlayer path=primitives,Heading,OverridenStyle.tsx +```ComponentSnackPlayer path=components,primitives,Heading,OverridenStyle.tsx ``` ### Composition -```ComponentSnackPlayer path=primitives,Heading,Composition.tsx +```ComponentSnackPlayer path=components,primitives,Heading,Composition.tsx ``` diff --git a/docs/hidden.md b/docs/hidden.md index 2a8b0b906..da4b477c8 100644 --- a/docs/hidden.md +++ b/docs/hidden.md @@ -44,68 +44,8 @@ import { Hidden } from 'native-base'; ### Hidden according to colorMode -```SnackPlayer name=ColorMode%20Usage -import React from 'react'; -import { - useColorMode, - Button, - VStack, - Center, - Box,Text, - Hidden, - useColorModeValue, - NativeBaseProvider -} from 'native-base'; - -function ColorModeExample () { - const { colorMode, toggleColorMode } = useColorMode(); - return ( - <> - - - - - This text will be hidden on light mode - - - - - This text will be hidden on dark mode - - - - - ); -} - -const LocalWrapper = ({ children }) => { - const bg = useColorModeValue('gray.200', 'gray.800') - return ( -
- {children} -
- ); -}; - -export default function () { - return ( - - - - - - ); -} +```ComponentSnackPlayer path=components,primitives,Hidden,hiddenOnColorModes.tsx + ``` ## Hidden according to platform @@ -120,6 +60,6 @@ export default function () { ## Props -```ComponentPropTable path=composites,Fab,Fab.tsx +```ComponentPropTable path=primitives,Hidden,index.tsx ``` diff --git a/docs/icon.md b/docs/icon.md index 4b19156e5..cb1996111 100644 --- a/docs/icon.md +++ b/docs/icon.md @@ -13,7 +13,7 @@ You can use icons in multiple ways in NativeBase: ### Basic -```ComponentSnackPlayer path=primitives,Icon,Basic.tsx +```ComponentSnackPlayer path=components,primitives,Icon,Basic.tsx ``` @@ -23,19 +23,25 @@ Apart from the icons provided by [@expo/vector-icon](https://github.com/expo/vec 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 +```ComponentSnackPlayer path=components,primitives,Icon,AllIcons.tsx ``` ### Custom Icon -```ComponentSnackPlayer path=primitives,Icon,CustomIcon.tsx +```ComponentSnackPlayer path=components,primitives,Icon,CustomIcon.tsx ``` ### Create Icon -```ComponentSnackPlayer path=primitives,Icon,CreateIcon.tsx +```ComponentSnackPlayer path=components,primitives,Icon,CreateIcon.tsx + +``` + +### Integration with Third Party Icons + +```ComponentSnackPlayer path=components,primitives,Icon,ThirdPartyIcons.tsx ``` diff --git a/docs/iconButton.md b/docs/iconButton.md index 0767912b5..45d08dd16 100644 --- a/docs/iconButton.md +++ b/docs/iconButton.md @@ -11,19 +11,19 @@ import { ComponentTheme } from '../src/components'; ### Basic -```ComponentSnackPlayer path=composites,IconButton,Basic.tsx +```ComponentSnackPlayer path=components,composites,IconButton,Basic.tsx ``` ### Sizes -```ComponentSnackPlayer path=composites,IconButton,Sizes.tsx +```ComponentSnackPlayer path=components,composites,IconButton,Sizes.tsx ``` ### Variants -```ComponentSnackPlayer path=composites,IconButton,Variant.tsx +```ComponentSnackPlayer path=components,composites,IconButton,Variant.tsx ``` @@ -35,7 +35,7 @@ import { ComponentTheme } from '../src/components'; ## Styling - + ## Accessibility diff --git a/docs/image.md b/docs/image.md index 550e56ec4..7fb470c5b 100644 --- a/docs/image.md +++ b/docs/image.md @@ -14,31 +14,31 @@ Generic Image components from [React Native](https://reactnative.dev). ### Basic -```ComponentSnackPlayer path=primitives,Image,Basic.tsx +```ComponentSnackPlayer path=components,primitives,Image,Basic.tsx ``` ### Sizes -```ComponentSnackPlayer path=primitives,Image,Sizes.tsx +```ComponentSnackPlayer path=components,primitives,Image,Sizes.tsx ``` ### Border Radius -```ComponentSnackPlayer path=primitives,Image,BorderRadius.tsx +```ComponentSnackPlayer path=components,primitives,Image,BorderRadius.tsx ``` ### Fallback -```ComponentSnackPlayer path=primitives,Image,FallbackSupport.tsx +```ComponentSnackPlayer path=components,primitives,Image,FallbackSupport.tsx ``` ### Basic (With Ref) -```ComponentSnackPlayer path=primitives,Image,WithRef.tsx +```ComponentSnackPlayer path=components,primitives,Image,WithRef.tsx ``` @@ -47,3 +47,29 @@ Generic Image components from [React Native](https://reactnative.dev). ```ComponentPropTable path=primitives,Image,index.tsx showStylingProps=true ``` + +## Note + +### With Next's require statement + +When using require statement from next for image keep this in mind. + +```jsx + + const img = require('/public/me.jpg'); + + // DO ✔ + + // DON'T ✘ + + + +``` diff --git a/docs/input.md b/docs/input.md index 641f15c50..001e4aaa8 100644 --- a/docs/input.md +++ b/docs/input.md @@ -11,49 +11,49 @@ The `Input` component is a component that is used to get user input in a text fi ### Basic -```ComponentSnackPlayer path=primitives,Input,Basic.tsx +```ComponentSnackPlayer path=components,primitives,Input,Basic.tsx ``` ### Input Sizes -```ComponentSnackPlayer path=primitives,Input,Size.tsx +```ComponentSnackPlayer path=components,primitives,Input,Size.tsx ``` ### Input Variants -```ComponentSnackPlayer path=primitives,Input,Variant.tsx +```ComponentSnackPlayer path=components,primitives,Input,Variant.tsx ``` - +``` ### Input Elements -```ComponentSnackPlayer path=primitives,Input,Elements.tsx +```ComponentSnackPlayer path=components,primitives,Input,Elements.tsx ``` ### Password Input -```ComponentSnackPlayer path=primitives,Input,Masked.tsx +```ComponentSnackPlayer path=components,primitives,Input,Masked.tsx ``` ### Controlled Input -```ComponentSnackPlayer path=primitives,Input,Controlled.tsx +```ComponentSnackPlayer path=components,primitives,Input,Controlled.tsx ``` ### Form Controlled -```ComponentSnackPlayer path=primitives,Input,FormControlled.tsx +```ComponentSnackPlayer path=components,primitives,Input,FormControlled.tsx ``` diff --git a/docs/install-cra.mdx b/docs/install-cra.mdx index 5cb6b9652..c2b36ffa2 100644 --- a/docs/install-cra.mdx +++ b/docs/install-cra.mdx @@ -5,7 +5,7 @@ title: Install in Create React App project import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; -import { TileLink } from '../src/components'; +import { TileLink, RNWebNote } from '../src/components'; ```bash -yarn add react-native-web native-base react-native-svg styled-components styled-system react-native-safe-area-context +yarn add react-native-web native-base react-native-svg react-native-safe-area-context ``` @@ -70,7 +70,7 @@ yarn add react-native-web native-base react-native-svg styled-components styled-
```bash -npm install react-native-web native-base react-native-svg styled-components styled-system react-native-safe-area-context +npm install react-native-web native-base react-native-svg react-native-safe-area-context ```
@@ -129,3 +129,5 @@ export default function App() { + + diff --git a/docs/install-expo.mdx b/docs/install-expo.mdx index 00a6c09a5..e8ddb4357 100644 --- a/docs/install-expo.mdx +++ b/docs/install-expo.mdx @@ -9,7 +9,6 @@ import { TileLink } from '../src/components'; Expo helps you to create universal (iOS, Android and Web) React Native apps with no build configuration. - - @@ -68,7 +66,7 @@ cd my-project/ ```bash -yarn add native-base styled-components styled-system +yarn add native-base ``` @@ -76,7 +74,7 @@ yarn add native-base styled-components styled-system ```bash -npm install native-base styled-components styled-system +npm install native-base ``` @@ -108,13 +106,9 @@ export default function App() { } ``` - - - -
minions clapping
diff --git a/docs/install-next.mdx b/docs/install-next.mdx index 06d2dccab..009424422 100644 --- a/docs/install-next.mdx +++ b/docs/install-next.mdx @@ -5,7 +5,7 @@ title: Install in Next.js project import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; -import { TileLink } from '../src/components'; +import { TileLink, RNWebNote } from '../src/components'; -

Choose your preferred setting and start your development swiftly 🚀

@@ -100,7 +99,7 @@ Yey! you are all set, start editing src/pages/index.tsx now.
```bash -yarn add react-native-web native-base react-native-svg styled-components styled-system react-native-safe-area-context +yarn add react-native-web native-base react-native-svg react-native-safe-area-context ```
@@ -112,7 +111,7 @@ yarn add react-native-web native-base react-native-svg styled-components styled-
```bash -npm install react-native-web native-base react-native-svg styled-components styled-system react-native-safe-area-context +npm install react-native-web native-base react-native-svg react-native-safe-area-context ```
@@ -157,7 +156,6 @@ 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', @@ -262,3 +260,5 @@ export default function App() { + + diff --git a/docs/install-rn.mdx b/docs/install-rn.mdx index 202de7126..d05cfba8e 100644 --- a/docs/install-rn.mdx +++ b/docs/install-rn.mdx @@ -7,7 +7,6 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import { TileLink } from '../src/components'; - - - - ### Create a new project using ReactNative CLI with NativeBase template [Refer this link](https://github.com/react-native-community/cli#about) to get infomation about the React Native CLI. @@ -44,10 +40,8 @@ npx react-native init MyApp --template react-native-template-native-base-typescr Yey! you are all set, start editing App.js/App.tsx now. - - ### Create a new project if not exist @@ -69,7 +63,7 @@ values={[ ```bash -yarn add native-base react-native-svg styled-components styled-system react-native-safe-area-context +yarn add native-base react-native-svg react-native-safe-area-context ``` @@ -77,7 +71,7 @@ yarn add native-base react-native-svg styled-components styled-system react-nati ```bash -npm install native-base react-native-svg styled-components styled-system react-native-safe-area-context +npm install native-base react-native-svg react-native-safe-area-context ``` @@ -112,7 +106,6 @@ export default function App() { -
diff --git a/docs/interaction-styles.mdx b/docs/interaction-styles.mdx index 553b68369..aa46c0a74 100644 --- a/docs/interaction-styles.mdx +++ b/docs/interaction-styles.mdx @@ -1,6 +1,6 @@ --- id: pseudo-props -title: Pseudo Props Basics +title: 'Pseudo props: Overview' --- import { @@ -20,12 +20,12 @@ NativeBase provides a declarative way to add interaction or platform specific pr Using `_hover` pseudo prop, we can customize the style of Pressable component on hover. - + @@ -40,8 +40,8 @@ Using `_hover` pseudo prop, we can customize the style of Pressable component on @@ -56,12 +56,12 @@ Using `_hover` pseudo prop, we can customize the style of Pressable component on Using `_pressed` pseudo prop, we can customize the style of Pressable component on pressed. - + @@ -76,9 +76,9 @@ Using `_pressed` pseudo prop, we can customize the style of Pressable component @@ -92,7 +92,7 @@ Using `_pressed` pseudo prop, we can customize the style of Pressable component Using `_focus` pseudo prop, we can customize the style of Pressable component on focus. - + @@ -117,8 +117,8 @@ Using `_focus` pseudo prop, we can customize the style of Pressable component on _focus={{ bg: 'primary.700', borderColor: 'primary.400', borderWidth: '2px' }} bg="primary.600" rounded="sm" - py={2} - px={3} + py="2" + px="3" alignSelf="center" > @@ -132,14 +132,14 @@ Using `_focus` pseudo prop, we can customize the style of Pressable component on Using `_web`, `_iOS`, `_android` pseudo props, we can customize the style or behaviour of NativeBase components across platforms. - - + + @@ -148,13 +148,13 @@ Using `_web`, `_iOS`, `_android` pseudo props, we can customize the style or beh Web - + @@ -163,13 +163,13 @@ Using `_web`, `_iOS`, `_android` pseudo props, we can customize the style or beh Android - + @@ -183,12 +183,12 @@ Using `_web`, `_iOS`, `_android` pseudo props, we can customize the style or beh ```jsx title="Platform specific example" - + @@ -197,12 +197,12 @@ Using `_web`, `_iOS`, `_android` pseudo props, we can customize the style or beh Web - + @@ -211,12 +211,12 @@ Using `_web`, `_iOS`, `_android` pseudo props, we can customize the style or beh Android - + diff --git a/docs/keyboardAvoidingView.md b/docs/keyboardAvoidingView.md index a124d3063..7433142e2 100644 --- a/docs/keyboardAvoidingView.md +++ b/docs/keyboardAvoidingView.md @@ -7,7 +7,7 @@ Provides a view that moves out of the way of virtual keyboard automatically. It ## Example -```ComponentSnackPlayer path=basic,KeyboardAvoidingView,Basic.tsx +```ComponentSnackPlayer path=components,basic,KeyboardAvoidingView,Basic.tsx ``` diff --git a/docs/link.md b/docs/link.md index 96c5d2b60..cd98bb4ba 100644 --- a/docs/link.md +++ b/docs/link.md @@ -17,31 +17,31 @@ import { Link } from 'native-base'; ### Basic -```ComponentSnackPlayer path=primitives,Link,Basic.tsx +```ComponentSnackPlayer path=components,primitives,Link,Basic.tsx ``` ### External Link -```ComponentSnackPlayer path=primitives,Link,ExternalLink.tsx +```ComponentSnackPlayer path=components,primitives,Link,ExternalLink.tsx ``` ### Link with Underline -```ComponentSnackPlayer path=primitives,Link,UnderlineLink.tsx +```ComponentSnackPlayer path=components,primitives,Link,UnderlineLink.tsx ``` ### Link custom onPress -```ComponentSnackPlayer path=primitives,Link,CustomOnPress.tsx +```ComponentSnackPlayer path=components,primitives,Link,CustomOnPress.tsx ``` ### Link around containers -```ComponentSnackPlayer path=primitives,Link,CompositeLink.tsx +```ComponentSnackPlayer path=components,primitives,Link,CompositeLink.tsx ``` @@ -57,4 +57,4 @@ import { Link } from 'native-base'; ## Accessibility -Adheres to the [Link WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#link) \ No newline at end of file +Adheres to the [Link WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#link) diff --git a/docs/loginsignupforms.md b/docs/loginsignupforms.md index 9abc14ca3..b0ebd4db9 100644 --- a/docs/loginsignupforms.md +++ b/docs/loginsignupforms.md @@ -7,151 +7,12 @@ title: Login/Signup Forms ### 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? - - - - - - I'm a new user.{' '} - - - Sign Up - - - - - - ); -} +```ComponentSnackPlayer path=examples,Signin.tsx ``` ### 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 - - - - - - - - ); -} +```ComponentSnackPlayer path=examples,Signup.tsx ``` diff --git a/docs/menu.md b/docs/menu.md index 70d276936..e504ddbc1 100644 --- a/docs/menu.md +++ b/docs/menu.md @@ -25,25 +25,25 @@ import { Menu } from 'native-base'; ### Basic -```ComponentSnackPlayer path=composites,Menu,Basic.tsx +```ComponentSnackPlayer path=components,composites,Menu,Basic.tsx ``` ### Group -```ComponentSnackPlayer path=composites,Menu,Group.tsx +```ComponentSnackPlayer path=components,composites,Menu,Group.tsx ``` ### MenuOptionGroups -```ComponentSnackPlayer path=composites,Menu,MenuOptionsGroup.tsx +```ComponentSnackPlayer path=components,composites,Menu,MenuOptionsGroup.tsx ``` ### Menu Placement -```ComponentSnackPlayer path=composites,Menu,MenuPositions.tsx +```ComponentSnackPlayer path=components,composites,Menu,MenuPositions.tsx ``` @@ -89,7 +89,6 @@ Extends `MenuItem`. - ## Accessibility -Adheres to the [Menu WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#menu) \ No newline at end of file +Adheres to the [Menu WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#menu) diff --git a/docs/migration/Accordion.md b/docs/migration/Accordion.md deleted file mode 100644 index 9f75bc7ea..000000000 --- a/docs/migration/Accordion.md +++ /dev/null @@ -1,89 +0,0 @@ -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/docs/migration/Card.md b/docs/migration/Card.md index c9acc1d07..14a383239 100644 --- a/docs/migration/Card.md +++ b/docs/migration/Card.md @@ -68,17 +68,17 @@ 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/docs/migration/Icon.md b/docs/migration/Icon.md index cdaba70a0..e51c49acb 100644 --- a/docs/migration/Icon.md +++ b/docs/migration/Icon.md @@ -65,7 +65,7 @@ export default function () { diff --git a/docs/migration/Radio Button.md b/docs/migration/Radio Button.md index a2ccedd08..b05b412b7 100644 --- a/docs/migration/Radio Button.md +++ b/docs/migration/Radio Button.md @@ -80,10 +80,10 @@ export default function () { setValue(nextValue); }} > - + One - + Two diff --git a/docs/migration/Spinner.md b/docs/migration/Spinner.md index a4f8f160d..9a6fbc31a 100644 --- a/docs/migration/Spinner.md +++ b/docs/migration/Spinner.md @@ -40,7 +40,7 @@ values={[ - + ``` diff --git a/docs/migration/Thumbnail.md b/docs/migration/Thumbnail.md index 2f8e46907..d199a39ad 100644 --- a/docs/migration/Thumbnail.md +++ b/docs/migration/Thumbnail.md @@ -55,11 +55,11 @@ export default function () { const uri = 'https://facebook.github.io/react-native/docs/assets/favicon.png'; return ( - + Square Thumbnail - react-native - react-native - react-native + react-native + react-native + react-native Circular Thumbnail diff --git a/docs/migration/v3xtov32.md b/docs/migration/v3xtov32.md deleted file mode 100644 index d15108d16..000000000 --- a/docs/migration/v3xtov32.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -id: migration-guide-three-point-two -title: Upgrading to 3.2.0 from 3.x ---- - -As we continue to improve NativeBase v3 we got a lot of feature requests and we also revamped our theme to make it more consistent, easy to understand, optimized and promote good practices while writing code. - -To do that we had to make some changes to our theme in `v3.2.0`. These are breaking changes if you are using some of the tokens in your project. To make it easy for you to upgrade, we are providing three options: - -## Extend previous version's theme for backward compatibility - -You need to add `v3CompatibleTheme` to your `NativeBaseProvider` which preserves all the old token that were changed or removed in v3.2.0. - -```jsx -import { NativeBaseProvider, extendTheme, v3CompatibleTheme } from "native-base"; - -// ... -const yourCustomTheme = { - // ... -} - - - -``` - -## Handling breaking changes - -Below is a rough account of the breaking API changes as well as the minimal change to migrate - - -### Alert: - -* Removed `Alert.Title`. Use `Text` component instead. -* Removed `Alert.Description`. Use `Text` component instead. - -### Divider: - -* Removed `size`. Use `thickness` prop instead. - - -## Note: - -We have introduced [strict mode](../strict-mode.md) in `v3.2.0` which is `off` by default. If you don't want to have strict mode, step 1 is enough. If you want to comply with the strict mode, you also need to do these: - - 1. All utility props which take theme tokens as values, now take only string values as a valid type - - This means that if you pass a number value which is supposed to be a theme token, into a utility prop, then it will be treated as invalid and based on you strict mode config will show you an error or a warning. - - ```js - // Incorrect Way to pass theme tokens to utility props - ❌ - - ``` - - ```js - // Correct Way to pass theme tokens to utility props - ✅ - ``` - - 2. Remove all non token values given to utility props which accept theme tokens. For example, `p="11"` is not supported with the [default theme](../default-theme.md). Pick up another value from default theme tokens or [define a new one yourself](../customizingTheme.md). - 3. If you are using [Icon](../icon.md) with `as` prop, verify this - ```jsx - /* correct */ - - /* incorrect */ - } /> - /* incorrect */ - } name="md-checkmark-circle" /> - \ No newline at end of file diff --git a/docs/migration/v3xtov32.mdx b/docs/migration/v3xtov32.mdx new file mode 100644 index 000000000..985e8e724 --- /dev/null +++ b/docs/migration/v3xtov32.mdx @@ -0,0 +1,293 @@ +--- +id: migration-guide-three-point-two +title: Upgrading to 3.2.0 from 3.x +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +As we continue to improve NativeBase v3 we got a lot of feature requests and we also revamped our theme to make it more consistent, easy to understand, optimized and promote good practices while writing code. + +To do that we had to make some changes to our theme in `v3.2.0`. These are breaking changes if you are using some of the tokens in your project. To make it easy for you to upgrade, we are providing three options: + +## Extend previous version's theme for backward compatibility + +You need to add `v3CompatibleTheme` to your `NativeBaseProvider` which preserves all the old token that were changed or removed in v3.2.0. + +```jsx +import { NativeBaseProvider, extendTheme, v3CompatibleTheme } from "native-base"; + +// ... +const yourCustomTheme = { + // ... +} + + + +``` + +## Migrating in a NextJS Project + +If you are updating from 3.1.x to 3.2.x in a Next.js project, you might need to make some changes in configs. + +### Updating next.config.js/ts + +- Now need to include only react-native-web and native-base in transplie-modules +- No need of webpack config just add withFonts(from next-fonts) and withExpo(from @expo/next-adapter) + + + + + +```jsx {5-22,27-40} +const withFonts = require('next-fonts'); +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', + 'react-native-vector-icons', +]); +module.exports = withPlugins( + [withTM, [withFonts, { projectRoot: __dirname }]], + { + 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; + }, + } +); +``` + + + + +```jsx {1,5,9,15,17} +const { withExpo } = require('@expo/next-adapter'); +const withFonts = require('next-fonts'); +const withPlugins = require('next-compose-plugins'); +const withTM = require('next-transpile-modules')([ + 'react-native-web', + 'native-base', +]); + +const nextConfig = {}; + +module.exports = withPlugins( + [ + withTM, + [withFonts, { projectRoot: __dirname }], + [withExpo, { projectRoot: __dirname }], + ], + nextConfig +); +``` + + + + +### Updating babel.config.js/ts + +- Add `presets: ["@expo/next-adapter/babel"]` and `plugins: [["@babel/plugin-proposal-class-properties"]]` + + + + + +```jsx {3,2} +module.exports = { + presets: ['next/babel'], + plugins: [['react-native-web', { commonjs: true }]], +}; +``` + + + + +```jsx {2,3} +module.exports = { + presets: ['@expo/next-adapter/babel'], + plugins: [['@babel/plugin-proposal-class-properties']], +}; +``` + + + + +### Updating \_document.js/ts + +- No need to import .ttf font files of Icons and add them into document style. + + + + + +```jsx {2-20,30} +import Document, { Html, Head, Main, NextScript } from 'next/document'; +import Ionicons from 'react-native-vector-icons/Fonts/Ionicons.ttf'; +import MaterialIcons from 'react-native-vector-icons/Fonts/MaterialIcons.ttf'; +import AntDesign from 'react-native-vector-icons/Fonts/AntDesign.ttf'; +import MaterialCommunityIcons from 'react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf'; +// Generate required css +const iconFontStyles = `@font-face { + src: url(${Ionicons}); + font-family: Ionicons; +} +@font-face { + src: url(${MaterialIcons}); + font-family: MaterialIcons; +}@font-face { + src: url(${AntDesign}); + font-family: AntDesign; +}@font-face { + src: url(${MaterialCommunityIcons}); + font-family: MaterialCommunityIcons; +}`; +class MyDocument extends Document { + static async getInitialProps(ctx) { + const initialProps = await Document.getInitialProps(ctx); + return { ...initialProps }; + } + render() { + return ( + + + + + +
+ + + + ); + } +} +export default MyDocument; +``` + + + + +```jsx +import React from 'react'; +import { getInitialProps } from '@expo/next-adapter/document'; +import Document, { Html, Head, Main, NextScript } from 'next/document'; + +class CustomDocument extends Document { + render() { + return ( + + + + + +
+ + + + ); + } +} + +// Import the getInitialProps method and assign it to your component to ensure the react-native-web styles are used. +CustomDocument.getInitialProps = getInitialProps; + +export default CustomDocument; +``` + + + + +## Handling breaking changes + +Below is a rough account of the breaking API changes as well as the minimal change to migrate + +### Alert: + +- Removed `Alert.Title`. Use `Text` component instead. +- Removed `Alert.Description`. Use `Text` component instead. + +### Divider: + +- Removed `size`. Use `thickness` prop instead. + +## Strict Mode: + +We have introduced [strict mode](../strict-mode.md) in `v3.2.0` which is `off` by default. If you don't want to have strict mode, step 1 is enough. If you want to comply with the strict mode, you also need to do these: + +1. All utility props which take theme tokens as values, now take only string values as a valid type + +This means that if you pass a number value which is supposed to be a theme token, into a utility prop, then it will be treated as invalid and based on you strict mode config will show you an error or a warning. + +```js +// Incorrect Way to pass theme tokens to utility props + ❌ + +``` + +```js +// Correct Way to pass theme tokens to utility props + ✅ +``` + +2. Remove all non token values given to utility props which accept theme tokens. For example, `p="11"` is not supported with the [default theme](../default-theme.md). Pick up another value from default theme tokens or [define a new one yourself](../customizingTheme.md). +3. If you are using [Icon](../icon.md) with `as` prop, verify this + +```jsx + /* correct */ + + /* incorrect */ + } /> + /* incorrect */ + } name="md-checkmark-circle" /> + +``` + +```` + +``` + +``` +```` diff --git a/docs/modal.md b/docs/modal.md index f4a013563..c857f744e 100644 --- a/docs/modal.md +++ b/docs/modal.md @@ -26,13 +26,13 @@ import { Modal } from 'native-base'; ### Basic -```ComponentSnackPlayer path=composites,Modal,Basic.tsx +```ComponentSnackPlayer path=components,composites,Modal,Basic.tsx ``` ### Multiple Modals -```ComponentSnackPlayer path=composites,Modal,MultipleModal.tsx +```ComponentSnackPlayer path=components,composites,Modal,MultipleModal.tsx ``` @@ -40,31 +40,31 @@ import { Modal } from 'native-base'; 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 +```ComponentSnackPlayer path=components,composites,Modal,Size.tsx ``` ### intialFocusRef and finalFocusRef Example -```ComponentSnackPlayer path=composites,Modal,ModalRefEg.tsx +```ComponentSnackPlayer path=components,composites,Modal,ModalRefEg.tsx ``` ### Modal with avoidKeyboard -```ComponentSnackPlayer path=composites,Modal,ModalWithAvoidKeyboard.tsx +```ComponentSnackPlayer path=components,composites,Modal,ModalWithAvoidKeyboard.tsx ``` ### Modal Placement -```ComponentSnackPlayer path=composites,Modal,ModalPlacement.tsx +```ComponentSnackPlayer path=components,composites,Modal,ModalPlacement.tsx ``` ### Custom Backdrop Modal -```ComponentSnackPlayer path=composites,Modal,CustomBackdrop.tsx +```ComponentSnackPlayer path=components,composites,Modal,CustomBackdrop.tsx ``` diff --git a/docs/nativebase-factory.md b/docs/nativebase-factory.md index 242f0bdae..61a6e9730 100644 --- a/docs/nativebase-factory.md +++ b/docs/nativebase-factory.md @@ -11,139 +11,25 @@ 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 ( - -
- -
- - ); -} +```ComponentSnackPlayer path=components,composites,factory,usage.tsx + ``` ## 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 ( - -
- -
- - ); -} +```ComponentSnackPlayer path=components,composites,factory,theme.tsx + ``` ## 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 ( - -
- -
- - ); -} +```ComponentSnackPlayer path=components,composites,factory,modes.tsx + ``` ## 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 ( - -
- -
- - ); -} +```ComponentSnackPlayer path=components,composites,factory,ref.tsx ``` diff --git a/docs/popOver.md b/docs/popOver.md index 4ee92bdd4..659ea9181 100644 --- a/docs/popOver.md +++ b/docs/popOver.md @@ -25,22 +25,24 @@ import { Popover } from 'native-base'; ### Basic -```ComponentSnackPlayer path=composites,Popover,Basic.tsx +```ComponentSnackPlayer path=components,composites,Popover,Basic.tsx ``` ### initialFocusRef -```ComponentSnackPlayer path=composites,Popover,RefEg.tsx +```ComponentSnackPlayer path=components,composites,Popover,RefEg.tsx ``` ### Positions -```ComponentSnackPlayer path=composites,Popover,PopoverPositions.tsx +```ComponentSnackPlayer path=components,composites,Popover,PopoverPositions.tsx ``` +
+ :::tip Development Tip You can pass custom backgroundColor using `bg` or `backgroundColor`, `borderColor` and `borderWidth` to Popover.Content. ::: diff --git a/docs/presence-transition.md b/docs/presence-transition.md index 2e725036a..123d1ec63 100644 --- a/docs/presence-transition.md +++ b/docs/presence-transition.md @@ -7,19 +7,19 @@ PresenceTransition provides a declarative API to add entry and exit transitions. ### Fade -```ComponentSnackPlayer path=composites,Transitions,Fade.tsx +```ComponentSnackPlayer path=components,composites,Transitions,Fade.tsx ``` ### ScaleFade -```ComponentSnackPlayer path=composites,Transitions,ScaleFade.tsx +```ComponentSnackPlayer path=components,composites,Transitions,ScaleFade.tsx ``` ## Props -```ComponentPropTable path=composites,Transitions,PresenceTransition.tsx showStylingProps=true +```ComponentPropTable path=components,composites,Transitions,PresenceTransition.tsx showStylingProps=true ``` diff --git a/docs/pressable.md b/docs/pressable.md index 4f37c810d..4064425c5 100644 --- a/docs/pressable.md +++ b/docs/pressable.md @@ -11,7 +11,7 @@ Pressable is a lower level primitive if you need more flexibility than a button Pressable accepts most of the utility style system props. -```ComponentSnackPlayer path=primitives,Pressable,Basic.tsx +```ComponentSnackPlayer path=components,primitives,Pressable,Basic.tsx ``` @@ -19,7 +19,7 @@ Pressable accepts most of the utility style system props. Pressable accepts a render prop children, which receives isHovered, isFocused and isPressed props. -```ComponentSnackPlayer path=primitives,Pressable,Events.tsx +```ComponentSnackPlayer path=components,primitives,Pressable,Events.tsx ``` diff --git a/docs/progress.md b/docs/progress.md index c6eabd361..c8bb2bdbd 100644 --- a/docs/progress.md +++ b/docs/progress.md @@ -17,31 +17,31 @@ import { Progress } from 'native-base'; ### Basic -```ComponentSnackPlayer path=composites,Progress,Basic.tsx +```ComponentSnackPlayer path=components,composites,Progress,Basic.tsx ``` ### Progress colorScheme -```ComponentSnackPlayer path=composites,Progress,ColorScheme.tsx +```ComponentSnackPlayer path=components,composites,Progress,ColorScheme.tsx ``` ### Sizes -```ComponentSnackPlayer path=composites,Progress,Sizes.tsx +```ComponentSnackPlayer path=components,composites,Progress,Sizes.tsx ``` ### Flat Progress -```ComponentSnackPlayer path=composites,Progress,Flat.tsx +```ComponentSnackPlayer path=components,composites,Progress,Flat.tsx ``` ### Custom Track Color -```ComponentSnackPlayer path=composites,Progress,CustomBgColor.tsx +```ComponentSnackPlayer path=components,composites,Progress,CustomBgColor.tsx ``` diff --git a/docs/pseudoProps.md b/docs/pseudoProps.md index 3b9ee2af2..36baacf27 100644 --- a/docs/pseudoProps.md +++ b/docs/pseudoProps.md @@ -1,6 +1,6 @@ --- id: pseudo-props-101 -title: Pseudo Props Advanced +title: 'Pseudo props: Do’s & Dont’s' --- Before getting into details of all the common Pseudo Props NativeBase has to offer let's check some key points that these pseudo props follow. @@ -41,26 +41,22 @@ The above thing translates to a Text(not Button) when hovered changes its color Now all the pseudo props follow a specific order that defines which pseudo prop can override the other pseudo prop. You can find the precedence values associated with each pseudo prop. Higher number means higher precedence. -```jsx -_disabled(100); - -_pressed(70); -_hover(60); -_focus(50); -_focusVisible(55); - -_active(30); -_checked(30); -_readOnly(40); -_invalid(40); - -_web(10); -_android(10); -_ios(10); - -_light(10); -_dark(10); -``` +| Pseudo Props | Precedence Value | +| -------------- | ---------------- | +| \_disabled | 100 | +| \_pressed | 70 | +| \_hover | 60 | +| \_focus | 50 | +| \_focusVisible | 55 | +| \_active | 30 | +| \_checked | 30 | +| \_readOnly | 40 | +| \_invalid | 40 | +| \_web | 10 | +| \_android | 10 | +| \_ios | 10 | +| \_light | 10 | +| \_dark | 10 | ```SnackPlayer name=Pseudo%20Props%20Precedence import React from 'react'; diff --git a/docs/radio.md b/docs/radio.md index 04da350e5..276c55c85 100644 --- a/docs/radio.md +++ b/docs/radio.md @@ -11,55 +11,55 @@ import { ComponentTheme } from '../src/components'; ### Controlled -```ComponentSnackPlayer path=primitives,Radio,controlledRadio.tsx +```ComponentSnackPlayer path=components,primitives,Radio,controlledRadio.tsx ``` ### Uncontrolled -```ComponentSnackPlayer path=primitives,Radio,uncontrolledRadio.tsx +```ComponentSnackPlayer path=components,primitives,Radio,uncontrolledRadio.tsx ``` ### Disabled -```ComponentSnackPlayer path=primitives,Radio,disabled.tsx +```ComponentSnackPlayer path=components,primitives,Radio,disabled.tsx ``` ### Invalid -```ComponentSnackPlayer path=primitives,Radio,invalid.tsx +```ComponentSnackPlayer path=components,primitives,Radio,invalid.tsx ``` ### Size -```ComponentSnackPlayer path=primitives,Radio,size.tsx +```ComponentSnackPlayer path=components,primitives,Radio,size.tsx ``` ### Custom Color -```ComponentSnackPlayer path=primitives,Radio,customColor.tsx +```ComponentSnackPlayer path=components,primitives,Radio,customColor.tsx ``` ### Custom Icon -```ComponentSnackPlayer path=primitives,Radio,customIcon.tsx +```ComponentSnackPlayer path=components,primitives,Radio,customIcon.tsx ``` ### Form Controlled -```ComponentSnackPlayer path=primitives,Radio,formControlled.tsx +```ComponentSnackPlayer path=components,primitives,Radio,formControlled.tsx ``` ### Basic (With Ref) -```ComponentSnackPlayer path=primitives,Radio,withRef.tsx +```ComponentSnackPlayer path=components,primitives,Radio,withRef.tsx ``` diff --git a/docs/responsive.md b/docs/responsive.md index aa66b499a..af755933b 100644 --- a/docs/responsive.md +++ b/docs/responsive.md @@ -30,7 +30,7 @@ import React from 'react'; import { NativeBaseProvider, Center } from 'native-base'; function BreakpointExample () { return ( -
+
This is a box
); @@ -102,7 +102,7 @@ function Example() { rounded="lg" overflow="hidden" width={['72', '72', '4/6']} - shadow={1} + shadow="1" _light={{ backgroundColor: 'coolGray.50' }} _dark={{ backgroundColor: 'gray.700' }}> @@ -119,14 +119,14 @@ function Example() { bg="violet.500" _text={{ color: 'white', fontWeight: '700', fontSize: 'xs' }} position="absolute" - bottom={0} + bottom="0" px="3" py="1.5"> PHOTOS
- + The Garden City @@ -143,7 +143,7 @@ function Example() { Bengaluru (also called Bangalore) is the center of India's high-tech industry. The city is also known for its parks and nightlife. - + + NativeBase ); @@ -53,7 +53,7 @@ import { NativeBaseProvider, Box, Text } from 'native-base'; function MyComponent() { return ( // This would look same on all devices - + NativeBase ); @@ -81,7 +81,7 @@ function MyComponent() { const safeAreaProps = useSafeArea({ safeAreaTop: true, pt: 2 }); return ( // This would look same on all devices - + NativeBase ); diff --git a/docs/scrollview.md b/docs/scrollview.md index 1064515aa..99e5e443b 100644 --- a/docs/scrollview.md +++ b/docs/scrollview.md @@ -7,7 +7,7 @@ Provides a scrolling container that can host multiple components and views. ## Example -```ComponentSnackPlayer path=basic,ScrollView,Basic.tsx +```ComponentSnackPlayer path=components,basic,ScrollView,Basic.tsx ``` diff --git a/docs/sectionList.md b/docs/sectionList.md index 329206a1d..aea7b93d3 100644 --- a/docs/sectionList.md +++ b/docs/sectionList.md @@ -7,7 +7,7 @@ A performant interface for rendering sectioned lists. ## Example -```ComponentSnackPlayer path=basic,SectionList,Basic.tsx +```ComponentSnackPlayer path=components,basic,SectionList,Basic.tsx ``` diff --git a/docs/select.md b/docs/select.md index aceb730d5..6d1d6a9ad 100644 --- a/docs/select.md +++ b/docs/select.md @@ -19,13 +19,13 @@ import { Select } from 'native-base'; ### Basic -```ComponentSnackPlayer path=primitives,Select,Basic.tsx +```ComponentSnackPlayer path=components,primitives,Select,Basic.tsx ``` ### FormControlled -```ComponentSnackPlayer path=primitives,Select,FormControlled.tsx +```ComponentSnackPlayer path=components,primitives,Select,FormControlled.tsx ``` @@ -45,39 +45,6 @@ import { Select } from 'native-base'; ``` - - - - ## Styling diff --git a/docs/slide.md b/docs/slide.md index fb8279ee1..885488982 100644 --- a/docs/slide.md +++ b/docs/slide.md @@ -11,19 +11,19 @@ Slide component provides a declarative API to add sliding transitions. ### Slide -```ComponentSnackPlayer path=composites,Transitions,Slide.tsx +```ComponentSnackPlayer path=components,composites,Transitions,Slide.tsx ``` ### Slide wrapped inside parent -```ComponentSnackPlayer path=composites,Transitions,SlideWrapped.tsx +```ComponentSnackPlayer path=components,composites,Transitions,SlideWrapped.tsx ``` ### Slide Composition -```ComponentSnackPlayer path=composites,Transitions,SlideComposition.tsx +```ComponentSnackPlayer path=components,composites,Transitions,SlideComposition.tsx ``` diff --git a/docs/slider.md b/docs/slider.md index 0d74ff95f..23b696e84 100644 --- a/docs/slider.md +++ b/docs/slider.md @@ -22,37 +22,37 @@ import { Slider } from 'native-base'; ## Examples -```ComponentSnackPlayer path=primitives,Slider,usage.tsx +```ComponentSnackPlayer path=components,primitives,Slider,usage.tsx ``` ### Color -```ComponentSnackPlayer path=primitives,Slider,color.tsx +```ComponentSnackPlayer path=components,primitives,Slider,color.tsx ``` ### Value -```ComponentSnackPlayer path=primitives,Slider,Value.tsx +```ComponentSnackPlayer path=components,primitives,Slider,Value.tsx ``` ### Size -```ComponentSnackPlayer path=primitives,Slider,Size.tsx +```ComponentSnackPlayer path=components,primitives,Slider,Size.tsx ``` ### Customised -```ComponentSnackPlayer path=primitives,Slider,Customized.tsx +```ComponentSnackPlayer path=components,primitives,Slider,Customized.tsx ``` ### Form Controlled -```ComponentSnackPlayer path=primitives,Slider,FormControlled.tsx +```ComponentSnackPlayer path=components,primitives,Slider,FormControlled.tsx ``` @@ -70,8 +70,7 @@ import { Slider } from 'native-base'; ## Styling - - + ## Accessibility @@ -79,13 +78,9 @@ Adheres to the [Slider WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria- ### Keyboard Interactions -| Name | Description | -| ------------------|-------------| -| ArrowRight | Increments/decrements by the step value depending on orientation.| -| ArrowLeft | Increments/decrements by the step value depending on orientation. -| ArrowUp | Increases the value by the step amount. -| ArrowDown | Decreases the value by the step amount. - - - - +| Name | Description | +| ---------- | ----------------------------------------------------------------- | +| ArrowRight | Increments/decrements by the step value depending on orientation. | +| ArrowLeft | Increments/decrements by the step value depending on orientation. | +| ArrowUp | Increases the value by the step amount. | +| ArrowDown | Decreases the value by the step amount. | diff --git a/docs/spinner.md b/docs/spinner.md index 359275a20..3ceaeef0f 100644 --- a/docs/spinner.md +++ b/docs/spinner.md @@ -7,19 +7,19 @@ title: Spinner ### Basic -```ComponentSnackPlayer path=primitives,Spinner,usage.tsx +```ComponentSnackPlayer path=components,primitives,Spinner,usage.tsx ``` ### Colors -```ComponentSnackPlayer path=primitives,Spinner,color.tsx +```ComponentSnackPlayer path=components,primitives,Spinner,color.tsx ``` ### Sizes -```ComponentSnackPlayer path=primitives,Spinner,size.tsx +```ComponentSnackPlayer path=components,primitives,Spinner,size.tsx ``` diff --git a/docs/stack.md b/docs/stack.md index 12ac4ecae..bf058ead7 100644 --- a/docs/stack.md +++ b/docs/stack.md @@ -7,7 +7,7 @@ title: Stack ## Example -```ComponentSnackPlayer path=primitives,Stack,basic.tsx +```ComponentSnackPlayer path=components,primitives,Stack,basic.tsx ``` diff --git a/docs/stagger.md b/docs/stagger.md index ac8bce5c4..ed4adb704 100644 --- a/docs/stagger.md +++ b/docs/stagger.md @@ -7,7 +7,7 @@ Stagger component provides a declarative API to add Staggered Transitions. ## Example -```ComponentSnackPlayer path=composites,Transitions,Stagger.tsx +```ComponentSnackPlayer path=components,composites,Transitions,Stagger.tsx ``` diff --git a/docs/statusBar.md b/docs/statusBar.md index c8769bda1..3f7b3c687 100644 --- a/docs/statusBar.md +++ b/docs/statusBar.md @@ -7,7 +7,7 @@ Component to control the app status bar. ## Example -```ComponentSnackPlayer path=basic,StatusBar,Basic.tsx +```ComponentSnackPlayer path=components,basic,StatusBar,Basic.tsx ``` diff --git a/docs/switch.md b/docs/switch.md index 3d1f07574..40e762475 100644 --- a/docs/switch.md +++ b/docs/switch.md @@ -9,25 +9,25 @@ The `Switch` component is an alternative to the Checkbox component. You can swit ### Basic -```ComponentSnackPlayer path=primitives,Switch,Basic.tsx +```ComponentSnackPlayer path=components,primitives,Switch,Basic.tsx ``` ### Sizes -```ComponentSnackPlayer path=primitives,Switch,Sizes.tsx +```ComponentSnackPlayer path=components,primitives,Switch,Sizes.tsx ``` ### Track & Thumb Color -```ComponentSnackPlayer path=primitives,Switch,SwitchBgColor.tsx +```ComponentSnackPlayer path=components,primitives,Switch,SwitchBgColor.tsx ``` ### Color Schemes -```ComponentSnackPlayer path=primitives,Switch,ColorSchemes.tsx +```ComponentSnackPlayer path=components,primitives,Switch,ColorSchemes.tsx ``` @@ -42,9 +42,8 @@ The `Switch` component is an alternative to the Checkbox component. You can swit - On mobile, uses native switch which is fully accessible. - On web, it uses checkbox with a [role](https://www.w3.org/TR/wai-aria-1.2/#switch) set to `switch`. - ### Keyboard Interactions -| Name | Description | -| --------------------|-------------| -| Space | Toggles the component's state. | \ No newline at end of file +| Name | Description | +| ----- | ------------------------------ | +| Space | Toggles the component's state. | diff --git a/docs/text.md b/docs/text.md index 04eca5545..3f45d0de6 100644 --- a/docs/text.md +++ b/docs/text.md @@ -11,25 +11,25 @@ import { ComponentTheme } from '../src/components'; ### ChangingFontSize -```ComponentSnackPlayer path=primitives,Text,ChangingFontSize.tsx +```ComponentSnackPlayer path=components,primitives,Text,ChangingFontSize.tsx ``` ### Truncated -```ComponentSnackPlayer path=primitives,Text,Truncated.tsx +```ComponentSnackPlayer path=components,primitives,Text,Truncated.tsx ``` ### Nested -```ComponentSnackPlayer path=primitives,Text,Nested.tsx +```ComponentSnackPlayer path=components,primitives,Text,Nested.tsx ``` ### Overridden -```ComponentSnackPlayer path=primitives,Text,Overriden.tsx +```ComponentSnackPlayer path=components,primitives,Text,Overriden.tsx ``` diff --git a/docs/textArea.md b/docs/textArea.md index 55c834ffa..683680d71 100644 --- a/docs/textArea.md +++ b/docs/textArea.md @@ -11,19 +11,19 @@ The `Textarea` component allows you to easily create multi-line text inputs. ### Usage -```ComponentSnackPlayer path=primitives,TextArea,basic.tsx +```ComponentSnackPlayer path=components,primitives,TextArea,basic.tsx ``` ### Invalid and Disabled TextArea -```ComponentSnackPlayer path=primitives,TextArea,invalid.tsx +```ComponentSnackPlayer path=components,primitives,TextArea,invalid.tsx ``` ### Value Controlled TextArea -```ComponentSnackPlayer path=primitives,TextArea,value.tsx +```ComponentSnackPlayer path=components,primitives,TextArea,value.tsx ``` @@ -35,4 +35,4 @@ The `Textarea` component allows you to easily create multi-line text inputs. ## Styling - + diff --git a/docs/theme.md b/docs/theme.md index db050174c..45d079afd 100644 --- a/docs/theme.md +++ b/docs/theme.md @@ -22,9 +22,9 @@ function ColorPalete() { return ( } + renderItem={({ item }) => } /> ); @@ -34,7 +34,7 @@ function ColorPalete() { export default function () { return ( -
+
@@ -57,7 +57,7 @@ function Tokens() { 'lightText', ]); return ( -
+
Contrast threshold is:{' '} {contrastThreshold} @@ -95,13 +95,13 @@ import { Center, } from 'native-base'; function UseContrastingTextHook() { - const bgDark = 'primary.700'; + const bgDark = 'primary.600'; const bgLight = 'primary.200'; const colorContrastDark = useContrastText(bgDark); const colorContrastLight = useContrastText(bgLight); return ( - + @@ -183,7 +183,7 @@ function UseColorMode() { const { toggleColorMode } = useColorMode(); return (
- + The active color mode is{' '} {useColorModeValue('Light', 'Dark')} diff --git a/docs/toast.md b/docs/toast.md index 914ce3de9..4fe1e20d7 100644 --- a/docs/toast.md +++ b/docs/toast.md @@ -19,13 +19,13 @@ import { useToast } from 'native-base'; ### Basic -```ComponentSnackPlayer path=composites,Toast,Basic.tsx +```ComponentSnackPlayer path=components,composites,Toast,Basic.tsx ``` ### Position -```ComponentSnackPlayer path=composites,Toast,ToastPositions.tsx +```ComponentSnackPlayer path=components,composites,Toast,ToastPositions.tsx ``` @@ -33,7 +33,7 @@ import { useToast } from 'native-base'; Display a custom component instead of the default Toast UI. -```ComponentSnackPlayer path=composites,Toast,CustomComponent.tsx +```ComponentSnackPlayer path=components,composites,Toast,CustomComponent.tsx ``` @@ -41,7 +41,7 @@ Display a custom component instead of the default Toast UI. Toasts can be closed imperatively, individually (via the close instance method) or all together (via the closeAll instance method). -```ComponentSnackPlayer path=composites,Toast,CloseToast.tsx +```ComponentSnackPlayer path=components,composites,Toast,CloseToast.tsx ``` @@ -50,7 +50,7 @@ Toasts can be closed imperatively, individually (via the close instance method) You can use status to change the color of your toasts. `Toast` uses the same variants as the [Alert](alert.md) component. -```ComponentSnackPlayer path=composites,Toast,ToastStatus.tsx +```ComponentSnackPlayer path=components,composites,Toast,ToastStatus.tsx ``` @@ -58,7 +58,7 @@ You can use status to change the color of your toasts. In some cases you might need to prevent duplicate of specific toasts. To achieve you need to pass an id and use the toast.isActive method to determine when to call toast.show(...). -```ComponentSnackPlayer path=composites,Toast,PreventDuplicate.tsx +```ComponentSnackPlayer path=components,composites,Toast,PreventDuplicate.tsx ``` @@ -66,7 +66,7 @@ In some cases you might need to prevent duplicate of specific toasts. To achieve You can use standalone toast where you don't have access to `useToast` hook. e.g. in a different file, out of a React component. -```ComponentSnackPlayer path=composites,Toast,StandaloneToast.tsx +```ComponentSnackPlayer path=components,composites,Toast,StandaloneToast.tsx ``` diff --git a/docs/todo-list.md b/docs/todo-list.md index d6b9632ff..70010dc0e 100644 --- a/docs/todo-list.md +++ b/docs/todo-list.md @@ -5,131 +5,6 @@ title: Todo-List A simple To Do App made using NativeBase 3.0. -```SnackPlayer name=TodoList%20Examples -import React from 'react'; -import { - Input, - Button, - IconButton, - Checkbox, - Text, - VStack, - HStack, - Heading, - Icon, - Center, - Box, - NativeBaseProvider, -} from 'native-base'; -import { FontAwesome5, Feather, Entypo } from '@expo/vector-icons'; - -export default function () { - const instState = [ - { title: 'Code', isCompleted: true }, - { title: 'Meeting with team at 9', isCompleted: false }, - { title: 'Check Emails', isCompleted: false }, - { title: 'Write an article', isCompleted: false }, - ]; - const [list, setList] = React.useState(instState); - const [inputValue, setInputValue] = React.useState(''); - const addItem = (title: string) => { - setList([ - ...list, - { - title: title, - isCompleted: false, - }, - ]); - }; - const handleDelete = (index: number) => { - const temp = list.filter((_, itemI) => itemI !== index); - setList(temp); - }; - const handleStatusChange = (index: number) => { - const temp = list.map((item, itemI) => - itemI !== index - ? item - : { - ...item, - isCompleted: !item.isCompleted, - } - ); - setList(temp); - }; - return ( - -
- - Wednesday - - - setInputValue(v)} - value={inputValue} - placeholder="Add Task" - /> - - } - onPress={() => { - addItem(inputValue); - setInputValue(''); - }} - /> - - - {list.map((item, itemI) => ( - - handleStatusChange(itemI)} - value={item.title}> - - {item.title} - - - - } - onPress={() => handleDelete(itemI)} - /> - - ))} - - - -
- - ); -} +```ComponentSnackPlayer path=examples,TodoApp.tsx ``` diff --git a/docs/tooltip.md b/docs/tooltip.md index 1d35cabf6..8765f283e 100644 --- a/docs/tooltip.md +++ b/docs/tooltip.md @@ -17,13 +17,13 @@ import { Tooltip } from 'native-base'; ### Basic -```ComponentSnackPlayer path=composites,Tooltip,Basic.tsx +```ComponentSnackPlayer path=components,composites,Tooltip,Basic.tsx ``` ### Positions -```ComponentSnackPlayer path=composites,Tooltip,TooltipPositions.tsx +```ComponentSnackPlayer path=components,composites,Tooltip,TooltipPositions.tsx ``` @@ -31,7 +31,7 @@ import { Tooltip } from 'native-base'; Tooltip is a wrapper around [Box](box.md). So, it also accepts all the [Box](box.md#props) props. -```ComponentSnackPlayer path=composites,Tooltip,CustomTooltip.tsx +```ComponentSnackPlayer path=components,composites,Tooltip,CustomTooltip.tsx ``` diff --git a/docs/useAccessibleColors.md b/docs/useAccessibleColors.md index 1fa0dfd75..0be36b4fb 100644 --- a/docs/useAccessibleColors.md +++ b/docs/useAccessibleColors.md @@ -13,50 +13,8 @@ import { useAccessibleColors } from 'native-base'; ## Example -```SnackPlayer name=useAccessibleColors +```ComponentSnackPlayer path=hooks,useAccessibleColors,Basic.tsx -import React from 'react'; -import { Button, useContrastText, useTheme, NativeBaseProvider, Center, useAccessibleColors } from 'native-base'; - -const ButtonTemplate = ({ shade }: any) => { - const colorContrast = useContrastText(`yellow.${shade}`); - return ( - - ); -}; - -function UseContrastingTextHook () { - let [, , toggleAccessibleColors] = useAccessibleColors(); - const { colors } = useTheme(); - return ( - <> - {Object.keys(colors.yellow).map((key, index) => { - if (index > 2 && index < 9) return ; - })} - - - ); -} - -export default function () { - return ( - -
- -
- - ); -} ``` ## Return value diff --git a/docs/useBreakPointValue.md b/docs/useBreakPointValue.md index edb6501e9..2bd43393b 100644 --- a/docs/useBreakPointValue.md +++ b/docs/useBreakPointValue.md @@ -17,117 +17,6 @@ The `useBreakpointValue` hook returns the value for the current breakpoint. ## Usage -```SnackPlayer name=useBreakpointValue - -import React from 'react'; -import { - Factory, - Button, - Stack, - NativeBaseProvider, - Center, - ScrollView -} from 'native-base'; -import { TextInput } from 'react-native'; - -import { Icon, useBreakpointValue, Text, VStack, Heading } from 'native-base'; -import { FontAwesome, Foundation, Feather } from '@expo/vector-icons'; -import { View } from 'react-native'; - -export const UseBreakpointValueExample = () => { - const flexDir = useBreakpointValue({ - base: 'column', - lg: 'row', - }); - return ( - - - Why us? - - - - - Secure Checkout - - - - - - Secure Checkout - - - - - - Fast Turn Around - - - - - - ); -}; - -// Example template which wraps component with NativeBaseProvider -export default function () { - return ( - -
- -
- - ); -} +```ComponentSnackPlayer path=hooks,useBreakpointValue,usage.tsx ``` diff --git a/docs/useClipboard.md b/docs/useClipboard.md index fa916f05a..ec93f3358 100644 --- a/docs/useClipboard.md +++ b/docs/useClipboard.md @@ -21,53 +21,6 @@ import { useClipboard } from 'native-base'; ## Usage -```SnackPlayer name=useClipboard%20Usage -import React from "react"; -import { - Button, - HStack, - VStack, - Text, - Input, - useClipboard, - NativeBaseProvider, - Center -} from "native-base"; +```ComponentSnackPlayer path=hooks,useClipboard,Usage.tsx -function UseClipboardExample() { - const [copyText, setCopyText] = React.useState('Hello'); - const [pasteText, setPasteText] = React.useState(''); - const { value, onCopy } = useClipboard(); - return ( - - - setCopyText(v)} - value={copyText} - /> - - - - setPasteText(v)} - value={pasteText} - /> - - - - ); -} -export default function () { - return ( - -
- -
- - ); -} ``` diff --git a/docs/useColorMode.md b/docs/useColorMode.md index adb23b90d..3226a6437 100644 --- a/docs/useColorMode.md +++ b/docs/useColorMode.md @@ -13,37 +13,7 @@ import { useColorMode } from 'native-base'; ## Example -```SnackPlayer name=useColorMode -import React from 'react'; -import { - NativeBaseProvider, - VStack, - useColorMode, - Text, - Button, - Center, -} from 'native-base'; - -function UseColorMode() { - const { colorMode, toggleColorMode } = useColorMode(); - return ( -
- - The active color mode is {colorMode} - - -
- ); -} - -export default function () { - return ( - - - - ); -} - +```ComponentSnackPlayer path=hooks,useColorMode,Basic.tsx ``` diff --git a/docs/useColorModeValue.md b/docs/useColorModeValue.md index 65fad698b..d48d39db3 100644 --- a/docs/useColorModeValue.md +++ b/docs/useColorModeValue.md @@ -13,37 +13,7 @@ import { useColorModeValue } from 'native-base'; ## Example -```SnackPlayer name=useColorModeValue -import React from 'react'; -import { - NativeBaseProvider, - useColorMode, - Text, - Button, - Center, - useColorModeValue, -} from 'native-base'; - -function UseColorMode() { - const { colorMode, toggleColorMode } = useColorMode(); - return ( -
- - The active color mode is - {useColorModeValue('Light', 'Dark')} - - -
- ); -} - -export default function () { - return ( - - - - ); -} +```ComponentSnackPlayer path=hooks,useColorModeValue,Basic.tsx ``` diff --git a/docs/useContrastText.md b/docs/useContrastText.md index 4497c3b17..f11f89129 100644 --- a/docs/useContrastText.md +++ b/docs/useContrastText.md @@ -15,87 +15,16 @@ import { useContrastText } from 'native-base'; ### Basic -```SnackPlayer name=useContrastText +```ComponentSnackPlayer path=hooks,useContrastText,Basic.tsx -import React from 'react'; -import { Button, useContrastText, NativeBaseProvider, Center } from 'native-base'; -function UseContrastingTextHook () { - const bgDark = 'gray.900'; - const bgLight = 'gray.50'; - const colorContrastDark = useContrastText(bgDark); - const colorContrastLight = useContrastText(bgLight); - - return ( - <> - - - - ); -} - -export default function () { - return ( - -
- -
- - ); -} ``` ### Using Accessible Colors By default, NativeBase provides contrasting color based on its theme. You can also choose to get color with better [color and contrast accessibility](https://web.dev/color-and-contrast-accessibility/) with the help of [`useAccessibleColors`](useAccessibleColors.md) hook. -```SnackPlayer name=usingAccessibleColors - -import React from 'react'; -import { Button, useContrastText, useTheme, NativeBaseProvider, Center, useAccessibleColors } from 'native-base'; - -const ButtonTemplate = ({ shade }: any) => { - const colorContrast = useContrastText(`yellow.${shade}`); - return ( - - ); -}; - -function UseContrastingTextHook () { - let [, , toggleAccessibleColors] = useAccessibleColors(); - const { colors } = useTheme(); - return ( - <> - {Object.keys(colors.yellow).map((key, index) => { - if (index > 2 && index < 9) return ; - })} - - - ); -} +```ComponentSnackPlayer path=hooks,useAccessibleColors,Basic.tsx -export default function () { - return ( - -
- -
- - ); -} ``` ## Return value diff --git a/docs/useDisclosure.md b/docs/useDisclosure.md index 4e5cd4cdd..07b15d678 100644 --- a/docs/useDisclosure.md +++ b/docs/useDisclosure.md @@ -13,52 +13,8 @@ import { useDisclose } from 'native-base'; ## Example -```SnackPlayer name=useDisclose%20Usage -import React from "react"; -import { - Modal, - Button, - Center, - Input, - useDisclose, - NativeBaseProvider, -} from "native-base"; +```ComponentSnackPlayer path=hooks,useDisclose,Usage.tsx -function UseDiscloseExample() { - const { isOpen, onOpen, onClose } = useDisclose(); - return ( - <> - - - - - Delete Customer - - - This will remove all data relating to Alex. This action cannot be reversed. Deleted data can not be recovered. - - - - - - - - - - - ); -} -export default function () { - return ( - -
- -
- - ); -} ``` ## Return value diff --git a/docs/useMediaQuery.md b/docs/useMediaQuery.md index 7edf8d5fb..ff9a86dcb 100644 --- a/docs/useMediaQuery.md +++ b/docs/useMediaQuery.md @@ -15,422 +15,20 @@ import { useMediaQuery } from 'native-base'; ### max-height -```SnackPlayer name=useMediaQuery%20Usage(max-height) -import React from "react"; -import { Text, useMediaQuery, NativeBaseProvider, Center } from "native-base"; +```ComponentSnackPlayer path=hooks,useMediaQuery,max-height.tsx -function UseMediaQueryExample() { - const [isSmallScreen] = useMediaQuery({ minHeight: 280, maxHeight: 480 }); - return ( - - {isSmallScreen ? ( - - - - image - -
- PHOTOS -
- - - - - The Garden City - - - The Silicon Valley of India. - - - - Bengaluru (also called Bangalore) is the center of India's - high-tech industry. The city is also known for its parks and - nightlife. - - - - - 6 mins ago - - - - - - ) : ( - - - - - The Garden City - - - The Silicon Valley of India. - - - - Bengaluru (also called Bangalore) is the center of India's - high-tech industry. The city is also known for its parks and - nightlife. - - - - - 6 mins ago - - - - - - )} - - ); -} -export default function () { - return ( - -
- -
- - ); -} ``` ### min-width -```SnackPlayer name=useMediaQuery%20Usage(min-width) -import React from "react"; -import { Text, useMediaQuery, NativeBaseProvider, Center } from "native-base"; +```ComponentSnackPlayer path=hooks,useMediaQuery,min-width.tsx -function UseMediaQueryExample() { - const [isSmallScreen] = useMediaQuery({ minWidth: 280 }); - return ( - - {isSmallScreen ? ( - - - - image - -
- PHOTOS -
- - - - - The Garden City - - - The Silicon Valley of India. - - - - Bengaluru (also called Bangalore) is the center of India's - high-tech industry. The city is also known for its parks and - nightlife. - - - - - 6 mins ago - - - - - - ) : ( - - - - - The Garden City - - - The Silicon Valley of India. - - - - Bengaluru (also called Bangalore) is the center of India's - high-tech industry. The city is also known for its parks and - nightlife. - - - - - 6 mins ago - - - - - - )} - - ); -} -export default function () { - return ( - -
- -
- - ); -} ``` ### orientation -```SnackPlayer name=useMediaQuery%20Usage(orientation) -import React from "react"; -import { Text, useMediaQuery, NativeBaseProvider, Center } from "native-base"; +```ComponentSnackPlayer path=hooks,useMediaQuery,orientation.tsx -function UseMediaQueryExample() { - const [isLandScape, isPortrait] = useMediaQuery([ - { orientation: 'landscape' }, - { orientation: 'portrait' }, - ]); - return ( - - {isPortrait ? ( - - - - image - -
- PHOTOS -
- - - - - The Garden City - - - The Silicon Valley of India. - - - - Bengaluru (also called Bangalore) is the center of India's - high-tech industry. The city is also known for its parks and - nightlife. - - - - - 6 mins ago - - - - - - ) : ( - <> - )} - {isLandScape ? ( - - - - - The Garden City - - - The Silicon Valley of India. - - - - Bengaluru (also called Bangalore) is the center of India's - high-tech industry. The city is also known for its parks and - nightlife. - - - - - 6 mins ago - - - - - - ) : ( - <> - )} - - ); -} -export default function () { - return ( - -
- -
- - ); -} ``` ## Return value diff --git a/docs/utility-first.mdx b/docs/utility-first.mdx index ebd5645c6..be4161feb 100644 --- a/docs/utility-first.mdx +++ b/docs/utility-first.mdx @@ -51,16 +51,16 @@ export default function App() { const styles = StyleSheet.create({ container: { backgroundColor: '#0891b2', - paddingVertical: 16, - paddingHorizontal: 12, - borderRadius: 5, + paddingVertical: '16', + paddingHorizontal: '12', + borderRadius: '5', alignSelf: 'center', - width: 375, + width: '375', maxWidth: '100%', }, timings: { color: '#fff', - fontSize: 14, + fontSize: '14', }, metaContainer: { justifyContent: 'space-between', @@ -70,27 +70,27 @@ const styles = StyleSheet.create({ justifyContent: 'space-between', }, avatar: { - height: 100, - width: 100, - borderRadius: 100, + height: '100', + width: '100', + borderRadius: '100', }, description: { color: 'white', - marginTop: 5, - fontSize: 20, + marginTop: '5', + fontSize: '20', }, button: { backgroundColor: '#22d3ee', alignSelf: 'flex-start', - paddingHorizontal: 10, - paddingVertical: 5, - borderRadius: 3, + paddingHorizontal: '10', + paddingVertical: '5', + borderRadius: '3', }, buttonText: { fontWeight: 'bold', color: 'white', textTransform: 'uppercase', - fontSize: 14, + fontSize: '14', }, }); ``` @@ -126,8 +126,8 @@ export function UtilityFirstExample() { - + Today @ 9PM @@ -147,12 +147,12 @@ export function UtilityFirstExample() { rounded="sm" bg="primary.400" alignSelf="flex-start" - py={2} - px={3} + py="4" + px="3" > @@ -165,9 +165,9 @@ export function UtilityFirstExample() { uri: 'https://media.vanityfair.com/photos/5ba12e6d42b9d16f4545aa19/3:2/w_1998,h_1332,c_limit/t-Avatar-The-Last-Airbender-Live-Action.jpg', }} alt="Aang flying and surrounded by clouds" - height={100} + height="100" rounded="full" - width={100} + width="100" /> @@ -178,7 +178,7 @@ export function UtilityFirstExample() { -The above example demonstrates the usage of [utility props](utility-props) alongwith [VStack](vstack), [HStack](hstack) components. This approach allows us to style components without using StyleSheet API. +The above example demonstrates the usage of [utility props](utility-props) alongwith [VStack](v-stack), [HStack](h-stack) components. This approach allows us to style components without using StyleSheet API. Apart from productivity boost and saving time there are other benefits by styling components using utility props. No need to name styles anymore, no need to define an object and think about naming them. diff --git a/docs/utilityProps.md b/docs/utilityProps.md index 8cf57537b..adefc73eb 100644 --- a/docs/utilityProps.md +++ b/docs/utilityProps.md @@ -22,12 +22,12 @@ const Box = (props) => { function Component() { return ( <> - { /* m={2} refers to the value of `theme.space[2]` */ } - + { /* m="2" refers to the value of `theme.space[2]` */ } + { /* You can also use custom values */ } - + { /* sets margin `8px` on all viewports and `16px` from the first breakpoint and up */ } - + ); } @@ -69,7 +69,7 @@ import React from 'react'; import { Box as NBBox, NativeBaseProvider, Center, Text } from 'native-base'; const Box = (props) => { - return ; + return ; }; function Component() { @@ -79,7 +79,7 @@ function Component() { {/* picks up a nested color value using dot notation */} {/* => `theme.colors.lightBlue[300]` */} - + {/* using theme colors to set text color */} {' '} @@ -129,38 +129,37 @@ import React from "react" import { HStack, Stack, Center, NativeBaseProvider } from "native-base" export function Example() { return ( - - + +
Box 1
Box 2
Box 3
@@ -188,7 +187,7 @@ import React from 'react'; import { Text as NBText, NativeBaseProvider, Center } from 'native-base'; const Text = (props) => { - return + return } function Component() { @@ -200,7 +199,7 @@ function Component() { Merci Beaucoup { /* font-size `'2em'` */ } { /* font-weight of `theme.fontWeights.semibold i.e. 600` */ } - Danke sehr + Danke sehr { /* letter-spacing `0.1 em` */ } Arigatou @@ -239,24 +238,24 @@ import React from 'react'; import { Box as NBBox, NativeBaseProvider, Center } from 'native-base'; const Box = (props) => { - return + return } function Component() { return ( <> { /* verbose */ } - + { /* shorthand */ } { /* use boxSizing */ } - + { /* width `50%` */ } - - { /* width `256px` h={8} */ } - - { /* width `'40px'` */ } - + + { /* width `256px` h="8" */ } + + { /* width `"40px"` */ } + ); } @@ -296,7 +295,7 @@ import React from 'react'; import { Box as NBBox, Flex, NativeBaseProvider, Center } from 'native-base'; const Box = (props) => { - return + return } function Component() { @@ -353,15 +352,15 @@ import React from 'react'; import { Box as NBBox, NativeBaseProvider, Center } from 'native-base'; const Box = (props) => { - return ; + return ; }; function Component() { return ( <> - - - + + + ); } @@ -375,14 +374,12 @@ export default function () { ); } - ```
| Prop | CSS Eququivalent | Theme Field | | ----------------- | ------------------- | ------------ | -| border | border | borders | | borderWidth | border-width | borderWidths | | borderStyle | border-style | borderStyles | | borderColor | border-color | colors | @@ -410,7 +407,7 @@ import React from 'react'; import { Box as NBBox, NativeBaseProvider, Center } from 'native-base'; const Box = (props) => { - return + return } function Component() { @@ -418,12 +415,12 @@ function Component() { <> { /* picks up a nested radius value using dot notation */ } { /* => `theme.radius.md` */ } - - + + { /* partial border radius */ } - + { /* absolute value prop */ } - + ); } @@ -460,16 +457,16 @@ import React from 'react'; import { Box as NBBox, NativeBaseProvider, Center } from 'native-base'; const Box = (props) => { - return -} + return ; +}; function Component() { return ( - <> - - - - + + + + + ); } export default function () { @@ -481,7 +478,6 @@ export default function () { ); } - ```
@@ -502,18 +498,18 @@ import React from 'react'; import { Box as NBBox, NativeBaseProvider, Center } from 'native-base'; const Box = (props) => { - return + return } function Component() { return ( <> { /* => `theme.shadows.md` */ } - - - - - + + + + + ); } diff --git a/docs/utilityPropsSpecificity.md b/docs/utilityPropsSpecificity.md index 70e42236a..9c7e1a053 100644 --- a/docs/utilityPropsSpecificity.md +++ b/docs/utilityPropsSpecificity.md @@ -6,17 +6,17 @@ title: Utility Props Specificity - If we have two similar props for a particular component, the more specific prop will be applied when the component is rendered. ```jsx - + ``` - In the above example, we have two similar props for the Input component, but as you might have noticed `px={2}` is more specific than `p={0}` in terms of providing padding to the Input. This follows React Native's specificity precedence while applying utility style props to a component, order does not matter. So, `px={2}` will be applied when the Input component is rendered. + In the above example, we have two similar props for the Input component, but as you might have noticed `px="2"` is more specific than `p="0"` in terms of providing padding to the Input. This follows React Native's specificity precedence while applying utility style props to a component, order does not matter. So, `px="2"` will be applied when the Input component is rendered. - If we have a similar prop which is also defined in the baseStyle of that component, the value of the prop will override the value of the prop defined in the baseStyle. Let's take an example of `Input` to understand better. ```jsx - + // baseStyle for Input component return { @@ -27,12 +27,12 @@ title: Utility Props Specificity } ``` - As you can see, we have `px:2` and `py:2` defined in the baseStyle of Input component, but if we pass `p={0}` in the props of an Input, it will override the the baseStyle and apply `p={0}` to that component. **Similar happens with other utility props.** + As you can see, we have `px:2` and `py:2` defined in the baseStyle of Input component, but if we pass `p="0"` in the props of an Input, it will override the the baseStyle and apply `p="0"` to that component. **Similar happens with other utility props.** Now, here is an example to analyze both the cases together: ```jsx - + // baseStyle for Input component return { @@ -47,7 +47,7 @@ In the above example, what do you think should be the padding of the rendered In Let's see. -We have `p={0}` which will override the value of padding coming from the baseStyle of Input component, then we have `px={3}` which is a more specific prop. So, the padding of the rendered Input will be `padding : { paddingTop:0, paddingRight:3, paddingBottom:0, paddingLeft:3 }`. +We have `p="0"` which will override the value of padding coming from the baseStyle of Input component, then we have `px="3"` which is a more specific prop. So, the padding of the rendered Input will be `padding : { paddingTop:0, paddingRight:3, paddingBottom:0, paddingLeft:3 }`. diff --git a/docs/view.md b/docs/view.md index dd1890b6f..8f1a9f415 100644 --- a/docs/view.md +++ b/docs/view.md @@ -7,7 +7,7 @@ The most fundamental component for building a UI. ## Example -```ComponentSnackPlayer path=basic,View,Basic.tsx +```ComponentSnackPlayer path=components,basic,View,Basic.tsx ``` diff --git a/nb-plugins/component-prop-table/index.js b/nb-plugins/component-prop-table/index.js index 5bfa18152..d318cf5bc 100644 --- a/nb-plugins/component-prop-table/index.js +++ b/nb-plugins/component-prop-table/index.js @@ -34,27 +34,38 @@ const templateGenerator = (componentDetails) => { for (let prop in propsObject) { const { name, description, type, parent, defaultValue } = propsObject[prop]; - const markupWithTypeLinks = type.name - .split('|') - .map((e) => { - return e.trim(); - }) - .map((element) => { - const MapValue = - internalPropsMap[element] || - rnPropsMap[element] || - StylingPropsMap[element]; - const htmlSanatizedElem = element - .replace(/\/g, '>'); //for > - return `${ - MapValue - ? `${element}` - : htmlSanatizedElem - }`; - }) - .join(' | '); + let markupWithTypeLinks; + if (type.name.includes('ILinearGradientProps')) { + markupWithTypeLinks = `${ + `ResponsiveValue<` + + `ColorProps ` + + `\|` + + ` ILinearGradientProps` + + `>` + }`; + } else { + markupWithTypeLinks = type.name + .split('|') + .map((e) => { + return e.trim(); + }) + .map((element) => { + const MapValue = + internalPropsMap[element] || + rnPropsMap[element] || + StylingPropsMap[element]; + const htmlSanatizedElem = element + .replace(/\/g, '>'); //for > + return `${ + MapValue + ? `${element}` + : htmlSanatizedElem + }`; + }) + .join(' | '); + } if (parent && parent.name === `I${displayName}Props`) { propExists = true; temp = @@ -75,6 +86,7 @@ const templateGenerator = (componentDetails) => { `; } } + return temp; }; diff --git a/nb-plugins/component-prop-table/propsMap.js b/nb-plugins/component-prop-table/propsMap.js index 99a9a71ae..5b1c56d2a 100644 --- a/nb-plugins/component-prop-table/propsMap.js +++ b/nb-plugins/component-prop-table/propsMap.js @@ -42,7 +42,7 @@ const internalProps = { IActionsheetContentProps: { doc: 'actionsheet.md', name: 'Actionsheet.Content', - link: 'actionsheet#actionsheetcontent', + link: 'action-sheet#actionsheetcontent', }, SwitchProps: { doc: '', @@ -52,7 +52,7 @@ const internalProps = { IFormControlProps: { doc: 'formControl.md', name: 'FormControl', - link: 'formControl#formcontrol', + link: 'form-control#formcontrol', }, IInputProps: { doc: 'input.md', @@ -61,105 +61,106 @@ const internalProps = { }, }; // RN props -const viewProps = { - ViewStyle: { - doc: '', - name: 'ViewStyle', - link: 'https://reactnative.dev/docs/view-style-props', - }, - ViewProps: { - doc: '', - name: 'View', - link: 'https://reactnative.dev/docs/view', - }, - ImageProps: { - doc: '', - name: 'Image', - link: 'https://reactnative.dev/docs/image', - }, - ViewPropsAndroid: { - doc: '', - name: 'View', - link: 'https://reactnative.dev/docs/view', - }, - ViewPropsIOS: { - doc: '', - name: 'View', - link: 'https://reactnative.dev/docs/view', - }, - TVViewPropsIOS: { - doc: '', - name: 'View', - link: 'https://reactnative.dev/docs/view', - }, - GestureResponderHandlers: { - doc: '', - name: 'View', - link: 'https://reactnative.dev/docs/view', - }, - Touchable: { - doc: '', - name: 'View', - link: 'https://reactnative.dev/docs/view', - }, - AccessibilityProps: { - doc: '', - name: 'View', - link: 'https://reactnative.dev/docs/view', - }, - AccessibilityPropsAndroid: { - doc: '', - name: 'View', - link: 'https://reactnative.dev/docs/view', - }, - AccessibilityPropsIOS: { - doc: '', - name: 'View', - link: 'https://reactnative.dev/docs/view', - }, - RefAttributes: { - doc: '', - name: 'View', - link: 'https://reactnative.dev/docs/view', - }, - Attributes: { - doc: '', - name: 'View', - link: 'https://reactnative.dev/docs/view', - }, -}; -const textProps = { - TextProps: { - doc: '', - name: 'TextProp', - link: 'https://reactnative.dev/docs/text', - }, - TextPropsIOS: { - doc: '', - name: 'TextProp', - link: 'https://reactnative.dev/docs/text', - }, - TextPropsAndroid: { - doc: '', - name: 'TextProp', - link: 'https://reactnative.dev/docs/text', - }, - AccessibilityProps: { - doc: '', - name: 'TextProp', - link: 'https://reactnative.dev/docs/text', - }, - AccessibilityPropsAndroid: { - doc: '', - name: 'TextProp', - link: 'https://reactnative.dev/docs/text', - }, - AccessibilityPropsIOS: { - doc: '', - name: 'TextProp', - link: 'https://reactnative.dev/docs/text', - }, -}; +// const viewProps = { +// ViewStyle: { +// doc: '', +// name: 'ViewStyle', +// link: 'https://reactnative.dev/docs/view-style-props', +// }, +// ViewProps: { +// doc: '', +// name: 'View', +// link: 'https://reactnative.dev/docs/view', +// }, +// ImageProps: { +// doc: '', +// name: 'Image', +// link: 'https://reactnative.dev/docs/image', +// }, +// ViewPropsAndroid: { +// doc: '', +// name: 'View', +// link: 'https://reactnative.dev/docs/view', +// }, +// ViewPropsIOS: { +// doc: '', +// name: 'View', +// link: 'https://reactnative.dev/docs/view', +// }, +// TVViewPropsIOS: { +// doc: '', +// name: 'View', +// link: 'https://reactnative.dev/docs/view', +// }, +// GestureResponderHandlers: { +// doc: '', +// name: 'View', +// link: 'https://reactnative.dev/docs/view', +// }, +// Touchable: { +// doc: '', +// name: 'View', +// link: 'https://reactnative.dev/docs/view', +// }, +// AccessibilityProps: { +// doc: '', +// name: 'View', +// link: 'https://reactnative.dev/docs/view', +// }, +// AccessibilityPropsAndroid: { +// doc: '', +// name: 'View', +// link: 'https://reactnative.dev/docs/view', +// }, +// AccessibilityPropsIOS: { +// doc: '', +// name: 'View', +// link: 'https://reactnative.dev/docs/view', +// }, +// RefAttributes: { +// doc: '', +// name: 'View', +// link: 'https://reactnative.dev/docs/view', +// }, +// Attributes: { +// doc: '', +// name: 'View', +// link: 'https://reactnative.dev/docs/view', +// }, +// }; +// const textProps = { +// TextProps: { +// doc: '', +// name: 'TextProp', +// link: 'https://reactnative.dev/docs/text', +// }, +// TextPropsIOS: { +// doc: '', +// name: 'TextProp', +// link: 'https://reactnative.dev/docs/text', +// }, +// TextPropsAndroid: { +// doc: '', +// name: 'TextProp', +// link: 'https://reactnative.dev/docs/text', +// }, +// AccessibilityProps: { +// doc: '', +// name: 'TextProp', +// link: 'https://reactnative.dev/docs/text', +// }, +// AccessibilityPropsAndroid: { +// doc: '', +// name: 'TextProp', +// link: 'https://reactnative.dev/docs/text', +// }, +// AccessibilityPropsIOS: { +// doc: '', +// name: 'TextProp', +// link: 'https://reactnative.dev/docs/text', +// }, +// }; + const rnProps = { ViewStyle: { doc: '', @@ -560,7 +561,7 @@ const platformProps = { PlatformProps: { doc: 'utilityProps.md', name: 'PlatformProps', - link: 'utility-props#color-and-background-color', + link: 'utility-props#platform-props', }, }; diff --git a/nb-plugins/utils/index.js b/nb-plugins/utils/index.js index 5a849ae55..3a88ec6b4 100644 --- a/nb-plugins/utils/index.js +++ b/nb-plugins/utils/index.js @@ -11,14 +11,38 @@ const prettier = require('prettier'); const repoPath = path.resolve(__dirname, '..', '..', 'NativeBase'); -const storybookExamplePath = (repoPath) => - path.resolve(repoPath, 'example', 'storybook', 'stories', 'components'); +function getRepoVersion(directory) { + if (directory.includes('versioned_repo')) { + return directory.split('versioned_repo/')[1].split('/')[0]; + } + + return 'next'; +} +const storybookExamplePath = (repoPath) => { + return path.resolve(repoPath, 'example', 'storybook', 'stories'); +}; const componentsRootPath = (repoPath) => path.resolve(repoPath, 'src', 'components'); +const olderVersionSupport = [ + '3.2.1', + '3.1.0', + '3.0.7', + '3.0.6', + '3.0.3', + '3.0.0', + '3.0.0-next.40', + '3.0.0-next.38', + '3.0.0-next.37', + '3.0.0-next.36', +]; const getSnackPlayerCodeSnippet = (repoPath, ...examplePath) => { // console.log('snippet args received', args); - const filePath = path.resolve(storybookExamplePath(repoPath), ...examplePath); + const filePath = path.resolve( + storybookExamplePath(repoPath), + olderVersionSupport.includes(getRepoVersion(repoPath)) ? 'components' : '', // add components older version docs. + ...examplePath + ); const fileContent = fs.readFileSync(filePath, { encoding: 'utf-8' }); try { let transformedFile = transformStorybookToDocExample( diff --git a/package.json b/package.json index 9de195205..2876ac3eb 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,7 @@ "clsx": "^1.1.1", "dedent": "^0.7.0", "docusaurus-tailwindcss-loader": "file:plugins/docusaurus-tailwindcss-loader", - "native-base": "3.2.1", + "native-base": "3.2.2", "object.fromentries": "^2.0.3", "patch-package": "^6.4.7", "postcss": "^7.0.34", diff --git a/src/components/RNWebNote.jsx b/src/components/RNWebNote.jsx new file mode 100644 index 000000000..ac3566773 --- /dev/null +++ b/src/components/RNWebNote.jsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { Box, HStack, Text, VStack } from 'native-base'; + +export const RNWebNote = () => { + return ( + + + + NOTE + + + + Make sure to update your root element styles as + + + {' '} + shown here + + + + + ); +}; diff --git a/src/components/fonts/FontBlocks.js b/src/components/fonts/FontBlocks.js index de99a3205..6eda0c0e9 100644 --- a/src/components/fonts/FontBlocks.js +++ b/src/components/fonts/FontBlocks.js @@ -1,7 +1,7 @@ import React from 'react'; import FontSizeComponent from './FontSizeComponent'; const FONT_SIZES = { - xxs: 10, + '2xs': 10, xs: 12, sm: 14, md: 16, diff --git a/src/components/index.js b/src/components/index.js index 143c5344f..9733f4e67 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -11,3 +11,4 @@ export { default as NBHistory } from './NBHistory'; export { default as InstallationTiles } from './InstallationTiles'; export { UtilityFirstExample } from './UtilityFirstExample'; export { ComponentTheme } from './ComponentTheme'; +export { RNWebNote } from './RNWebNote'; diff --git a/src/css/custom.css b/src/css/custom.css index 8b7974f78..a65c611cb 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -476,7 +476,8 @@ html[data-theme='dark'] .navbar-small { .menu__link[href*='/pseudo-props']:after, .menu__link[href*='/migration/v3.1.0-to-3.2.0']:after, .menu__link[href*='/strict-mode']:after, -.menu__link[href*='/default-theme']:after { +.menu__link[href*='/default-theme']:after, +.menu__link[href*='/hidden']:after { content: 'New'; display: inline-block; position: relative; diff --git a/unreleased-docs/aspectRatio.md b/unreleased-docs/aspectRatio.md index 9bcb91863..99f98cb06 100644 --- a/unreleased-docs/aspectRatio.md +++ b/unreleased-docs/aspectRatio.md @@ -3,72 +3,30 @@ id: aspectRatio title: AspectRatio --- -## Implements +Aspect ratio controls the size of the undefined dimension of a node or child component. You can refer [mozilla.org](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) for more details. -- [`Box`](box.md) +## Import + +```jsx +import { AspectRatio } from 'native-base'; +``` ## Example ### Basic -```SnackPlayer name=AspectRatio%20Example -import React from "react"; -import { AspectRatio, Box, NativeBaseProvider, Center } from "native-base"; -function Component() { - return ( - - - - ); -} +```ComponentSnackPlayer path=components,composites,AspectRatio,Basic.tsx -// 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 ( - -
- -
- - ); -} +```ComponentSnackPlayer path=components,composites,AspectRatio,EmbedImage.tsx ``` ## Props -`AspectRatio` implements **[Box](box.md)**, so all the Box props can be passed to it. +```ComponentPropTable path=composites,AspectRatio,index.tsx -| Name | Type | Description | Default | -| ----- | ------ | ---------------------------------------------- | ------- | -| ratio | number | The aspect ratio(width/height) of the content. | `4/3` | +``` diff --git a/versioned_docs/version-3.1.0/darkMode.md b/versioned_docs/version-3.1.0/darkMode.md index 88bd73132..1c427554a 100644 --- a/versioned_docs/version-3.1.0/darkMode.md +++ b/versioned_docs/version-3.1.0/darkMode.md @@ -66,7 +66,7 @@ export default function () { 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 +## 3. By using \_light and \_dark props In this approach we pass the required props inside \_light and \_dark based on the requirement. diff --git a/versioned_docs/version-3.2.0/buildingFooterTabs.md b/versioned_docs/version-3.2.0/buildingFooterTabs.md index 4a4e7f597..a81d29f34 100644 --- a/versioned_docs/version-3.2.0/buildingFooterTabs.md +++ b/versioned_docs/version-3.2.0/buildingFooterTabs.md @@ -84,7 +84,7 @@ export default function App() { >
- + Cart
@@ -107,7 +107,7 @@ export default function App() { >
- + The active color mode is{' '} {useColorModeValue('Light', 'Dark')} diff --git a/versioned_docs/version-3.2.0/customizingTheme.md b/versioned_docs/version-3.2.0/customizingTheme.md index 34e5bd136..87d58b620 100644 --- a/versioned_docs/version-3.2.0/customizingTheme.md +++ b/versioned_docs/version-3.2.0/customizingTheme.md @@ -101,7 +101,7 @@ function App() { return ( - + ); } diff --git a/versioned_docs/version-3.2.0/design-tokens.md b/versioned_docs/version-3.2.0/design-tokens.md index 8198af8e3..a919f0a01 100644 --- a/versioned_docs/version-3.2.0/design-tokens.md +++ b/versioned_docs/version-3.2.0/design-tokens.md @@ -55,7 +55,7 @@ export const spacing = { 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 diff --git a/versioned_docs/version-3.2.0/install-expo.mdx b/versioned_docs/version-3.2.0/install-expo.mdx index 9d29951b2..6f80a3508 100644 --- a/versioned_docs/version-3.2.0/install-expo.mdx +++ b/versioned_docs/version-3.2.0/install-expo.mdx @@ -9,6 +9,7 @@ import { TileLink } from '../../src/components'; Expo helps you to create universal (iOS, Android and Web) React Native apps with no build configuration. + + @@ -106,9 +108,13 @@ export default function App() { } ``` + + + +
minions clapping
diff --git a/versioned_docs/version-3.2.0/install-next.mdx b/versioned_docs/version-3.2.0/install-next.mdx index dc9dbca16..40a4eee9e 100644 --- a/versioned_docs/version-3.2.0/install-next.mdx +++ b/versioned_docs/version-3.2.0/install-next.mdx @@ -52,6 +52,7 @@ Yey! you are all set, start editing src/pages/index.tsx now. +

Choose your preferred setting and start your development swiftly 🚀

diff --git a/versioned_docs/version-3.2.0/install-rn.mdx b/versioned_docs/version-3.2.0/install-rn.mdx index 8ed3a885d..b03d00461 100644 --- a/versioned_docs/version-3.2.0/install-rn.mdx +++ b/versioned_docs/version-3.2.0/install-rn.mdx @@ -7,6 +7,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import { TileLink } from '../../src/components'; + + + + ### Create a new project using ReactNative CLI with NativeBase template [Refer this link](https://github.com/react-native-community/cli#about) to get infomation about the React Native CLI. @@ -40,8 +44,10 @@ npx react-native init MyApp --template react-native-template-native-base-typescr Yey! you are all set, start editing App.js/App.tsx now. + + ### Create a new project if not exist @@ -106,6 +112,7 @@ export default function App() { +
diff --git a/versioned_docs/version-3.2.0/interaction-styles.mdx b/versioned_docs/version-3.2.0/interaction-styles.mdx index 8c07bf6a5..142e1d206 100644 --- a/versioned_docs/version-3.2.0/interaction-styles.mdx +++ b/versioned_docs/version-3.2.0/interaction-styles.mdx @@ -20,12 +20,12 @@ NativeBase provides a declarative way to add interaction or platform specific pr Using `_hover` pseudo prop, we can customize the style of Pressable component on hover. - + @@ -40,8 +40,8 @@ Using `_hover` pseudo prop, we can customize the style of Pressable component on @@ -56,12 +56,12 @@ Using `_hover` pseudo prop, we can customize the style of Pressable component on Using `_pressed` pseudo prop, we can customize the style of Pressable component on pressed. - + @@ -76,9 +76,9 @@ Using `_pressed` pseudo prop, we can customize the style of Pressable component @@ -92,7 +92,7 @@ Using `_pressed` pseudo prop, we can customize the style of Pressable component Using `_focus` pseudo prop, we can customize the style of Pressable component on focus. - + @@ -117,8 +117,8 @@ Using `_focus` pseudo prop, we can customize the style of Pressable component on _focus={{ bg: 'primary.700', borderColor: 'primary.400', borderWidth: '2px' }} bg="primary.600" rounded="sm" - py={2} - px={3} + py="2" + px="3" alignSelf="center" > @@ -132,14 +132,14 @@ Using `_focus` pseudo prop, we can customize the style of Pressable component on Using `_web`, `_iOS`, `_android` pseudo props, we can customize the style or behaviour of NativeBase components across platforms. - - + + @@ -148,13 +148,13 @@ Using `_web`, `_iOS`, `_android` pseudo props, we can customize the style or beh Web - + @@ -163,13 +163,13 @@ Using `_web`, `_iOS`, `_android` pseudo props, we can customize the style or beh Android - + @@ -183,12 +183,12 @@ Using `_web`, `_iOS`, `_android` pseudo props, we can customize the style or beh ```jsx title="Platform specific example" - + @@ -197,12 +197,12 @@ Using `_web`, `_iOS`, `_android` pseudo props, we can customize the style or beh Web - + @@ -211,12 +211,12 @@ Using `_web`, `_iOS`, `_android` pseudo props, we can customize the style or beh Android - + diff --git a/versioned_docs/version-3.2.0/list.md b/versioned_docs/version-3.2.0/list.md deleted file mode 100644 index 84f8d3dfc..000000000 --- a/versioned_docs/version-3.2.0/list.md +++ /dev/null @@ -1,64 +0,0 @@ ---- -id: list -title: List ---- - -List is used to display list items. - -## Examples - -### Basic - -```ComponentSnackPlayer path=primitives,List,Basic.tsx - -``` - -### Ordered List - -```ComponentSnackPlayer path=primitives,List,OrderedList.tsx - -``` - -### Unordered List - -```ComponentSnackPlayer path=primitives,List,UnorderedList.tsx - -``` - -### Styled List - -```ComponentSnackPlayer path=primitives,List,StylingList.tsx - -``` - -### Pressable List - -```ComponentSnackPlayer path=primitives,List,PressableList.tsx - -``` - -### List with ListIcon - -```ComponentSnackPlayer path=primitives,List,ListWithIcon.tsx - -``` - -### Virtualized List - -```ComponentSnackPlayer path=primitives,List,VirtualizedList.tsx - -``` - -## Props - -### List - -```ComponentPropTable path=primitives,List,List.tsx - -``` - -### List.Item - -```ComponentPropTable path=primitives,List,ListItem.tsx - -``` \ No newline at end of file diff --git a/versioned_docs/version-3.2.0/migration/Card.md b/versioned_docs/version-3.2.0/migration/Card.md index c9acc1d07..14a383239 100644 --- a/versioned_docs/version-3.2.0/migration/Card.md +++ b/versioned_docs/version-3.2.0/migration/Card.md @@ -68,17 +68,17 @@ import { VStack, Box, Divider } from 'native-base'; export default function () { return ( - - }> - + + }> + NativeBase - + NativeBase is a free and open source framework that enable developers to build high-quality mobile apps using React Native iOS and Android apps with a fusion of ES6. - + GeekyAnts diff --git a/versioned_docs/version-3.2.0/migration/Icon.md b/versioned_docs/version-3.2.0/migration/Icon.md index cdaba70a0..e51c49acb 100644 --- a/versioned_docs/version-3.2.0/migration/Icon.md +++ b/versioned_docs/version-3.2.0/migration/Icon.md @@ -65,7 +65,7 @@ export default function () { diff --git a/versioned_docs/version-3.2.0/migration/Radio Button.md b/versioned_docs/version-3.2.0/migration/Radio Button.md index a2ccedd08..b05b412b7 100644 --- a/versioned_docs/version-3.2.0/migration/Radio Button.md +++ b/versioned_docs/version-3.2.0/migration/Radio Button.md @@ -80,10 +80,10 @@ export default function () { setValue(nextValue); }} > - + One - + Two diff --git a/versioned_docs/version-3.2.0/migration/Spinner.md b/versioned_docs/version-3.2.0/migration/Spinner.md index a4f8f160d..9a6fbc31a 100644 --- a/versioned_docs/version-3.2.0/migration/Spinner.md +++ b/versioned_docs/version-3.2.0/migration/Spinner.md @@ -40,7 +40,7 @@ values={[ - + ``` diff --git a/versioned_docs/version-3.2.0/migration/Thumbnail.md b/versioned_docs/version-3.2.0/migration/Thumbnail.md index 2f8e46907..d199a39ad 100644 --- a/versioned_docs/version-3.2.0/migration/Thumbnail.md +++ b/versioned_docs/version-3.2.0/migration/Thumbnail.md @@ -55,11 +55,11 @@ export default function () { const uri = 'https://facebook.github.io/react-native/docs/assets/favicon.png'; return ( - + Square Thumbnail - react-native - react-native - react-native + react-native + react-native + react-native Circular Thumbnail diff --git a/versioned_docs/version-3.2.0/more-props.md b/versioned_docs/version-3.2.0/more-props.md new file mode 100644 index 000000000..935c792be --- /dev/null +++ b/versioned_docs/version-3.2.0/more-props.md @@ -0,0 +1,13 @@ +--- +id: more-props +title: More props +--- + +### ILinearGradientProps + +| Name | Type | Description | Default | +| -------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ------- | +| colors | `Array` | An array of colors that represent stops in the gradient. | - | +| start | `Array` | This means that the gradient will start from first value from the left and second value from the top. Array can contain numbers ranging from 0 to 1. | | +| end | `Array` | This means that the gradient will end at first value from the left and at second value from the bottom. Array can contain numbers ranging from 0 to 1. | | +| location | `Array ` | Each number indicates a color-stop location where each respective color should be located. Array can contain numbers ranging from 0 to 1. | | diff --git a/versioned_docs/version-3.2.0/nativebase-factory.md b/versioned_docs/version-3.2.0/nativebase-factory.md index 242f0bdae..fafcf1a6f 100644 --- a/versioned_docs/version-3.2.0/nativebase-factory.md +++ b/versioned_docs/version-3.2.0/nativebase-factory.md @@ -19,7 +19,7 @@ import { View } from 'react-native'; function FactoryViewExample () { const FactoryView = Factory(View); return ( - + ); } @@ -49,7 +49,7 @@ function FactoryViewExample () { borderRadius: 'md', }, }); - return ; + return ; } // Example template which wraps component with NativeBaseProvider @@ -80,7 +80,7 @@ function FactoryViewModeExample () { }; }, }); - return ; + return ; } // Example template which wraps component with NativeBaseProvider @@ -112,7 +112,7 @@ function FactoryViewRefExample() { const NBInput = Factory(TextInput); const inputRef = React.useRef(null); return ( - + - setOverlay( - - ) - }> - 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.2.0/responsive.md b/versioned_docs/version-3.2.0/responsive.md index aa66b499a..6e3ddd039 100644 --- a/versioned_docs/version-3.2.0/responsive.md +++ b/versioned_docs/version-3.2.0/responsive.md @@ -102,7 +102,7 @@ function Example() { rounded="lg" overflow="hidden" width={['72', '72', '4/6']} - shadow={1} + shadow="1" _light={{ backgroundColor: 'coolGray.50' }} _dark={{ backgroundColor: 'gray.700' }}> @@ -119,14 +119,14 @@ function Example() { bg="violet.500" _text={{ color: 'white', fontWeight: '700', fontSize: 'xs' }} position="absolute" - bottom={0} + bottom="0" px="3" py="1.5"> PHOTOS
- + The Garden City @@ -143,7 +143,7 @@ function Example() { Bengaluru (also called Bangalore) is the center of India's high-tech industry. The city is also known for its parks and nightlife. - + + NativeBase ); @@ -53,7 +53,7 @@ import { NativeBaseProvider, Box, Text } from 'native-base'; function MyComponent() { return ( // This would look same on all devices - + NativeBase ); @@ -81,7 +81,7 @@ function MyComponent() { const safeAreaProps = useSafeArea({ safeAreaTop: true, pt: 2 }); return ( // This would look same on all devices - + NativeBase ); diff --git a/versioned_docs/version-3.2.0/select.md b/versioned_docs/version-3.2.0/select.md index cfecd7ead..2e335fbb9 100644 --- a/versioned_docs/version-3.2.0/select.md +++ b/versioned_docs/version-3.2.0/select.md @@ -45,39 +45,6 @@ import { Select } from 'native-base'; ``` - - - - ## Styling diff --git a/versioned_docs/version-3.2.0/slider.md b/versioned_docs/version-3.2.0/slider.md index 8c2d7365d..e82c18e92 100644 --- a/versioned_docs/version-3.2.0/slider.md +++ b/versioned_docs/version-3.2.0/slider.md @@ -79,12 +79,12 @@ Adheres to the [Slider WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria- ### Keyboard Interactions -| Name | Description | -| ------------------|-------------| -| ArrowRight | Increments/decrements by the step value depending on orientation.| -| ArrowLeft | Increments/decrements by the step value depending on orientation. -| ArrowUp | Increases the value by the step amount. -| ArrowDown | Decreases the value by the step amount. +| Name | Description | +| ---------- | ----------------------------------------------------------------- | +| ArrowRight | Increments/decrements by the step value depending on orientation. | +| ArrowLeft | Increments/decrements by the step value depending on orientation. | +| ArrowUp | Increases the value by the step amount. | +| ArrowDown | Decreases the value by the step amount. | diff --git a/versioned_docs/version-3.2.0/swipableList.md b/versioned_docs/version-3.2.0/swipableList.md deleted file mode 100644 index e19b2bd22..000000000 --- a/versioned_docs/version-3.2.0/swipableList.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -id: swipable-list -title: Swipable List ---- - -## Coming Soon diff --git a/versioned_docs/version-3.2.0/textField.md b/versioned_docs/version-3.2.0/textField.md deleted file mode 100644 index 0c98d5b26..000000000 --- a/versioned_docs/version-3.2.0/textField.md +++ /dev/null @@ -1,130 +0,0 @@ ---- -id: textField -title: TextField ---- - -The `TextField` component is a component that is used to get user input in a text field. - -## Implements - -- [`TextProps`](input.md) -- [`VStack`](VStack.md) - -## Import - -```jsx -import { TextField } from 'native-base'; -``` - -## Examples - -### Basic - -```SnackPlayer name=TextField%20Basic -import React from 'react'; -import { TextField, NativeBaseProvider, Center } from 'native-base'; - -function TextFieldComponent () { - return ; -}; -export default function () { - return ( - -
- -
- - ); -} -``` - -### When Invalid - -```SnackPlayer name=Image%20Sizes -import React from 'react'; -import { TextField, NativeBaseProvider, Stack, Center } from 'native-base'; - -function TextFieldComponent () { - const [isInvalid, setIsInvalid] = React.useState(true); - return ( - - - - - ); -}; -export default function () { - return ( - -
- -
- - ); -} -``` - -### With Icons - -```SnackPlayer name=Image%20Variants -import React from 'react'; -import { TextField, NativeBaseProvider, Stack, Center, Icon } from 'native-base'; - -function TextFieldComponent () { - const [isInvalid, setIsInvalid] = React.useState(true); - return ( - - - } - InputRightElement={ - - } - /> - - - ); -}; -export default function () { - return ( - -
- -
- - ); -} -``` - -## Props - -| Name | Type | Description | Default | -| ------------------- | ------ | ------------------------------------------------------------------------------------------- | ------- | -| helperText | string | Helper text conveys additional guidance about the text field. | - | -| errorMessage | string | When text input isn't accepted, an error message can display instructions on how to fix it. | - | -| \_helperTextProps | any | [`Text Props`](text.md#props) | - | -| \_errorMessageProps | any | [`Text Props`](text.md#props) | - | - -Apart from these all the [Input](input.md#props) can be passed to Input. diff --git a/versioned_docs/version-3.2.0/theme.md b/versioned_docs/version-3.2.0/theme.md index db050174c..0f660da4a 100644 --- a/versioned_docs/version-3.2.0/theme.md +++ b/versioned_docs/version-3.2.0/theme.md @@ -22,9 +22,9 @@ function ColorPalete() { return ( } + renderItem={({ item }) => } /> ); @@ -34,7 +34,7 @@ function ColorPalete() { export default function () { return ( -
+
@@ -57,7 +57,7 @@ function Tokens() { 'lightText', ]); return ( -
+
Contrast threshold is:{' '} {contrastThreshold} @@ -101,7 +101,7 @@ function UseContrastingTextHook() { const colorContrastLight = useContrastText(bgLight); return ( - + @@ -183,7 +183,7 @@ function UseColorMode() { const { toggleColorMode } = useColorMode(); return (
- + The active color mode is{' '} {useColorModeValue('Light', 'Dark')} diff --git a/versioned_docs/version-3.2.0/transition.md b/versioned_docs/version-3.2.0/transition.md deleted file mode 100644 index 21c5ba47b..000000000 --- a/versioned_docs/version-3.2.0/transition.md +++ /dev/null @@ -1,289 +0,0 @@ ---- -id: transition -title: Transition ---- - -NativeBase exports four components: `Fade`, `ScaleFade`, `Slide`, and `SlideFade` to provide simple transitions. - -## Import - -NativeBase exports 4 modal-related components: - -- `Fade`: The wrapper that provides context and functionality for all children. -- `ScaleFade`: The empty part of the slider that shows the track. -- `Slide`: The filled part of the slider. -- `SlideFade`: The handle that's used to change the slider value. - -```jsx -import { - Fade, - ScaleFade - Slide, - SlideFade - SliderTrack, - SliderFilledTrack, -SliderThumb, -} from "native-base"; -``` - -## Examples - -### Fade - -```SnackPlayer name=Transition%20Fade -import React from 'react'; -import { Fade, Button, Box, NativeBaseProvider, Center } from 'native-base'; -function FadeExample () { - const [isOpen, setIsOpen] = React.useState(false); - - return ( - <> - - - - Fade - - - - ); -} -export default function () { - return ( - -
- -
- - ); -} -``` - -### ScaleFade - -```SnackPlayer name=Transition%20ScaleFade -import React from 'react'; -import { ScaleFade, Button, Box, NativeBaseProvider, Center } from 'native-base'; -function ScaleFadeExample () { - const [isOpen, setIsOpen] = React.useState(false); - - return ( - <> - - - - ScaleFade - - - - ); -} -export default function () { - return ( - -
- -
- - ); -} -``` - -### Slide - -```SnackPlayer name=Transition%20Slide -import React from 'react'; -import { Slide, Button, Box, NativeBaseProvider, Center } from 'native-base'; -function SlideExample () { - const [isOpen, setIsOpen] = React.useState(false); - - return ( - <> - - - - Slide - - - - ); -} -export default function () { - return ( - -
- -
- - ); -} -``` - -### Slide wrapped inside parent - -```SnackPlayer name=Transition%20Slide With Parent -import React from 'react'; -import { Slide, Button, Box, Center, Heading, NativeBaseProvider } from 'native-base'; -function SlideExample () { - const [isOpen, setIsOpen] = React.useState(false); - - return ( - - - This is an example to show how slider can be used. - - -
- The Force is strong with this one. I have you now. Look, I ain't in this - for your revolution, and I'm not in it for you, Princess. I expect to be - well paid. I'm in it for the money. What!? Hey, Luke! May the Force be - with you. Remember, a Jedi can feel the Force flowing through him. All - right. Well, take care of yourself, Han. I guess that's what you're best - at, ain't it? In my experience, there is no such thing as luck. Kid, - I've flown from one side of this galaxy to the other. I've seen a lot of - strange stuff, but I've never seen anything to make me believe there's - one all-powerful Force controlling everything. There's no mystical - energy field that controls my destiny. It's all a lot of simple tricks - and nonsense. -
- - - Slide - - - - ); -} -export default function () { - return ( - -
- -
- - ); -} -``` - -### Slide Composition - -```SnackPlayer name=Transition%20Slide Composition -import React from 'react'; -import { Slide, Button, Box, Center, Heading, NativeBaseProvider } from 'native-base'; -function SlideExample () { - const [isOpen, setIsOpen] = React.useState(false); - - return ( - <> - - - This is an example to show how slider can be used. - - -
- The Force is strong with this one. I have you now. Look, I ain't in - this for your revolution, and I'm not in it for you, Princess. I - expect to be well paid. I'm in it for the money. What!? Hey, Luke! May - the Force be with you. Remember, a Jedi can feel the Force flowing - through him. All right. Well, take care of yourself, Han. I guess - that's what you're best at, ain't it? In my experience, there is no - such thing as luck. Kid, I've flown from one side of this galaxy to - the other. I've seen a lot of strange stuff, but I've never seen - anything to make me believe there's one all-powerful Force controlling - everything. There's no mystical energy field that controls my destiny. - It's all a lot of simple tricks and nonsense. -
- - - - Slide - - - - ); -} -export default function () { - return ( - -
- -
- - ); -} -``` - -### SlideFade - -```SnackPlayer name=Transition%20SlideFade -import React from 'react'; -import { SlideFade, Button, Box, NativeBaseProvider, Center } from 'native-base'; -function SlideFadeExample () { - const [isOpen, setIsOpen] = React.useState(false); - - return ( - <> - - - - SlideFade - - - - ); -} -export default function () { - return ( - -
- -
- - ); -} -``` - -## Props - -### Fade - -| Name | Type | Description | Default | -| -------- | ------- | ------------------------------------------------------ | ------- | -| in | boolean | Show the component; triggers the enter or exit states. | - | -| duration | number | Duration of animation in mili second. | 500 | - -### Scale Fade - -| Name | Type | Description | Default | -| ------------ | ------- | ------------------------------------------------------ | ------- | -| in | boolean | Show the component; triggers the enter or exit states. | - | -| duration | number | Duration of animation in mili second. | 500 | -| initialScale | number | The initial scale to animate from. | 0.9 | - -### Slide - -| Name | Type | Description | Default | -| --------- | --------------- | ------------------------------------------------------ | -------- | -| in | boolean | Show the component; triggers the enter or exit states. | - | -| duration | number | Duration of animation in mili second. | 500 | -| placement | `top` ,`bottom` | The direction to slide drawer from. | `bottom` | - -### SlideFade - -| Name | Type | Description | Default | -| -------- | ------- | ------------------------------------------------------ | ------- | -| in | boolean | Show the component; triggers the enter or exit states. | - | -| duration | number | Duration of animation in mili second. | 500 | -| offsetX | number | The initial offset to slide from. | 10 | -| offsetY | number | The initial offset to slide from. | 10 | diff --git a/versioned_docs/version-3.2.0/useAccessibleColors.md b/versioned_docs/version-3.2.0/useAccessibleColors.md index 1fa0dfd75..812db8a6d 100644 --- a/versioned_docs/version-3.2.0/useAccessibleColors.md +++ b/versioned_docs/version-3.2.0/useAccessibleColors.md @@ -26,7 +26,7 @@ const ButtonTemplate = ({ shade }: any) => { key={`yellow.${shade}`} bg={`yellow.${shade}`} _text={{ color: colorContrast }} - mb={1} + mb="1" > Save Changes diff --git a/versioned_docs/version-3.2.0/useContrastText.md b/versioned_docs/version-3.2.0/useContrastText.md index 4497c3b17..462bbe3dc 100644 --- a/versioned_docs/version-3.2.0/useContrastText.md +++ b/versioned_docs/version-3.2.0/useContrastText.md @@ -65,7 +65,7 @@ const ButtonTemplate = ({ shade }: any) => { key={`yellow.${shade}`} bg={`yellow.${shade}`} _text={{ color: colorContrast }} - mb={1} + mb="1" > Save Changes diff --git a/versioned_docs/version-3.2.0/usePopOver.md b/versioned_docs/version-3.2.0/usePopOver.md deleted file mode 100644 index 35bdb98a6..000000000 --- a/versioned_docs/version-3.2.0/usePopOver.md +++ /dev/null @@ -1,75 +0,0 @@ ---- -id: use-popOver -title: usePopover ---- - -`usePopover` is a custom hook which helps in mounting any children component in a popover at a position relative to the parent. - -## Import - -```jsx -import { usePopover } from 'native-base'; -``` - -## Example - -```SnackPlayer name=usePopover%20Usage -import React from "react"; -import { Button, usePopover, Box, NativeBaseProvider, Center } from "native-base"; - -function UsePopoverExample() { - const { setPopover } = usePopover(); - let buttonRef = React.useRef(null); - return ( - - ); -} -export default function () { - return ( - -
- -
- - ); -} -``` - -## Return value - -The `usePopover` hook returns an object with the following fields: - -`closePopover` : ( function ) Callback function to close the popover. - -`setPopover`: ( **function** ) Callback function to set the children of the popover. - -`parentComponentConfig`: ( Object ) Object that contains the configurations passed from parent prop to be available to children in popover - -## Configurations for setPopover - -`triggerRef`: ref of the parent element of the popover - -`animationDuration`: Time in ms for the popover to open and close - -`placeOverTriggerElement`: (boolean) Whether to place the popover element over parent of not - -`onClose`: (function) Callback for closing the popover - -`parentComponentConfig`: (object) The config which can be passed from parent to children - -`isKeyboardDismissable`: (boolean) Specifies whether popover can be closed using Escape key. Defaults to true diff --git a/versioned_docs/version-3.2.0/utility-first.mdx b/versioned_docs/version-3.2.0/utility-first.mdx index 9de7d2ddb..4b570c146 100644 --- a/versioned_docs/version-3.2.0/utility-first.mdx +++ b/versioned_docs/version-3.2.0/utility-first.mdx @@ -51,16 +51,16 @@ export default function App() { const styles = StyleSheet.create({ container: { backgroundColor: '#0891b2', - paddingVertical: 16, - paddingHorizontal: 12, - borderRadius: 5, + paddingVertical: '16', + paddingHorizontal: '12', + borderRadius: '5', alignSelf: 'center', - width: 375, + width: '375', maxWidth: '100%', }, timings: { color: '#fff', - fontSize: 14, + fontSize: '14', }, metaContainer: { justifyContent: 'space-between', @@ -70,27 +70,27 @@ const styles = StyleSheet.create({ justifyContent: 'space-between', }, avatar: { - height: 100, - width: 100, - borderRadius: 100, + height: '100', + width: '100', + borderRadius: '100', }, description: { color: 'white', - marginTop: 5, - fontSize: 20, + marginTop: '5', + fontSize: '20', }, button: { backgroundColor: '#22d3ee', alignSelf: 'flex-start', - paddingHorizontal: 10, - paddingVertical: 5, - borderRadius: 3, + paddingHorizontal: '10', + paddingVertical: '5', + borderRadius: '3', }, buttonText: { fontWeight: 'bold', color: 'white', textTransform: 'uppercase', - fontSize: 14, + fontSize: '14', }, }); ``` @@ -126,8 +126,8 @@ export function UtilityFirstExample() { - + Today @ 9PM @@ -147,12 +147,12 @@ export function UtilityFirstExample() { rounded="sm" bg="primary.400" alignSelf="flex-start" - py={2} - px={3} + py="4" + px="3" > @@ -165,9 +165,9 @@ export function UtilityFirstExample() { uri: 'https://media.vanityfair.com/photos/5ba12e6d42b9d16f4545aa19/3:2/w_1998,h_1332,c_limit/t-Avatar-The-Last-Airbender-Live-Action.jpg', }} alt="Aang flying and surrounded by clouds" - height={100} + height="100" rounded="full" - width={100} + width="100" /> diff --git a/versioned_docs/version-3.2.0/utilityProps.md b/versioned_docs/version-3.2.0/utilityProps.md index 8cf57537b..f0ede0148 100644 --- a/versioned_docs/version-3.2.0/utilityProps.md +++ b/versioned_docs/version-3.2.0/utilityProps.md @@ -22,12 +22,12 @@ const Box = (props) => { function Component() { return ( <> - { /* m={2} refers to the value of `theme.space[2]` */ } - + { /* m="2" refers to the value of `theme.space[2]` */ } + { /* You can also use custom values */ } - + { /* sets margin `8px` on all viewports and `16px` from the first breakpoint and up */ } - + ); } @@ -69,7 +69,7 @@ import React from 'react'; import { Box as NBBox, NativeBaseProvider, Center, Text } from 'native-base'; const Box = (props) => { - return ; + return ; }; function Component() { @@ -79,7 +79,7 @@ function Component() { {/* picks up a nested color value using dot notation */} {/* => `theme.colors.lightBlue[300]` */} - + {/* using theme colors to set text color */} {' '} @@ -129,38 +129,38 @@ import React from "react" import { HStack, Stack, Center, NativeBaseProvider } from "native-base" export function Example() { return ( - - + +
Box 1
Box 2
Box 3
@@ -188,7 +188,7 @@ import React from 'react'; import { Text as NBText, NativeBaseProvider, Center } from 'native-base'; const Text = (props) => { - return + return } function Component() { @@ -239,24 +239,24 @@ import React from 'react'; import { Box as NBBox, NativeBaseProvider, Center } from 'native-base'; const Box = (props) => { - return + return } function Component() { return ( <> { /* verbose */ } - + { /* shorthand */ } { /* use boxSizing */ } - + { /* width `50%` */ } - - { /* width `256px` h={8} */ } - - { /* width `'40px'` */ } - + + { /* width `256px` h="8" */ } + + { /* width `"40px"` */ } + ); } @@ -296,7 +296,7 @@ import React from 'react'; import { Box as NBBox, Flex, NativeBaseProvider, Center } from 'native-base'; const Box = (props) => { - return + return } function Component() { @@ -353,15 +353,15 @@ import React from 'react'; import { Box as NBBox, NativeBaseProvider, Center } from 'native-base'; const Box = (props) => { - return ; + return ; }; function Component() { return ( <> - - - + + + ); } @@ -410,7 +410,7 @@ import React from 'react'; import { Box as NBBox, NativeBaseProvider, Center } from 'native-base'; const Box = (props) => { - return + return } function Component() { @@ -418,12 +418,12 @@ function Component() { <> { /* picks up a nested radius value using dot notation */ } { /* => `theme.radius.md` */ } - - + + { /* partial border radius */ } - + { /* absolute value prop */ } - + ); } @@ -460,15 +460,15 @@ import React from 'react'; import { Box as NBBox, NativeBaseProvider, Center } from 'native-base'; const Box = (props) => { - return + return } function Component() { return ( <> - - - + + + ); } @@ -502,18 +502,18 @@ import React from 'react'; import { Box as NBBox, NativeBaseProvider, Center } from 'native-base'; const Box = (props) => { - return + return } function Component() { return ( <> { /* => `theme.shadows.md` */ } - - - - - + + + + + ); } diff --git a/versioned_docs/version-3.2.0/utilityPropsSpecificity.md b/versioned_docs/version-3.2.0/utilityPropsSpecificity.md index 70e42236a..9c7e1a053 100644 --- a/versioned_docs/version-3.2.0/utilityPropsSpecificity.md +++ b/versioned_docs/version-3.2.0/utilityPropsSpecificity.md @@ -6,17 +6,17 @@ title: Utility Props Specificity - If we have two similar props for a particular component, the more specific prop will be applied when the component is rendered. ```jsx - + ``` - In the above example, we have two similar props for the Input component, but as you might have noticed `px={2}` is more specific than `p={0}` in terms of providing padding to the Input. This follows React Native's specificity precedence while applying utility style props to a component, order does not matter. So, `px={2}` will be applied when the Input component is rendered. + In the above example, we have two similar props for the Input component, but as you might have noticed `px="2"` is more specific than `p="0"` in terms of providing padding to the Input. This follows React Native's specificity precedence while applying utility style props to a component, order does not matter. So, `px="2"` will be applied when the Input component is rendered. - If we have a similar prop which is also defined in the baseStyle of that component, the value of the prop will override the value of the prop defined in the baseStyle. Let's take an example of `Input` to understand better. ```jsx - + // baseStyle for Input component return { @@ -27,12 +27,12 @@ title: Utility Props Specificity } ``` - As you can see, we have `px:2` and `py:2` defined in the baseStyle of Input component, but if we pass `p={0}` in the props of an Input, it will override the the baseStyle and apply `p={0}` to that component. **Similar happens with other utility props.** + As you can see, we have `px:2` and `py:2` defined in the baseStyle of Input component, but if we pass `p="0"` in the props of an Input, it will override the the baseStyle and apply `p="0"` to that component. **Similar happens with other utility props.** Now, here is an example to analyze both the cases together: ```jsx - + // baseStyle for Input component return { @@ -47,7 +47,7 @@ In the above example, what do you think should be the padding of the rendered In Let's see. -We have `p={0}` which will override the value of padding coming from the baseStyle of Input component, then we have `px={3}` which is a more specific prop. So, the padding of the rendered Input will be `padding : { paddingTop:0, paddingRight:3, paddingBottom:0, paddingLeft:3 }`. +We have `p="0"` which will override the value of padding coming from the baseStyle of Input component, then we have `px="3"` which is a more specific prop. So, the padding of the rendered Input will be `padding : { paddingTop:0, paddingRight:3, paddingBottom:0, paddingLeft:3 }`. diff --git a/versioned_docs/version-3.2.1/appDrawer.md b/versioned_docs/version-3.2.1/appDrawer.md index 3fa173b72..4001d9dda 100644 --- a/versioned_docs/version-3.2.1/appDrawer.md +++ b/versioned_docs/version-3.2.1/appDrawer.md @@ -3,13 +3,13 @@ id: app-drawer title: App drawer --- -Creating an app drawer like layout is very common and with NativeBase's SimpleGrid make this extremely simple while still keeping it extremely customisable. Here is an example to illustrate it. +Creating an app drawer like layout is very common using FlatList. Here is an example to illustrate it. ```SnackPlayer name=AppDrawer import React from 'react'; import { IconButton, - SimpleGrid, + FlatList, Icon, NativeBaseProvider, Box, @@ -41,19 +41,22 @@ function AppDrawer() { ]; return ( - - {icons.map((icon) => ( - - } - /> - ))} - + { + return ( + + } + /> + ) + }} /> ); } diff --git a/versioned_docs/version-3.2.1/faq.md b/versioned_docs/version-3.2.1/faq.md index d366df99c..0dd5a4173 100644 --- a/versioned_docs/version-3.2.1/faq.md +++ b/versioned_docs/version-3.2.1/faq.md @@ -3,4 +3,6 @@ id: faq title: FAQ's --- -NativeBase FAQ's Coming Soon. +#### 1. (Web) Modal not appearing on center or ScrollView not working properly + +This can happen if the root element styles are not set as [recommended here](https://necolas.github.io/react-native-web/docs/setup/#root-element). Feel free to [open an issue](https://github.com/GeekyAnts/NativeBase/issues) in case it doesn't work. diff --git a/versioned_docs/version-3.2.1/install-cra.mdx b/versioned_docs/version-3.2.1/install-cra.mdx index 853c65e3a..2b687907d 100644 --- a/versioned_docs/version-3.2.1/install-cra.mdx +++ b/versioned_docs/version-3.2.1/install-cra.mdx @@ -5,7 +5,7 @@ title: Install in Create React App project import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; -import { TileLink } from '../../src/components'; +import { TileLink, RNWebNote } from '../../src/components'; + + diff --git a/versioned_docs/version-3.2.1/install-next.mdx b/versioned_docs/version-3.2.1/install-next.mdx index dc9dbca16..503eaaf14 100644 --- a/versioned_docs/version-3.2.1/install-next.mdx +++ b/versioned_docs/version-3.2.1/install-next.mdx @@ -5,7 +5,7 @@ title: Install in Next.js project import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; -import { TileLink } from '../../src/components'; +import { TileLink, RNWebNote } from '../../src/components'; + + diff --git a/versioned_docs/version-3.2.2/FAB.md b/versioned_docs/version-3.2.2/FAB.md new file mode 100644 index 000000000..67e233e73 --- /dev/null +++ b/versioned_docs/version-3.2.2/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=components,composites,Fab,Basic.tsx + +``` + +### Placement + +```ComponentSnackPlayer path=components,composites,Fab,Placement.tsx + +``` + +### Custom Position + +```ComponentSnackPlayer path=components,composites,Fab,CustomPosition.tsx + +``` + +## Styling + + + +## Props + +```ComponentPropTable path=composites,Fab,Fab.tsx + +``` diff --git a/versioned_docs/version-3.2.2/VStack.md b/versioned_docs/version-3.2.2/VStack.md new file mode 100644 index 000000000..55de9baec --- /dev/null +++ b/versioned_docs/version-3.2.2/VStack.md @@ -0,0 +1,24 @@ +--- +id: v-stack +title: VStack / Column +--- + +`VStack` aligns items vertically.`Column` is also an alias for `VStack`. + +## Import + +```jsx +import { VStack } from 'native-base'; +``` + +## Usage + +```ComponentSnackPlayer path=components,primitives,VStack,basic.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Stack,VStack.tsx + +``` diff --git a/versioned_docs/version-3.2.2/ZStack.md b/versioned_docs/version-3.2.2/ZStack.md new file mode 100644 index 000000000..6ca6e145d --- /dev/null +++ b/versioned_docs/version-3.2.2/ZStack.md @@ -0,0 +1,28 @@ +--- +id: z-stack +title: ZStack +--- + +`ZStack` aligns items absolutely in the z-axis. + +## Examples + +### Basic + +```ComponentSnackPlayer path=components,primitives,ZStack,example.tsx + +``` + +### Items Centered + +You can pass `alignItems="center"` `justifyContent="center"` to vertically and horizontally center the children. + +```ComponentSnackPlayer path=components,primitives,ZStack,CenterStack.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,ZStack,index.tsx + +``` diff --git a/versioned_docs/version-3.2.2/accessibility.md b/versioned_docs/version-3.2.2/accessibility.md new file mode 100644 index 000000000..3ccb492bb --- /dev/null +++ b/versioned_docs/version-3.2.2/accessibility.md @@ -0,0 +1,24 @@ +--- +id: accessibility +title: Accessibility +--- + +NativeBase comes with the latest accessibility standards out of the box including aria and role attributes, focus management, and keyboard navigation. + +## Accessible Roles + +NativeBase uses [React Native ARIA](https://react-native-aria.geekyants.com/) to implements [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.2/) standards to its components. This is designed to provide meaning for controls that aren't built using components provided by the platform. + +## Accessible Labels + +When a view is marked as accessible, it is a good practice to set an `accessibilityLabel` on the view, so that people who use voice-over know what element they have selected. Voice-over will read this string when a user selects the associated element. NativeBase with the use of [React Native ARIA](https://react-native-aria.geekyants.com/) does this for you out of the box. + +## Keyboard Navigation + +Many complex components, like Tabs and Dialog, come with expectations from users on how to interact with their content using a keyboard or other non-mouse input modalities. NativeBase Primitives provide basic keyboard support in accordance with the [WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices-1.2/). + +## Focus Management + +Proper keyboard navigation and good labelling often go hand-in-hand with managing focus. When a user interacts with a component and something changes as a result, it's often helpful to move focus with the interaction. And for screen reader users, moving focus often results in an announcement to convey the new context, which relies on proper labelling. + +In many NativeBase Components, we move focus based on the interactions a user normally takes in a given component. For example, in `Modal`, when the modal is opened, the focus is programmatically moved to the `first focusable element` and trapped inside the modal to anticipate a response to the prompt. diff --git a/versioned_docs/version-3.2.2/actionSheet.md b/versioned_docs/version-3.2.2/actionSheet.md new file mode 100644 index 000000000..a0d081076 --- /dev/null +++ b/versioned_docs/version-3.2.2/actionSheet.md @@ -0,0 +1,78 @@ +--- +id: action-sheet +title: ActionSheet +--- + +import { ComponentTheme } from '../../src/components'; + +An Action Sheet is a dialog that displays a set of options. It appears on top of the app's content. + +## Import + +NativeBase exports 3 modal-related components: + +- **Actionsheet**: Provides the context and state for all components. +- **Actionsheet.Content**: Component to wrap the list of **Actionsheet.Item** components. +- **Actionsheet.Item**: A button to wrap the options of the Actionsheet. + +```jsx +import { Actionsheet } from 'native-base'; +``` + +## Examples + +### Usage + +```ComponentSnackPlayer path=components,composites,Actionsheet,Usage.tsx + +``` + +### Composition + +```ComponentSnackPlayer path=components,composites,Actionsheet,Composition.tsx + +``` + +### DisableOverlay + +```ComponentSnackPlayer path=components,composites,Actionsheet,DisableOverlay.tsx + +``` + +### Icons + +```ComponentSnackPlayer path=components,composites,Actionsheet,Icon.tsx + +``` + +## Props + +### Actionsheet + +```ComponentPropTable path=composites,Actionsheet,Actionsheet.tsx + +``` + +### Actionsheet.Content + +```ComponentPropTable path=composites,Actionsheet,ActionsheetContent.tsx + +``` + +### Actionsheet.Item + +ActionsheetItem implements [Button](button.md#props) + +## Styling + + + +## Accessibility + +- ActionSheet has `aria-modal` set to true. +- ActionSheet has `role` set to `dialog`. +- When the ActionSheet opens, focus is trapped within it. +- Pressing Esc closes the ActionSheet. +- When the ActionSheet opens, focus is automatically set to the first enabled element. +- Clicking on the overlay closes the ActionSheet. +- Scrolling is blocked on the elements behind the ActionSheet. diff --git a/versioned_docs/version-3.2.2/alert.md b/versioned_docs/version-3.2.2/alert.md new file mode 100644 index 000000000..885bff9ef --- /dev/null +++ b/versioned_docs/version-3.2.2/alert.md @@ -0,0 +1,87 @@ +--- +id: alert +title: Alert +--- + +import { ComponentTheme } from '../../src/components'; + +`Alerts` are used to communicate a state that affects a system, feature or page. + +## Import + +NativeBase exports 5 Alert related components: + +- `Alert`: The wrapper for alert components. +- `Alert.Icon`: The visual icon for the alert that changes based on the `status` prop. + + + +```jsx +import { Alert } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=components,composites,Alert,usage.tsx + +``` + +### Status + +```ComponentSnackPlayer path=components,composites,Alert,status.tsx + +``` + +### Variant + +```ComponentSnackPlayer path=components,composites,Alert,variant.tsx + +``` + +### Composition + +```ComponentSnackPlayer path=components,composites,Alert,composition.tsx + +``` + +### Action + +```ComponentSnackPlayer path=components,composites,Alert,action.tsx + +``` + +## Props + +### Alert + +```ComponentPropTable path=composites,Alert,Alert.tsx + +``` + +### Alert.Icon + +```ComponentPropTable path=composites,Alert,AlertIcon.tsx + +``` + +### Alert.Title + +```ComponentPropTable path=composites,Alert,AlertTitle.tsx + +``` + +### Alert.Description + +```ComponentPropTable path=composites,Alert,AlertDescription.tsx + +``` + +## Styling + + + +## Accessibility + +Alert has `role` set to `alert`. diff --git a/versioned_docs/version-3.2.2/alertDialog.md b/versioned_docs/version-3.2.2/alertDialog.md new file mode 100644 index 000000000..c66f79502 --- /dev/null +++ b/versioned_docs/version-3.2.2/alertDialog.md @@ -0,0 +1,55 @@ +--- +id: alert-dialog +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 + +```ComponentSnackPlayer path=components,composites,AlertDialog,Basic.tsx + +``` + +## 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.2.2/appDrawer.md b/versioned_docs/version-3.2.2/appDrawer.md new file mode 100644 index 000000000..4001d9dda --- /dev/null +++ b/versioned_docs/version-3.2.2/appDrawer.md @@ -0,0 +1,73 @@ +--- +id: app-drawer +title: App drawer +--- + +Creating an app drawer like layout is very common using FlatList. Here is an example to illustrate it. + +```SnackPlayer name=AppDrawer +import React from 'react'; +import { + IconButton, + FlatList, + Icon, + NativeBaseProvider, + Box, +} from 'native-base'; +import { MaterialIcons } from '@expo/vector-icons'; + +function AppDrawer() { + const icons = [ + { name: 'bolt', bg: 'amber.600' }, + { name: 'build', bg: 'emerald.600' }, + { name: 'cloud', bg: 'blue.600' }, + { name: 'delivery-dining', bg: 'orange.600' }, + { name: 'favorite', bg: 'rose.600' }, + { name: 'music-note', bg: 'violet.600' }, + { name: 'invert-colors-on', bg: 'lime.600' }, + { name: 'navigation', bg: 'indigo.600' }, + { name: 'settings', bg: 'pink.600' }, + { name: 'sports-esports', bg: 'coolGray.600' }, + { name: 'shield', bg: 'darkBlue.600' }, + { name: 'photo-camera', bg: 'fuchsia.600' }, + { name: 'network-wifi', bg: 'amber.500' }, + { name: 'nightlight-round', bg: 'violet.800' }, + { name: 'flight', bg: 'blue.800' }, + { name: 'extension', bg: 'indigo.600' }, + { name: 'duo', bg: 'orange.600' }, + { name: 'album', bg: 'rose.600' }, + { name: 'access-alarm', bg: 'emerald.600' }, + { name: 'forum', bg: 'indigo.600' }, + ]; + + return ( + { + return ( + + } + /> + ) + }} /> + ); +} + +export default function () { + return ( + + + + + + ); +} + +``` diff --git a/versioned_docs/version-3.2.2/avatar.md b/versioned_docs/version-3.2.2/avatar.md new file mode 100644 index 000000000..9055bbf42 --- /dev/null +++ b/versioned_docs/version-3.2.2/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=components,composites,Avatar,usage.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=components,composites,Avatar,size.tsx + +``` + +### Fallbacks + +```ComponentSnackPlayer path=components,composites,Avatar,Fallback.tsx + +``` + +### Avatar Badge + +```ComponentSnackPlayer path=components,composites,Avatar,AvatarBadge.tsx + +``` + +### Avatar Group + +```ComponentSnackPlayer path=components,composites,Avatar,AvatarGroup.tsx + +``` + +## Props + +### Avatar + +```ComponentPropTable path=composites,Avatar,Avatar.tsx + +``` + +### Avatar.Group + +```ComponentPropTable path=composites,Avatar,Group.tsx + +``` + +### Avatar.Badge + +```ComponentPropTable path=composites,Avatar,Badge.tsx + +``` + +## Styling + + diff --git a/versioned_docs/version-3.2.2/badge.md b/versioned_docs/version-3.2.2/badge.md new file mode 100644 index 000000000..33a08a72d --- /dev/null +++ b/versioned_docs/version-3.2.2/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=components,composites,Badge,usage.tsx + +``` + +### Color Scheme + +```ComponentSnackPlayer path=components,composites,Badge,color.tsx + +``` + +### Variants + +```ComponentSnackPlayer path=components,composites,Badge,variants.tsx + +``` + +### Composition + +```ComponentSnackPlayer path=components,composites,Badge,composition.tsx + +``` + +## Props + +```ComponentPropTable path=composites,Badge,index.tsx + +``` + +## Styling + + diff --git a/versioned_docs/version-3.2.2/box.md b/versioned_docs/version-3.2.2/box.md new file mode 100644 index 000000000..46b5259f7 --- /dev/null +++ b/versioned_docs/version-3.2.2/box.md @@ -0,0 +1,139 @@ +--- +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=components,primitives,Box,basic.tsx + +``` + +
+ +### Composition + +```ComponentSnackPlayer path=components,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=components,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.2.2/breakpoints.md b/versioned_docs/version-3.2.2/breakpoints.md new file mode 100644 index 000000000..d30fb4cf1 --- /dev/null +++ b/versioned_docs/version-3.2.2/breakpoints.md @@ -0,0 +1,24 @@ +--- +id: breakpoints +title: Breakpoints +--- + +Breakpoints are the building blocks of responsive design. Use them to control when your layout can be adapted at a particular viewport or device size. + +NativeBase provides these default breakpoints and you can update with using extendTheme. + +```tsx +breakpoints = { + base: 0, + sm: 480, + md: 768, + lg: 992, + xl: 1280, +}; +``` + +`useBreakpointValue` is a custom hook which returns the value for the current breakpoint from the provided responsive values object. This hook also responds to the window resizing and returning the appropriate value for the new window size. + +```ComponentSnackPlayer path=hooks,useBreakpointValue,usage.tsx + +``` diff --git a/versioned_docs/version-3.2.2/buildingAppBar.md b/versioned_docs/version-3.2.2/buildingAppBar.md new file mode 100644 index 000000000..463c93df3 --- /dev/null +++ b/versioned_docs/version-3.2.2/buildingAppBar.md @@ -0,0 +1,48 @@ +--- +id: building-app-bar +title: AppBar +--- + +The top app bar provides content and actions related to the current screen. It’s used for branding, screen titles, navigation, and actions. + +## Example + +We can easily create it using basic layout components from NativeBase. + +```SnackPlayer name=App%20Bar +import React from "react"; +import { VStack, HStack, Button, IconButton, Icon, Text, NativeBaseProvider, Center, Box, StatusBar } from "native-base"; +import { MaterialIcons } from '@expo/vector-icons'; + +function AppBar(){ + return ( + <> + + + + + + + } color="white" />} /> + Home + + + } size='sm' color="white" />} /> + } + color="white" size='sm' />} /> + } size='sm' color="white" />} /> + + + + + ) +} + +export default function () { + return ( + + + + ); +} +``` diff --git a/versioned_docs/version-3.2.2/buildingDrawerNavigation.md b/versioned_docs/version-3.2.2/buildingDrawerNavigation.md new file mode 100644 index 000000000..af34bc3d7 --- /dev/null +++ b/versioned_docs/version-3.2.2/buildingDrawerNavigation.md @@ -0,0 +1,180 @@ +--- +id: building-drawer-navigation +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/drawer,@react-navigation/native@6.0.6,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.8.0,react-native-reanimated@~2.2.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 ( +
+ This is {props.route.name} page. +
+ ); +} + +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.2.2/buildingFooterTabs.md b/versioned_docs/version-3.2.2/buildingFooterTabs.md new file mode 100644 index 000000000..a81d29f34 --- /dev/null +++ b/versioned_docs/version-3.2.2/buildingFooterTabs.md @@ -0,0 +1,131 @@ +--- +id: building-footer-tabs +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="sm" + /> + + Home + +
+ + setSelected(1)} + > +
+ } + color="white" + size="sm" + /> + + Search + +
+ + setSelected(2)} + > +
+ + } + color="white" + size="sm" + /> + + Cart + +
+ + setSelected(3)} + > +
+ + } + color="white" + size="sm" + /> + + Account + +
+ + + + + ); +} + + +``` diff --git a/versioned_docs/version-3.2.2/buildingSearchBar.md b/versioned_docs/version-3.2.2/buildingSearchBar.md new file mode 100644 index 000000000..ee8651d84 --- /dev/null +++ b/versioned_docs/version-3.2.2/buildingSearchBar.md @@ -0,0 +1,117 @@ +--- +id: building-search-bar +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, + Divider, + Heading, +} 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.2.2/buildingSwipeList.md b/versioned_docs/version-3.2.2/buildingSwipeList.md new file mode 100644 index 000000000..4e44901a3 --- /dev/null +++ b/versioned_docs/version-3.2.2/buildingSwipeList.md @@ -0,0 +1,195 @@ +--- +id: building-swipe-list +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, + VStack, + Spacer, +} from 'native-base'; +import { SwipeListView } from 'react-native-swipe-list-view'; +import { MaterialIcons, Ionicons, Entypo } from '@expo/vector-icons'; + +export default function App() { + const [mode, setMode] = useState('Basic'); + + return ( + + + + Inbox + + + + + ); +} + +function Basic() { + const data = [ + { + id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba', + fullName: 'Afreen Khan', + timeStamp: '12:47 PM', + recentText: 'Good Day!', + avatarUrl: + 'https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500', + }, + { + id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63', + fullName: 'Sujita Mathur', + timeStamp: '11:11 PM', + recentText: 'Cheer up, there!', + avatarUrl: + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyEaZqT3fHeNrPGcnjLLX1v_W4mvBlgpwxnA&usqp=CAU', + }, + { + id: '58694a0f-3da1-471f-bd96-145571e29d72', + fullName: 'Anci Barroco', + timeStamp: '6:22 PM', + recentText: 'Good Day!', + avatarUrl: 'https://miro.medium.com/max/1400/0*0fClPmIScV5pTLoE.jpg', + }, + { + id: '68694a0f-3da1-431f-bd56-142371e29d72', + fullName: 'Aniket Kumar', + timeStamp: '8:56 PM', + recentText: 'All the best', + avatarUrl: + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSr01zI37DYuR8bMV5exWQBSw28C1v_71CAh8d7GP1mplcmTgQA6Q66Oo--QedAN1B4E1k&usqp=CAU', + }, + { + id: '28694a0f-3da1-471f-bd96-142456e29d72', + fullName: 'Kiara', + timeStamp: '12:47 PM', + recentText: 'I will call today.', + avatarUrl: + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBwgu1A5zgPSvfE83nurkuzNEoXs9DMNr8Ww&usqp=CAU', + }, + ]; + + const [listData, setListData] = useState(data); + + 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')} bg="white"> + + + + + + {item.fullName} + + {item.recentText} + + + + {item.timeStamp} + + + + + + ); + + const renderHiddenItem = (data, rowMap) => ( + + closeRow(rowMap, data.item.key)} + _pressed={{ + opacity: 0.5, + }}> + + } + size="xs" + color="coolGray.800" + /> + + More + + + + deleteRow(rowMap, data.item.key)} + _pressed={{ + opacity: 0.5, + }}> + + } color="white" size="xs" /> + + Delete + + + + + ); + + return ( + + + + ); +} + +``` diff --git a/versioned_docs/version-3.2.2/buildingTabView.md b/versioned_docs/version-3.2.2/buildingTabView.md new file mode 100644 index 000000000..e6ce91847 --- /dev/null +++ b/versioned_docs/version-3.2.2/buildingTabView.md @@ -0,0 +1,106 @@ +--- +id: building-tab-view +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, Center } from 'native-base'; +import Constants from 'expo-constants'; + +const FirstRoute = () =>
This is Tab 1
; + +const SecondRoute = () =>
This is Tab 2
; + +const ThirdRoute = () =>
This is Tab 3
; + +const FourthRoute = () =>
This is Tab 4
; + +const initialLayout = { width: Dimensions.get('window').width }; + +const renderScene = SceneMap({ + first: FirstRoute, + second: SecondRoute, + third: ThirdRoute, + fourth: FourthRoute, +}); + +export default function TabViewExample() { + const [index, setIndex] = React.useState(0); + const [routes] = React.useState([ + { key: 'first', title: 'Tab 1' }, + { key: 'second', title: 'Tab 2' }, + { key: 'third', title: 'Tab 3' }, + { key: 'fourth', title: 'Tab 4' }, + ]); + + 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 + ), + }); + const color = index === i ? '#1f2937' : '#a1a1aa'; + const borderColor = index === i ? 'cyan.500' : 'coolGray.200'; + + return ( + + { + console.log(i); + setIndex(i); + }}> + {route.title} + + + ); + })} + + ); + }; + + return ( + + + + ); +} + + + +``` diff --git a/versioned_docs/version-3.2.2/builldingCard.md b/versioned_docs/version-3.2.2/builldingCard.md new file mode 100644 index 000000000..c99468b41 --- /dev/null +++ b/versioned_docs/version-3.2.2/builldingCard.md @@ -0,0 +1,18 @@ +--- +id: building-card +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. + +```ComponentSnackPlayer path=components,primitives,Box,composition.tsx + +``` diff --git a/versioned_docs/version-3.2.2/button.mdx b/versioned_docs/version-3.2.2/button.mdx new file mode 100644 index 000000000..c878a713d --- /dev/null +++ b/versioned_docs/version-3.2.2/button.mdx @@ -0,0 +1,90 @@ +--- +id: button +title: Button +--- + +import { ComponentTheme } from '../../src/components'; + +The `Button` component is used to trigger an action or event. + +## Import + +```jsx +import { Button } from 'native-base'; +``` + +- **Button** : The button component with support for custom icons, spinners, etc. +- **Button.Group** : Used to group buttons whose actions are related, with an option to flush them together. + +## Examples + +### Basic + +```ComponentSnackPlayer path=components,primitives,Button,basic.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=components,primitives,Button,sizes.tsx + +``` + +### Variants + +```ComponentSnackPlayer path=components,primitives,Button,variants.tsx + +``` + +### Loading + +```ComponentSnackPlayer path=components,primitives,Button,loading.tsx + +``` + +### Icons + +```ComponentSnackPlayer path=components,primitives,Button,icons.tsx + +``` + +### ButtonGroup + +When you use the ButtonGroup component, it allows you to: + +- Set some common properties such as size & colorSchemes of all buttons within it. +- Add spacing between the buttons. +- Flush the buttons together by removing the border radius of the its children as needed. + +```ComponentSnackPlayer path=components,primitives,ButtonGroup,basic.tsx + +``` + +### Basic (With Ref) + +```ComponentSnackPlayer path=components,primitives,Button,WithRef.tsx + +``` + +## Props + +### Button + +```ComponentPropTable path=primitives,Button,Button.tsx + +``` + +### ButtonGroup + +```ComponentPropTable path=primitives,Button,ButtonGroup.tsx + +``` + +## Styling + + + +## Accessibility + +- Button has `role` set to [button](https://www.w3.org/TR/wai-aria-practices-1.2/#button). +- When Button has focus, Space or Enter activates it. diff --git a/versioned_docs/version-3.2.2/center.md b/versioned_docs/version-3.2.2/center.md new file mode 100644 index 000000000..032cac0ea --- /dev/null +++ b/versioned_docs/version-3.2.2/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=components,composites,Center,Basic.tsx + +``` + +### Icon frames + +Center can be used to nicely position icons in the center and add frames around them. + +```ComponentSnackPlayer path=components,composites,Center,WithIcons.tsx + +``` + +### Square and Circle + +Square and Circle automatically centers their children. + +```ComponentSnackPlayer path=components,composites,Center,SquareCircle.tsx + +``` + +## Props + +```ComponentPropTable path=composites,Center,Center.tsx + +``` diff --git a/versioned_docs/version-3.2.2/changelog.md b/versioned_docs/version-3.2.2/changelog.md new file mode 100644 index 000000000..417a3a41e --- /dev/null +++ b/versioned_docs/version-3.2.2/changelog.md @@ -0,0 +1,32 @@ +--- +id: changelog +title: Changelog +--- + +## Features + +TypeScript enhancement for custom theme tokens and variants - https://github.com/GeekyAnts/NativeBase/pull/4173 + +## Fixes + +Overlay press not closing ActionSheet - https://github.com/GeekyAnts/NativeBase/pull/4112 + +Background prop - https://github.com/GeekyAnts/NativeBase/pull/4115 + +Radio error message when not in Group - https://github.com/GeekyAnts/NativeBase/pull/4117 + +`theme[\_base.themePropertyMap[property]]` is not a function error - https://github.com/GeekyAnts/NativeBase/pull/4118 + +Button loading style not working - https://github.com/GeekyAnts/NativeBase/pull/4128 + +Select component height prop not working - https://github.com/GeekyAnts/NativeBase/pull/4129 + +Spinner size prop typings - https://github.com/GeekyAnts/NativeBase/pull/4141 + +Replace Clipboard with @react-native-clipboard/clipboard - https://github.com/GeekyAnts/NativeBase/pull/4148 + +Typing fixes on Stack and Modal - https://github.com/GeekyAnts/NativeBase/pull/4161 + +Select items appear behind keyboard - https://github.com/GeekyAnts/NativeBase/pull/4163 + +For more details. Visit [releases](https://github.com/GeekyAnts/NativeBase/releases/tag/v3.2.1). diff --git a/versioned_docs/version-3.2.2/checkBox.md b/versioned_docs/version-3.2.2/checkBox.md new file mode 100644 index 000000000..e58984c1a --- /dev/null +++ b/versioned_docs/version-3.2.2/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=components,primitives,Checkbox,basic.tsx + +``` + +### Controlled + +```ComponentSnackPlayer path=components,primitives,Checkbox,controlledCheckbox.tsx + +``` + +### Uncontrolled + +```ComponentSnackPlayer path=components,primitives,Checkbox,uncontrolledCheckbox.tsx + +``` + +### Disabled + +```ComponentSnackPlayer path=components,primitives,Checkbox,disabled.tsx + +``` + +### Invalid + +```ComponentSnackPlayer path=components,primitives,Checkbox,invalid.tsx + +``` + +### Custom Color + +```ComponentSnackPlayer path=components,primitives,Checkbox,customColor.tsx + +``` + +### Custom Icon + +```ComponentSnackPlayer path=components,primitives,Checkbox,customIcon.tsx + +``` + +### Size + +```ComponentSnackPlayer path=components,primitives,Checkbox,size.tsx + +``` + +### Checkbox Group + +```ComponentSnackPlayer path=components,primitives,Checkbox,checkboxGroup.tsx + +``` + +### Form Controlled + +```ComponentSnackPlayer path=components,primitives,Checkbox,FormControlled.tsx + +``` + +### Basic (With Ref) + +```ComponentSnackPlayer path=components,primitives,Checkbox,withRef.tsx + +``` + +## Props + +### Checkbox + +```ComponentPropTable path=primitives,Checkbox,Checkbox.tsx + +``` + +### Checkbox.Group + +```ComponentPropTable path=primitives,Checkbox,CheckboxGroup.tsx + +``` + +## Styling + + + +## Accessibility + +Uses React Native ARIA [@react-native-aria/checkbox](https://react-native-aria.geekyants.com/docs/useCheckbox) which follows the [Checkbox WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#checkbox). + +### Keyboard Interactions + +| Key | Description | +| ------- | ----------------------------- | +| `Space` | Checks/unchecks the checkbox. | diff --git a/versioned_docs/version-3.2.2/colorMode.md b/versioned_docs/version-3.2.2/colorMode.md new file mode 100644 index 000000000..a06ef175e --- /dev/null +++ b/versioned_docs/version-3.2.2/colorMode.md @@ -0,0 +1,128 @@ +--- +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. + +```ComponentSnackPlayer path=hooks,useColorModeValue,Basic.tsx + +``` + +## \_light and \_dark Pseudo props + +All components accepts \_light and \_dark props which applies the passed props on dark and light mode. + +```SnackPlayer name=PseudoProps%20Usage +import React from 'react'; +import { + Heading, + useColorMode, + Button, + HStack, + Avatar, + Center, + useColorModeValue, + Text, + NativeBaseProvider, +} from 'native-base'; + +function PseudoPropsUsage() { + const { colorMode, toggleColorMode } = useColorMode(); + return ( +
+ + The active color mode is{' '} + + {colorMode} + + + +
+ ); +} + +export default function () { + return ( + + + + ); +} + +``` + +## Default color mode + +You can set default color mode. By default, the color mode will be `light`. To support this, extend the default theme with a `config` + +```jsx +import { NativeBaseProvider, extendTheme, Text } from 'native-base'; + +// Define the config +const config = { + useSystemColorMode: false, + initialColorMode: 'dark', +}; + +// extend the theme +const customTheme = extendTheme({ config }); +function App() { + return ( + // pass itto NativeBaseProvider + + // Your component + + ); +} +``` + +## Persisting the color mode + +You can persist the color mode in you app by defining you color mode manager of type `StorageManager` and passing it to the NativeBaseProvider. This will retain the color mode even when the app is refreshed. + +```jsx +import React from 'react'; +import { NativeBaseProvider, StorageManager, ColorMode } from 'native-base'; +import AsyncStorage from '@react-native-async-storage/async-storage'; + +// Define the colorModeManager, +// here we are using react-native-async-storage (https://react-native-async-storage.github.io/async-storage/) +const colorModeManager: StorageManager = { + get: async () => { + try { + let val = await AsyncStorage.getItem('@color-mode'); + return val === 'dark' ? 'dark' : 'light'; + } catch (e) { + return 'light'; + } + }, + set: async (value: ColorMode) => { + try { + await AsyncStorage.setItem('@color-mode', value); + } catch (e) { + console.log(e); + } + }, +}; +export default function () { + return ( + // pass it to NativeBaseProvider + + // Your components + + ); +} +``` diff --git a/versioned_docs/version-3.2.2/container.md b/versioned_docs/version-3.2.2/container.md new file mode 100644 index 000000000..9884d0d18 --- /dev/null +++ b/versioned_docs/version-3.2.2/container.md @@ -0,0 +1,30 @@ +--- +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 + +```ComponentSnackPlayer path=components,composites,Container,usage.tsx + +``` + +## 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.2.2/customizingComponents.md b/versioned_docs/version-3.2.2/customizingComponents.md new file mode 100644 index 000000000..3042b4c08 --- /dev/null +++ b/versioned_docs/version-3.2.2/customizingComponents.md @@ -0,0 +1,122 @@ +--- +id: customizing-components +title: Customizing 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.1.0/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.1.0/src/theme/components/button.ts#L201). + +```jsx + + ); +} +``` + +In the above example, you'll get a **solid teal Button** in **light** mode whereas an **outline amber Button** in **dark** mode. You can get creative and make other properties respond to the color mode as well. + +## 3. By using \_light and \_dark props + +In this approach we pass the required props inside \_light and \_dark based on the requirement. + +```tsx +import React from 'react'; +import { Button } from 'native-base'; + +export default function () { + return ( + + ); +} +``` + +In the above example, you'll get a **teal Button** in **light** mode whereas an **amber Button** in **dark** mode. You can get creative and make other properties respond to the color mode as well. diff --git a/versioned_docs/version-3.2.2/default-theme.md b/versioned_docs/version-3.2.2/default-theme.md new file mode 100644 index 000000000..4f3cfdf5e --- /dev/null +++ b/versioned_docs/version-3.2.2/default-theme.md @@ -0,0 +1,231 @@ +--- +id: default-theme +title: Default Theme +--- + +import { ColorsBlock, FontBlocks, SpaceBlocks } from "../../src/components"; + +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. +You can also add `.alpha:{number}` to add levels of opacity to a colour. The number can also be added in the theme file. +Ex: `red.300:alpha.30`, You can read more about this in [`opacity section`](default-theme#opacity) + +We recommend adding a palette that ranges from `50` to `900`. Tools like **[Smart Swatch](https://smart-swatch.netlify.app/)**, **[Palx](https://palx.jxnblk.com/)** are available to generate these palettes. + + + +## Typography + +To manage Typography options, the theme object supports the following keys: + +- `fonts` (font families) +- `fontSizes` +- `fontWeights` +- `lineHeights` +- `letterSpacings` + +```jsx +const typography = { + letterSpacings: { + xs: '-0.05em', + sm: '-0.025em', + md: 0, + lg: '0.025em', + xl: '0.05em', + '2xl': '0.1em', + }, + lineHeights: { + '2xs': '1em', + xs: '1.125em', + sm: '1.25em', + md: '1.375em', + lg: '1.5em', + xl: '1.75em', + '2xl': '2em', + '3xl': '2.5em', + '4xl': '3em', + '5xl': '4em', + }, + fontWeights: { + hairline: 100, + thin: 200, + light: 300, + normal: 400, + medium: 500, + semibold: 600, + bold: 700, + extrabold: 800, + black: 900, + extrablack: 950, + }, + fonts: { + heading: undefined, + body: undefined, + mono: undefined, + }, + fontSizes: { + '2xs': 10, + xs: 12, + sm: 14, + md: 16, + lg: 18, + xl: 20, + '2xl': 24, + '3xl': 30, + '4xl': 36, + '5xl': 48, + '6xl': 60, + '7xl': 72, + '8xl': 96, + '9xl': 128, + }, +}; +``` + + + +## Size + +The `size` key allows you to customize the global spacing and sizing scale for your project. By default these spacing value can be referenced by the `padding`, `margin`, and `top`, `left`, `right`, `bottom` props. + + + +## Opacity + +The `opacity` key is used in opacity style object and to define colors opacity using the red-green-blue-alpha (RGBA) model, RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity of the color. + +```jsx +const opacity = { + 0: 0, + 5: 0.05, + 10: 0.1, + 20: 0.2, + 25: 0.25, + 30: 0.3, + 40: 0.4, + 50: 0.5, + 60: 0.6, + 70: 0.7, + 75: 0.75, + 80: 0.8, + 90: 0.9, + 95: 0.95, + 100: 1, +}; +``` + +## Shadows + +The `shadow` key allows you to customize the global box shadow for your project. + +```jsx +export default { + 0: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 1, + }, + shadowOpacity: 0.18, + shadowRadius: 1.0, + elevation: 1, + }, + 1: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 1, + }, + shadowOpacity: 0.2, + shadowRadius: 1.41, + elevation: 2, + }, + 2: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 1, + }, + shadowOpacity: 0.22, + shadowRadius: 2.22, + elevation: 3, + }, + 3: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 2, + }, + shadowOpacity: 0.23, + shadowRadius: 2.62, + elevation: 4, + }, + 4: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 2, + }, + shadowOpacity: 0.25, + shadowRadius: 3.84, + elevation: 5, + }, + 5: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 3, + }, + shadowOpacity: 0.27, + shadowRadius: 4.65, + elevation: 6, + }, + 6: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 3, + }, + shadowOpacity: 0.29, + shadowRadius: 4.65, + elevation: 7, + }, + 7: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 4, + }, + shadowOpacity: 0.3, + shadowRadius: 4.65, + elevation: 8, + }, + 8: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 4, + }, + shadowOpacity: 0.32, + shadowRadius: 5.46, + elevation: 9, + }, + 9: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 5, + }, + shadowOpacity: 0.34, + shadowRadius: 6.27, + elevation: 10, + }, +}; +``` + +Still confused? You can always explore [here](https://github.com/GeekyAnts/NativeBase/tree/master/src/theme/base). diff --git a/versioned_docs/version-3.2.2/design-tokens.md b/versioned_docs/version-3.2.2/design-tokens.md new file mode 100644 index 000000000..fd63b015c --- /dev/null +++ b/versioned_docs/version-3.2.2/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.md)**. diff --git a/versioned_docs/version-3.2.2/divider.md b/versioned_docs/version-3.2.2/divider.md new file mode 100644 index 000000000..74c8d24ae --- /dev/null +++ b/versioned_docs/version-3.2.2/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=components,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=components,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=components,composites,Divider,Composition.tsx + +``` + +## Props + +```ComponentPropTable path=composites,Divider,index.tsx + +``` + +## Styling + + + +## Accessibility + +- Divider has role set to `separator` and `aria-orientation` to either `horizontal` or `vertical`. diff --git a/versioned_docs/version-3.2.2/faq.md b/versioned_docs/version-3.2.2/faq.md new file mode 100644 index 000000000..0dd5a4173 --- /dev/null +++ b/versioned_docs/version-3.2.2/faq.md @@ -0,0 +1,8 @@ +--- +id: faq +title: FAQ's +--- + +#### 1. (Web) Modal not appearing on center or ScrollView not working properly + +This can happen if the root element styles are not set as [recommended here](https://necolas.github.io/react-native-web/docs/setup/#root-element). Feel free to [open an issue](https://github.com/GeekyAnts/NativeBase/issues) in case it doesn't work. diff --git a/versioned_docs/version-3.2.2/flatList.md b/versioned_docs/version-3.2.2/flatList.md new file mode 100644 index 000000000..d0cd17068 --- /dev/null +++ b/versioned_docs/version-3.2.2/flatList.md @@ -0,0 +1,18 @@ +--- +id: flat-list +title: FlatList +--- + +A component for rendering performant scrollable lists. + +## Example + +```ComponentSnackPlayer path=components,basic,FlatList,Basic.tsx + +``` + +## Props + +```ComponentPropTable path=basic,FlatList,FlatList.tsx showStylingProps=true + +``` diff --git a/versioned_docs/version-3.2.2/flex.md b/versioned_docs/version-3.2.2/flex.md new file mode 100644 index 000000000..5609e9b80 --- /dev/null +++ b/versioned_docs/version-3.2.2/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=components,primitives,Flex,basic.tsx + +``` + +### Using the Spacer + +You can pass Spacer to add Space between Flex items. + +```ComponentSnackPlayer path=components,primitives,Flex,spacer.tsx + +``` + +## Props + +**Flex** implements **[Box](box.md)**, so all the Box Props can be passed to it, i.e. [`color`](utility-props#color-and-background-color), [`space`](utility-props#margin-and-padding), [`layout`](utility-props#layout-width-and-height), [`flexbox`](utility-props#flexbox) & [`border`](utility-props#borders) props from [style-system](utility-props). diff --git a/versioned_docs/version-3.2.2/form.md b/versioned_docs/version-3.2.2/form.md new file mode 100644 index 000000000..6a078af67 --- /dev/null +++ b/versioned_docs/version-3.2.2/form.md @@ -0,0 +1,199 @@ +--- +id: form +title: Form with Validation +--- + +Apps often require users to enter information into a text field. For example, you might require users to log in with an email address and password combination. + +To make apps secure and easy to use, check whether the information the user has provided is valid. If the user has correctly filled out the form, process the information. If the user submits incorrect information, display a friendly error message letting them know what went wrong. + +## Example + +In this example, learn how to add validation to a form that has a single text field using the following steps: + +1. Create an Input wrapped in FormControl. +2. Add validation logic. +3. Create a button to validate and submit the form. + +### Step 1 + +Create an Input wrapped in FormControl. + +```SnackPlayer name=Form%20Example +import React from "react"; +import { + VStack, + FormControl, + Input, + NativeBaseProvider, + Center +} from "native-base"; + +function BuildingAFormExample() { + const [formData, setData] = React.useState({}); + + return ( + + + Name + setData({ ...formData, name: value })} + /> + + Name should contain atleast 3 character. + + Error Name + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Step 2 + +Add validation logic. + +```SnackPlayer name=Form%20Example(Validation) +import React from 'react'; +import { + VStack, + FormControl, + Input, + NativeBaseProvider, + Center +} from 'native-base'; + + +function BuildingAFormExample() { + const [formData, setData] = React.useState({}); + const [errors, setErrors] = React.useState({}); + const validate = () => { + if (formData.name === undefined) { + setErrors({ + ...errors, + name: 'Name is required', + }); + return false; + } else if (formData.name.length < 3) { + setErrors({ + ...errors, + name: 'Name is too short', + }); + return false; + } + return true; + }; + + return ( + + + Name + setData({ ...formData, name: value })} + /> + + Name should contain atleast 3 character. + + Error Name + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Step 3 + +Create a button to validate and submit the form. + +```SnackPlayer name=Form%20Example(Validate%20and%20Submit) +import React from 'react'; +import { + VStack, + Button, + FormControl, + Input, + NativeBaseProvider, + Center +} from 'native-base'; + +function BuildingAFormExample() { + const [formData, setData] = React.useState({}); + const [errors, setErrors] = React.useState({}); + const validate = () => { + if (formData.name === undefined) { + setErrors({ + ...errors, + name: 'Name is required', + }); + return false; + } else if (formData.name.length < 3) { + setErrors({ + ...errors, + name: 'Name is too short', + }); + return false; + } + return true; + }; + + const onSubmit = () => { + validate() ? console.log('Submitted') : console.log('Validation Failed'); + }; + + return ( + + + Name + setData({ ...formData, name: value })} + /> + {'name' in errors ? + Error +: + + + Name should contain atleast 3 character. + + } + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Community Integration + +NativeBase can be used with other popular Form libraries like [`Formik`](nativebase-formik-ui.md) and [`React Hook Forms`](reactHooksForms.md) as well. For more details checkout Community Integration section of the docs. diff --git a/versioned_docs/version-3.2.2/formControl.md b/versioned_docs/version-3.2.2/formControl.md new file mode 100644 index 000000000..baf50076f --- /dev/null +++ b/versioned_docs/version-3.2.2/formControl.md @@ -0,0 +1,52 @@ +--- +id: form-control +title: FormControl +--- + +import { ComponentTheme } from '../../src/components'; + +`FormControl` provides context such as `isInvalid`, `isDisabled`, and `isRequired` to form elements. + +## Examples + +### Basic + +```ComponentSnackPlayer path=components,composites,FormControl,Usage.tsx + +``` + +### Custom Style + +```ComponentSnackPlayer path=components,composites,FormControl,CustomStyle.tsx + +``` + +## Props + +### FormControl + +```ComponentPropTable path=composites,FormControl,FormControl.tsx + +``` + +### FormControl.Label + +```ComponentPropTable path=composites,FormControl,FormControlLabel.tsx + +``` + +### FormControl.ErrorMessage + +```ComponentPropTable path=composites,FormControl,FormControlErrorMessage.tsx + +``` + +### FormControl.HelperText + +```ComponentPropTable path=composites,FormControl,FormControlHelperText.tsx + +``` + +## Styling + + diff --git a/versioned_docs/version-3.2.2/getting-started.mdx b/versioned_docs/version-3.2.2/getting-started.mdx new file mode 100644 index 000000000..27701b6ee --- /dev/null +++ b/versioned_docs/version-3.2.2/getting-started.mdx @@ -0,0 +1,91 @@ +--- +id: getting-started +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.2.2/hStack.md b/versioned_docs/version-3.2.2/hStack.md new file mode 100644 index 000000000..de0d33d06 --- /dev/null +++ b/versioned_docs/version-3.2.2/hStack.md @@ -0,0 +1,24 @@ +--- +id: h-stack +title: HStack / Row +--- + +`HStack` aligns items horizontally. `Row` is also an alias for `HStack`. + +## Import + +```jsx +import { HStack } from 'native-base'; +``` + +## Examples + +```ComponentSnackPlayer path=components,primitives,HStack,basic.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Stack,HStack.tsx + +``` diff --git a/versioned_docs/version-3.2.2/heading.md b/versioned_docs/version-3.2.2/heading.md new file mode 100644 index 000000000..380bb87d3 --- /dev/null +++ b/versioned_docs/version-3.2.2/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=components,primitives,Heading,Basic.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=components,primitives,Heading,Sizes.tsx + +``` + +### Truncate + +```ComponentSnackPlayer path=components,primitives,Heading,Truncate.tsx + +``` + +### Override + +```ComponentSnackPlayer path=components,primitives,Heading,OverridenStyle.tsx + +``` + +### Composition + +```ComponentSnackPlayer path=components,primitives,Heading,Composition.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Heading,index.tsx + +``` + +## Styling + + diff --git a/versioned_docs/version-3.2.2/hidden.md b/versioned_docs/version-3.2.2/hidden.md new file mode 100644 index 000000000..b030ed15b --- /dev/null +++ b/versioned_docs/version-3.2.2/hidden.md @@ -0,0 +1,65 @@ +--- +id: hidden +title: Hidden +--- + +import { ComponentTheme } from '../../src/components'; + +Hidden is used to toggle the visibility value of child components responsively, based on the colorMode or based on the platform. It doesn't mount the child components in the restricted values of props. + +## Import + +```jsx +import { Hidden } from 'native-base'; +``` + +## Example + +### Basic + +```jsx + + + This text will be always hidden. + + +``` + +### Hidden according to breakpoints + +```jsx +<> + + + This text will be hidden from sm to lg screens. + + + + + This text will be hidden on sm and lg screens only. + + + +``` + +### Hidden according to colorMode + +```ComponentSnackPlayer path=components,primitives,Hidden,hiddenOnColorModes.tsx + +``` + +## Hidden according to platform + +```jsx + + + This text will be hidden on android and web. + + +``` + +## Props + +```ComponentPropTable path=primitives,Hidden,index.tsx + +``` diff --git a/versioned_docs/version-3.2.2/icon.md b/versioned_docs/version-3.2.2/icon.md new file mode 100644 index 000000000..cb1996111 --- /dev/null +++ b/versioned_docs/version-3.2.2/icon.md @@ -0,0 +1,60 @@ +--- +id: icon +title: Icon +--- + +You can use icons in multiple ways in NativeBase: + +- Create icon by creating an SVG Icon +- Create icon using createIcon function and use it as a component +- Use a third-party icon library ( such as [@expo/vector-icons](https://github.com/expo/vector-icons) ), with `as` prop. + +## Examples + +### Basic + +```ComponentSnackPlayer path=components,primitives,Icon,Basic.tsx + +``` + +Apart from the icons provided by [@expo/vector-icon](https://github.com/expo/vector-icons), you can also create custom icons using SVG. You can use all the components from [react-native-svg](https://github.com/react-native-svg/react-native-svg). + +### NativeBase Icons + +We provides a set of commonly used interface icons. So you can directly use them in your project. All our icons are create using [`createIcon`](icon#createicon) function from NativeBase. + +```ComponentSnackPlayer path=components,primitives,Icon,AllIcons.tsx + +``` + +### Custom Icon + +```ComponentSnackPlayer path=components,primitives,Icon,CustomIcon.tsx + +``` + +### Create Icon + +```ComponentSnackPlayer path=components,primitives,Icon,CreateIcon.tsx + +``` + +### Integration with Third Party Icons + +```ComponentSnackPlayer path=components,primitives,Icon,ThirdPartyIcons.tsx + +``` + +## Props + +### Icon + +```ComponentPropTable path=primitives,Icon,Icon.tsx showStylingProps=true + +``` + +### createIcon + +```ComponentPropTable path=primitives,Icon,createIcon.tsx + +``` diff --git a/versioned_docs/version-3.2.2/iconButton.md b/versioned_docs/version-3.2.2/iconButton.md new file mode 100644 index 000000000..74f6e7309 --- /dev/null +++ b/versioned_docs/version-3.2.2/iconButton.md @@ -0,0 +1,43 @@ +--- +id: icon-button +title: IconButton +--- + +import { ComponentTheme } from '../../src/components'; + +`IconButton` composes the `Button` component. It is generally used to make an Icon pressable. + +## Examples + +### Basic + +```ComponentSnackPlayer path=components,composites,IconButton,Basic.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=components,composites,IconButton,Sizes.tsx + +``` + +### Variants + +```ComponentSnackPlayer path=components,composites,IconButton,Variant.tsx + +``` + +## Props + +```ComponentPropTable path=composites,IconButton,index.tsx + +``` + +## Styling + + + +## Accessibility + +- Use accessibilityLabel for labelling icon buttons to make sure it's announced by screen reader devices. +- IconButton has a `role` set to [button](https://www.w3.org/TR/wai-aria-practices-1.2/#button). diff --git a/versioned_docs/version-3.2.2/image.md b/versioned_docs/version-3.2.2/image.md new file mode 100644 index 000000000..7fb470c5b --- /dev/null +++ b/versioned_docs/version-3.2.2/image.md @@ -0,0 +1,75 @@ +--- +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=components,primitives,Image,Basic.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=components,primitives,Image,Sizes.tsx + +``` + +### Border Radius + +```ComponentSnackPlayer path=components,primitives,Image,BorderRadius.tsx + +``` + +### Fallback + +```ComponentSnackPlayer path=components,primitives,Image,FallbackSupport.tsx + +``` + +### Basic (With Ref) + +```ComponentSnackPlayer path=components,primitives,Image,WithRef.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Image,index.tsx showStylingProps=true + +``` + +## Note + +### With Next's require statement + +When using require statement from next for image keep this in mind. + +```jsx + + const img = require('/public/me.jpg'); + + // DO ✔ + + // DON'T ✘ + + + +``` diff --git a/versioned_docs/version-3.2.2/input.md b/versioned_docs/version-3.2.2/input.md new file mode 100644 index 000000000..5a60c07ae --- /dev/null +++ b/versioned_docs/version-3.2.2/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=components,primitives,Input,Basic.tsx + +``` + +### Input Sizes + +```ComponentSnackPlayer path=components,primitives,Input,Size.tsx + +``` + +### Input Variants + +```ComponentSnackPlayer path=components,primitives,Input,Variant.tsx + +``` + +### Input Addons + +```ComponentSnackPlayer path=components,primitives,Input,Addons.tsx + +``` + +### Input Elements + +```ComponentSnackPlayer path=components,primitives,Input,Elements.tsx + +``` + +### Password Input + +```ComponentSnackPlayer path=components,primitives,Input,Masked.tsx + +``` + +### Controlled Input + +```ComponentSnackPlayer path=components,primitives,Input,Controlled.tsx + +``` + +### Form Controlled + +```ComponentSnackPlayer path=components,primitives,Input,FormControlled.tsx + +``` + +## Props + +### Input + +```ComponentPropTable path=primitives,Input,Input.tsx showStylingProps=true + +``` + +### Input.Group + +```ComponentPropTable path=primitives,Input,InputGroup.tsx + +``` + +## Styling + + diff --git a/versioned_docs/version-3.2.2/install-cra.mdx b/versioned_docs/version-3.2.2/install-cra.mdx new file mode 100644 index 000000000..4a582d19c --- /dev/null +++ b/versioned_docs/version-3.2.2/install-cra.mdx @@ -0,0 +1,133 @@ +--- +id: install-cra +title: Install in Create React App project +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +import { TileLink, RNWebNote } 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 react-native-safe-area-context +``` + +
+ + + +
+ +```bash +npm install react-native-web native-base react-native-svg react-native-safe-area-context +``` + +
+ + + + +### Run the Hello world example + +Put the below code in your App.js + +```jsx +import React from 'react'; +import { NativeBaseProvider, Box } from 'native-base'; + +export default function App() { + return ( + + Hello world + + ); +} +``` + + + + + +
+ +
+ +
+
+
+ + +
+
+ +
+
+
+ + diff --git a/versioned_docs/version-3.2.2/install-expo.mdx b/versioned_docs/version-3.2.2/install-expo.mdx new file mode 100644 index 000000000..a1714763d --- /dev/null +++ b/versioned_docs/version-3.2.2/install-expo.mdx @@ -0,0 +1,140 @@ +--- +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 project using Expo CLI with NativeBase template + +

Plain Javascript

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

With Typescript

+
+ +```bash +expo init my-app --template expo-template-native-base-typescript +``` + +
+ +Yey! you are all set, start editing App.js/App.tsx now. + + + + + +### Create a new expo project if not exist + +```bash +npm install --global expo-cli +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 +``` + + + + + +```bash +npm install native-base +``` + + + + + +```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'; + +export default function App() { + return ( + + Hello world + + ); +} +``` + + + + +
+ minions clapping +
+ +
+
+
+ + +
+
+ +
+
+
diff --git a/versioned_docs/version-3.2.2/install-next.mdx b/versioned_docs/version-3.2.2/install-next.mdx new file mode 100644 index 000000000..4baea406b --- /dev/null +++ b/versioned_docs/version-3.2.2/install-next.mdx @@ -0,0 +1,264 @@ +--- +id: install-next +title: Install in Next.js project +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +import { TileLink, RNWebNote } 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 react-native-safe-area-context +``` + +
+ + + + + +
+ +```bash +npm install react-native-web native-base react-native-svg 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', + 'react-native-safe-area-context', + '@react-aria/visually-hidden', + '@react-native-aria/button', + '@react-native-aria/checkbox', + '@react-native-aria/combobox', + '@react-native-aria/focus', + '@react-native-aria/interactions', + '@react-native-aria/listbox', + '@react-native-aria/overlays', + '@react-native-aria/radio', + '@react-native-aria/slider', + '@react-native-aria/tabs', + '@react-native-aria/utils', + '@react-stately/combobox', + '@react-stately/radio', +]); + +module.exports = withPlugins( + [ + withTM, + // your plugins go here. + ], + { + webpack: (config) => { + config.resolve.alias = { + ...(config.resolve.alias || {}), + // Transform all direct `react-native` imports to `react-native-web` + 'react-native$': 'react-native-web', + }; + config.resolve.extensions = [ + '.web.js', + '.web.ts', + '.web.tsx', + ...config.resolve.extensions, + ]; + return config; + }, + } +); +``` + +### Run the Hello world example + +Replace the below code in your pages/\_app.js + +```jsx +import '../styles/globals.css'; +import { NativeBaseProvider } from 'native-base'; + +function MyApp({ Component, pageProps }) { + return ( + + + + ); +} + +export default MyApp; +``` + +and put this in your pages/index.js + +```jsx +import React from 'react'; +import { Box } from 'native-base'; + +export default function App() { + return Hello world; +} +``` + + + + +
+ +
+ +
+
+
+ + +
+
+ +
+
+
+ + diff --git a/versioned_docs/version-3.2.2/install-rn.mdx b/versioned_docs/version-3.2.2/install-rn.mdx new file mode 100644 index 000000000..97d529d50 --- /dev/null +++ b/versioned_docs/version-3.2.2/install-rn.mdx @@ -0,0 +1,138 @@ +--- +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 using ReactNative CLI with NativeBase template + +[Refer this link](https://github.com/react-native-community/cli#about) to get infomation about the React Native CLI. + +

Plain Javascript

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

With Typescript

+
+ +```bash +npx react-native init MyApp --template react-native-template-native-base-typescript +``` + +
+ +Yey! you are all set, start editing App.js/App.tsx now. + + + + + +### Create a new project if not exist + +```bash +npx react-native init AwesomeNativeBase +cd AwesomeNativeBase +``` + +### Install dependencies + + + + + +```bash +yarn add native-base react-native-svg react-native-safe-area-context +``` + + + + + +```bash +npm install native-base react-native-svg 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'; + +export default function App() { + return ( + + Hello world + + ); +} +``` + + + + + +
+ +
+ +
+
+
+ + +
+
+ +
+
+
diff --git a/versioned_docs/version-3.2.2/installation.mdx b/versioned_docs/version-3.2.2/installation.mdx new file mode 100644 index 000000000..91616aeed --- /dev/null +++ b/versioned_docs/version-3.2.2/installation.mdx @@ -0,0 +1,30 @@ +--- +id: installation +title: Installation +--- + +import { InstallationTiles } from '../../src/components'; + +**NativeBase** is supported in [Expo](https://docs.expo.io/get-started/installation/) or React Native CLI initiated apps. Web support is made possible by [react-native-web](https://necolas.github.io/react-native-web/). + +Refer the guides shown below to setup NativeBase in your React app. + +
+
+ +
+
+ +
+ +### NativeBase VS Code Extensions + +NativeBase VS Code Extensions are specifically designed to quicken your development process using **NativeBase 3.0**. +NativeBase snippets are shorthand for commonly used NativeBase components. + +All snippets start with the prefix `nb-` and are followed by the name of the desired component. + +aang transitioning to avatar state diff --git a/versioned_docs/version-3.2.2/interaction-styles.mdx b/versioned_docs/version-3.2.2/interaction-styles.mdx new file mode 100644 index 000000000..aa46c0a74 --- /dev/null +++ b/versioned_docs/version-3.2.2/interaction-styles.mdx @@ -0,0 +1,229 @@ +--- +id: pseudo-props +title: 'Pseudo props: Overview' +--- + +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 + + + + + +```jsx title="Hover example" + + + Hover me + + +``` + +## Pressed + +Using `_pressed` pseudo prop, we can customize the style of Pressable component on pressed. + + + + + + Pressed + + + + + +```jsx title="Pressed example" + + + Pressed + + +``` + +## Focus + +Using `_focus` pseudo prop, we can customize the style of Pressable component on focus. + + + + + + Focus + + + + + +```jsx title="Focus example" + + + Focus + + +``` + +## Platform specific styling + +Using `_web`, `_iOS`, `_android` pseudo props, we can customize the style or behaviour of NativeBase components across platforms. + + + + + + + Save + + + Web + + + + + Save + + + Android + + + + + Save + + + iOS + + + + +```jsx title="Platform specific example" + + + + + Save + + + Web + + + + + Save + + + Android + + + + + Save + + + iOS + + +``` diff --git a/versioned_docs/version-3.2.2/keyboardAvoidingView.md b/versioned_docs/version-3.2.2/keyboardAvoidingView.md new file mode 100644 index 000000000..7433142e2 --- /dev/null +++ b/versioned_docs/version-3.2.2/keyboardAvoidingView.md @@ -0,0 +1,18 @@ +--- +id: keyboard-avoiding-view +title: KeyboardAvoidingView +--- + +Provides a view that moves out of the way of virtual keyboard automatically. It is a component to solve the common problem of views that need to move out of the way of the virtual keyboard. It can automatically adjust either its height, position, or bottom padding based on the keyboard height. + +## Example + +```ComponentSnackPlayer path=components,basic,KeyboardAvoidingView,Basic.tsx + +``` + +## Props + +```ComponentPropTable path=basic,KeyboardAvoidingView,KeyboardAvoidingView.tsx showStylingProps=true + +``` diff --git a/versioned_docs/version-3.2.2/kitchen-sink.mdx b/versioned_docs/version-3.2.2/kitchen-sink.mdx new file mode 100644 index 000000000..7187d2c16 --- /dev/null +++ b/versioned_docs/version-3.2.2/kitchen-sink.mdx @@ -0,0 +1,66 @@ +--- +id: kitchen-sink +title: Kitchen Sink +--- + +import { KitchenSinkIframe, TileLink, NBHistory } from '../../src/components'; +import useBaseUrl from '@docusaurus/useBaseUrl'; +import ExpoIcon from '@site/static/img/expo-icon.svg'; +import useThemeContext from '@theme/hooks/useThemeContext'; + +
+
+
+

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

+
+
+
+ Scan with the + + + + Expo app on your Android device to see the special dish we cooked + for you! +
+ +
+
+
+ +
+
+
+
+
+ +
+
+
diff --git a/versioned_docs/version-3.2.2/link.md b/versioned_docs/version-3.2.2/link.md new file mode 100644 index 000000000..be14d5e7b --- /dev/null +++ b/versioned_docs/version-3.2.2/link.md @@ -0,0 +1,60 @@ +--- +id: link +title: Link +--- + +import { ComponentTheme } from '../../src/components'; + +`Links` are accessible elements used primarily for navigation. This component is styled to resemble a hyperlink. + +## **Import** + +```jsx +import { Link } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=components,primitives,Link,Basic.tsx + +``` + +### External Link + +```ComponentSnackPlayer path=components,primitives,Link,ExternalLink.tsx + +``` + +### Link with Underline + +```ComponentSnackPlayer path=components,primitives,Link,UnderlineLink.tsx + +``` + +### Link custom onPress + +```ComponentSnackPlayer path=components,primitives,Link,CustomOnPress.tsx + +``` + +### Link around containers + +```ComponentSnackPlayer path=components,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.2.2/loginsignupforms.md b/versioned_docs/version-3.2.2/loginsignupforms.md new file mode 100644 index 000000000..b0ebd4db9 --- /dev/null +++ b/versioned_docs/version-3.2.2/loginsignupforms.md @@ -0,0 +1,18 @@ +--- +id: login-signup-forms +title: Login/Signup Forms +--- + +## Example + +### Login Form + +```ComponentSnackPlayer path=examples,Signin.tsx + +``` + +### Signup Form + +```ComponentSnackPlayer path=examples,Signup.tsx + +``` diff --git a/versioned_docs/version-3.2.2/menu.md b/versioned_docs/version-3.2.2/menu.md new file mode 100644 index 000000000..0f6770f1f --- /dev/null +++ b/versioned_docs/version-3.2.2/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=components,composites,Menu,Basic.tsx + +``` + +### Group + +```ComponentSnackPlayer path=components,composites,Menu,Group.tsx + +``` + +### MenuOptionGroups + +```ComponentSnackPlayer path=components,composites,Menu,MenuOptionsGroup.tsx + +``` + +### Menu Placement + +```ComponentSnackPlayer path=components,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.2.2/migration/Actionsheet.md b/versioned_docs/version-3.2.2/migration/Actionsheet.md new file mode 100644 index 000000000..50e681848 --- /dev/null +++ b/versioned_docs/version-3.2.2/migration/Actionsheet.md @@ -0,0 +1,107 @@ +--- +id: action-sheet +title: ActionSheet +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +We have sliced [`Actionsheet`](actionSheet.md) into multiple smaller component which not only provides more control over the the code but also makes it more readable. + +## Overview + +Migrating Checkbox components can broadly described in these points: + +- **options** (prop) → `Actionsheet.Item` (component). +- Props like **cancelButtonIndex**, **cancelButtonIndex** are _no longer required_ as components like `Actionsheet.Item` can be customised as per need. +- **title** (prop) → NativeBase components such as `Heading` and `Text` can be used inside `ActionSheet.Content` to show the title. +- Declarative approach to show and hide using `isOpen` prop, instead of `show()` and `hide()`. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { + Container, + Header, + Button, + Content, + ActionSheet, + Text, +} from 'native-base'; +var BUTTONS = ['Option 1', 'Option 2', 'Option 3', 'Delete', 'Cancel']; +var DESTRUCTIVE_INDEX = 3; +var CANCEL_INDEX = 4; +export default class ActionSheetExample extends Component { + constructor(props) { + super(props); + this.state = {}; + } + render() { + return ( + + + + + + ); + } +} +``` + + + + +```tsx +import React from 'react'; +import { Button, Actionsheet, useDisclose } from 'native-base'; + +export default function () { + const { isOpen, onOpen, onClose } = useDisclose(); + return ( + <> + + + + + Header + Option 1 + Option 2 + Option 3 + Delete + + + Cancel + + + + ); +} +``` + + + diff --git a/versioned_docs/version-3.2.2/migration/Badge.md b/versioned_docs/version-3.2.2/migration/Badge.md new file mode 100644 index 000000000..50dad69ac --- /dev/null +++ b/versioned_docs/version-3.2.2/migration/Badge.md @@ -0,0 +1,44 @@ +--- +id: badge +title: Badge +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +Migrating [`Badge`](badge.md) to v3 will provide a lot more **design**, **size, variant**, **color** and **customisation** options. + +## Overview + +Migrating Badge components can be broadly described in these points: + +- No need to wrap you text inside text component anymore. +- In v3 the color is controlled by `colorScheme` prop. And it accepts all the color available in the theme. + +## Code Comparison + + + + +```tsx + + Success + +``` + + + + +```tsx + + Success + +``` + + + diff --git a/versioned_docs/version-3.2.2/migration/Button.md b/versioned_docs/version-3.2.2/migration/Button.md new file mode 100644 index 000000000..a33b068df --- /dev/null +++ b/versioned_docs/version-3.2.2/migration/Button.md @@ -0,0 +1,196 @@ +--- +id: button +title: Button +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +Migrating [`Button`](button.mdx) to v3 will provide a lot more **design**, **size**, **color** and **customisation** options. + +## Overview + +Migrating Button components can broadly described in these points: + +- No need to wrap your text inside `Text` component anymore. +- `isDisabled` prop can be used to disable the button. +- Icons in Button: + `leftIcon` and `rightIcon` are the new alternative to iconLeft and iconRight respectively and they accept **tsx.Element**. +- Colors of the Buttons: + In v3 the color is controlled by `colorScheme` prop. So all the color providing props [ **light**, **info**, **success**, **warning**, **danger** and **dark** ] can be passed as value (and more) to `colorScheme` props. +- Design of the Button: + With v3 we're providing some mostly frequently used designs as `variants` [ **solid**, **outline**, **ghost**, **link** and **unstyled** ] and lot more customisation. +- Sizes of the Button: + In v3 the size is controlled by `size` prop. And it accepts pre-defined sizes [ like xs, sm md, lg ] and also custom values. + +## Code Comparison + +## Colors to the Button + +Besides option like **light**, **info**, **success**, **warning**, **danger** and **dark**. Now you can also provide colors like **red**, **blue**, **cyan**, **teal** and a lot more. + + + + +![Button/Screenshot_2021-01-22_at_12.29.32_PM.png](Button/Screenshot_2021-01-22_at_12.29.32_PM.png) + +```tsx + +``` + + + + +![Button/Screenshot_2021-01-22_at_12.53.09_PM.png](Button/Screenshot_2021-01-22_at_12.53.09_PM.png) + +```tsx + +``` + + + + +### Sizes of the Button: + +Besides option like **light**, **info**, **success**, **warning**, **danger** and **dark**. Now you can also provide colors like **red**, **blue**, **cyan**, **teal** and a lot more. + + + + +![Button/Screenshot_2021-01-22_at_2.37.09_PM.png](Button/Screenshot_2021-01-22_at_2.37.09_PM.png) + +```tsx + +``` + + + + +![Button/Screenshot_2021-01-22_at_2.38.52_PM.png](Button/Screenshot_2021-01-22_at_2.38.52_PM.png) + +```tsx + +``` + + + + +### Designing the Button + +With v3 you can combine variants and style props to create various designs. + + + + +![Button/Screenshot_2021-01-22_at_1.16.25_PM.png](Button/Screenshot_2021-01-22_at_1.16.25_PM.png) + +```tsx + +``` + +![Button/Screenshot_2021-01-22_at_1.23.42_PM.png](Button/Screenshot_2021-01-22_at_1.23.42_PM.png) + +```tsx + +``` + +![Button/Screenshot_2021-01-22_at_1.17.11_PM.png](Button/Screenshot_2021-01-22_at_1.17.11_PM.png) + +```tsx + +``` + + + + +![Button/Screenshot_2021-01-22_at_1.15.34_PM.png](Button/Screenshot_2021-01-22_at_1.15.34_PM.png) + +```tsx + +``` + +![Button/Screenshot_2021-01-22_at_1.22.36_PM.png](Button/Screenshot_2021-01-22_at_1.22.36_PM.png) + +```tsx + +``` + +![Button/Screenshot_2021-01-22_at_1.20.36_PM.png](Button/Screenshot_2021-01-22_at_1.20.36_PM.png) + +```tsx + +``` + + + + +### Icon Button + +With v3 iconLeft and iconRight can now accepts tsx.Element as child and render the element at the appropriate place. + + + + +![Button/Screenshot_2021-01-22_at_1.32.47_PM.png](Button/Screenshot_2021-01-22_at_1.32.47_PM.png) + +```tsx + +``` + + + + +![Button/Screenshot_2021-01-22_at_1.38.15_PM.png](Button/Screenshot_2021-01-22_at_1.38.15_PM.png) + +```tsx + +``` + + + diff --git a/versioned_docs/version-3.2.2/migration/Button/Screenshot_2021-01-22_at_1.15.34_PM.png b/versioned_docs/version-3.2.2/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.2.2/migration/Button/Screenshot_2021-01-22_at_1.15.34_PM.png differ diff --git a/versioned_docs/version-3.2.2/migration/Button/Screenshot_2021-01-22_at_1.16.25_PM.png b/versioned_docs/version-3.2.2/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.2.2/migration/Button/Screenshot_2021-01-22_at_1.16.25_PM.png differ diff --git a/versioned_docs/version-3.2.2/migration/Button/Screenshot_2021-01-22_at_1.17.11_PM.png b/versioned_docs/version-3.2.2/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.2.2/migration/Button/Screenshot_2021-01-22_at_1.17.11_PM.png differ diff --git a/versioned_docs/version-3.2.2/migration/Button/Screenshot_2021-01-22_at_1.20.36_PM.png b/versioned_docs/version-3.2.2/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.2.2/migration/Button/Screenshot_2021-01-22_at_1.20.36_PM.png differ diff --git a/versioned_docs/version-3.2.2/migration/Button/Screenshot_2021-01-22_at_1.22.36_PM.png b/versioned_docs/version-3.2.2/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.2.2/migration/Button/Screenshot_2021-01-22_at_1.22.36_PM.png differ diff --git a/versioned_docs/version-3.2.2/migration/Button/Screenshot_2021-01-22_at_1.23.42_PM.png b/versioned_docs/version-3.2.2/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.2.2/migration/Button/Screenshot_2021-01-22_at_1.23.42_PM.png differ diff --git a/versioned_docs/version-3.2.2/migration/Button/Screenshot_2021-01-22_at_1.32.47_PM.png b/versioned_docs/version-3.2.2/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.2.2/migration/Button/Screenshot_2021-01-22_at_1.32.47_PM.png differ diff --git a/versioned_docs/version-3.2.2/migration/Button/Screenshot_2021-01-22_at_1.38.15_PM.png b/versioned_docs/version-3.2.2/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.2.2/migration/Button/Screenshot_2021-01-22_at_1.38.15_PM.png differ diff --git a/versioned_docs/version-3.2.2/migration/Button/Screenshot_2021-01-22_at_12.29.32_PM.png b/versioned_docs/version-3.2.2/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.2.2/migration/Button/Screenshot_2021-01-22_at_12.29.32_PM.png differ diff --git a/versioned_docs/version-3.2.2/migration/Button/Screenshot_2021-01-22_at_12.53.09_PM.png b/versioned_docs/version-3.2.2/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.2.2/migration/Button/Screenshot_2021-01-22_at_12.53.09_PM.png differ diff --git a/versioned_docs/version-3.2.2/migration/Button/Screenshot_2021-01-22_at_2.37.09_PM.png b/versioned_docs/version-3.2.2/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.2.2/migration/Button/Screenshot_2021-01-22_at_2.37.09_PM.png differ diff --git a/versioned_docs/version-3.2.2/migration/Button/Screenshot_2021-01-22_at_2.38.52_PM.png b/versioned_docs/version-3.2.2/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.2.2/migration/Button/Screenshot_2021-01-22_at_2.38.52_PM.png differ diff --git a/versioned_docs/version-3.2.2/migration/Card.md b/versioned_docs/version-3.2.2/migration/Card.md new file mode 100644 index 000000000..14a383239 --- /dev/null +++ b/versioned_docs/version-3.2.2/migration/Card.md @@ -0,0 +1,91 @@ +--- +id: card +title: Card +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +With NativeBase v3 we have removed Card components because as it's very simple to create various card layout using primitive components. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { + Container, + Header, + Content, + Card, + CardItem, + Text, + Body, +} from 'native-base'; +export default class CardItemBordered extends Component { + render() { + return ( + +
+ + + + NativeBase + + + + + NativeBase is a free and open source framework that enable + developers to build high-quality mobile apps using React + Native iOS and Android apps with a fusion of ES6. + + + + + GeekyAnts + + + + + ); + } +} +``` + + + + +```tsx +import React from 'react'; +import { VStack, Box, Divider } from 'native-base'; + +export default function () { + return ( + + }> + + NativeBase + + + NativeBase is a free and open source framework that enable developers + to build high-quality mobile apps using React Native iOS and Android + apps with a fusion of ES6. + + + GeekyAnts + + + + ); +} +``` + + + diff --git a/versioned_docs/version-3.2.2/migration/Checkbox.md b/versioned_docs/version-3.2.2/migration/Checkbox.md new file mode 100644 index 000000000..f63647256 --- /dev/null +++ b/versioned_docs/version-3.2.2/migration/Checkbox.md @@ -0,0 +1,54 @@ +--- +id: checkbox +title: Checkbox +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +Migrating [`Checkbox`](checkBox.md) to v3 will provide a lot more **design**, **size**, **color** and **customisation** option. + +## Overview + +Migrating Checkbox components can broadly described in these points: + +- **checked** props is deprecated, instead now we provide you with `defaultIsChecked` and `isChecked` prop to better manage your checkbox. For most cases **checked** can be replaced with `isChecked`. +- Colors of the Checkbox: + In v3 the color is controlled by `colorScheme` prop. And it accepts all the color available in the theme. +- onPress props is deprecated, instead v3 provides onChange which provides a callback when state of the checkbox change. + +## Code Comparison + + + + +![Checkbox/Screenshot_2021-01-22_at_3.09.29_PM.png](Checkbox/Screenshot_2021-01-22_at_3.09.29_PM.png) + +```tsx + + + Finish list Screen + +``` + + + + +![Checkbox/Screenshot_2021-01-22_at_4.34.08_PM.png](Checkbox/Screenshot_2021-01-22_at_4.34.08_PM.png) + +```tsx + +Finish list Screen +// alternative: pressing the text will also trigger onChange + + Finish list Screen + +``` + + + diff --git a/versioned_docs/version-3.2.2/migration/Checkbox/Screenshot_2021-01-22_at_3.09.29_PM.png b/versioned_docs/version-3.2.2/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.2.2/migration/Checkbox/Screenshot_2021-01-22_at_3.09.29_PM.png differ diff --git a/versioned_docs/version-3.2.2/migration/Checkbox/Screenshot_2021-01-22_at_4.34.08_PM.png b/versioned_docs/version-3.2.2/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.2.2/migration/Checkbox/Screenshot_2021-01-22_at_4.34.08_PM.png differ diff --git a/versioned_docs/version-3.2.2/migration/DatePicker.md b/versioned_docs/version-3.2.2/migration/DatePicker.md new file mode 100644 index 000000000..9d2dcf583 --- /dev/null +++ b/versioned_docs/version-3.2.2/migration/DatePicker.md @@ -0,0 +1,6 @@ +--- +id: date-picker +title: DatePicker +--- + +DatePicker is currently in progress and will be coming soon. Till then you can use React Native's [DateTimePicker](https://github.com/react-native-datetimepicker/datetimepicker). diff --git a/versioned_docs/version-3.2.2/migration/DeckSwiper.md b/versioned_docs/version-3.2.2/migration/DeckSwiper.md new file mode 100644 index 000000000..9fd590f78 --- /dev/null +++ b/versioned_docs/version-3.2.2/migration/DeckSwiper.md @@ -0,0 +1,8 @@ +--- +id: deck-swiper +title: DeckSwiper +--- + +We're still thinking whether we should add a DeckSwiper component, let us know on [discord channel](https://discord.com/invite/TSgCw2UPmb). +Till then you can use [react-native-deck-swiper +](https://www.npmjs.com/package/react-native-deck-swiper). diff --git a/versioned_docs/version-3.2.2/migration/Drawer.md b/versioned_docs/version-3.2.2/migration/Drawer.md new file mode 100644 index 000000000..1c4f74752 --- /dev/null +++ b/versioned_docs/version-3.2.2/migration/Drawer.md @@ -0,0 +1,6 @@ +--- +id: drawer +title: Drawer +--- + +Drawer component is still in progress, until it's done you can check out the recipe of integrating React Navigation's [DrawerNavigation](https://reactnavigation.org/docs/drawer-based-navigation/) in NB. diff --git a/versioned_docs/version-3.2.2/migration/FABs.md b/versioned_docs/version-3.2.2/migration/FABs.md new file mode 100644 index 000000000..7c7e20906 --- /dev/null +++ b/versioned_docs/version-3.2.2/migration/FABs.md @@ -0,0 +1,63 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +Migrating [`FAB`](FAB.md) to v3 will provide a lot more **design**, **size**, **color** and **customisation** option. + +## Overview + +Migrating Badge components can broadly described in these points: + +- Instead of Passing Icon as child, use `icon` prop. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { Container, Header, View, Icon, Fab } from 'native-base'; +export default function () { + return ( + +
+ + + + + + + ); +} +``` + + + + +```tsx +import React from 'react'; +import { Fab, Icon } from 'native-base'; + +export default function () { + return ( + } + /> + ); +} +``` + + + diff --git a/versioned_docs/version-3.2.2/migration/FooterTab.md b/versioned_docs/version-3.2.2/migration/FooterTab.md new file mode 100644 index 000000000..6262a397a --- /dev/null +++ b/versioned_docs/version-3.2.2/migration/FooterTab.md @@ -0,0 +1,6 @@ +--- +id: footer-tab +title: FooterTab +--- + +With NativeBase v3 we have removed FooterTab components because as it's very simple to create using HStack components. You can checkout the [recipe](buildingFooterTabs.md). diff --git a/versioned_docs/version-3.2.2/migration/Form.md b/versioned_docs/version-3.2.2/migration/Form.md new file mode 100644 index 000000000..c7fe61675 --- /dev/null +++ b/versioned_docs/version-3.2.2/migration/Form.md @@ -0,0 +1,72 @@ +--- +id: form +title: Form +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +With NativeBase v3 we have replaced Form with [`FormControl`](formControl.md) and sliced into [`FormControl.Label`](formControl.md#formcontrollabel), [`FormControl.HelperText`](formControl.md#formcontrolhelpertext) and [`FormControl.ErrorMessage`](formControl#formcontrolerrormessage). + +Here an example to show the code comparison. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { Form, Item, Input } from 'native-base'; +export default class FormExample extends Component { + render() { + return ( +
+ + + + + + + + +
+ ); + } +} +// need to re-write +``` + + + + +```tsx +import React from 'react'; +import { Input, Stack, FormControl } from 'native-base'; +export const FormExample = () => { + return ( + + + + Username + + + + Password + + + + + ); +}; + +// v3 version +``` + + + diff --git a/versioned_docs/version-3.2.2/migration/Header.md b/versioned_docs/version-3.2.2/migration/Header.md new file mode 100644 index 000000000..9ec9f0288 --- /dev/null +++ b/versioned_docs/version-3.2.2/migration/Header.md @@ -0,0 +1,6 @@ +--- +id: header +title: Header +--- + +With v3 we have removed the **Header** as it can be easily built using `HStack`. You can checkout its recipe [here](/buildingAppBar). diff --git a/versioned_docs/version-3.2.2/migration/Icon.md b/versioned_docs/version-3.2.2/migration/Icon.md new file mode 100644 index 000000000..e51c49acb --- /dev/null +++ b/versioned_docs/version-3.2.2/migration/Icon.md @@ -0,0 +1,80 @@ +--- +id: icon +title: Icon +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +Migrating [`Icon`](icon.md) to v3 will provide a lot more **customisation** option. You can also create custom icons using SVG. + +## Overview + +Migrating Icon components can broadly described in these points: + +- **ios**, **android** and **type** props have been deprecated. +- default Icon type i.e **Ionicons** has been removed, now v3 does not uses any. +- v3 uses a third-party icon library ( such as @expo/vector-icons ), with **as** prop. +- custom colors and size can be added using **color** and **size** props. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { Icon } from 'native-base'; + +export default class IconExample extends Component { + render() { + return ( + <> + + + + + ); + } +} +// need to re-write +``` + + + + +```tsx +import React from 'react'; +import { Platform } from 'react-native'; +import { Icon } from 'native-base'; +import { Ionicons, FontAwesome } from '@expo/vector-icons'; + +export default function () { + return ( + <> + + + + + ); +} + +// v3 version +``` + + + diff --git a/versioned_docs/version-3.2.2/migration/Layout.md b/versioned_docs/version-3.2.2/migration/Layout.md new file mode 100644 index 000000000..40ecc91a0 --- /dev/null +++ b/versioned_docs/version-3.2.2/migration/Layout.md @@ -0,0 +1,77 @@ +--- +id: layout +title: Layout +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +## Grid + +You can easily design layouts with [Row](hStack.md) or [Column](VStack.md) components. + +## List + +With NativeBase v3 we have removed List components because as it's very simple to create various list layout using primitive components. + +### Code Comparison + + + + +```tsx + + + + Simon Mignolet + + + + + + + + Nathaniel Clyne + + + + + + + + Dejan Lovren + + + + + + +``` + + + + +```tsx +} w="90%"> + + Simon Mignolet + + + + Nathaniel Clyne + + + + Dejan Lovren + + + +``` + + + diff --git a/versioned_docs/version-3.2.2/migration/List.md b/versioned_docs/version-3.2.2/migration/List.md new file mode 100644 index 000000000..e69de29bb diff --git a/versioned_docs/version-3.2.2/migration/Picker.md b/versioned_docs/version-3.2.2/migration/Picker.md new file mode 100644 index 000000000..87dbb6037 --- /dev/null +++ b/versioned_docs/version-3.2.2/migration/Picker.md @@ -0,0 +1,91 @@ +--- +id: picker +title: Picker +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +With v3 we have replaced the **Picker** with [`Select`](select.md). + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { Container, Header, Content, Picker, Form } from 'native-base'; + +export default class PickerExample extends Component { + constructor(props) { + super(props); + this.state = { + selected: 'key1', + }; + } + onValueChange(value: string) { + this.setState({ + selected: value, + }); + } + render() { + return ( + +
+ +
+ + + + + + + +
+ + + ); + } +} +``` + + + + +```tsx +import React from 'react'; +import { Icon, Select } from 'native-base'; + +export default function () { + let [language, setLanguage] = React.useState('key0'); + return ( + + ); +} +``` + + + diff --git a/versioned_docs/version-3.2.2/migration/Radio Button.md b/versioned_docs/version-3.2.2/migration/Radio Button.md new file mode 100644 index 000000000..b05b412b7 --- /dev/null +++ b/versioned_docs/version-3.2.2/migration/Radio Button.md @@ -0,0 +1,95 @@ +--- +id: radio-button +title: Radio Button +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +Migrating [`Radio`](radio.md) to v3 will provide a lot more **design**, **size**, **color** and **customisation** option. + +## Overview + +Migrating Radio components can broadly described in these points: + +- In v3 `Radio` can only used along with `Radio.Group`. +- **selected** is deprecated, instead v3 provides with **value** prop in `Radio.Group`. +- Colors of the Radio: + **color** and **selectedColor** props are deprecated, instead now in v3 **color** is controlled by `colorScheme` prop, and it accepts all the color available in the theme. +- **onPress** prop is deprecated, instead v3 provides **onChange** which provides a callback when state of the checkbox change. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { ListItem, Container, Content, Header, Text, Radio } from 'native-base'; +export default class RadioButtonExample extends Component { + constructor() { + super(); + this.state = { + itemSelected: '', + }; + } + render() { + return ( + +
+ + + this.setState({ itemSelected: 'one' })} + selected={this.state.itemSelected == 'one'} + /> + One + + + this.setState({ itemSelected: 'two' })} + selected={this.state.itemSelected == 'two'} + /> + Two + + + + ); + } +} +``` + + + + +```tsx +import React from 'react'; +import { Radio } from 'native-base'; +export default function () { + const [value, setValue] = React.useState('one'); + return ( + { + setValue(nextValue); + }} + > + + One + + + Two + + + ); +} +``` + + + diff --git a/versioned_docs/version-3.2.2/migration/Searchbar.md b/versioned_docs/version-3.2.2/migration/Searchbar.md new file mode 100644 index 000000000..3f02a608a --- /dev/null +++ b/versioned_docs/version-3.2.2/migration/Searchbar.md @@ -0,0 +1,6 @@ +--- +id: search-bar +title: Search Bar +--- + +With NativeBase v3 we have removed **Searchbar** components because as it's very simple to create using `Input` components. To view some examples for seachbars, checkout the [searchbar recipe](buildingSearchBar.md). diff --git a/versioned_docs/version-3.2.2/migration/Segment.md b/versioned_docs/version-3.2.2/migration/Segment.md new file mode 100644 index 000000000..1f80beece --- /dev/null +++ b/versioned_docs/version-3.2.2/migration/Segment.md @@ -0,0 +1,7 @@ +--- +id: segment +title: Segment +--- + +With NativeBase v3 we have removed the **Segment** component because it's more like a Tab component. You can check out the Tab recipe +[here](buildingTabView.md). diff --git a/versioned_docs/version-3.2.2/migration/Spinner.md b/versioned_docs/version-3.2.2/migration/Spinner.md new file mode 100644 index 000000000..9a6fbc31a --- /dev/null +++ b/versioned_docs/version-3.2.2/migration/Spinner.md @@ -0,0 +1,47 @@ +--- +id: spinner +title: Spinner +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +Migrating [`Spinner`](spinner.md) to v3 will provide a lot more **size**, **color** and **customisation** option. + +## Overview + +Migrating Spinner components can broadly described in these points: + +- Get 2 size options, namely **sm/small** and **lg/large** or pass a number as a **size** prop. +- In v3 the color are provided by theme, so the shade for the color should be passed along with the color name. + +## Code Comparison + + + + +```tsx + + + + +``` + + + + +```tsx + + + + + +``` + + + diff --git a/versioned_docs/version-3.2.2/migration/SwipeList.md b/versioned_docs/version-3.2.2/migration/SwipeList.md new file mode 100644 index 000000000..7f7b0f37b --- /dev/null +++ b/versioned_docs/version-3.2.2/migration/SwipeList.md @@ -0,0 +1,6 @@ +--- +id: swipe-list +title: SwipeList +--- + +With NativeBase v3 we have removed **SwipeList** component. To view example for SwipeList built using [react-native-swipe-list](https://www.npmjs.com/package/react-native-swipe-list-view) in NB, checkout this [recipe](buildingSwipeList.md). diff --git a/versioned_docs/version-3.2.2/migration/Tabs.md b/versioned_docs/version-3.2.2/migration/Tabs.md new file mode 100644 index 000000000..bcbe293cd --- /dev/null +++ b/versioned_docs/version-3.2.2/migration/Tabs.md @@ -0,0 +1,67 @@ +--- +id: tabs +title: Tabs +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +API for Tabs is in progress, in the meantine you can check this [recipe](buildingTabView.md) for building Tabs. + + diff --git a/versioned_docs/version-3.2.2/migration/Thumbnail.md b/versioned_docs/version-3.2.2/migration/Thumbnail.md new file mode 100644 index 000000000..d199a39ad --- /dev/null +++ b/versioned_docs/version-3.2.2/migration/Thumbnail.md @@ -0,0 +1,73 @@ +--- +id: thumbnail +title: Thumbnail +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +With v3 we have replaced the **Thumbnail** with [`Image`](image.md). And we also provide [`Avatar`](avatar.md) as well. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { Container, Header, Content, Thumbnail, Text } from 'native-base'; +export default class ThumbnailExample extends Component { + render() { + const uri = + 'https://facebook.github.io/react-native/docs/assets/favicon.png'; + return ( + +
+ + Square Thumbnail + + + + Circular Thumbnail + + + + + + ); + } +} +``` + + + + +```tsx +import React from 'react'; +import { Avatar, VStack, Text, Image } from 'native-base'; + +export default function () { + const uri = 'https://facebook.github.io/react-native/docs/assets/favicon.png'; + + return ( + + Square Thumbnail + react-native + react-native + react-native + Circular Thumbnail + + + + + ); +} +``` + + + diff --git a/versioned_docs/version-3.2.2/migration/Toast.md b/versioned_docs/version-3.2.2/migration/Toast.md new file mode 100644 index 000000000..3c1aec5ac --- /dev/null +++ b/versioned_docs/version-3.2.2/migration/Toast.md @@ -0,0 +1,84 @@ +--- +id: toast +title: Toast +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +In v3, [`Toast`](toast.md) can be created using **useToast** hook + +## Overview + +Migrating Toast components can broadly described in these points: + +- **buttonText** is no longer supported. +- **type** (prop) → **status** prop. +- **position** (prop) → **placement** prop. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { Container, Header, Content, Toast, Button, Text } from 'native-base'; + +export default class ToastExample extends Component { + render() { + return ( + +
+ + + + + ); + } +} +``` + + + + +```tsx +import React from 'react'; +import { Button, useToast } from 'native-base'; + +export default function () { + const toast = useToast(); + + return ( + + ); +} +``` + + + diff --git a/versioned_docs/version-3.2.2/migration/Typography.md b/versioned_docs/version-3.2.2/migration/Typography.md new file mode 100644 index 000000000..3f5f0e662 --- /dev/null +++ b/versioned_docs/version-3.2.2/migration/Typography.md @@ -0,0 +1,39 @@ +--- +id: typography +title: Typography +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +**H1**, **H2** and **H3** all have been replaced with [`Heading`](heading.md) component. + +## Code Comparison + + + + +```tsx +

Header One

+

Header Two

+

Header Three

+Default +``` + + + + +```tsx +Header One +Header Two +Header Three +Default +``` + + + diff --git a/versioned_docs/version-3.2.2/migration/v3.md b/versioned_docs/version-3.2.2/migration/v3.md new file mode 100644 index 000000000..ced3b4587 --- /dev/null +++ b/versioned_docs/version-3.2.2/migration/v3.md @@ -0,0 +1,19 @@ +--- +id: migration-guide-three +title: Upgrading 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](../utility-first.mdx) +- [Features](../utilityProps.md) +- [Themes](../default-theme.md) + +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.2.2/migration/v3xtov32.mdx b/versioned_docs/version-3.2.2/migration/v3xtov32.mdx new file mode 100644 index 000000000..985e8e724 --- /dev/null +++ b/versioned_docs/version-3.2.2/migration/v3xtov32.mdx @@ -0,0 +1,293 @@ +--- +id: migration-guide-three-point-two +title: Upgrading to 3.2.0 from 3.x +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +As we continue to improve NativeBase v3 we got a lot of feature requests and we also revamped our theme to make it more consistent, easy to understand, optimized and promote good practices while writing code. + +To do that we had to make some changes to our theme in `v3.2.0`. These are breaking changes if you are using some of the tokens in your project. To make it easy for you to upgrade, we are providing three options: + +## Extend previous version's theme for backward compatibility + +You need to add `v3CompatibleTheme` to your `NativeBaseProvider` which preserves all the old token that were changed or removed in v3.2.0. + +```jsx +import { NativeBaseProvider, extendTheme, v3CompatibleTheme } from "native-base"; + +// ... +const yourCustomTheme = { + // ... +} + + + +``` + +## Migrating in a NextJS Project + +If you are updating from 3.1.x to 3.2.x in a Next.js project, you might need to make some changes in configs. + +### Updating next.config.js/ts + +- Now need to include only react-native-web and native-base in transplie-modules +- No need of webpack config just add withFonts(from next-fonts) and withExpo(from @expo/next-adapter) + + + + + +```jsx {5-22,27-40} +const withFonts = require('next-fonts'); +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', + 'react-native-vector-icons', +]); +module.exports = withPlugins( + [withTM, [withFonts, { projectRoot: __dirname }]], + { + 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; + }, + } +); +``` + + + + +```jsx {1,5,9,15,17} +const { withExpo } = require('@expo/next-adapter'); +const withFonts = require('next-fonts'); +const withPlugins = require('next-compose-plugins'); +const withTM = require('next-transpile-modules')([ + 'react-native-web', + 'native-base', +]); + +const nextConfig = {}; + +module.exports = withPlugins( + [ + withTM, + [withFonts, { projectRoot: __dirname }], + [withExpo, { projectRoot: __dirname }], + ], + nextConfig +); +``` + + + + +### Updating babel.config.js/ts + +- Add `presets: ["@expo/next-adapter/babel"]` and `plugins: [["@babel/plugin-proposal-class-properties"]]` + + + + + +```jsx {3,2} +module.exports = { + presets: ['next/babel'], + plugins: [['react-native-web', { commonjs: true }]], +}; +``` + + + + +```jsx {2,3} +module.exports = { + presets: ['@expo/next-adapter/babel'], + plugins: [['@babel/plugin-proposal-class-properties']], +}; +``` + + + + +### Updating \_document.js/ts + +- No need to import .ttf font files of Icons and add them into document style. + + + + + +```jsx {2-20,30} +import Document, { Html, Head, Main, NextScript } from 'next/document'; +import Ionicons from 'react-native-vector-icons/Fonts/Ionicons.ttf'; +import MaterialIcons from 'react-native-vector-icons/Fonts/MaterialIcons.ttf'; +import AntDesign from 'react-native-vector-icons/Fonts/AntDesign.ttf'; +import MaterialCommunityIcons from 'react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf'; +// Generate required css +const iconFontStyles = `@font-face { + src: url(${Ionicons}); + font-family: Ionicons; +} +@font-face { + src: url(${MaterialIcons}); + font-family: MaterialIcons; +}@font-face { + src: url(${AntDesign}); + font-family: AntDesign; +}@font-face { + src: url(${MaterialCommunityIcons}); + font-family: MaterialCommunityIcons; +}`; +class MyDocument extends Document { + static async getInitialProps(ctx) { + const initialProps = await Document.getInitialProps(ctx); + return { ...initialProps }; + } + render() { + return ( + + + + + +
+ + + + ); + } +} +export default MyDocument; +``` + + + + +```jsx +import React from 'react'; +import { getInitialProps } from '@expo/next-adapter/document'; +import Document, { Html, Head, Main, NextScript } from 'next/document'; + +class CustomDocument extends Document { + render() { + return ( + + + + + +
+ + + + ); + } +} + +// Import the getInitialProps method and assign it to your component to ensure the react-native-web styles are used. +CustomDocument.getInitialProps = getInitialProps; + +export default CustomDocument; +``` + + + + +## Handling breaking changes + +Below is a rough account of the breaking API changes as well as the minimal change to migrate + +### Alert: + +- Removed `Alert.Title`. Use `Text` component instead. +- Removed `Alert.Description`. Use `Text` component instead. + +### Divider: + +- Removed `size`. Use `thickness` prop instead. + +## Strict Mode: + +We have introduced [strict mode](../strict-mode.md) in `v3.2.0` which is `off` by default. If you don't want to have strict mode, step 1 is enough. If you want to comply with the strict mode, you also need to do these: + +1. All utility props which take theme tokens as values, now take only string values as a valid type + +This means that if you pass a number value which is supposed to be a theme token, into a utility prop, then it will be treated as invalid and based on you strict mode config will show you an error or a warning. + +```js +// Incorrect Way to pass theme tokens to utility props + ❌ + +``` + +```js +// Correct Way to pass theme tokens to utility props + ✅ +``` + +2. Remove all non token values given to utility props which accept theme tokens. For example, `p="11"` is not supported with the [default theme](../default-theme.md). Pick up another value from default theme tokens or [define a new one yourself](../customizingTheme.md). +3. If you are using [Icon](../icon.md) with `as` prop, verify this + +```jsx + /* correct */ + + /* incorrect */ + } /> + /* incorrect */ + } name="md-checkmark-circle" /> + +``` + +```` + +``` + +``` +```` diff --git a/versioned_docs/version-3.2.2/modal.md b/versioned_docs/version-3.2.2/modal.md new file mode 100644 index 000000000..7a0b9bccf --- /dev/null +++ b/versioned_docs/version-3.2.2/modal.md @@ -0,0 +1,104 @@ +--- +id: modal +title: Modal +--- + +import { ComponentTheme } from '../../src/components'; + +A Modal is a window overlaid on either the primary window or another dialog window. Content behind a modal dialog is **inert**, meaning that users cannot interact with it. + +## Import + +NativeBase exports Modal Compound component: + +- `Modal`: The wrapper that provides context for its children. +- `Modal.Content`: The container for the modal dialog's content. +- `Modal.Header`: The header that labels the modal dialog. +- `Modal.Footer`: The footer that houses the modal actions. +- `Modal.Body`: The wrapper that houses the modal's main content. +- `Modal.CloseButton`: The button that closes the modal. + +```jsx +import { Modal } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=components,composites,Modal,Basic.tsx + +``` + +### Multiple Modals + +```ComponentSnackPlayer path=components,composites,Modal,MultipleModal.tsx + +``` + +### Modal Sizes + +You can pass `size` prop to NativeBase Modal , it can take `sm`, `md`, `lg`, `full` that maps to **60%**, **75%**, **90%**, **100%**, or a string or a numerical width of the Modal. + +```ComponentSnackPlayer path=components,composites,Modal,Size.tsx + +``` + +### intialFocusRef and finalFocusRef Example + +```ComponentSnackPlayer path=components,composites,Modal,ModalRefEg.tsx + +``` + +### Modal with avoidKeyboard + +```ComponentSnackPlayer path=components,composites,Modal,ModalWithAvoidKeyboard.tsx + +``` + +### Modal Placement + +```ComponentSnackPlayer path=components,composites,Modal,ModalPlacement.tsx + +``` + +### Custom Backdrop Modal + +```ComponentSnackPlayer path=components,composites,Modal,CustomBackdrop.tsx + +``` + +
+ +:::tip Development Tip +If you want a specifically aligned Modal, pass `justifyContent` and `alignItems` to Modal. +::: + +## Accessibility + +Uses React Native ARIA [@react-native-aria/focus](https://react-native-aria.geekyants.com/docs/FocusScope) which follows the [Dialog Modal WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#dialog_modal). + +### Keyboard Interactions + +| Key | Description | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `Tab` | Moves focus to the next tabbable element inside the dialog. If focus is on the last tabbable element inside the dialog, moves focus to the first tabbable element inside the dialog. | +| `Shift` + `Tab` | Moves focus to the previous tabbable element inside the dialog. If focus is on the first tabbable element inside the dialog, moves focus to the last tabbable element inside the dialog. | +| `Escape` | Closes the dialog | + +## Props + +### Modal + +```ComponentPropTable path=composites,Modal,Modal.tsx + +``` + +### Children components + +- `Modal.Header`, `Modal.Footer` and `Modal.Body` composes the [`Box`](box.md) component. +- `Modal.CloseButton` composes the [`Button`](button.md). + +## Styling + + diff --git a/versioned_docs/version-3.2.2/more-props.md b/versioned_docs/version-3.2.2/more-props.md new file mode 100644 index 000000000..935c792be --- /dev/null +++ b/versioned_docs/version-3.2.2/more-props.md @@ -0,0 +1,13 @@ +--- +id: more-props +title: More props +--- + +### ILinearGradientProps + +| Name | Type | Description | Default | +| -------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ------- | +| colors | `Array` | An array of colors that represent stops in the gradient. | - | +| start | `Array` | This means that the gradient will start from first value from the left and second value from the top. Array can contain numbers ranging from 0 to 1. | | +| end | `Array` | This means that the gradient will end at first value from the left and at second value from the bottom. Array can contain numbers ranging from 0 to 1. | | +| location | `Array ` | Each number indicates a color-stop location where each respective color should be located. Array can contain numbers ranging from 0 to 1. | | diff --git a/versioned_docs/version-3.2.2/nativebase-factory.md b/versioned_docs/version-3.2.2/nativebase-factory.md new file mode 100644 index 000000000..61a6e9730 --- /dev/null +++ b/versioned_docs/version-3.2.2/nativebase-factory.md @@ -0,0 +1,41 @@ +--- +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 + +```ComponentSnackPlayer path=components,composites,factory,usage.tsx + +``` + +## Defining component theme + +```ComponentSnackPlayer path=components,composites,factory,theme.tsx + +``` + +## Using mode in component theme + +```ComponentSnackPlayer path=components,composites,factory,modes.tsx + +``` + +## Using ref + +```ComponentSnackPlayer path=components,composites,factory,ref.tsx + +``` + +## 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.2.2/popOver.md b/versioned_docs/version-3.2.2/popOver.md new file mode 100644 index 000000000..ffd9ee1d0 --- /dev/null +++ b/versioned_docs/version-3.2.2/popOver.md @@ -0,0 +1,96 @@ +--- +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=components,composites,Popover,Basic.tsx + +``` + +### initialFocusRef + +```ComponentSnackPlayer path=components,composites,Popover,RefEg.tsx + +``` + +### Positions + +```ComponentSnackPlayer path=components,composites,Popover,PopoverPositions.tsx + +``` + +
+ +:::tip Development 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.2.2/presence-transition.md b/versioned_docs/version-3.2.2/presence-transition.md new file mode 100644 index 000000000..123d1ec63 --- /dev/null +++ b/versioned_docs/version-3.2.2/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=components,composites,Transitions,Fade.tsx + +``` + +### ScaleFade + +```ComponentSnackPlayer path=components,composites,Transitions,ScaleFade.tsx + +``` + +## Props + +```ComponentPropTable path=components,composites,Transitions,PresenceTransition.tsx showStylingProps=true + +``` + +### ISupportedTransitions + +```js +interface ISupportedTransitions { + opacity?: number; + translateY?: number; + translateX?: number; + scale?: number; + scaleX?: number; + scaleY?: number; + rotate?: string; +} +``` + +### ITransitionStyleProps + +```js +interface ITransitionStyleProps extends ISupportedTransitions { + transition?: { + type?: 'timing' | 'spring', + easing?: (value: number) => number, + overshootClamping?: boolean, + restDisplacementThreshold?: number, + restSpeedThreshold?: number, + velocity?: number | { x: number, y: number }, + bounciness?: number, + speed?: number, + tension?: number, + friction?: number, + stiffness?: number, + mass?: number, + damping?: number, + delay?: number, + duration?: number, + useNativeDriver?: boolean, + }; +} +``` diff --git a/versioned_docs/version-3.2.2/pressable.md b/versioned_docs/version-3.2.2/pressable.md new file mode 100644 index 000000000..4064425c5 --- /dev/null +++ b/versioned_docs/version-3.2.2/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=components,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=components,primitives,Pressable,Events.tsx + +``` + +## Props + +### Pressable + +```ComponentPropTable path=primitives,Pressable,Pressable.tsx showStylingProps=true + +``` diff --git a/versioned_docs/version-3.2.2/progress.md b/versioned_docs/version-3.2.2/progress.md new file mode 100644 index 000000000..ca5e27524 --- /dev/null +++ b/versioned_docs/version-3.2.2/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=components,composites,Progress,Basic.tsx + +``` + +### Progress colorScheme + +```ComponentSnackPlayer path=components,composites,Progress,ColorScheme.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=components,composites,Progress,Sizes.tsx + +``` + +### Flat Progress + +```ComponentSnackPlayer path=components,composites,Progress,Flat.tsx + +``` + +### Custom Track Color + +```ComponentSnackPlayer path=components,composites,Progress,CustomBgColor.tsx + +``` + +## Props + +```ComponentPropTable path=composites,Progress,index.tsx + +``` + +## Styling + + + +## Accessibility + +- Adheres to the `progressbar` [role requirements.](https://www.w3.org/TR/wai-aria-1.2/#progressbar) +- On web, `aria-valuenow`, `aria-valuemin` and `aria-valuemax` to ensure the progress percent is visible to screen readers. +- On mobile, [accessibilityValue](https://reactnative.dev/docs/accessibility#accessibilityvalue) is used to ensure it's announced by Talkback and VoiceOver. diff --git a/versioned_docs/version-3.2.2/pseudoProps.md b/versioned_docs/version-3.2.2/pseudoProps.md new file mode 100644 index 000000000..36baacf27 --- /dev/null +++ b/versioned_docs/version-3.2.2/pseudoProps.md @@ -0,0 +1,82 @@ +--- +id: pseudo-props-101 +title: 'Pseudo props: Do’s & Dont’s' +--- + +Before getting into details of all the common Pseudo Props NativeBase has to offer let's check some key points that these pseudo props follow. + +## Nesting pseudo props: + +In versions before 3.2.0 there was a set order in which pseudo props can be nested, but it had a some learning curve so we have simplified it. Pseudo props can now be nested in any combination with one small thing to keep in mind. + +Example: So assume you want to change the text color of a button on its hover state. + +### Do's + +```jsx + +``` + +### Dont's + +```jsx + +``` + +The above thing translates to a Text(not Button) when hovered changes its color to `secondary.400` . + +## Precedence Order for Pseudo Props: + +Now all the pseudo props follow a specific order that defines which pseudo prop can override the other pseudo prop. You can find the precedence values associated with each pseudo prop. Higher number means higher precedence. + +| Pseudo Props | Precedence Value | +| -------------- | ---------------- | +| \_disabled | 100 | +| \_pressed | 70 | +| \_hover | 60 | +| \_focus | 50 | +| \_focusVisible | 55 | +| \_active | 30 | +| \_checked | 30 | +| \_readOnly | 40 | +| \_invalid | 40 | +| \_web | 10 | +| \_android | 10 | +| \_ios | 10 | +| \_light | 10 | +| \_dark | 10 | + +```SnackPlayer name=Pseudo%20Props%20Precedence +import React from 'react'; +import { Button, NativeBaseProvider, Center } from 'native-base'; + +function Component() { + return ( + // Here you can see _hover will be overrided by _pressed + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` diff --git a/versioned_docs/version-3.2.2/radio.md b/versioned_docs/version-3.2.2/radio.md new file mode 100644 index 000000000..f03bd8b09 --- /dev/null +++ b/versioned_docs/version-3.2.2/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=components,primitives,Radio,controlledRadio.tsx + +``` + +### Uncontrolled + +```ComponentSnackPlayer path=components,primitives,Radio,uncontrolledRadio.tsx + +``` + +### Disabled + +```ComponentSnackPlayer path=components,primitives,Radio,disabled.tsx + +``` + +### Invalid + +```ComponentSnackPlayer path=components,primitives,Radio,invalid.tsx + +``` + +### Size + +```ComponentSnackPlayer path=components,primitives,Radio,size.tsx + +``` + +### Custom Color + +```ComponentSnackPlayer path=components,primitives,Radio,customColor.tsx + +``` + +### Custom Icon + +```ComponentSnackPlayer path=components,primitives,Radio,customIcon.tsx + +``` + +### Form Controlled + +```ComponentSnackPlayer path=components,primitives,Radio,formControlled.tsx + +``` + +### Basic (With Ref) + +```ComponentSnackPlayer path=components,primitives,Radio,withRef.tsx + +``` + +## Props + +### Radio + +```ComponentPropTable path=primitives,Radio,Radio.tsx + +``` + +### Radio Group + +```ComponentPropTable path=primitives,Radio,RadioGroup.tsx + +``` + +## Accessibility + +Uses React Native ARIA [@react-native-aria/radio](https://react-native-aria.geekyants.com/docs/useRadioGroup) which follows the [Radio Group WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#radiobutton). + +### Keyboard Interactions + +| Key | Description | +| ------------ | ---------------------------------------------------------------------------------- | +| `Tab` | Moves focus to either the checked radio item or the first radio item in the group. | +| `Space` | When focus is on an unchecked radio item, checks it. | +| `ArrowDown` | Moves focus to the next radio item in the group. | +| `ArrowRight` | Moves focus to the next radio item in the group. | +| `ArrowUp` | Moves focus to the previous radio item in the group. | +| `ArrowLeft` | Moves focus to the previous radio item in the group. | + +## Styling + + diff --git a/versioned_docs/version-3.2.2/responsive.md b/versioned_docs/version-3.2.2/responsive.md new file mode 100644 index 000000000..af755933b --- /dev/null +++ b/versioned_docs/version-3.2.2/responsive.md @@ -0,0 +1,173 @@ +--- +id: responsive-style +title: Responsive +--- + +NativeBase v3 supports responsive styles out of the box. Instead of manually adding responsiveness to your apps, NativeBase v3 allows you provide object and array values to add responsive styles. + +Responsive syntax relies on the breakpoints defined in the theme object. + +```jsx +const breakpoints = { + base: 0, + sm: 480, + md: 768, + lg: 992, + xl: 1280, +}; +``` + +To make styles responsive, you can use either the array or object syntax. + +## The Array syntax + +All style props that arrays as values for responsive styles. + +For Example to make a `Box` width or w responsive using the array syntax, here's what you need to do: + +```SnackPlayer name=Responsive%20Usage +import React from 'react'; +import { NativeBaseProvider, Center } from 'native-base'; +function BreakpointExample () { + return ( +
+ This is a box +
+ ); +}; + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## The Object syntax + +You can also define responsive values with breakpoint aliases in an object. Any undefined alias key will define the base, non-responsive value. + +For Example to make a `Text` fontSize responsive using the object syntax, here's what you need to do: + +```SnackPlayer name=Responsive%20ObjectSyntax +import React from 'react'; +import { Text, NativeBaseProvider, Center } from 'native-base'; +function BreakpointExample () { + return ( + + This is responsive text + + ); +}; + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Demo + +Here's a simple example of a component that uses a stacked layout on small screens, and a side-by-side layout on larger screens. + +```SnackPlayer name=Responsive%20Demo +import React from 'react'; +import { + useToken, + NativeBaseProvider, + Center, + Text, + Box, + HStack, + Image, + Stack, + Heading, +} from 'native-base'; + +function Example() { + return ( + + + image +
+ PHOTOS +
+ + + + + The Garden City + + + The Silicon Valley of India. + + + + Bengaluru (also called Bangalore) is the center of India's high-tech + industry. The city is also known for its parks and nightlife. + + + + + 6 mins ago + + + + + + ); +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} + + +``` diff --git a/versioned_docs/version-3.2.2/safe-area-view-props.md b/versioned_docs/version-3.2.2/safe-area-view-props.md new file mode 100644 index 000000000..180188b90 --- /dev/null +++ b/versioned_docs/version-3.2.2/safe-area-view-props.md @@ -0,0 +1,99 @@ +--- +id: safe-area-view-props +title: SafeAreaView Props +--- + +To make your components respect the [SafeAreaView](https://reactnative.dev/docs/safeareaview) of the device, we have provided some props that you can use with Box component. They apply a safe padding to your component in the parts decided by the passed props. These props accept either a boolean or a number. If boolean is passed then component takes flexible inset and adjusts its children according to the the device. If a number is passed then it provides a fixed inset in the chosen direction. + +- `safeArea`: Apply safe padding to all edges. +- `safeAreaX`: Apply safe padding to x direction. +- `safeAreaY`: Apply safe padding to y direction. +- `safeAreaTop`: Apply safe padding to top. +- `safeAreaBottom`: Apply safe padding to bottom. +- `safeAreaLeft`: Apply safe padding to left. +- `safeAreaRight`: Apply safe padding to right. + +Internally, NativeBase uses [useSafeAreaInsets](https://docs.expo.io/versions/latest/sdk/safe-area-context/#hooks) hook of [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context). + +:::info +SafeAreaView props can only be applied on [Box](box.md) as of now. To make you App SafeArea safe, just wrap your app with a Box and pass safeArea props to it. +::: + +## Examples + +### Flexible SafeArea + +```SnackPlayer name=SafeAreaView%20Boolean +import React from 'react'; +import { NativeBaseProvider, Box, Text } from 'native-base'; +function MyComponent() { + return ( + // This would look different on devices with different insets + + NativeBase + + ); +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + + + + ); +} +``` + +### Fixed SafeArea + +```SnackPlayer name=SafeAreaView%20Boolean +import React from 'react'; +import { NativeBaseProvider, Box, Text } from 'native-base'; +function MyComponent() { + return ( + // This would look same on all devices + + NativeBase + + ); +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + + + + ); +} + +``` + +### Using Hook + +If you want to add the SafeAreaView props to other components, you can use the hook. Since, `SafeAreaView` props add relevant padding to the components, you will need to pass the padding manually that you are applying to the component for it to return the SafeArea adjusted padding. + +```SnackPlayer name=SafeAreaView%20Boolean +import React from 'react'; +import { NativeBaseProvider, Box, Text, useSafeArea } from 'native-base'; +function MyComponent() { + const safeAreaProps = useSafeArea({ safeAreaTop: true, pt: 2 }); + return ( + // This would look same on all devices + + NativeBase + + ); +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + + + + ); +} + +``` diff --git a/versioned_docs/version-3.2.2/scrollview.md b/versioned_docs/version-3.2.2/scrollview.md new file mode 100644 index 000000000..99e5e443b --- /dev/null +++ b/versioned_docs/version-3.2.2/scrollview.md @@ -0,0 +1,18 @@ +--- +id: scrollview +title: Scrollview +--- + +Provides a scrolling container that can host multiple components and views. + +## Example + +```ComponentSnackPlayer path=components,basic,ScrollView,Basic.tsx + +``` + +## Props + +```ComponentPropTable path=basic,ScrollView,ScrollView.tsx showStylingProps=true + +``` diff --git a/versioned_docs/version-3.2.2/sectionList.md b/versioned_docs/version-3.2.2/sectionList.md new file mode 100644 index 000000000..aea7b93d3 --- /dev/null +++ b/versioned_docs/version-3.2.2/sectionList.md @@ -0,0 +1,18 @@ +--- +id: section-list +title: SectionList +--- + +A performant interface for rendering sectioned lists. + +## Example + +```ComponentSnackPlayer path=components,basic,SectionList,Basic.tsx + +``` + +## Props + +```ComponentPropTable path=basic,SectionList,SectionList.tsx showStylingProps=true + +``` diff --git a/versioned_docs/version-3.2.2/select.md b/versioned_docs/version-3.2.2/select.md new file mode 100644 index 000000000..a82f05da7 --- /dev/null +++ b/versioned_docs/version-3.2.2/select.md @@ -0,0 +1,54 @@ +--- +id: select +title: Select +--- + +import { ComponentTheme } from '../../src/components'; + +import { AndroidBadge } from "../../src/components"; + +Select creates a dropdown list of items with the selected item in closed view. + +## Import + +```jsx +import { Select } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=components,primitives,Select,Basic.tsx + +``` + +### FormControlled + +```ComponentSnackPlayer path=components,primitives,Select,FormControlled.tsx + +``` + +### Select + +## Props + +```ComponentPropTable path=primitives,Select,Select.tsx + +``` + +### Select.Item + +## Props + +```ComponentPropTable path=primitives,Select,SelectItem.tsx + +``` + +## Styling + + + +## Accessibility + +- use `native` variant. Accessibility improvements on styled variant is in-progress. diff --git a/versioned_docs/version-3.2.2/setup-provider.md b/versioned_docs/version-3.2.2/setup-provider.md new file mode 100644 index 000000000..91ab8c8b7 --- /dev/null +++ b/versioned_docs/version-3.2.2/setup-provider.md @@ -0,0 +1,129 @@ +--- +id: setup-provider +title: Setup NativeBase Provider +--- + +NativeBaseProvider is a component that makes the theme available throughout your app. It uses React's Context API. Add NativeBaseProvider to the root of your app and update App.js as follows: + +**App.js** + +```jsx +import React from 'react'; +// 1. import `NativeBaseProvider` component +import { NativeBaseProvider, Text, Box } from 'native-base'; + +export default function App() { + // 2. Use at the root of your app + return ( + + + Open up App.js to start working on your app! + + + ); +} +``` + +## **Add custom theme (Optional)** + +If you need to customize the default theme to match your design requirements, you can extend the `theme` from `native-base`. + +NativeBase 3.0 provides an `extendTheme` function that deep merges the default theme with your customizations. + +```jsx +// 1. Import the extendTheme function +import { extendTheme, NativeBaseProvider } from 'native-base'; +// 2. Extend the theme to include custom colors, fonts, etc +const newColorTheme = { + brand: { + 900: '#8287af', + 800: '#7c83db', + 700: '#b3bef6', + }, +}; +const theme = extendTheme({ colors: newColorTheme }); +// 3. Pass the `theme` prop to the `NativeBaseProvider` +function App() { + return ( + + + + ); +} +``` + +## Add colorModeManager (Optional) + +If you want to do something with the color modes in your app, you can use colorModeManager Prop of NativeBaseProvider to achieve it. + +In the below example we will show how to store the active ColorMode in a async storage, so it can be consistent all around our app. + +```tsx +import React from 'react'; +import { NativeBaseProvider, ColorMode } from 'native-base'; +import type { StorageManager } from 'native-base'; +import AsyncStorage from '@react-native-async-storage/async-storage'; + +export default ({ children, theme }: any) => { + const colorModeManager: StorageManager = { + get: async () => { + try { + let val = await AsyncStorage.getItem('@my-app-color-mode'); + return val === 'dark' ? 'dark' : 'light'; + } catch (e) { + console.log(e); + return 'light'; + } + }, + set: async (value: ColorMode) => { + try { + await AsyncStorage.setItem('@my-app-color-mode', value); + } catch (e) { + console.log(e); + } + }, + }; + return ( + + {/* Your App Goes Here */} + + ); +}; +``` + +## Add external dependencies (Optional) + +If you want to use [Gradient feature in Box](box#with-linear-gradient), you need to pass linear gradient dependency as a config object in NativeBaseProvider. This dependency can be either from [expo-linear-gradient](https://docs.expo.io/versions/latest/sdk/linear-gradient/) or [react-native-linear-gradient](https://www.npmjs.com/package/react-native-linear-gradient) + +```jsx +import React from 'react'; +import { NativeBaseProvider } from 'native-base'; + +const config = { + dependencies: { + // For Expo projects (Bare or managed workflow) + 'linear-gradient': require('expo-linear-gradient').LinearGradient, + // For non expo projects + // 'linear-gradient': require('react-native-linear-gradient').default, + }, +}; + +export default () => { + return ( + +
+ +
+ + ); +}; +``` + +## NativeBaseProvider Props + +| Name | Type | Description | Default | +| -------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------ | +| initialWindowMetrics | Object | Mock data for frame and insets. [Refer this](https://github.com/th3rdwave/react-native-safe-area-context#testing) for further information. | - | +| colorModeManager | { get : Function , set : Function } | Manage Color mode in your app | - | +| theme | Object | use custom theme in your app | NativeBase Default Theme | +| config | {dependencies: {}} | To include external dependencies. For example - [Linear gradient](box#with-linear-gradient) | - | diff --git a/versioned_docs/version-3.2.2/slide.md b/versioned_docs/version-3.2.2/slide.md new file mode 100644 index 000000000..885488982 --- /dev/null +++ b/versioned_docs/version-3.2.2/slide.md @@ -0,0 +1,38 @@ +--- +id: slide +title: Slide +--- + +Slide component provides a declarative API to add sliding transitions. + +## Import + +## Examples + +### Slide + +```ComponentSnackPlayer path=components,composites,Transitions,Slide.tsx + +``` + +### Slide wrapped inside parent + +```ComponentSnackPlayer path=components,composites,Transitions,SlideWrapped.tsx + +``` + +### Slide Composition + +```ComponentSnackPlayer path=components,composites,Transitions,SlideComposition.tsx + +``` + +## Props + +### Slide + +| Name | Type | Description | Default | +| --------- | -------------------------------- | ------------------------------------------------------ | -------- | +| in | boolean | Show the component; triggers the enter or exit states. | - | +| duration | number | Duration of animation in mili second. | 500 | +| placement | `top` ,`bottom`, `left`, `right` | The direction to slide drawer from. | `bottom` | diff --git a/versioned_docs/version-3.2.2/slider.md b/versioned_docs/version-3.2.2/slider.md new file mode 100644 index 000000000..1e1d34811 --- /dev/null +++ b/versioned_docs/version-3.2.2/slider.md @@ -0,0 +1,86 @@ +--- +id: slider +title: Slider +--- + +import { ComponentTheme } from '../../src/components'; + +The `Slider` is used to allow users to make selections from a range of values. + +## Import + +NativeBase exports 4 slider-related components: + +- `Slider`: The wrapper that provides context and functionality for all children. +- `Slider.Track`: The empty part of the slider that shows the track. +- `Slider.FilledTrack`: The filled part of the slider. +- `Slider.Thumb`: The handle that's used to change the slider value. + +```jsx +import { Slider } from 'native-base'; +``` + +## Examples + +```ComponentSnackPlayer path=components,primitives,Slider,usage.tsx + +``` + +### Color + +```ComponentSnackPlayer path=components,primitives,Slider,color.tsx + +``` + +### Value + +```ComponentSnackPlayer path=components,primitives,Slider,Value.tsx + +``` + +### Size + +```ComponentSnackPlayer path=components,primitives,Slider,Size.tsx + +``` + +### Customised + +```ComponentSnackPlayer path=components,primitives,Slider,Customized.tsx + +``` + +### Form Controlled + +```ComponentSnackPlayer path=components,primitives,Slider,FormControlled.tsx + +``` + +## Props + +### Slider + +```ComponentPropTable path=primitives,Slider,Slider.tsx + +``` + +### Children components + +- `Slider.Track`, `Slider.FilledTrack`, and `Slider.Thumb` composes the [`Box`](box.md) component. + +## Styling + + + +## Accessibility + +Adheres to the [Slider WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#slidertwothumb) + +### Keyboard Interactions + +| Name | Description | +| ---------- | ----------------------------------------------------------------- | +| ArrowRight | Increments/decrements by the step value depending on orientation. | +| ArrowLeft | Increments/decrements by the step value depending on orientation. | +| ArrowUp | Increases the value by the step amount. | +| ArrowDown | Decreases the value by the step amount. | diff --git a/versioned_docs/version-3.2.2/spinner.md b/versioned_docs/version-3.2.2/spinner.md new file mode 100644 index 000000000..3ceaeef0f --- /dev/null +++ b/versioned_docs/version-3.2.2/spinner.md @@ -0,0 +1,32 @@ +--- +id: spinner +title: Spinner +--- + +## Examples + +### Basic + +```ComponentSnackPlayer path=components,primitives,Spinner,usage.tsx + +``` + +### Colors + +```ComponentSnackPlayer path=components,primitives,Spinner,color.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=components,primitives,Spinner,size.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Spinner,index.tsx + +``` + +Spinner composes [`ActivityIndicator`](https://reactnative.dev/docs/activityindicator) so all `ActivityIndicator` Props can be passed to Spinner. diff --git a/versioned_docs/version-3.2.2/stack.md b/versioned_docs/version-3.2.2/stack.md new file mode 100644 index 000000000..bf058ead7 --- /dev/null +++ b/versioned_docs/version-3.2.2/stack.md @@ -0,0 +1,18 @@ +--- +id: stack +title: Stack +--- + +`Stack` aligns items vertically or horizontally based on the `direction` prop. + +## Example + +```ComponentSnackPlayer path=components,primitives,Stack,basic.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Stack,Stack.tsx + +``` diff --git a/versioned_docs/version-3.2.2/stagger.md b/versioned_docs/version-3.2.2/stagger.md new file mode 100644 index 000000000..ed4adb704 --- /dev/null +++ b/versioned_docs/version-3.2.2/stagger.md @@ -0,0 +1,54 @@ +--- +id: stagger +title: Stagger +--- + +Stagger component provides a declarative API to add Staggered Transitions. + +## Example + +```ComponentSnackPlayer path=components,composites,Transitions,Stagger.tsx + +``` + +## Props + +```ComponentPropTable path=composites,Transitions,Stagger.tsx showStylingProps=true + +``` + +## IStaggerStyleProps + +```js +interface IStaggerStyleProps extends ISupportedTransition { + transition?: { + stagger?: { + /** + * Delay to add to each child + */ + offset: number, + /** + * When true, delay is added from the last child + */ + reverse?: boolean, + }, + + type?: 'timing' | 'spring', + easing?: (value: number) => number, + overshootClamping?: boolean, + restDisplacementThreshold?: number, + restSpeedThreshold?: number, + velocity?: number | { x: number, y: number }, + bounciness?: number, + speed?: number, + tension?: number, + friction?: number, + stiffness?: number, + mass?: number, + damping?: number, + delay?: number, + duration?: number, + useNativeDriver?: boolean, + }; +} +``` diff --git a/versioned_docs/version-3.2.2/statusBar.md b/versioned_docs/version-3.2.2/statusBar.md new file mode 100644 index 000000000..3f7b3c687 --- /dev/null +++ b/versioned_docs/version-3.2.2/statusBar.md @@ -0,0 +1,18 @@ +--- +id: status-bar +title: StatusBar +--- + +Component to control the app status bar. + +## Example + +```ComponentSnackPlayer path=components,basic,StatusBar,Basic.tsx + +``` + +## Props + +```ComponentPropTable path=basic,StatusBar,StatusBar.tsx showStylingProps=true + +``` diff --git a/versioned_docs/version-3.2.2/strict-mode.md b/versioned_docs/version-3.2.2/strict-mode.md new file mode 100644 index 000000000..690cb14fc --- /dev/null +++ b/versioned_docs/version-3.2.2/strict-mode.md @@ -0,0 +1,39 @@ +--- +id: strict-mode +title: Strict Mode +--- + +NativeBase comes with its very own Strict Mode that lets you control the level of strictness for your App and Dev environment. A really handy tool to maintain best practices through out your codebase. + +## What it does? + +Strict Mode is a config that you pass into NativeBase config. It takes 3 values `error`, `warn` and `off` by default it is set to `warn`. Based on your chosen option it checks for every prop in your project if you have used proper `token values` from theme and you are only passing `string values` to the props and if not then it throws an error or warning or does nothing. + +## Levels of Strictness + +- **error** - Choosing this mode will throw an error indicating the cause of the error. +- **warn** - Choosing this mode will show a warning indicating the issue. +- **off** - Choosing this mode simply means you want to go rogue and not follow the design system and best practices. + +## How to change the mode? + +To change the `strictMode` create a `config object` like below and choose you `strictMode` value from `error`,`warn` and `off` which ever suits your use-case : + +```jsx +import { INativebaseConfig, NativeBaseProvider } from 'native-base'; + +// ignore the INativebaseConfig if you are not using typescript + +const config: INativebaseConfig = { + // rest of the config keys like dependencies can go here + strictMode: 'warn', +}; +``` + +and pass this as a prop in your App `NativeBaseProvider` + +```jsx + + + +``` diff --git a/versioned_docs/version-3.2.2/switch.md b/versioned_docs/version-3.2.2/switch.md new file mode 100644 index 000000000..40e762475 --- /dev/null +++ b/versioned_docs/version-3.2.2/switch.md @@ -0,0 +1,49 @@ +--- +id: switch +title: Switch +--- + +The `Switch` component is an alternative to the Checkbox component. You can switch between enabled or disabled states. + +## Examples + +### Basic + +```ComponentSnackPlayer path=components,primitives,Switch,Basic.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=components,primitives,Switch,Sizes.tsx + +``` + +### Track & Thumb Color + +```ComponentSnackPlayer path=components,primitives,Switch,SwitchBgColor.tsx + +``` + +### Color Schemes + +```ComponentSnackPlayer path=components,primitives,Switch,ColorSchemes.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Switch,index.tsx showStylingProps=true + +``` + +## Accessibility + +- On mobile, uses native switch which is fully accessible. +- On web, it uses checkbox with a [role](https://www.w3.org/TR/wai-aria-1.2/#switch) set to `switch`. + +### Keyboard Interactions + +| Name | Description | +| ----- | ------------------------------ | +| Space | Toggles the component's state. | diff --git a/versioned_docs/version-3.2.2/testing.md b/versioned_docs/version-3.2.2/testing.md new file mode 100644 index 000000000..cfd5b0139 --- /dev/null +++ b/versioned_docs/version-3.2.2/testing.md @@ -0,0 +1,25 @@ +--- +id: testing +title: Testing +--- + +NativeBase works with react-native's jest preset or expo's jest-expo preset. However, there's one thing you'll need to do for it to work as expected. + +### Adding initialWindowMetrics in NativeBaseProvider. + +- NativeBaseProvider uses [SafeAreaContext](https://github.com/th3rdwave/react-native-safe-area-context#testing) which needs initialWindowMetrics to be passed to the Provider while testing. + +Not following the above may lead to an error related to SafeAreaProvider while running `yarn test`. + +To fix the above issue, you can simply pass initialWindowMetrics to NativeBaseProvider in your tests. + +```jsx +const inset = { + frame: { x: 0, y: 0, width: 0, height: 0 }, + insets: { top: 0, left: 0, right: 0, bottom: 0 }, +}; + + + {children} +; +``` diff --git a/versioned_docs/version-3.2.2/text.md b/versioned_docs/version-3.2.2/text.md new file mode 100644 index 000000000..c072de924 --- /dev/null +++ b/versioned_docs/version-3.2.2/text.md @@ -0,0 +1,44 @@ +--- +id: text +title: Text +--- + +import { ComponentTheme } from '../../src/components'; + +`Text` is used to render text and paragraphs within an interface. + +## Examples + +### ChangingFontSize + +```ComponentSnackPlayer path=components,primitives,Text,ChangingFontSize.tsx + +``` + +### Truncated + +```ComponentSnackPlayer path=components,primitives,Text,Truncated.tsx + +``` + +### Nested + +```ComponentSnackPlayer path=components,primitives,Text,Nested.tsx + +``` + +### Overridden + +```ComponentSnackPlayer path=components,primitives,Text,Overriden.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Text,index.tsx showStylingProps=true + +``` + +## Styling + + diff --git a/versioned_docs/version-3.2.2/textArea.md b/versioned_docs/version-3.2.2/textArea.md new file mode 100644 index 000000000..36efe2942 --- /dev/null +++ b/versioned_docs/version-3.2.2/textArea.md @@ -0,0 +1,38 @@ +--- +id: textarea +title: TextArea +--- + +import { ComponentTheme } from '../../src/components'; + +The `Textarea` component allows you to easily create multi-line text inputs. + +## Examples + +### Usage + +```ComponentSnackPlayer path=components,primitives,TextArea,basic.tsx + +``` + +### Invalid and Disabled TextArea + +```ComponentSnackPlayer path=components,primitives,TextArea,invalid.tsx + +``` + +### Value Controlled TextArea + +```ComponentSnackPlayer path=components,primitives,TextArea,value.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,TextArea,index.tsx + +``` + +## Styling + + diff --git a/versioned_docs/version-3.2.2/theme.md b/versioned_docs/version-3.2.2/theme.md new file mode 100644 index 000000000..45d079afd --- /dev/null +++ b/versioned_docs/version-3.2.2/theme.md @@ -0,0 +1,205 @@ +--- +id: theme +title: Using Theme +--- + +NativeBase provides multiple tools to use the central theme defined in the app. First tool is [`useTheme`](/useTheme.md), which you can use to access the values from the current theme. + +## useTheme + +```SnackPlayer name=useTheme%20Demo +import React from 'react'; +import { + NativeBaseProvider, + useTheme, + FlatList, + Center, + Box, +} from 'native-base'; + +function ColorPalete() { + const { colors } = useTheme(); + return ( + + } + /> + + ); +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +## useToken + +You can also get specific values from the theme with [`useToken`](/useToken.md) hook. + +```SnackPlayer name=useToken%20Demo +import React from 'react'; +import { useToken, NativeBaseProvider, Center, Text } from 'native-base'; + +function Tokens() { + const [contrastThreshold, lightText] = useToken('colors', [ + 'contrastThreshold', + 'lightText', + ]); + return ( +
+ Contrast threshold is:{' '} + + {contrastThreshold} + +
+ ); +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} + + +``` + +## useContrastText + +If you are defining the background yourself and pass a contrasting color to the text then you can use [`useContrastText`](use-contrast-text). + +```SnackPlayer name=useContrastText + +import React from 'react'; +import { + Button, + Stack, + useContrastText, + NativeBaseProvider, + Center, +} from 'native-base'; +function UseContrastingTextHook() { + const bgDark = 'primary.600'; + const bgLight = 'primary.200'; + const colorContrastDark = useContrastText(bgDark); + const colorContrastLight = useContrastText(bgLight); + + return ( + + + + + ); +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +## useColorMode + +If you want to define some conditionals based on current color mode or change the color mode then you can try [useColorMode](useColorMode.md). + +```SnackPlayer name=useColorMode +import React from 'react'; +import { + NativeBaseProvider, + useColorMode, + Text, + Button, + Center, +} from 'native-base'; + +function UseColorMode() { + const { colorMode, toggleColorMode } = useColorMode(); + return ( +
+ + The active color mode is{' '} + + {colorMode} + + + +
+ ); +} + +export default Example = () => { + return ( + + + + ); +}; + +``` + +## useColorModeValue + +If you do not want to add conditionals for color mode everywhere and keep the code clean, then you can use [useColorModeValue](useColorModeValue.md) hook. It takes two parameters, light mode value as the first and dark mode value as second. + +```SnackPlayer name=useColorModeValue +import React from 'react'; +import { + NativeBaseProvider, + useColorMode, + Text, + Button, + Center, + useColorModeValue, +} from 'native-base'; + +function UseColorMode() { + const { toggleColorMode } = useColorMode(); + return ( +
+ + The active color mode is{' '} + + {useColorModeValue('Light', 'Dark')} + + + +
+ ); +} + +export default Example = () => { + return ( + + + + ); +}; + +``` diff --git a/versioned_docs/version-3.2.2/toast.md b/versioned_docs/version-3.2.2/toast.md new file mode 100644 index 000000000..686740b74 --- /dev/null +++ b/versioned_docs/version-3.2.2/toast.md @@ -0,0 +1,88 @@ +--- +id: toast +title: Toast +--- + +import { ComponentTheme } from '../../src/components'; + +`Toast` is used to show alerts on top of an overlay. `Toast` will close itself when the close button is clicked, or after a timeout — the default is 5 seconds. The toast component is used to give feeback to users after an action has taken place. + +Toasts can be configured to appear at either the top or the bottom of an application window, and it is possible to have more than one toast onscreen at a time. + +## Import + +```jsx +import { useToast } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=components,composites,Toast,Basic.tsx + +``` + +### Position + +```ComponentSnackPlayer path=components,composites,Toast,ToastPositions.tsx + +``` + +### Custom component + +Display a custom component instead of the default Toast UI. + +```ComponentSnackPlayer path=components,composites,Toast,CustomComponent.tsx + +``` + +### Closing Toasts + +Toasts can be closed imperatively, individually (via the close instance method) or all together (via the closeAll instance method). + +```ComponentSnackPlayer path=components,composites,Toast,CloseToast.tsx + +``` + +### Status + +You can use status to change the color of your toasts. +`Toast` uses the same variants as the [Alert](alert.md) component. + +```ComponentSnackPlayer path=components,composites,Toast,ToastStatus.tsx + +``` + +### Preventing Duplicate Toast + +In some cases you might need to prevent duplicate of specific toasts. To achieve you need to pass an id and use the toast.isActive method to determine when to call toast.show(...). + +```ComponentSnackPlayer path=components,composites,Toast,PreventDuplicate.tsx + +``` + +### Standalone Toast + +You can use standalone toast where you don't have access to `useToast` hook. e.g. in a different file, out of a React component. + +```ComponentSnackPlayer path=components,composites,Toast,StandaloneToast.tsx + +``` + +## Props + +Below props can be passed while calling toast.show. + +```ComponentPropTable path=composites,Toast,ToastDummy.tsx + +``` + +## Accessibility + +- On Android and Web, Toast renders under a View with accessibilityLiveRegion which announces the content rendered inside it to screen reader devices. +- On iOS, accessibilityLiveRegion is not supported yet, so we use the [accessibilityAnnouncement](https://reactnative.dev/docs/accessibilityinfo#announceforaccessibility) to announce the content. + +## Styling + + diff --git a/versioned_docs/version-3.2.2/todo-list.md b/versioned_docs/version-3.2.2/todo-list.md new file mode 100644 index 000000000..70010dc0e --- /dev/null +++ b/versioned_docs/version-3.2.2/todo-list.md @@ -0,0 +1,10 @@ +--- +id: todo-example +title: Todo-List +--- + +A simple To Do App made using NativeBase 3.0. + +```ComponentSnackPlayer path=examples,TodoApp.tsx + +``` diff --git a/versioned_docs/version-3.2.2/tooltip.md b/versioned_docs/version-3.2.2/tooltip.md new file mode 100644 index 000000000..d304b7052 --- /dev/null +++ b/versioned_docs/version-3.2.2/tooltip.md @@ -0,0 +1,65 @@ +--- +id: tooltip +title: Tooltip +--- + +import { ComponentTheme } from '../../src/components'; + +A tooltip is a brief, informative message that appears when a user interacts with an element. Tooltips are usually initiated in one of two ways: through a mouse-hover gesture or through a keyboard-hover gesture. + +## Import + +```jsx +import { Tooltip } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=components,composites,Tooltip,Basic.tsx + +``` + +### Positions + +```ComponentSnackPlayer path=components,composites,Tooltip,TooltipPositions.tsx + +``` + +### Customizing tooltip + +Tooltip is a wrapper around [Box](box.md). So, it also accepts all the [Box](box.md#props) props. + +```ComponentSnackPlayer path=components,composites,Tooltip,CustomTooltip.tsx + +``` + +
+ +:::tip Development Tip +You can pass custom backgroundColor using `bg` or `backgroundColor`, `borderColor` and `borderWidth` to Tooltip. +::: + +## Props + +```ComponentPropTable path=composites,Tooltip,Tooltip.tsx + +``` + +## Styling + + + +## Accessibility + +Adheres to the [Tooltip WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-1.1/#tooltip) + +### Keyboard Interactions + +| Name | Description | +| ----- | ------------------------------------------ | +| Space | If open, closes the tooltip without delay. | +| Enter | If open, closes the tooltip without delay. | +| Tab | Moves focus to the next focusable element. | +| Esc | If open, closes the tooltip without delay. | diff --git a/versioned_docs/version-3.2.2/typescript.md b/versioned_docs/version-3.2.2/typescript.md new file mode 100644 index 000000000..33601937b --- /dev/null +++ b/versioned_docs/version-3.2.2/typescript.md @@ -0,0 +1,40 @@ +--- +id: typescript +title: Typescript +--- + +To enable typescript for custom theme tokens or variants, we'll follow two simple steps. + +Below, in the [extendTheme](http://localhost:3002/customizing-theme) function, we're adding a space token and a custom variant for the Button. + +```jsx +import { extendTheme } from 'native-base'; + +const customTheme = extendTheme({ + space: { + 'space-2': '29px', + }, + components: { + Button: { + variants: { + brand: { + p: '10', + bg: 'brand.500', + }, + }, + }, + }, +}); + +// 2. Get the type of the CustomTheme +type CustomThemeType = typeof customTheme; + +// 3. Extend the internal NativeBase Theme +declare module 'native-base' { + interface ICustomTheme extends CustomThemeType {} +} +``` + +## Result + +Typescript intellisense with custom theme tokens diff --git a/versioned_docs/version-3.2.2/useAccessibleColors.md b/versioned_docs/version-3.2.2/useAccessibleColors.md new file mode 100644 index 000000000..0be36b4fb --- /dev/null +++ b/versioned_docs/version-3.2.2/useAccessibleColors.md @@ -0,0 +1,22 @@ +--- +id: use-accessible-colors +title: useAccessibleColors +--- + +`useAccessibleColors` is a custom hook used to get the setting for using color with better [color and contrast accessibility](https://web.dev/color-and-contrast-accessibility/) in the app. By default, accessible colors are turned off to get better color matching the theme of the app. You can use this hook if you always want to use accessible text colors. You can also pass it in the config for [`NativeBaseProvider`](setup-provider.md) with [`extendTheme`](setup-provider.md#add-custom-theme-optional). + +## Import + +```jsx +import { useAccessibleColors } from 'native-base'; +``` + +## Example + +```ComponentSnackPlayer path=hooks,useAccessibleColors,Basic.tsx + +``` + +## Return value + +Returns an array with values `accessibleColors`, `setAccessibleColors`, `toggleAccessibleColors`. diff --git a/versioned_docs/version-3.2.2/useBreakPointValue.md b/versioned_docs/version-3.2.2/useBreakPointValue.md new file mode 100644 index 000000000..2bd43393b --- /dev/null +++ b/versioned_docs/version-3.2.2/useBreakPointValue.md @@ -0,0 +1,22 @@ +--- +id: use-breakPoint-value +title: useBreakpointValue +--- + +`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. + +## **Import** + +```jsx +import { useBreakpointValue } from 'native-base'; +``` + +## **Return value** + +The `useBreakpointValue` hook returns the value for the current breakpoint. + +## Usage + +```ComponentSnackPlayer path=hooks,useBreakpointValue,usage.tsx + +``` diff --git a/versioned_docs/version-3.2.2/useClipboard.md b/versioned_docs/version-3.2.2/useClipboard.md new file mode 100644 index 000000000..ec93f3358 --- /dev/null +++ b/versioned_docs/version-3.2.2/useClipboard.md @@ -0,0 +1,26 @@ +--- +id: use-clipboard +title: useClipboard +--- + +`useClipboard` is a custom hook that handles copying content to clipboard. + +## Return Value + +The `useClipboard` hook returns an object with the following fields: + +- `value` : ( **string** ) The copied value. +- `onCopy` : ( **Function** ) Callback function to copy content. +- `hasCopied` : ( **boolean** ) If **true**, the content has been copied. + +## Import + +```jsx +import { useClipboard } from 'native-base'; +``` + +## Usage + +```ComponentSnackPlayer path=hooks,useClipboard,Usage.tsx + +``` diff --git a/versioned_docs/version-3.2.2/useColorMode.md b/versioned_docs/version-3.2.2/useColorMode.md new file mode 100644 index 000000000..3226a6437 --- /dev/null +++ b/versioned_docs/version-3.2.2/useColorMode.md @@ -0,0 +1,26 @@ +--- +id: use-color-mode +title: useColorMode +--- + +`useColorMode` is a custom hook used to get and set the color mode. + +## Import + +```jsx +import { useColorMode } from 'native-base'; +``` + +## Example + +```ComponentSnackPlayer path=hooks,useColorMode,Basic.tsx + +``` + +## Return + +| Name | Type | Description | Default | +| --------------- | --------------- | ------------------------------------------ | ------- | +| colorMode | `light`, `dark` | The active color mode | `light` | +| setColorMode | function | Use to set color mode. | - | +| toggleColorMode | function | Use to toggle between light and dark mode. | - | diff --git a/versioned_docs/version-3.2.2/useColorModeValue.md b/versioned_docs/version-3.2.2/useColorModeValue.md new file mode 100644 index 000000000..d48d39db3 --- /dev/null +++ b/versioned_docs/version-3.2.2/useColorModeValue.md @@ -0,0 +1,22 @@ +--- +id: use-color-mode-value +title: useColorModeValue +--- + +`useColorModeValue` is a custom hook used to get a value from either of the parameters passed based on active color mode value. + +## Import + +```jsx +import { useColorModeValue } from 'native-base'; +``` + +## Example + +```ComponentSnackPlayer path=hooks,useColorModeValue,Basic.tsx + +``` + +## Return value + +Accepts 2 parameters and returns either of the two, based on current color-mode (first parameter for light mode and second parameter for dark mode). diff --git a/versioned_docs/version-3.2.2/useContrastText.md b/versioned_docs/version-3.2.2/useContrastText.md new file mode 100644 index 000000000..f11f89129 --- /dev/null +++ b/versioned_docs/version-3.2.2/useContrastText.md @@ -0,0 +1,32 @@ +--- +id: use-contrast-text +title: useContrastText +--- + +`useContrastText` is a custom hook used to get a contrasting color (either `lightText` or `darkText`) to the color passed as a parameter. + +## Import + +```jsx +import { useContrastText } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=hooks,useContrastText,Basic.tsx + +``` + +### Using Accessible Colors + +By default, NativeBase provides contrasting color based on its theme. You can also choose to get color with better [color and contrast accessibility](https://web.dev/color-and-contrast-accessibility/) with the help of [`useAccessibleColors`](useAccessibleColors.md) hook. + +```ComponentSnackPlayer path=hooks,useAccessibleColors,Basic.tsx + +``` + +## Return value + +Accepts and returns a color defined in the theme. diff --git a/versioned_docs/version-3.2.2/useDisclosure.md b/versioned_docs/version-3.2.2/useDisclosure.md new file mode 100644 index 000000000..07b15d678 --- /dev/null +++ b/versioned_docs/version-3.2.2/useDisclosure.md @@ -0,0 +1,30 @@ +--- +id: use-disclosure +title: useDisclose +--- + +`useDisclose` is a custom hook used to help handle common `open`, `close`, or `toggle` scenarios. It can be used to control feedback component such as **Modal**, **AlertDialog**, **Drawer**, etc. + +## Import + +```jsx +import { useDisclose } from 'native-base'; +``` + +## Example + +```ComponentSnackPlayer path=hooks,useDisclose,Usage.tsx + +``` + +## Return value + +The `useDisclosure` hook returns an object with the following fields: + +`isOpen`: ( **boolean** ) Show the component; triggers the enter or exit states. + +`onClose`: ( **function** ) Callback function to set a falsy value for the `isOpen` parameter. + +`onOpen`: ( **function** ) Callback function to set a truthy value for the `isOpen` parameter. + +`onToggle`: ( **function** ) Callback function to toggle the value of the `isOpen` parameter. diff --git a/versioned_docs/version-3.2.2/useMediaQuery.md b/versioned_docs/version-3.2.2/useMediaQuery.md new file mode 100644 index 000000000..ff9a86dcb --- /dev/null +++ b/versioned_docs/version-3.2.2/useMediaQuery.md @@ -0,0 +1,38 @@ +--- +id: use-media-query +title: useMediaQuery +--- + +`useMediaQuery` is a custom hook used to help detect whether a single media query or multiple media queries individually match. React Native does not natively support media queries, so `useMediaQuery` is still limited. + +## Import + +```jsx +import { useMediaQuery } from 'native-base'; +``` + +## Example + +### max-height + +```ComponentSnackPlayer path=hooks,useMediaQuery,max-height.tsx + +``` + +### min-width + +```ComponentSnackPlayer path=hooks,useMediaQuery,min-width.tsx + +``` + +### orientation + +```ComponentSnackPlayer path=hooks,useMediaQuery,orientation.tsx + +``` + +## Return value + +The `useMediaQuery` hook returns an array of booleans, indicating whether the given query matches or queries match. + +Why an array? `useMediaQuery` accepts both an object and an array of object, but will always return an array. This way, you can combine multiple media queries which will be individually matched in a single call. The options to use are still limited to `maxWidth`, `minWidth`, `maxHeight`, `minHeight`, `orientation`. diff --git a/versioned_docs/version-3.2.2/useTheme.md b/versioned_docs/version-3.2.2/useTheme.md new file mode 100644 index 000000000..71ac99174 --- /dev/null +++ b/versioned_docs/version-3.2.2/useTheme.md @@ -0,0 +1,22 @@ +--- +id: use-theme +title: useTheme +--- + +`useTheme` is a custom hook used to get the theme object from context. + +## Import + +```jsx +import { useTheme } from "native-base"; +``` + +## Example + +```jsx +function Example() { + const theme = useTheme(); + + return {/* Do something with the theme */}; +} +``` diff --git a/versioned_docs/version-3.2.2/useToken.md b/versioned_docs/version-3.2.2/useToken.md new file mode 100644 index 000000000..29b824ec2 --- /dev/null +++ b/versioned_docs/version-3.2.2/useToken.md @@ -0,0 +1,51 @@ +--- +id: use-token +title: useToken +--- + +`useToken` is a custom hook used to resolve design tokens from the theme. + +## Import + +```jsx +import { useToken } from 'native-base'; +``` + +## Example + +```SnackPlayer name=useToken%20Example +import React from "react"; +import { Box, Text, useToken, NativeBaseProvider, Center, HStack , VStack} from "native-base"; + +function UseTokenHookExample() { + const [colorPick1, colorPick2] = useToken( + // the key within the theme, in this case `theme.colors` + "colors", + // the subkey(s), resolving to `theme.colors.warning.1` + ["yellow.500", "cyan.500"] + // a single fallback or fallback array matching the length of the previous arg + ); + + return ( + + + + {colorPick1} + + + + {colorPick2} + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` diff --git a/versioned_docs/version-3.2.2/utility-first.mdx b/versioned_docs/version-3.2.2/utility-first.mdx new file mode 100644 index 000000000..27f409d0f --- /dev/null +++ b/versioned_docs/version-3.2.2/utility-first.mdx @@ -0,0 +1,218 @@ +--- +id: utility-first +title: Utility First +--- + +import { UtilityFirstExample } from '../../src/components'; +import { KitchenSinkIframe, TileLink, NBHistory } from '../../src/components'; + +React Native has a great StyleSheet API which is optimal for component-based systems. NativeBase leverages it and adds a layer of utility props and constraint based designed tokens on top of it. + +To understand utility props, let's take an example. + + + +
+ +## With React Native + +Let's try the traditional way of building the above card in React Native. + +
+ +```jsx +import * as React from 'react'; +import { Text, View, StyleSheet, Image, Pressable } from 'react-native'; + +export default function App() { + return ( + + + + + Today @ 9PM + Let's talk about avatar! + + + Remind me + + + + + + ); +} + +const styles = StyleSheet.create({ + container: { + backgroundColor: '#0891b2', + paddingVertical: '16', + paddingHorizontal: '12', + borderRadius: '5', + alignSelf: 'center', + width: '375', + maxWidth: '100%', + }, + timings: { + color: '#fff', + fontSize: '14', + }, + metaContainer: { + justifyContent: 'space-between', + }, + topContainer: { + flexDirection: 'row', + justifyContent: 'space-between', + }, + avatar: { + height: '100', + width: '100', + borderRadius: '100', + }, + description: { + color: 'white', + marginTop: '5', + fontSize: '20', + }, + button: { + backgroundColor: '#22d3ee', + alignSelf: 'flex-start', + paddingHorizontal: '10', + paddingVertical: '5', + borderRadius: '3', + }, + buttonText: { + fontWeight: 'bold', + color: 'white', + textTransform: 'uppercase', + fontSize: '14', + }, +}); +``` + +
+ + + +
+ +## With NativeBase + +Now let's try to build the same card using NativeBase. + +With NativeBase, you can apply styles directly in the layout using shorthands. + +
+ +```jsx +import * as React from 'react'; +import { + NativeBaseProvider, + Box, + HStack, + VStack, + Text, + Pressable, + Image, +} from 'native-base'; + +export function UtilityFirstExample() { + return ( + + + + + + + Today @ 9PM + + + Let's talk about avatar! + + + + + Remind me + + + + Aang flying and surrounded by clouds + + + + ); +} +``` + +
+ +The above example demonstrates the usage of [utility props](utility-props) alongwith [VStack](v-stack), [HStack](h-stack) components. This approach allows us to style components without using StyleSheet API. + +Apart from productivity boost and saving time there are other benefits by styling components using utility props. +No need to name styles anymore, no need to define an object and think about naming them. + +Using utility-first props, you can focus on creating reusable components instead of reusable stylesheets. + +Once you start writing styles this way, any other way will feel cumbersome. + +> Put simply, utility first approach opens up the Avatar state within developers. + +
+ aang transitioning to avatar state +
+ +
+ +Once you had a cup of tea, let's proceed to the next section! + +
+
+ +
+ uncle iroh holding cup of tea + +
diff --git a/versioned_docs/version-3.2.2/utilityProps.md b/versioned_docs/version-3.2.2/utilityProps.md new file mode 100644 index 000000000..adefc73eb --- /dev/null +++ b/versioned_docs/version-3.2.2/utilityProps.md @@ -0,0 +1,675 @@ +--- +id: utility-props +title: Utility Props +--- + +Style props are a way to alter the style of a component by simply passing props to it. It helps to save time by providing helpful shorthand ways to style components. + +## Style Props + +The following table shows a list of every style prop and the properties within each group. + +### Margin and padding + +```SnackPlayer name=Margin%20and%20padding +import React from 'react'; +import { Box as NBBox, NativeBaseProvider, Center } from 'native-base'; + +const Box = (props) => { + return +} + +function Component() { + return ( + <> + { /* m="2" refers to the value of `theme.space[2]` */ } + + { /* You can also use custom values */ } + + { /* sets margin `8px` on all viewports and `16px` from the first breakpoint and up */ } + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +
+ +| Prop | CSS Equivalent | Theme Key | +| ----------------- | ------------------------------ | --------- | +| m, margin | margin | space | +| mt, marginTop | margin-top | space | +| mr, marginRight | margin-right | space | +| mb, marginBottom | margin-bottom | space | +| ml, marginLeft | margin-left | space | +| mx | margin-left and margin-right | space | +| my | margin-top and margin-bottom | space | +| p, padding | padding | space | +| pt, paddingTop | padding-top | space | +| pr, paddingRight | padding-right | space | +| pb, paddingBottom | padding-bottom | space | +| pl, paddingLeft | padding-left | space | +| px | padding-left and padding-right | space | +| py | padding-top and padding-bottom | space | + +### Color and background color + +```SnackPlayer name=Color%20and%20background%20COolor +import React from 'react'; +import { Box as NBBox, NativeBaseProvider, Center, Text } from 'native-base'; + +const Box = (props) => { + return ; +}; + +function Component() { + return ( + <> + {/* raw CSS color value */} + + {/* picks up a nested color value using dot notation */} + {/* => `theme.colors.lightBlue[300]` */} + + {/* using theme colors to set text color */} + + {' '} + I love NativeBase + + + {/* verbose prop */} + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} + + +``` + +
+ +| Prop | CSS Eqquivalent | Theme Key | +| -------------- | ---------------- | --------- | +| color | color | colors | +| bg, background | background | colors | +| bgColor | background-color | colors | +| opacity | opacity | - | + +

+ +:::tip Note + +Above props can be written in the format: {color}:alpha.{opacityToken}, this gets converted into RGBA color format and the opacityToken is mapped to [`Opacity`](default-theme#opacity) + +::: + +
+ +```SnackPlayer name=Alpha%20Opacity%20Usage + +import React from "react" +import { HStack, Stack, Center, NativeBaseProvider } from "native-base" +export function Example() { + return ( + + +
+ Box 1 +
+
+ Box 2 +
+
+ Box 3 +
+ + + ) +} + +export default () => { + return ( + +
+ +
+ + ) +} + +``` + +### Typography + +```SnackPlayer name=Typography +import React from 'react'; +import { Text as NBText, NativeBaseProvider, Center } from 'native-base'; + +const Text = (props) => { + return +} + +function Component() { + return ( + <> + { /* font-size of `theme.fontSizes.2xl` */ } + Thank You + { /* text decoration `underline` */ } + Merci Beaucoup + { /* font-size `'2em'` */ } + { /* font-weight of `theme.fontWeights.semibold i.e. 600` */ } + Danke sehr + { /* letter-spacing `0.1 em` */ } + Arigatou + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +
+ +| Prop | CSS Eqquivalent | Theme Key | +| -------------- | --------------- | -------------- | +| fontFamily | font-family | fonts | +| fontSize | font-size | fontSizes | +| fontWeight | font-weight | fontWeights | +| lineHeight | line-height | lineHeights | +| letterSpacing | letter-spacing | letterSpacings | +| textAlign | text-align | - | +| fontStyle | font-style | - | +| textTransform | text-transform | - | +| textDecoration | text-decoration | - | + +### Layout, width and height + +```SnackPlayer name=Layout,%20width%20and%20height +import React from 'react'; +import { Box as NBBox, NativeBaseProvider, Center } from 'native-base'; + +const Box = (props) => { + return +} + +function Component() { + return ( + <> + { /* verbose */ } + + { /* shorthand */ } + + { /* use boxSizing */ } + + { /* width `50%` */ } + + { /* width `256px` h="8" */ } + + { /* width `"40px"` */ } + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +
+ +| Prop | CSS Eqquivalent | Theme Key | +| --------------- | --------------- | --------- | +| w, width | width | sizes | +| h, height | height | sizes | +| minW, minWidth | min-width | sizes | +| maxW, maxWidth | max-width | sizes | +| minH, minHeight | min-height | sizes | +| maxH, maxHeight | max-height | sizes | +| d, display | display | - | +| boxSize | width, height | sizes | +| verticalAlign | vertical-align | - | +| overflow | overflow | - | +| overflowX | overflowX | - | +| overflowY | overflowY | - | + +### Flexbox + +```SnackPlayer name=Flexbox +import React from 'react'; +import { Box as NBBox, Flex, NativeBaseProvider, Center } from 'native-base'; + +const Box = (props) => { + return +} + +function Component() { + return ( + <> + { /* verbose */ } + + + + + + { /* shorthand using the `Flex` component */ } + + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +
+ +| Prop | CSS Eqquivalent | Theme Key | +| ----------------------------------- | --------------- | --------- | +| alignItems, \*align | align-items | - | +| alignContent | align-content | - | +| justifyItems | justify-items | - | +| justifyContent, \*justify | justify-content | - | +| flexWrap, \*wrap | flex-wrap | - | +| flexDirection, flexDir, \*direction | flex-direction | - | +| flex | flex | - | +| flexGrow | flex-grow | - | +| flexShrink | flex-shrink | - | +| flexBasis | flex-basis | - | +| justifySelf | justify-self | - | +| alignSelf | align-self | - | +| order | order | - | + +### Borders + +```SnackPlayer name=Borders +import React from 'react'; +import { Box as NBBox, NativeBaseProvider, Center } from 'native-base'; + +const Box = (props) => { + return ; +}; + +function Component() { + return ( + <> + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +
+ +| Prop | CSS Eququivalent | Theme Field | +| ----------------- | ------------------- | ------------ | +| borderWidth | border-width | borderWidths | +| borderStyle | border-style | borderStyles | +| borderColor | border-color | colors | +| borderTop | border-top | borders | +| borderTopWidth | border-top-width | borderWidths | +| borderTopStyle | border-top-style | borderStyles | +| borderTopColor | border-top-color | colors | +| borderRight | border-right | borders | +| borderRightWidth | border-right-width | borderWidths | +| borderRightStyle | border-right-style | borderStyles | +| borderRightColor | border-right-color | colors | +| borderBottom | border-bottom | borders | +| borderBottomWidth | border-bottom-width | borderWidths | +| borderBottomStyle | border-bottom-style | borderStyles | +| borderBottomColor | border-bottom-color | colors | +| borderLeft | border-left | borders | +| borderLeftWidth | border-left-width | borderWidths | +| borderLeftStyle | border-left-style | borderStyles | +| borderLeftColor | border-left-color | colors | + +### Borders Radius + +```SnackPlayer name=Borders%20Radius +import React from 'react'; +import { Box as NBBox, NativeBaseProvider, Center } from 'native-base'; + +const Box = (props) => { + return +} + +function Component() { + return ( + <> + { /* picks up a nested radius value using dot notation */ } + { /* => `theme.radius.md` */ } + + + { /* partial border radius */ } + + { /* absolute value prop */ } + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +
+ +| Prop | CSS Eququivalent | Theme Field | +| ----------------------- | ------------------------------------------------------ | ----------- | +| borderRadius | border-radius | radii | +| borderTopLeftRadius | border-top-left-radius | radii | +| borderTopRightRadius | border-top-right-radius | radii | +| borderBottomRightRadius | border-bottom-right-radius | radii | +| borderBottomLeftRadius | border-bottom-left-radius | radii | +| borderTopRadius | border-top-left-radius & border-top-right-radius | radii | +| borderRightRadius | border-top-right-radius & border-bottom-right-radius | radii | +| borderBottomRadius | border-bottom-left-radius & border-bottom-right-radius | radii | +| borderLeftRadius | border-top-left-radius & border-bottom-left-radius | radii | + +### Position + +```SnackPlayer name=Position +import React from 'react'; +import { Box as NBBox, NativeBaseProvider, Center } from 'native-base'; + +const Box = (props) => { + return ; +}; + +function Component() { + return ( + + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +
+ +| Prop | CSS Equivalent | Theme Field | +| ------------ | -------------- | ----------- | +| pos,position | position | - | +| zIndex | z-index | zIndices | +| top | top | space | +| right | right | space | +| bottom | bottom | space | +| left | left | space | + +### Shadow + +```SnackPlayer name=Shadow +import React from 'react'; +import { Box as NBBox, NativeBaseProvider, Center } from 'native-base'; + +const Box = (props) => { + return +} + +function Component() { + return ( + <> + { /* => `theme.shadows.md` */ } + + + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +
+ +| Prop | CSS Equivalent | Theme Field | +| ------ | -------------- | ----------- | +| shadow | box-shadow | shadows | + +## Underscore Props + +### Internal Props + +Provides a way to pass props to child components inside Composite componets. + +```SnackPlayer name=Internal +import React from 'react'; +import { Button, NativeBaseProvider, Center } from 'native-base'; + +function Example() { + return ( + + ); +} + +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +
+ +| Prop | Type | Description | +| ------- | -------------------------- | -------------------------------------------------------- | +| \_stack | [IStackProps](stack#props) | Passed props will be provided to [`Stack`](stack) child. | +| \_text | [ITextProps](text#props) | Passed props will be provided to [`Text`](text) child. | + +### Interaction Props + +Provides a way to pass props on certain interaction. + +```SnackPlayer name=Internal +import React from 'react'; +import { Button, NativeBaseProvider, Center } from 'native-base'; + +function Example() { + return ( + + ); +} + +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +
+ +| Prop | Type | Description | +| ---------- | ----------------------- | ----------------------------------------------- | +| \_disabled | _Same as the component_ | Passed props will be applied on disabled state. | +| \_focus | _Same as the component_ | Passed props will be applied on focused state. | +| \_hover | _Same as the component_ | Passed props will be applied on hovered state. | +| \_invalid | _Same as the component_ | Passed props will be applied on invalid state. | +| \_pressed | _Same as the component_ | Passed props will be applied on pressed state. | + +### Platform Props + +Provides a way to pass props bassed on Platform (_android, ios or web_). + +```SnackPlayer name=Internal +import React from 'react'; +import { Button, NativeBaseProvider, Center } from 'native-base'; + +function Example() { + return ( + + ); +} + +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +
+ +| Prop | Type | Description | +| --------- | ----------------------- | ---------------------------------------- | +| \_android | _Same as the component_ | Passed props will be applied on android. | +| \_ios | _Same as the component_ | Passed props will be applied on ios. | +| \_web | _Same as the component_ | Passed props will be applied on web. | diff --git a/versioned_docs/version-3.2.2/utilityPropsSpecificity.md b/versioned_docs/version-3.2.2/utilityPropsSpecificity.md new file mode 100644 index 000000000..9c7e1a053 --- /dev/null +++ b/versioned_docs/version-3.2.2/utilityPropsSpecificity.md @@ -0,0 +1,55 @@ +--- +id: utility-props-specificity +title: Utility Props Specificity +--- + +- If we have two similar props for a particular component, the more specific prop will be applied when the component is rendered. + + ```jsx + + ``` + + In the above example, we have two similar props for the Input component, but as you might have noticed `px="2"` is more specific than `p="0"` in terms of providing padding to the Input. This follows React Native's specificity precedence while applying utility style props to a component, order does not matter. So, `px="2"` will be applied when the Input component is rendered. + +- If we have a similar prop which is also defined in the baseStyle of that component, the value of the prop will override the value of the prop defined in the baseStyle. + + Let's take an example of `Input` to understand better. + + ```jsx + + + // baseStyle for Input component + return { + ... + px: 4, + py: 2, + ... + } + ``` + + As you can see, we have `px:2` and `py:2` defined in the baseStyle of Input component, but if we pass `p="0"` in the props of an Input, it will override the the baseStyle and apply `p="0"` to that component. **Similar happens with other utility props.** + +Now, here is an example to analyze both the cases together: + +```jsx + + +// baseStyle for Input component + return { + ... + px: 4, + py: 2, + ... + } + +``` +In the above example, what do you think should be the padding of the rendered Input component? + +Let's see. + +We have `p="0"` which will override the value of padding coming from the baseStyle of Input component, then we have `px="3"` which is a more specific prop. So, the padding of the rendered Input will be `padding : { paddingTop:0, paddingRight:3, paddingBottom:0, paddingLeft:3 }`. + + + + + diff --git a/versioned_docs/version-3.2.2/view.md b/versioned_docs/version-3.2.2/view.md new file mode 100644 index 000000000..8f1a9f415 --- /dev/null +++ b/versioned_docs/version-3.2.2/view.md @@ -0,0 +1,18 @@ +--- +id: view +title: View +--- + +The most fundamental component for building a UI. + +## Example + +```ComponentSnackPlayer path=components,basic,View,Basic.tsx + +``` + +## Props + +```ComponentPropTable path=basic,View,View.tsx showStylingProps=true + +``` diff --git a/versioned_sidebars/version-3.2.0-sidebars.json b/versioned_sidebars/version-3.2.0-sidebars.json index 696584afe..03eea6f08 100644 --- a/versioned_sidebars/version-3.2.0-sidebars.json +++ b/versioned_sidebars/version-3.2.0-sidebars.json @@ -652,6 +652,10 @@ } ] }, + { + "type": "doc", + "id": "version-3.2.0/more-props" + }, { "type": "doc", "id": "version-3.2.0/install-expo" diff --git a/versioned_sidebars/version-3.2.2-sidebars.json b/versioned_sidebars/version-3.2.2-sidebars.json new file mode 100644 index 000000000..6071a1a77 --- /dev/null +++ b/versioned_sidebars/version-3.2.2-sidebars.json @@ -0,0 +1,680 @@ +{ + "version-3.2.2/componentsSidebar": [ + { + "collapsed": false, + "type": "category", + "label": "Introduction", + "items": [ + { + "type": "doc", + "id": "version-3.2.2/getting-started" + }, + { + "type": "doc", + "id": "version-3.2.2/installation" + }, + { + "type": "doc", + "id": "version-3.2.2/setup-provider" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Core concepts", + "items": [ + { + "type": "doc", + "id": "version-3.2.2/utility-first" + }, + { + "type": "doc", + "id": "version-3.2.2/utility-props-specificity" + }, + { + "type": "doc", + "id": "version-3.2.2/design-tokens" + }, + { + "type": "doc", + "id": "version-3.2.2/pseudo-props" + }, + { + "type": "doc", + "id": "version-3.2.2/pseudo-props-101" + }, + { + "type": "doc", + "id": "version-3.2.2/responsive-style" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Features", + "items": [ + { + "type": "doc", + "id": "version-3.2.2/utility-props" + }, + { + "type": "doc", + "id": "version-3.2.2/color-mode" + }, + { + "type": "doc", + "id": "version-3.2.2/nativebase-factory" + }, + { + "type": "doc", + "id": "version-3.2.2/safe-area-view-props" + }, + { + "type": "doc", + "id": "version-3.2.2/strict-mode" + }, + { + "type": "doc", + "id": "version-3.2.2/accessibility" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Theme", + "items": [ + { + "type": "doc", + "id": "version-3.2.2/default-theme" + }, + { + "type": "doc", + "id": "version-3.2.2/customizing-theme" + }, + { + "type": "doc", + "id": "version-3.2.2/customizing-fonts" + }, + { + "type": "doc", + "id": "version-3.2.2/customizing-components" + }, + { + "type": "doc", + "id": "version-3.2.2/dark-mode" + }, + { + "type": "doc", + "id": "version-3.2.2/breakpoints" + }, + { + "type": "doc", + "id": "version-3.2.2/theme" + }, + { + "type": "doc", + "id": "version-3.2.2/typescript" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Layout", + "items": [ + { + "type": "doc", + "id": "version-3.2.2/box" + }, + { + "type": "doc", + "id": "version-3.2.2/center" + }, + { + "type": "doc", + "id": "version-3.2.2/container" + }, + { + "type": "doc", + "id": "version-3.2.2/flex" + }, + { + "type": "doc", + "id": "version-3.2.2/h-stack" + }, + { + "type": "doc", + "id": "version-3.2.2/stack" + }, + { + "type": "doc", + "id": "version-3.2.2/v-stack" + }, + { + "type": "doc", + "id": "version-3.2.2/z-stack" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Forms", + "items": [ + { + "type": "doc", + "id": "version-3.2.2/button" + }, + { + "type": "doc", + "id": "version-3.2.2/pressable" + }, + { + "type": "doc", + "id": "version-3.2.2/checkbox" + }, + { + "type": "doc", + "id": "version-3.2.2/form-control" + }, + { + "type": "doc", + "id": "version-3.2.2/icon-button" + }, + { + "type": "doc", + "id": "version-3.2.2/input" + }, + { + "type": "doc", + "id": "version-3.2.2/link" + }, + { + "type": "doc", + "id": "version-3.2.2/radio" + }, + { + "type": "doc", + "id": "version-3.2.2/select" + }, + { + "type": "doc", + "id": "version-3.2.2/slider" + }, + { + "type": "doc", + "id": "version-3.2.2/switch" + }, + { + "type": "doc", + "id": "version-3.2.2/textarea" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Data Display", + "items": [ + { + "type": "doc", + "id": "version-3.2.2/badge" + }, + { + "type": "doc", + "id": "version-3.2.2/divider" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Feedback", + "items": [ + { + "type": "doc", + "id": "version-3.2.2/alert" + }, + { + "type": "doc", + "id": "version-3.2.2/progress" + }, + { + "type": "doc", + "id": "version-3.2.2/spinner" + }, + { + "type": "doc", + "id": "version-3.2.2/toast" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Typography", + "items": [ + { + "type": "doc", + "id": "version-3.2.2/text" + }, + { + "type": "doc", + "id": "version-3.2.2/heading" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Overlay", + "items": [ + { + "type": "doc", + "id": "version-3.2.2/alert-dialog" + }, + { + "type": "doc", + "id": "version-3.2.2/menu" + }, + { + "type": "doc", + "id": "version-3.2.2/modal" + }, + { + "type": "doc", + "id": "version-3.2.2/popover" + }, + { + "type": "doc", + "id": "version-3.2.2/tooltip" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Disclosure", + "items": [ + { + "type": "doc", + "id": "version-3.2.2/action-sheet" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Media and Icons", + "items": [ + { + "type": "doc", + "id": "version-3.2.2/avatar" + }, + { + "type": "doc", + "id": "version-3.2.2/icon" + }, + { + "type": "doc", + "id": "version-3.2.2/image" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Transition", + "items": [ + { + "type": "doc", + "id": "version-3.2.2/presence-transition" + }, + { + "type": "doc", + "id": "version-3.2.2/slide" + }, + { + "type": "doc", + "id": "version-3.2.2/stagger" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Others", + "items": [ + { + "type": "doc", + "id": "version-3.2.2/FAB" + }, + { + "type": "doc", + "id": "version-3.2.2/hidden" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "ReactNative Components", + "items": [ + { + "type": "doc", + "id": "version-3.2.2/scrollview" + }, + { + "type": "doc", + "id": "version-3.2.2/view" + }, + { + "type": "doc", + "id": "version-3.2.2/keyboard-avoiding-view" + }, + { + "type": "doc", + "id": "version-3.2.2/status-bar" + }, + { + "type": "doc", + "id": "version-3.2.2/flat-list" + }, + { + "type": "doc", + "id": "version-3.2.2/section-list" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Hooks", + "items": [ + { + "type": "doc", + "id": "version-3.2.2/use-disclosure" + }, + { + "type": "doc", + "id": "version-3.2.2/use-breakPoint-value" + }, + { + "type": "doc", + "id": "version-3.2.2/use-clipboard" + }, + { + "type": "doc", + "id": "version-3.2.2/use-media-query" + }, + { + "type": "doc", + "id": "version-3.2.2/use-theme" + }, + { + "type": "doc", + "id": "version-3.2.2/use-token" + }, + { + "type": "doc", + "id": "version-3.2.2/use-color-mode" + }, + { + "type": "doc", + "id": "version-3.2.2/use-color-mode-value" + }, + { + "type": "doc", + "id": "version-3.2.2/use-contrast-text" + }, + { + "type": "doc", + "id": "version-3.2.2/use-accessible-colors" + } + ] + }, + { + "type": "doc", + "id": "version-3.2.2/testing" + }, + { + "collapsed": false, + "type": "category", + "label": "Examples", + "items": [ + { + "type": "doc", + "id": "version-3.2.2/todo-example" + }, + { + "type": "doc", + "id": "version-3.2.2/kitchen-sink" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Recipes", + "items": [ + { + "collapsed": true, + "type": "category", + "label": "Designs", + "items": [ + { + "type": "doc", + "id": "version-3.2.2/building-app-bar" + }, + { + "type": "doc", + "id": "version-3.2.2/building-card" + }, + { + "type": "doc", + "id": "version-3.2.2/building-drawer-navigation" + }, + { + "type": "doc", + "id": "version-3.2.2/building-tab-view" + }, + { + "type": "doc", + "id": "version-3.2.2/building-swipe-list" + } + ] + }, + { + "collapsed": true, + "type": "category", + "label": "Forms", + "items": [ + { + "type": "doc", + "id": "version-3.2.2/form" + }, + { + "type": "doc", + "id": "version-3.2.2/login-signup-forms" + }, + { + "type": "doc", + "id": "version-3.2.2/building-search-bar" + } + ] + }, + { + "collapsed": true, + "type": "category", + "label": "Layout", + "items": [ + { + "type": "doc", + "id": "version-3.2.2/app-drawer" + }, + { + "type": "doc", + "id": "version-3.2.2/building-footer-tabs" + } + ] + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Migration", + "items": [ + { + "type": "doc", + "id": "version-3.2.2/migration/migration-guide-three" + }, + { + "type": "doc", + "id": "version-3.2.2/migration/migration-guide-three-point-two" + }, + { + "collapsed": true, + "type": "category", + "label": "Components Migration", + "items": [ + { + "type": "doc", + "id": "version-3.2.2/migration/action-sheet" + }, + { + "type": "doc", + "id": "version-3.2.2/migration/badge" + }, + { + "type": "doc", + "id": "version-3.2.2/migration/button" + }, + { + "type": "doc", + "id": "version-3.2.2/migration/card" + }, + { + "type": "doc", + "id": "version-3.2.2/migration/checkbox" + }, + { + "type": "doc", + "id": "version-3.2.2/migration/date-picker" + }, + { + "type": "doc", + "id": "version-3.2.2/migration/deck-swiper" + }, + { + "type": "doc", + "id": "version-3.2.2/migration/drawer" + }, + { + "type": "doc", + "id": "version-3.2.2/migration/FABs" + }, + { + "type": "doc", + "id": "version-3.2.2/migration/footer-tab" + }, + { + "type": "doc", + "id": "version-3.2.2/migration/form" + }, + { + "type": "doc", + "id": "version-3.2.2/migration/header" + }, + { + "type": "doc", + "id": "version-3.2.2/migration/icon" + }, + { + "type": "doc", + "id": "version-3.2.2/migration/layout" + }, + { + "type": "doc", + "id": "version-3.2.2/migration/picker" + }, + { + "type": "doc", + "id": "version-3.2.2/migration/radio-button" + }, + { + "type": "doc", + "id": "version-3.2.2/migration/search-bar" + }, + { + "type": "doc", + "id": "version-3.2.2/migration/segment" + }, + { + "type": "doc", + "id": "version-3.2.2/migration/spinner" + }, + { + "type": "doc", + "id": "version-3.2.2/migration/swipe-list" + }, + { + "type": "doc", + "id": "version-3.2.2/migration/tabs" + }, + { + "type": "doc", + "id": "version-3.2.2/migration/thumbnail" + }, + { + "type": "doc", + "id": "version-3.2.2/migration/toast" + }, + { + "type": "doc", + "id": "version-3.2.2/migration/typography" + } + ] + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "More", + "items": [ + { + "type": "doc", + "id": "version-3.2.2/changelog" + }, + { + "type": "doc", + "id": "version-3.2.2/faq" + } + ] + }, + { + "type": "doc", + "id": "version-3.2.2/more-props" + }, + { + "type": "doc", + "id": "version-3.2.2/install-expo" + }, + { + "type": "doc", + "id": "version-3.2.2/install-rn" + }, + { + "type": "doc", + "id": "version-3.2.2/install-cra" + }, + { + "type": "doc", + "id": "version-3.2.2/install-next" + } + ] +} diff --git a/versions.json b/versions.json index f5878ada0..570fd2613 100644 --- a/versions.json +++ b/versions.json @@ -1,4 +1,5 @@ [ + "3.2.2", "3.2.1", "3.1.0", "3.0.7", diff --git a/yarn.lock b/yarn.lock index 59003401c..fb0045ebd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -254,12 +254,14 @@ jsesc "^2.5.1" source-map "^0.5.0" -"@babel/helper-annotate-as-pure@^7.0.0", "@babel/helper-annotate-as-pure@^7.14.5": - version "7.14.5" - resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.14.5.tgz#7bf478ec3b71726d56a8ca5775b046fc29879e61" - integrity sha512-EivH9EgBIb+G8ij1B2jAwSH36WnGvkQSEC6CkX/6v6ZFlw5fVOHvsgGF4uiEHO2GzMvunZb6tDLQEQSdrdocrA== +"@babel/generator@^7.15.4": + version "7.15.8" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.15.8.tgz#fa56be6b596952ceb231048cf84ee499a19c0cd1" + integrity sha512-ECmAKstXbp1cvpTTZciZCgfOt6iN64lR0d+euv3UZisU5awfRawOvg07Utn/qBGuH4bRIEZKrA/4LzZyXhZr8g== dependencies: - "@babel/types" "^7.14.5" + "@babel/types" "^7.15.6" + jsesc "^2.5.1" + source-map "^0.5.0" "@babel/helper-annotate-as-pure@^7.10.4", "@babel/helper-annotate-as-pure@^7.12.10": version "7.12.10" @@ -268,6 +270,20 @@ dependencies: "@babel/types" "^7.12.10" +"@babel/helper-annotate-as-pure@^7.14.5": + version "7.14.5" + resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.14.5.tgz#7bf478ec3b71726d56a8ca5775b046fc29879e61" + integrity sha512-EivH9EgBIb+G8ij1B2jAwSH36WnGvkQSEC6CkX/6v6ZFlw5fVOHvsgGF4uiEHO2GzMvunZb6tDLQEQSdrdocrA== + dependencies: + "@babel/types" "^7.14.5" + +"@babel/helper-annotate-as-pure@^7.15.4": + version "7.15.4" + resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.15.4.tgz#3d0e43b00c5e49fdb6c57e421601a7a658d5f835" + integrity sha512-QwrtdNvUNsPCj2lfNQacsGSQvGX8ee1ttrBrcozUP2Sv/jylewBP/8QFe6ZkBsC8T/GYWonNAWJV4aRR9AL2DA== + dependencies: + "@babel/types" "^7.15.4" + "@babel/helper-builder-binary-assignment-operator-visitor@^7.10.4": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.10.4.tgz#bb0b75f31bf98cbf9ff143c1ae578b87274ae1a3" @@ -382,6 +398,15 @@ "@babel/template" "^7.14.5" "@babel/types" "^7.14.5" +"@babel/helper-function-name@^7.15.4": + version "7.15.4" + resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.15.4.tgz#845744dafc4381a4a5fb6afa6c3d36f98a787ebc" + integrity sha512-Z91cOMM4DseLIGOnog+Z8OI6YseR9bua+HpvLAQ2XayUGU+neTtX+97caALaLdyu53I/fjhbeCnWnRH1O3jFOw== + dependencies: + "@babel/helper-get-function-arity" "^7.15.4" + "@babel/template" "^7.15.4" + "@babel/types" "^7.15.4" + "@babel/helper-get-function-arity@^7.12.10": version "7.12.10" resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.10.tgz#b158817a3165b5faa2047825dfa61970ddcc16cf" @@ -403,6 +428,13 @@ dependencies: "@babel/types" "^7.14.5" +"@babel/helper-get-function-arity@^7.15.4": + version "7.15.4" + resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.15.4.tgz#098818934a137fce78b536a3e015864be1e2879b" + integrity sha512-1/AlxSF92CmGZzHnC515hm4SirTxtpDnLEJ0UyEMgTMZN+6bxXKg04dKhiRx5Enel+SUA1G1t5Ed/yQia0efrA== + dependencies: + "@babel/types" "^7.15.4" + "@babel/helper-hoist-variables@^7.10.4": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.10.4.tgz#d49b001d1d5a68ca5e6604dda01a6297f7c9381e" @@ -417,6 +449,13 @@ dependencies: "@babel/types" "^7.14.5" +"@babel/helper-hoist-variables@^7.15.4": + version "7.15.4" + resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.15.4.tgz#09993a3259c0e918f99d104261dfdfc033f178df" + integrity sha512-VTy085egb3jUGVK9ycIxQiPbquesq0HUQ+tPO0uv5mPEBZipk+5FkRKiWq5apuyTE9FUrjENB0rCf8y+n+UuhA== + dependencies: + "@babel/types" "^7.15.4" + "@babel/helper-member-expression-to-functions@^7.12.1", "@babel/helper-member-expression-to-functions@^7.12.7": version "7.12.7" resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.12.7.tgz#aa77bd0396ec8114e5e30787efa78599d874a855" @@ -438,12 +477,12 @@ dependencies: "@babel/types" "^7.14.5" -"@babel/helper-module-imports@^7.0.0": - version "7.14.5" - resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.14.5.tgz#6d1a44df6a38c957aa7c312da076429f11b422f3" - integrity sha512-SwrNHu5QWS84XlHwGYPDtCxcA0hrSlL2yhWYLgeOc0w7ccOl2qv4s/nARI0aYZW+bSwAL5CukeXA47B/1NKcnQ== +"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.15.4": + version "7.15.4" + resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.15.4.tgz#e18007d230632dea19b47853b984476e7b4e103f" + integrity sha512-jeAHZbzUwdW/xHgHQ3QmWR4Jg6j15q4w/gCfwZvtqOxoo5DKtLHk8Bsf4c5RZRC7NmLEs+ohkdq8jFefuvIxAA== dependencies: - "@babel/types" "^7.14.5" + "@babel/types" "^7.15.4" "@babel/helper-module-imports@^7.12.1", "@babel/helper-module-imports@^7.12.5": version "7.12.5" @@ -605,6 +644,13 @@ dependencies: "@babel/types" "^7.14.5" +"@babel/helper-split-export-declaration@^7.15.4": + version "7.15.4" + resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.15.4.tgz#aecab92dcdbef6a10aa3b62ab204b085f776e257" + integrity sha512-HsFqhLDZ08DxCpBdEVtKmywj6PQbwnF6HHybur0MAnkAKnlS6uHkwnmRIkElB2Owpfb4xL4NwDmDLFubueDXsw== + dependencies: + "@babel/types" "^7.15.4" + "@babel/helper-validator-identifier@^7.10.4", "@babel/helper-validator-identifier@^7.12.11": version "7.12.11" resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz#c9a1f021917dcb5ccf0d4e453e399022981fc9ed" @@ -620,6 +666,11 @@ resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz#d0f0e277c512e0c938277faa85a3968c9a44c0e8" integrity sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg== +"@babel/helper-validator-identifier@^7.14.9": + version "7.15.7" + resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz#220df993bfe904a4a6b02ab4f3385a5ebf6e2389" + integrity sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w== + "@babel/helper-validator-option@^7.12.1", "@babel/helper-validator-option@^7.12.11": version "7.12.11" resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.12.11.tgz#d66cb8b7a3e7fe4c6962b32020a131ecf0847f4f" @@ -705,6 +756,11 @@ resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.14.5.tgz#4cd2f346261061b2518873ffecdf1612cb032829" integrity sha512-TM8C+xtH/9n1qzX+JNHi7AN2zHMTiPUtspO0ZdHflW8KaskkALhMmuMHb4bCmNdv9VAPzJX3/bXqkVLnAvsPfg== +"@babel/parser@^7.15.4": + version "7.15.8" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.15.8.tgz#7bacdcbe71bdc3ff936d510c15dcea7cf0b99016" + integrity sha512-BRYa3wcQnjS/nqI8Ac94pYYpJfojHVvVXJ97+IDCImX4Jc8W8Xv1+47enbruk+q1etOpsQNwnfFcNGw+gtPGxA== + "@babel/plugin-proposal-async-generator-functions@^7.12.1": version "7.12.12" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.12.12.tgz#04b8f24fd4532008ab4e79f788468fd5a8476566" @@ -1398,6 +1454,13 @@ dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@^7.8.7": + version "7.16.3" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.3.tgz#b86f0db02a04187a3c17caa77de69840165d42d5" + integrity sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ== + dependencies: + regenerator-runtime "^0.13.4" + "@babel/template@^7.10.4", "@babel/template@^7.12.7": version "7.12.7" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.12.7.tgz#c817233696018e39fbb6c491d2fb684e05ed43bc" @@ -1425,6 +1488,15 @@ "@babel/parser" "^7.14.5" "@babel/types" "^7.14.5" +"@babel/template@^7.15.4": + version "7.15.4" + resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.15.4.tgz#51898d35dcf3faa670c4ee6afcfd517ee139f194" + integrity sha512-UgBAfEa1oGuYgDIPM2G+aHa4Nlo9Lh6mGD2bDBGMTbYnc38vulXPuC1MGjYILIEmlwl6Rd+BPR9ee3gm20CBtg== + dependencies: + "@babel/code-frame" "^7.14.5" + "@babel/parser" "^7.15.4" + "@babel/types" "^7.15.4" + "@babel/traverse@^7.10.4", "@babel/traverse@^7.12.1", "@babel/traverse@^7.12.10", "@babel/traverse@^7.12.5", "@babel/traverse@^7.12.9": version "7.12.12" resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.12.12.tgz#d0cd87892704edd8da002d674bc811ce64743376" @@ -1454,7 +1526,7 @@ debug "^4.1.0" globals "^11.1.0" -"@babel/traverse@^7.14.5", "@babel/traverse@^7.4.5": +"@babel/traverse@^7.14.5": version "7.14.5" resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.14.5.tgz#c111b0f58afab4fea3d3385a406f692748c59870" integrity sha512-G3BiS15vevepdmFqmUc9X+64y0viZYygubAMO8SvBmKARuF6CPSZtH4Ng9vi/lrWlZFGe3FWdXNy835akH8Glg== @@ -1469,6 +1541,21 @@ debug "^4.1.0" globals "^11.1.0" +"@babel/traverse@^7.4.5": + version "7.15.4" + resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.15.4.tgz#ff8510367a144bfbff552d9e18e28f3e2889c22d" + integrity sha512-W6lQD8l4rUbQR/vYgSuCAE75ADyyQvOpFVsvPPdkhf6lATXAsQIG9YdtOcu8BB1dZ0LKu+Zo3c1wEcbKeuhdlA== + dependencies: + "@babel/code-frame" "^7.14.5" + "@babel/generator" "^7.15.4" + "@babel/helper-function-name" "^7.15.4" + "@babel/helper-hoist-variables" "^7.15.4" + "@babel/helper-split-export-declaration" "^7.15.4" + "@babel/parser" "^7.15.4" + "@babel/types" "^7.15.4" + debug "^4.1.0" + globals "^11.1.0" + "@babel/types@^7.10.4", "@babel/types@^7.10.5", "@babel/types@^7.12.1", "@babel/types@^7.12.10", "@babel/types@^7.12.11", "@babel/types@^7.12.12", "@babel/types@^7.12.5", "@babel/types@^7.12.6", "@babel/types@^7.12.7", "@babel/types@^7.4.4": version "7.12.12" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.12.12.tgz#4608a6ec313abbd87afa55004d373ad04a96c299" @@ -1494,6 +1581,14 @@ "@babel/helper-validator-identifier" "^7.14.5" to-fast-properties "^2.0.0" +"@babel/types@^7.15.4", "@babel/types@^7.15.6": + version "7.15.6" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.15.6.tgz#99abdc48218b2881c058dd0a7ab05b99c9be758f" + integrity sha512-BPU+7QhqNjmWyDO0/vitH/CuhpV8ZmK1wpKva8nuyNF5MJfuRNWMc+hc14+u9xT93kvykMdncrJT19h74uB1Ig== + dependencies: + "@babel/helper-validator-identifier" "^7.14.9" + to-fast-properties "^2.0.0" + "@csstools/convert-colors@^1.4.0": version "1.4.0" resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7" @@ -1884,6 +1979,45 @@ url "^0.11.0" webpack-sources "^1.4.3" +"@formatjs/ecma402-abstract@1.10.0": + version "1.10.0" + resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.10.0.tgz#f51b9167535c9463113c24644de90262aa5d31a7" + integrity sha512-WNkcUHC6xw12rWY87TUw6KXzb1LnOooYBLLqtyn1kW2j197rcwpqmUOJMBED56YcLzaJPfVw1L2ShiDhL5pVnQ== + dependencies: + "@formatjs/intl-localematcher" "0.2.21" + tslib "^2.1.0" + +"@formatjs/fast-memoize@1.2.0": + version "1.2.0" + resolved "https://registry.yarnpkg.com/@formatjs/fast-memoize/-/fast-memoize-1.2.0.tgz#1123bfcc5d21d761f15d8b1c32d10e1b6530355d" + integrity sha512-fObitP9Tlc31SKrPHgkPgQpGo4+4yXfQQITTCNH8AZdEqB7Mq4nPrjpUL/tNGN3lEeJcFxDbi0haX8HM7QvQ8w== + dependencies: + tslib "^2.1.0" + +"@formatjs/icu-messageformat-parser@2.0.14": + version "2.0.14" + resolved "https://registry.yarnpkg.com/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.0.14.tgz#d794af24e4896f4d2b400e28c25b1ba72604c106" + integrity sha512-M79MdUMLnfLK8eMrznUwke6afH9G/eOQeYvMUJ7uElXIL+//PyyjOzb42hAYfDAGYsAcKA2TsUo33Yuy2lE4AQ== + dependencies: + "@formatjs/ecma402-abstract" "1.10.0" + "@formatjs/icu-skeleton-parser" "1.3.1" + tslib "^2.1.0" + +"@formatjs/icu-skeleton-parser@1.3.1": + version "1.3.1" + resolved "https://registry.yarnpkg.com/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.1.tgz#02ad3209cb518096b830582068a322fee050adcf" + integrity sha512-WdPNjhv9e7EfyrIVYk6hN6/mC9YF+PcfFViDI2kATwoi1uKHr+AkQCMoNrWyCDdUQ+Dn50mQOlrEkCBXoLrkPQ== + dependencies: + "@formatjs/ecma402-abstract" "1.10.0" + tslib "^2.1.0" + +"@formatjs/intl-localematcher@0.2.21": + version "0.2.21" + resolved "https://registry.yarnpkg.com/@formatjs/intl-localematcher/-/intl-localematcher-0.2.21.tgz#39ef33d701fe8084f3d693cd3ff7cbe03cdd3a49" + integrity sha512-JTJeLiNwexN4Gy0cMxoUPvJbKhXdnSuo5jPrDafEZpnDWlJ5VDYta8zUVVozO/pwzEmFVHEUpgiEDj+39L4oMg== + dependencies: + tslib "^2.1.0" + "@fullhuman/postcss-purgecss@^3.1.3": version "3.1.3" resolved "https://registry.yarnpkg.com/@fullhuman/postcss-purgecss/-/postcss-purgecss-3.1.3.tgz#47af7b87c9bfb3de4bc94a38f875b928fffdf339" @@ -1911,6 +2045,14 @@ "@babel/runtime" "^7.6.2" intl-messageformat "^2.2.0" +"@internationalized/message@^3.0.2": + version "3.0.2" + resolved "https://registry.yarnpkg.com/@internationalized/message/-/message-3.0.2.tgz#c3db2b6b7f75af815819f77da11f8424381416e3" + integrity sha512-ZZ8FQDCsri3vUB2mfDD76Vbf97DH361AiZUXKHV4BqwCtYyaNYiZqIr8KXrcMCxJvrIYVQLSn8+jeIQRO3bvtw== + dependencies: + "@babel/runtime" "^7.6.2" + intl-messageformat "^9.6.12" + "@internationalized/number@^3.0.0": version "3.0.0" resolved "https://registry.yarnpkg.com/@internationalized/number/-/number-3.0.0.tgz#aa3618ddb82ab0e9a09e8dcc3d5359a6935e6db2" @@ -1918,6 +2060,13 @@ dependencies: "@babel/runtime" "^7.6.2" +"@internationalized/number@^3.0.2": + version "3.0.3" + resolved "https://registry.yarnpkg.com/@internationalized/number/-/number-3.0.3.tgz#d29003dffdff54ca6f2287ec0cb77ff3d045478f" + integrity sha512-ewFoVvsxSyd9QZnknvOWPjirYqdMQhXTeDhJg3hM6C/FeZt0banpGH1nZ0SGMZXHz8NK9uAa2KVIq+jqAIOg4w== + dependencies: + "@babel/runtime" "^7.6.2" + "@mdx-js/mdx@^1.6.21": version "1.6.22" resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-1.6.22.tgz#8a723157bf90e78f17dc0f27995398e6c731f1ba" @@ -2067,6 +2216,18 @@ "@react-aria/utils" "^3.8.0" "@react-types/shared" "^3.6.0" +"@react-aria/i18n@^3.3.2": + version "3.3.2" + resolved "https://registry.yarnpkg.com/@react-aria/i18n/-/i18n-3.3.2.tgz#891902938333c6ab5491b7acb7581f8567045dbc" + integrity sha512-a4AptbWLPVMJfjPdyW60TFtT4gvKAputx9YaUrIywoV/5p900AcOOc3uuL43+vuCKBzMkGUeTa1a4eL1HstDUA== + dependencies: + "@babel/runtime" "^7.6.2" + "@internationalized/message" "^3.0.2" + "@internationalized/number" "^3.0.2" + "@react-aria/ssr" "^3.0.3" + "@react-aria/utils" "^3.8.2" + "@react-types/shared" "^3.8.0" + "@react-aria/interactions@^3.3.2", "@react-aria/interactions@^3.4.0": version "3.4.0" resolved "https://registry.yarnpkg.com/@react-aria/interactions/-/interactions-3.4.0.tgz#0243947c962811314852399ebc0d9f663eb3b762" @@ -2076,6 +2237,15 @@ "@react-aria/utils" "^3.8.0" "@react-types/shared" "^3.6.0" +"@react-aria/interactions@^3.5.1": + version "3.6.0" + resolved "https://registry.yarnpkg.com/@react-aria/interactions/-/interactions-3.6.0.tgz#63c16e6179e8ae38221e26256d9a7639d7f9b24e" + integrity sha512-dMEGYIIhJ3uxDd19Z/rxuqQp9Rx9c46AInrfzAiOijQj/fTmb4ubCsuFOAQrc0sy1HCY1/ntnRZQuRgT/iS74w== + dependencies: + "@babel/runtime" "^7.6.2" + "@react-aria/utils" "^3.9.0" + "@react-types/shared" "^3.9.0" + "@react-aria/label@^3.1.1", "@react-aria/label@^3.1.2": version "3.1.2" resolved "https://registry.yarnpkg.com/@react-aria/label/-/label-3.1.2.tgz#3ed367f1e7fcf67304eaefc5202ec027bea27a1b" @@ -2127,7 +2297,7 @@ "@react-types/menu" "^3.1.1" "@react-types/shared" "^3.6.0" -"@react-aria/overlays@^3.6.0", "@react-aria/overlays@^3.6.1", "@react-aria/overlays@^3.6.3": +"@react-aria/overlays@^3.6.1", "@react-aria/overlays@^3.6.3": version "3.6.3" resolved "https://registry.yarnpkg.com/@react-aria/overlays/-/overlays-3.6.3.tgz#e739bf1f3ed03762bb78701ad74faafac9ddce03" integrity sha512-7Czpl8UHwWLtwvBysrtlTK271+0mmr3GiBDA1mvG7XwAQiliYxHhvFhXn7tUa8tUneU5YhtVrAyiovja58sa3A== @@ -2142,6 +2312,21 @@ "@react-types/overlays" "^3.4.0" dom-helpers "^3.3.1" +"@react-aria/overlays@^3.7.0": + version "3.7.2" + resolved "https://registry.yarnpkg.com/@react-aria/overlays/-/overlays-3.7.2.tgz#dca7693c0ec31371b19c2f51b482f03819b8c391" + integrity sha512-KAurJ5MJRnXCPRrO1OdAaXz253cwO5VOOp8wx3/40Zm05o5FBA15ZJZT6BD8rZQOKMCAjkI76tiZQeMQtDULcQ== + dependencies: + "@babel/runtime" "^7.6.2" + "@react-aria/i18n" "^3.3.2" + "@react-aria/interactions" "^3.5.1" + "@react-aria/utils" "^3.8.2" + "@react-aria/visually-hidden" "^3.2.3" + "@react-stately/overlays" "^3.1.3" + "@react-types/button" "^3.4.1" + "@react-types/overlays" "^3.5.1" + dom-helpers "^3.3.1" + "@react-aria/radio@^3.1.2": version "3.1.4" resolved "https://registry.yarnpkg.com/@react-aria/radio/-/radio-3.1.4.tgz#ea2ba8a5275c15a7ba7cb6c91fae4fe2397a223d" @@ -2186,6 +2371,13 @@ "@react-types/radio" "^3.1.1" "@react-types/slider" "^3.0.1" +"@react-aria/ssr@^3.0.1", "@react-aria/ssr@^3.0.3", "@react-aria/ssr@^3.1.0": + version "3.1.0" + resolved "https://registry.yarnpkg.com/@react-aria/ssr/-/ssr-3.1.0.tgz#b7163e6224725c30121932a8d1422ef91d1fab22" + integrity sha512-RxqQKmE8sO7TGdrcSlHTcVzMP450hqowtBSd2bBS9oPlcokVkaGq28c3Rwa8ty5ctw4EBCjXqjP7xdcKMGDzug== + dependencies: + "@babel/runtime" "^7.6.2" + "@react-aria/ssr@^3.0.2": version "3.0.2" resolved "https://registry.yarnpkg.com/@react-aria/ssr/-/ssr-3.0.2.tgz#f96a41a7314a60324b6de871cb872039b63be5c0" @@ -2234,6 +2426,17 @@ "@react-types/shared" "^3.6.0" "@react-types/switch" "^3.1.1" +"@react-aria/utils@^3.3.0", "@react-aria/utils@^3.8.2", "@react-aria/utils@^3.9.0": + version "3.9.0" + resolved "https://registry.yarnpkg.com/@react-aria/utils/-/utils-3.9.0.tgz#c5446f807091a744311d4d559fa8a42e7448824d" + integrity sha512-P0dEOMHGHHJ5KC8iCpaMxAtgdUdeISAm4FZnmoD5fK3JxlKEC046hUxlad83RkNOBZkT2dDvF4HeDCUqdMWHKQ== + dependencies: + "@babel/runtime" "^7.6.2" + "@react-aria/ssr" "^3.1.0" + "@react-stately/utils" "^3.2.2" + "@react-types/shared" "^3.9.0" + clsx "^1.1.1" + "@react-aria/utils@^3.4.1", "@react-aria/utils@^3.6.0", "@react-aria/utils@^3.8.0": version "3.8.0" resolved "https://registry.yarnpkg.com/@react-aria/utils/-/utils-3.8.0.tgz#57bdc7cc967773c7f55b29847b187ec45031a620" @@ -2255,6 +2458,16 @@ "@react-aria/utils" "^3.8.0" clsx "^1.1.1" +"@react-aria/visually-hidden@^3.2.3": + version "3.2.3" + resolved "https://registry.yarnpkg.com/@react-aria/visually-hidden/-/visually-hidden-3.2.3.tgz#4779df0a468873550afb42a7f5fcb2411d82db8d" + integrity sha512-iAe5EFI7obEOwTnIdAwWrKq+CrIJFGTw85v8fXnQ7CIVGRDblX85GOUww9bzQNPDLLRYWS4VF702ii8kV4+JCw== + dependencies: + "@babel/runtime" "^7.6.2" + "@react-aria/interactions" "^3.5.1" + "@react-aria/utils" "^3.8.2" + clsx "^1.1.1" + "@react-native-aria/button@^0.2.4": version "0.2.4" resolved "https://registry.yarnpkg.com/@react-native-aria/button/-/button-0.2.4.tgz#ce0c994449011f4b852a222afd90e027fb839de0" @@ -2319,15 +2532,17 @@ "@react-types/listbox" "^3.1.1" "@react-types/shared" "^3.4.0" -"@react-native-aria/overlays@^0.2.9": - version "0.2.11" - resolved "https://registry.yarnpkg.com/@react-native-aria/overlays/-/overlays-0.2.11.tgz#6dbffef9fa83f72b702c56238feba25bd9351c08" - integrity sha512-wLCTXeVRkMNKJZIadLVpEI2TGV/iVPM0sby9HCovovC/TVs7avEccpNvaU3qL9//GRkLKwTVWcfG9BQ4sf8QPA== +"@react-native-aria/overlays@^0.3.2": + version "0.3.2" + resolved "https://registry.yarnpkg.com/@react-native-aria/overlays/-/overlays-0.3.2.tgz#fe3fb983b197738237493c3e5af6b30f6da6be9d" + integrity sha512-sc2attCn+stKugBF8ZBz+EIdGoEHU/+NbJc5agS6lZWeemXL5LcgomNf6Tn7RUlpLfWOTEGBQOAiOZxjZnIQmQ== dependencies: - "@react-aria/overlays" "^3.6.0" + "@react-aria/interactions" "^3.3.2" + "@react-aria/overlays" "^3.7.0" "@react-native-aria/utils" "^0.2.6" "@react-stately/overlays" "^3.1.1" "@react-types/overlays" "^3.4.0" + dom-helpers "^5.0.0" "@react-native-aria/radio@^0.2.4": version "0.2.5" @@ -2381,6 +2596,24 @@ resolved "https://registry.yarnpkg.com/@react-native-aria/utils/-/utils-0.2.7.tgz#53d1f4a44cad382bd9d1a6b5af6cb86624e70f76" integrity sha512-mozajHovHHYjNY28j5lrIzUQ3p3mQ7EnaKlukd0EuSaAwBboPQ1sVK9ToxPLyyixkxGe4pxy+br5ahzd6wlf5Q== +"@react-native-aria/utils@^0.2.8": + version "0.2.8" + resolved "https://registry.yarnpkg.com/@react-native-aria/utils/-/utils-0.2.8.tgz#da433606506125483080f18dbcd97b526ca46fd5" + integrity sha512-x375tG1itv3irLFRnURLsdK2djuvhFJHizSDUtLCo8skQwfjslED5t4sUkQ49di4G850gaVJz0fCcCx/pHX7CA== + dependencies: + "@react-aria/ssr" "^3.0.1" + "@react-aria/utils" "^3.3.0" + +"@react-stately/checkbox@^3.0.1": + version "3.0.3" + resolved "https://registry.yarnpkg.com/@react-stately/checkbox/-/checkbox-3.0.3.tgz#18ee6bd3b544334b6f853bb5c5f7017ac3bb9c37" + integrity sha512-amT889DTLdbjAVjZ9j9TytN73PszynGIspKi1QSUCvXeA2OVyCwShxhV0Pn7yYX8cMinvGXrjhWdhn0nhYeMdg== + dependencies: + "@babel/runtime" "^7.6.2" + "@react-stately/toggle" "^3.2.3" + "@react-stately/utils" "^3.2.2" + "@react-types/checkbox" "^3.2.3" + "@react-stately/checkbox@^3.0.2": version "3.0.2" resolved "https://registry.yarnpkg.com/@react-stately/checkbox/-/checkbox-3.0.2.tgz#e42943365e5082c121a36df5b1dc6f367cabc3ec" @@ -2391,6 +2624,14 @@ "@react-stately/utils" "^3.2.1" "@react-types/checkbox" "^3.2.1" +"@react-stately/collections@^3.3.0", "@react-stately/collections@^3.3.3": + version "3.3.4" + resolved "https://registry.yarnpkg.com/@react-stately/collections/-/collections-3.3.4.tgz#ca9e481d2769dbebb593d5a1ed4bcc54013aef9d" + integrity sha512-HnlQip9RH+3nGNh8U2U1YkCdA+zGSedQLWVCdR53w/n6To7kIp7yDLby5dkmP+9VGQEkyfsoSjwGJ1NF94CCZg== + dependencies: + "@babel/runtime" "^7.6.2" + "@react-types/shared" "^3.8.0" + "@react-stately/collections@^3.3.2": version "3.3.2" resolved "https://registry.yarnpkg.com/@react-stately/collections/-/collections-3.3.2.tgz#35faeb24671a4782603ba9a6403ac36836d5a34a" @@ -2434,6 +2675,17 @@ "@react-stately/utils" "^3.2.1" "@react-types/shared" "^3.6.0" +"@react-stately/list@^3.3.0": + version "3.3.0" + resolved "https://registry.yarnpkg.com/@react-stately/list/-/list-3.3.0.tgz#64ab3a507aa3ef03a8f3afc9f8d0bde0c79efd81" + integrity sha512-vp/+5C6ZTy6an0WqR/o0tr3wEbRFeFnZZcGseQps036Ir3XzWMs6CvdwfXCIWiZ03nOQPRvy8GbF8j1Qj4voYQ== + dependencies: + "@babel/runtime" "^7.6.2" + "@react-stately/collections" "^3.3.3" + "@react-stately/selection" "^3.7.0" + "@react-stately/utils" "^3.2.2" + "@react-types/shared" "^3.8.0" + "@react-stately/menu@^3.2.2": version "3.2.2" resolved "https://registry.yarnpkg.com/@react-stately/menu/-/menu-3.2.2.tgz#2f3e4dc65f32d7464fb09d9cbb68e05366ba029f" @@ -2454,6 +2706,15 @@ "@react-stately/utils" "^3.2.1" "@react-types/overlays" "^3.2.1" +"@react-stately/overlays@^3.1.3": + version "3.1.3" + resolved "https://registry.yarnpkg.com/@react-stately/overlays/-/overlays-3.1.3.tgz#b0bb4061c1b20e712dfc32c933ae4bb23e5ccc0e" + integrity sha512-X8H/h9F8ZjevwJ7P8ak7v500qQd5x4Y76LsXUXrR6LtcO8FXfp2I+W8sGmBtLZwLQpTJiF1U0WMQqXLE1g6eLA== + dependencies: + "@babel/runtime" "^7.6.2" + "@react-stately/utils" "^3.2.2" + "@react-types/overlays" "^3.5.1" + "@react-stately/radio@^3.2.1", "@react-stately/radio@^3.3.1": version "3.3.1" resolved "https://registry.yarnpkg.com/@react-stately/radio/-/radio-3.3.1.tgz#8a2dbaf3b462644348d16cc1957983f7e3c676a2" @@ -2487,6 +2748,16 @@ "@react-stately/utils" "^3.2.1" "@react-types/shared" "^3.6.0" +"@react-stately/selection@^3.7.0": + version "3.7.0" + resolved "https://registry.yarnpkg.com/@react-stately/selection/-/selection-3.7.0.tgz#a1bab8e7bc589ce20d8160ce2eb77cc606ded581" + integrity sha512-SfYFCBx8VAEvo24tUp738bl12NiFKg8M+VUy9UeI/M5uJSScXB/F8NLGPjaDpkRD2qGJ5BEYGzD39I3eBu3EcQ== + dependencies: + "@babel/runtime" "^7.6.2" + "@react-stately/collections" "^3.3.3" + "@react-stately/utils" "^3.2.2" + "@react-types/shared" "^3.8.0" + "@react-stately/slider@^3.0.1", "@react-stately/slider@^3.0.2": version "3.0.2" resolved "https://registry.yarnpkg.com/@react-stately/slider/-/slider-3.0.2.tgz#11be662c71cf82ad5727b188ea51d16e67a874c9" @@ -2518,6 +2789,16 @@ "@react-stately/utils" "^3.2.0" "@react-types/tabs" "3.0.0-alpha.2" +"@react-stately/tabs@^3.0.0-alpha.1": + version "3.0.1" + resolved "https://registry.yarnpkg.com/@react-stately/tabs/-/tabs-3.0.1.tgz#7df000f8c5c14b3bf973348c491e12bcfcafe49d" + integrity sha512-XhF/5mt8eme3mu0+4nC7Du+e5OWSu0W8SeKfbH9JmTWTCayZpPtui68nRStJK6OkgHs28gA+j55RSsTqT/N1Fg== + dependencies: + "@babel/runtime" "^7.6.2" + "@react-stately/list" "^3.3.0" + "@react-stately/utils" "^3.2.2" + "@react-types/tabs" "^3.0.1" + "@react-stately/toggle@^3.2.1", "@react-stately/toggle@^3.2.2": version "3.2.2" resolved "https://registry.yarnpkg.com/@react-stately/toggle/-/toggle-3.2.2.tgz#d5ee9494eb23a937dee3399af007d7d058585cb0" @@ -2528,6 +2809,16 @@ "@react-types/checkbox" "^3.2.1" "@react-types/shared" "^3.6.0" +"@react-stately/toggle@^3.2.3": + version "3.2.3" + resolved "https://registry.yarnpkg.com/@react-stately/toggle/-/toggle-3.2.3.tgz#a4de6edc16982990492c6c557e5194f46dacc809" + integrity sha512-p5eVjXwNo4y4CeybxfjYmbTzNMNiI67uspbRAJnawWBVWw8X+yIvRfpjYAsqmvsJ+DsvwybSTlQDT6taGoWEsA== + dependencies: + "@babel/runtime" "^7.6.2" + "@react-stately/utils" "^3.2.2" + "@react-types/checkbox" "^3.2.3" + "@react-types/shared" "^3.8.0" + "@react-stately/tree@^3.1.4": version "3.1.4" resolved "https://registry.yarnpkg.com/@react-stately/tree/-/tree-3.1.4.tgz#58b55af38743fa1d903a07e16684c8df8fb2d011" @@ -2546,6 +2837,13 @@ dependencies: "@babel/runtime" "^7.6.2" +"@react-stately/utils@^3.2.2": + version "3.2.2" + resolved "https://registry.yarnpkg.com/@react-stately/utils/-/utils-3.2.2.tgz#468eafa60740c6b0b847a368215dfaa55e87f505" + integrity sha512-7NCpRMAexDdgVqbrB9uDrkDpM4Tdw5BU6Gu6IKUXmKsoDYziE6mAjaGkCZBitsrln1Cezc6euI5YPa1JqxgpJg== + dependencies: + "@babel/runtime" "^7.6.2" + "@react-stately/virtualizer@^3.1.4": version "3.1.4" resolved "https://registry.yarnpkg.com/@react-stately/virtualizer/-/virtualizer-3.1.4.tgz#d6dccbb3f82b719a77cf8484fa397f7fb93a6c8c" @@ -2562,6 +2860,13 @@ dependencies: "@react-types/shared" "^3.4.0" +"@react-types/button@^3.4.1": + version "3.4.1" + resolved "https://registry.yarnpkg.com/@react-types/button/-/button-3.4.1.tgz#715ac9d4997c79233be4d9020b58f85936b8252b" + integrity sha512-B54M84LxdEppwjXNlkBEJyMfe9fd+bvFV7R6+NJvupGrZm/LuFNYjFcHk7yjMKWTdWm6DbpIuQz54n5qTW7Vlg== + dependencies: + "@react-types/shared" "^3.8.0" + "@react-types/checkbox@^3.2.1", "@react-types/checkbox@^3.2.2": version "3.2.2" resolved "https://registry.yarnpkg.com/@react-types/checkbox/-/checkbox-3.2.2.tgz#7182d44a533e2ffd2c9118372cbc2c33b006eb18" @@ -2569,6 +2874,13 @@ dependencies: "@react-types/shared" "^3.4.0" +"@react-types/checkbox@^3.2.3": + version "3.2.3" + resolved "https://registry.yarnpkg.com/@react-types/checkbox/-/checkbox-3.2.3.tgz#2b9d529c55c9884519c7f626f0fe8be7d0f18be1" + integrity sha512-YqeAFyrpaxI/eW6zQ7tVkKIASgzpywRrc6C/rV6Mw0zzGGSSvmYvdOBx9yHOEvpts7dLgaGlmLK6CeG7s4yGKg== + dependencies: + "@react-types/shared" "^3.8.0" + "@react-types/combobox@3.0.0-beta.1": version "3.0.0-beta.1" resolved "https://registry.yarnpkg.com/@react-types/combobox/-/combobox-3.0.0-beta.1.tgz#d41715115e4b0c4ec8882fefceda06e4889f4f00" @@ -2612,6 +2924,13 @@ dependencies: "@react-types/shared" "^3.3.0" +"@react-types/overlays@^3.5.1": + version "3.5.1" + resolved "https://registry.yarnpkg.com/@react-types/overlays/-/overlays-3.5.1.tgz#35350dfca639d04a8fbd973de59b141450df1b46" + integrity sha512-T3o6wQ5NNm1rSniIa01bIa6fALC8jbwpYxFMaQRrdEpIvwktt0Fi5Xo6/97+oe4HvzzU0JMhtwWDTdRySvgeZw== + dependencies: + "@react-types/shared" "^3.8.0" + "@react-types/radio@^3.1.1": version "3.1.1" resolved "https://registry.yarnpkg.com/@react-types/radio/-/radio-3.1.1.tgz#5b1b11ff3043ac902e8970e49260f2664da80e5e" @@ -2631,6 +2950,11 @@ resolved "https://registry.yarnpkg.com/@react-types/shared/-/shared-3.6.0.tgz#e3f32bdef168de9245648e9f0357930b13795bc2" integrity sha512-oa8m+GP881IUQmi+L0UoM5aC5t/6L6QIEA2I1FUMgwMeJn24qPAcEqYrTWeJzX2S+gAfa5r9qbzcVEgpQorEUw== +"@react-types/shared@^3.8.0", "@react-types/shared@^3.9.0": + version "3.9.0" + resolved "https://registry.yarnpkg.com/@react-types/shared/-/shared-3.9.0.tgz#d834f3e6e2c992089192f3c83fb7963e3a6f5207" + integrity sha512-YYksINfR6q92P10AhPEGo47Hd7oz1hrnZ6Vx8Gsrq62IbqDdv1XOTzPBaj17Z1ymNY2pitLUSEXsLmozt4wxxQ== + "@react-types/slider@^3.0.1": version "3.0.1" resolved "https://registry.yarnpkg.com/@react-types/slider/-/slider-3.0.1.tgz#b663c06765c5517f5d433e6158ad29d12eeaac4e" @@ -2661,6 +2985,13 @@ dependencies: "@react-types/shared" "^3.2.1" +"@react-types/tabs@^3.0.1": + version "3.0.1" + resolved "https://registry.yarnpkg.com/@react-types/tabs/-/tabs-3.0.1.tgz#a32931e95303d4442e51d4c687d4e154654014f6" + integrity sha512-GvPVU9GAqImHFhU+Do+pdGK/vZA4kqA699Gly1V95DUmtdG3GSwTnwlvM/Sy80/F9fKZDGokZnQmBFo8MFZyIw== + dependencies: + "@react-types/shared" "^3.8.0" + "@react-types/textfield@^3.2.2": version "3.2.2" resolved "https://registry.yarnpkg.com/@react-types/textfield/-/textfield-3.2.2.tgz#2f310c125df7c4a64a19d7c5064537218f909d38" @@ -2998,13 +3329,6 @@ resolved "https://registry.yarnpkg.com/@types/source-list-map/-/source-list-map-0.1.2.tgz#0078836063ffaf17412349bba364087e0ac02ec9" integrity sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA== -"@types/styled-system@^5.1.9": - version "5.1.11" - resolved "https://registry.yarnpkg.com/@types/styled-system/-/styled-system-5.1.11.tgz#158849f3b14cdf8bf27a10f0cf87a2c3a89eb680" - integrity sha512-R+JxEZYa5T0HD2urViR/mdklVaGhwbNOtDoWWGQ1+z1CGs/gF1UAKCaS//YwsUwterEKpyaKxgaXyFNKF04GCA== - dependencies: - csstype "^3.0.2" - "@types/tapable@*", "@types/tapable@^1.0.5": version "1.0.6" resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.6.tgz#a9ca4b70a18b270ccb2bc0aaafefd1d486b7ea74" @@ -3594,12 +3918,12 @@ babel-plugin-extract-import-names@1.6.22: "@babel/helper-plugin-utils" "7.10.4" "babel-plugin-styled-components@>= 1.12.0": - version "1.12.0" - resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.12.0.tgz#1dec1676512177de6b827211e9eda5a30db4f9b9" - integrity sha512-FEiD7l5ZABdJPpLssKXjBUJMYqzbcNzBowfXDCdJhOpbhWiewapUaY+LZGT8R4Jg2TwOjGjG4RKeyrO5p9sBkA== + version "1.13.3" + resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.13.3.tgz#1f1cb3927d4afa1e324695c78f690900e3d075bc" + integrity sha512-meGStRGv+VuKA/q0/jXxrPNWEm4LPfYIqxooDTdmh8kFsP/Ph7jJG5rUPwUPX3QHUvggwdbgdGpo88P/rRYsVw== dependencies: - "@babel/helper-annotate-as-pure" "^7.0.0" - "@babel/helper-module-imports" "^7.0.0" + "@babel/helper-annotate-as-pure" "^7.15.4" + "@babel/helper-module-imports" "^7.15.4" babel-plugin-syntax-jsx "^6.18.0" lodash "^4.17.11" @@ -5275,6 +5599,14 @@ dom-helpers@^3.3.1: dependencies: "@babel/runtime" "^7.1.2" +dom-helpers@^5.0.0: + version "5.2.1" + resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902" + integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA== + dependencies: + "@babel/runtime" "^7.8.7" + csstype "^3.0.2" + dom-iterator@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/dom-iterator/-/dom-iterator-1.0.0.tgz#9c09899846ec41c2d257adc4d6015e4759ef05ad" @@ -6993,6 +7325,15 @@ intl-messageformat@^2.2.0: dependencies: intl-messageformat-parser "1.4.0" +intl-messageformat@^9.6.12: + version "9.9.5" + resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-9.9.5.tgz#3a00b93a6830aa09649b37d5ef2d995393b358f5" + integrity sha512-pdKpqhiD0P8yqblu1qetOOL8SnJ62SGdvxwYPvSmuYMN3BawEV5UnJuRcsIwwXYJAGYoICiOJl3gexuuH+RLXw== + dependencies: + "@formatjs/fast-memoize" "1.2.0" + "@formatjs/icu-messageformat-parser" "2.0.14" + tslib "^2.1.0" + ip-regex@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-2.1.0.tgz#fa78bf5d2e6913c911ce9f819ee5146bb6d844e9" @@ -8412,10 +8753,10 @@ nanomatch@^1.2.9: snapdragon "^0.8.1" to-regex "^3.0.1" -native-base@3.2.1: - version "3.2.1" - resolved "https://registry.yarnpkg.com/native-base/-/native-base-3.2.1.tgz#315a1620d5ce5d31f6ae10f7ffa3e0ca28404a0c" - integrity sha512-u39DLFOEh9akDEpCrNZ/uPDZWROffXXxmw6eaqGJ/VmjVv3wjbK6OYf7+4yXWYEU8u1KJ/edZ2iRHQL0KuL8Fg== +native-base@3.2.2: + version "3.2.2" + resolved "https://registry.yarnpkg.com/native-base/-/native-base-3.2.2.tgz#a802875ac68884b4dbd2ad29c341f3f64f1fc3c5" + integrity sha512-QcCjCAHeTXSMlXm9tCc1iYyqPVVvP5hij2VNgFo79GmMjNN6mYHqiiCz0tWKMQM+T4soRXlvrqWWTpo8AlUvQg== dependencies: "@react-aria/focus" "^3.2.3" "@react-aria/utils" "^3.6.0" @@ -8426,15 +8767,19 @@ native-base@3.2.1: "@react-native-aria/focus" "^0.2.4" "@react-native-aria/interactions" "^0.2.2" "@react-native-aria/listbox" "^0.2.4-alpha.3" - "@react-native-aria/overlays" "^0.2.9" + "@react-native-aria/overlays" "^0.3.2" "@react-native-aria/radio" "^0.2.4" "@react-native-aria/slider" "^0.2.5-alpha.1" "@react-native-aria/tabs" "^0.2.7" - "@react-native-aria/utils" "^0.2.7" + "@react-native-aria/utils" "^0.2.8" + "@react-stately/checkbox" "^3.0.1" + "@react-stately/collections" "^3.3.0" "@react-stately/combobox" "^3.0.0-alpha.1" "@react-stately/radio" "^3.2.1" + "@react-stately/slider" "^3.0.1" + "@react-stately/tabs" "^3.0.0-alpha.1" + "@react-stately/toggle" "^3.2.1" "@types/lodash.has" "^4.5.6" - "@types/styled-system" "^5.1.9" lodash.clonedeep "^4.5.0" lodash.get "^4.4.2" lodash.has "^4.5.2" @@ -11524,9 +11869,9 @@ style-to-object@0.3.0, style-to-object@^0.3.0: inline-style-parser "0.1.1" styled-components@^5.3.0: - version "5.3.0" - resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.0.tgz#e47c3d3e9ddfff539f118a3dd0fd4f8f4fb25727" - integrity sha512-bPJKwZCHjJPf/hwTJl6TbkSZg/3evha+XPEizrZUGb535jLImwDUdjTNxXqjjaASt2M4qO4AVfoHJNe3XB/tpQ== + version "5.3.3" + resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.3.tgz#312a3d9a549f4708f0fb0edc829eb34bde032743" + integrity sha512-++4iHwBM7ZN+x6DtPPWkCI4vdtwumQ+inA/DdAsqYd4SVgUKJie5vXyzotA00ttcFdQkCng7zc6grwlfIfw+lw== dependencies: "@babel/helper-module-imports" "^7.0.0" "@babel/traverse" "^7.4.5" @@ -11905,6 +12250,11 @@ tslib@^2.0.3: resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.1.0.tgz#da60860f1c2ecaa5703ab7d39bc05b6bf988b97a" integrity sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A== +tslib@^2.1.0: + version "2.3.1" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01" + integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw== + tty-browserify@0.0.0: version "0.0.0" resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"