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/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/builldingCard.md b/docs/builldingCard.md index fa2ed75aa..c99468b41 100644 --- a/docs/builldingCard.md +++ b/docs/builldingCard.md @@ -13,91 +13,6 @@ Followed by the image which flows till the very edge. And lastly a description. -```SnackPlayer name=Card -import React from "react"; -import { - Box, - Heading, - Icon, - AspectRatio, - Image, - Text, - Center, - HStack, - Stack, - NativeBaseProvider -} from 'native-base'; -import { MaterialIcons, Ionicons } from '@expo/vector-icons'; +```ComponentSnackPlayer path=components,primitives,Box,composition.tsx -function CardComponent(){ - 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 - - - - - - ); -} - -export default function () { - return ( - -
- -
- - ); -} ``` diff --git a/docs/button.mdx b/docs/button.mdx index 9e25eaec8..0723959b3 100644 --- a/docs/button.mdx +++ b/docs/button.mdx @@ -20,43 +20,43 @@ import { Button, ButtonGroup } from 'native-base'; ### 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 +```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 ef7c73dfe..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/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/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 7c8e5bd0d..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 diff --git a/docs/icon.md b/docs/icon.md index adb66fc9d..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,27 +23,27 @@ 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 ``` - +``` ## Props diff --git a/docs/iconButton.md b/docs/iconButton.md index b297da8aa..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 ``` diff --git a/docs/image.md b/docs/image.md index 550e56ec4..d9ac6cb47 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 ``` 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/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 067e9aa00..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 - - - - Forgot 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/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 fafcf1a6f..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 bd1df8684..659ea9181 100644 --- a/docs/popOver.md +++ b/docs/popOver.md @@ -25,19 +25,19 @@ 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 ``` 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/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 6e3ddd039..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
); 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 d5aef6f9d..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 ``` 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 bce67ae50..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 ``` 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 4bd38cc88..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 ``` 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 812db8a6d..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 9783748b9..3226a6437 100644 --- a/docs/useColorMode.md +++ b/docs/useColorMode.md @@ -13,43 +13,7 @@ import { useColorMode } from 'native-base'; ## Example -```SnackPlayer name=useColorMode -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,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 462bbe3dc..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 651c09642..07b15d678 100644 --- a/docs/useDisclosure.md +++ b/docs/useDisclosure.md @@ -13,51 +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 6e3063ebf..ff9a86dcb 100644 --- a/docs/useMediaQuery.md +++ b/docs/useMediaQuery.md @@ -15,411 +15,20 @@ import { useMediaQuery } from 'native-base'; ### max-height -```SnackPlayer name=useMediaQuery%20Usage(max-height) -import React from "react"; -import { Text, useMediaQuery, NativeBaseProvider, Box, HStack, AspectRatio, Stack, Heading, Image, 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, Box, HStack, Stack, AspectRatio, Heading, Image, 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, Box, HStack, Stack, AspectRatio, Heading, Image, 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/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/utils/index.js b/nb-plugins/utils/index.js index 5a849ae55..872f340b8 100644 --- a/nb-plugins/utils/index.js +++ b/nb-plugins/utils/index.js @@ -12,7 +12,7 @@ const prettier = require('prettier'); const repoPath = path.resolve(__dirname, '..', '..', 'NativeBase'); const storybookExamplePath = (repoPath) => - path.resolve(repoPath, 'example', 'storybook', 'stories', 'components'); + path.resolve(repoPath, 'example', 'storybook', 'stories'); const componentsRootPath = (repoPath) => path.resolve(repoPath, 'src', 'components');