diff --git a/docs/alert.md b/docs/alert.md index f8e2766cd..8c3d0b47a 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. -- `Alert.Title`: The title of the alert to be announced by screen readers. -- `Alert.Description`: The description of the alert to be announced by screen readers. + + ```jsx import { Alert } from 'native-base'; diff --git a/docs/buildingSwipeList.md b/docs/buildingSwipeList.md index 130e14ed4..208a39a7d 100644 --- a/docs/buildingSwipeList.md +++ b/docs/buildingSwipeList.md @@ -12,133 +12,185 @@ Here is an example to show how easily and quickly we can use [react-native-swipe ```SnackPlayer name=SwipeList dependencies=react-native-swipe-list-view import React, { useState } from 'react'; -import { - Dimensions, - TouchableOpacity, - View, -} from 'react-native'; +import { Dimensions, TouchableOpacity, View } from 'react-native'; -import {NativeBaseProvider,Box, Text,Pressable,Heading,IconButton,Icon, HStack, Avatar } from 'native-base'; +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 } from '@expo/vector-icons'; +import { MaterialIcons, Ionicons, Entypo } from '@expo/vector-icons'; export default function App() { - const [mode, setMode] = useState('Basic'); - - return ( - - - Swipe list Example - - - - ); + const [mode, setMode] = useState('Basic'); + + return ( + + + + Inbox + + + + + ); } - function Basic() { - const [listData, setListData] = useState( - Array(20) - .fill('') - .map((_, i) => ({ key: `${i}`, text: `item #${i}` })) - ); - - const closeRow = (rowMap, rowKey) => { - if (rowMap[rowKey]) { - rowMap[rowKey].closeRow(); - } - }; - - const deleteRow = (rowMap, rowKey) => { - closeRow(rowMap, rowKey); - const newData = [...listData]; - const prevIndex = listData.findIndex(item => item.key === rowKey); - newData.splice(prevIndex, 1); - setListData(newData); - }; - - const onRowDidOpen = rowKey => { - console.log('This row opened', rowKey); - }; - - const renderItem = ({item, index}) => ( - - console.log('You touched me')} - alignItems= 'center' - bg="white" - borderBottomColor= 'trueGray.200' - borderBottomWidth= "1" - justifyContent= 'center' - height= "50" - underlayColor={'#AAA'} - _pressed={{ - bg:'trueGray.200' - }} - py={8} - > - - - - - {index} - - - {item.text} - - - - - - ); - - const renderHiddenItem = (data, rowMap) => ( - - closeRow(rowMap, data.item.key)} - _pressed={{ - opacity: 0.5 - }} - > - } color='white'/> - - deleteRow(rowMap, data.item.key)} - _pressed={{ - opacity: 0.5 - }} - > - } color="white" /> - - - ); - - return ( - - + 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: 'Sujitha Alexander', + 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 him 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/docs/buildingTabView.md b/docs/buildingTabView.md index e8b473e59..9835a1ea8 100644 --- a/docs/buildingTabView.md +++ b/docs/buildingTabView.md @@ -12,22 +12,26 @@ Here is an example to show how easily and quickly we can use [react-native-tab-v ```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 { + View, + StyleSheet, + Dimensions, + StatusBar, + TouchableOpacity, + Animated, + Pressable, +} from 'react-native'; import { TabView, SceneMap } from 'react-native-tab-view'; -import {NativeBaseProvider,Box, Text} from 'native-base'; +import { NativeBaseProvider, Box, Text, Center } from 'native-base'; import Constants from 'expo-constants'; -const FirstRoute = () => ( - -); +const FirstRoute = () =>
This is Tab 1
; -const SecondRoute = () => ( - -); +const SecondRoute = () =>
This is Tab 2
; -const ThirdRoute = () => ( - -); +const ThirdRoute = () =>
This is Tab 3
; + +const FourthRoute = () =>
This is Tab 4
; const initialLayout = { width: Dimensions.get('window').width }; @@ -35,18 +39,16 @@ 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: 'First' }, - { key: 'second', title: 'Second' }, - { key: 'third', title: 'Third' }, + { key: 'first', title: 'Tab 1' }, + { key: 'second', title: 'Tab 2' }, + { key: 'third', title: 'Tab 3' }, + { key: 'fourth', title: 'Tab 4' }, ]); const renderTabBar = (props) => { @@ -60,23 +62,25 @@ export default function TabViewExample() { 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} - + alignItems="center" + p="3" + cursor="pointer"> + { + console.log(i); + setIndex(i); + }}> + {route.title} + - ); })} @@ -85,17 +89,18 @@ export default function TabViewExample() { return ( - + ); } + ``` diff --git a/docs/builldingCard.md b/docs/builldingCard.md index 26c642b4b..1bb3e4440 100644 --- a/docs/builldingCard.md +++ b/docs/builldingCard.md @@ -32,6 +32,8 @@ import { MaterialIcons, Ionicons } from '@expo/vector-icons'; function CardComponent(){ return( - + 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 diff --git a/docs/migration/v3xtov32.md b/docs/migration/v3xtov32.md index e9e339091..6fe59487f 100644 --- a/docs/migration/v3xtov32.md +++ b/docs/migration/v3xtov32.md @@ -7,116 +7,38 @@ As we continue to improve NativeBase v3 we got a lot of feature requests and we 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: -## Option 1 - Extend previous version's theme for backward compatibility +## Extend previous version's theme for backward compatibility -You can use this CLI tool to upgrade to `v3.2.0` and run a codemmod that adds a backward compatible theme to your code. - -```bash -npx native-base-upgrade -``` - -Please follow the instructions after running this. The codemod will add a backward compatible theme to your `NativeBaseProvider`. - -If you want to do this manually, you can add this theme to your provider which preserves all the old token that were changed or removed in v3.2.0. +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 } from "native-base"; - -const compatibilityTheme = { - lineHeights: { - none: "1", - shorter: "1.25", - short: "1.375", - base: "1.5", - tall: "1.625", - taller: "2", - 3: "12px", - 4: "16px", - 5: "20px", - 6: "24px", - 7: "28px", - 8: "32px", - 9: "36px", - 10: "40px", - }, - letterSpacings: { - xxs: "-1.5", - xs: "-0.5", - sm: "0", - md: "0.1", - lg: "0.15", - xl: "0.25", - "2xl": "0.4", - "3xl": "0.5", - "4xl": "1.25", - "5xl": "1.5", - }, - fontSizes: { - xxs: "10", - }, - radii: { - sm: "2", - md: "4", - lg: "6", - xl: "8", - pill: "25", - }, - borderWidth: { - none: "0", - }, -}; +import { NativeBaseProvider, extendTheme, v3CompatibleTheme } from "native-base"; + // ... const yourCustomTheme = { // ... } ``` -## Option 2 - Upgrade manually with new theme tokens - -If you choose this option, you won't have to carry the baggage of older theme for compatibility. To upgrade manually to `v3.2.0`, follow these steps: +## Handling breaking changes -1. Find if any of the tokens on the left-hand side exist in your project for `lineHeight`, `letterSpacing`, `borderRadius` or `fontSize`, and replace them with the new values/tokens from the right-hand side: +Below is a rough account of the breaking API changes as well as the minimal change to migrate - ```js - { - // For lineHeight - "none": "1px", - "shorter": "1.25px", - "short": "1.375px", - "base": "1.5px", - "tall": "1.625px", - "taller": "2px", - "3": "12px", - "4": "2xs", - "5": "sm", - "6": "lg", - "7": "xl", - "8": "2xl", - "9": "36px", - "10": "3xl" - // For letterSpacing - "xxs": "2xs" +### Alert: - // For borderRadius - "sm": "xs", - "md": "sm", - "lg": "md", - "xl": "lg", - "pill": "25" +* Removed `Alert.Title`. Use `Text` component instead. +* Removed `Alert.Description`. Use `Text` component instead. - // For fontSize - "xxs": "2xs" - } - ``` +## Note: -2. 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: +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 @@ -142,14 +64,4 @@ If you choose this option, you won't have to carry the baggage of older theme fo } /> /* incorrect */ } name="md-checkmark-circle" /> - ``` - -## Option 3 - Use the upgrade tool with an experimental flag - -To upgrade to `v3.2.0` and also update your code according to the breaking changes introduced in `v3.2.0` without modifying your app's design, you can run the `native-base-upgrade` tool with an experimental flag. - -```bash -npx native-base-upgrade --experimental-inline-props -``` - -As the name suggests, this is an experimental flag and it doesn't handle all the cases. We strongly recommend that you check in your code to a version control software before running this and also verify the changes made by this tool. You might have to upgrade some of the things manually(as explained [here](#option-2---upgrade-manually-with-new-theme-tokens)) even after running this. + \ No newline at end of file diff --git a/docs/responsive.md b/docs/responsive.md index cfcc1a6be..4632e852a 100644 --- a/docs/responsive.md +++ b/docs/responsive.md @@ -3,7 +3,7 @@ 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. +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. diff --git a/docs/useToken.md b/docs/useToken.md index 06ff1d0ff..51f5400a6 100644 --- a/docs/useToken.md +++ b/docs/useToken.md @@ -15,21 +15,28 @@ import { useToken } from 'native-base'; ```SnackPlayer name=useToken%20Example import React from "react"; -import { Box, Text, useToken, NativeBaseProvider, Center } from "native-base"; +import { Box, Text, useToken, NativeBaseProvider, Center, HStack , VStack} from "native-base"; function UseTokenHookExample() { - const [warning1, red2] = useToken( + const [colorPick1, colorPick2] = useToken( // the key within the theme, in this case `theme.colors` "colors", // the subkey(s), resolving to `theme.colors.warning.1` - ["emerald.200", "red.400"] + ["yellow.500", "cyan.500"] // a single fallback or fallback array matching the length of the previous arg ); return ( - - wonderful gradients - + + + + {colorPick1} + + + + {colorPick2} + + ); } export default function () { diff --git a/docs/utilityProps.md b/docs/utilityProps.md index da84424a5..6eb0b4a94 100644 --- a/docs/utilityProps.md +++ b/docs/utilityProps.md @@ -69,36 +69,39 @@ import React from 'react'; import { Box as NBBox, NativeBaseProvider, Center, Text } from 'native-base'; const Box = (props) => { - return -} + 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 ❤️ NativeBase + {/* 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 */ } - + {/* verbose prop */} + ); } export default function () { return ( -
+
); } + ```
@@ -114,7 +117,7 @@ export default function () { :::tip Note -Above props can be written in the format: {color}:alpha-{opacityToken}, this gets converted into RGBA color format and the opacityToken is mapped to [`Opacity`](default-theme#opacity) +Above props can be written in the format: {color}:alpha-{opacityToken}, this gets converted into RGBA color format and the opacityToken is mapped to [`Opacity`](default-theme#opacity) ::: @@ -178,15 +181,15 @@ const Text = (props) => { function Component() { return ( <> - { /* font-size of `theme.fontSizes.md` */ } - Sample Text - { /* font-size `32px` */ } - Sample Text + { /* font-size of `theme.fontSizes.2xl` */ } + Thank You + { /* text decoration `underline` */ } + Merci Beaucoup { /* font-size `'2em'` */ } - { /* font-size of `theme.fontWeights.bold` */ } - Sample Text - { /* text-align `left` on all viewports and `center` from the first breakpoint and up */ } - Sample Text + { /* font-weight of `theme.fontWeights.semibold i.e. 600` */ } + Danke sehr + { /* letter-spacing `0.1 em` */ } + Arigatou ); } @@ -337,28 +340,29 @@ import React from 'react'; import { Box as NBBox, NativeBaseProvider, Center } from 'native-base'; const Box = (props) => { - return -} + return ; +}; function Component() { return ( <> - - - + + + ); } export default function () { return ( -
+
); } + ```
@@ -393,7 +397,7 @@ import React from 'react'; import { Box as NBBox, NativeBaseProvider, Center } from 'native-base'; const Box = (props) => { - return + return } function Component() { @@ -443,15 +447,15 @@ import React from 'react'; import { Box as NBBox, NativeBaseProvider, Center } from 'native-base'; const Box = (props) => { - return + return } function Component() { return ( <> - - + + ); } @@ -485,7 +489,7 @@ import React from 'react'; import { Box as NBBox, NativeBaseProvider, Center } from 'native-base'; const Box = (props) => { - return + return } function Component() { @@ -533,12 +537,13 @@ function Example() { ); } @@ -573,15 +578,16 @@ import { Button, NativeBaseProvider, Center } from 'native-base'; function Example() { return ( ); } @@ -618,18 +624,24 @@ import { Button, NativeBaseProvider, Center } from 'native-base'; function Example() { return ( - + color: 'warmGray.50', + }, + }, + }}> + Save + ); } diff --git a/nb-plugins/component-snackplayer/index.js b/nb-plugins/component-snackplayer/index.js index 124655c68..a67bc1cbf 100644 --- a/nb-plugins/component-snackplayer/index.js +++ b/nb-plugins/component-snackplayer/index.js @@ -18,7 +18,7 @@ const processNode = (node, parent) => { return new Promise(async (resolve, reject) => { try { const params = parseParams(node.meta); - const NBversion = '3.0.7'; + const NBversion = '3.2.0-alpha.4'; // Gather necessary Params let name = params.name ? decodeURIComponent(params.name) : 'Example'; const description = params.description diff --git a/versioned_docs/version-3.2.0/VStack.md b/versioned_docs/version-3.2.0/VStack.md index 837efa53c..94bc25cf0 100644 --- a/versioned_docs/version-3.2.0/VStack.md +++ b/versioned_docs/version-3.2.0/VStack.md @@ -1,5 +1,5 @@ --- -id: VStack +id: v-stack title: VStack / Column --- diff --git a/versioned_docs/version-3.2.0/ZStack.md b/versioned_docs/version-3.2.0/ZStack.md index 9f6969a7c..1daab38f9 100644 --- a/versioned_docs/version-3.2.0/ZStack.md +++ b/versioned_docs/version-3.2.0/ZStack.md @@ -1,3 +1,8 @@ +--- +id: z-stack +title: ZStack +--- + `ZStack` aligns items absolutely in the z-axis. ## Examples diff --git a/versioned_docs/version-3.2.0/accessibility.md b/versioned_docs/version-3.2.0/accessibility.md index a59a76697..3ccb492bb 100644 --- a/versioned_docs/version-3.2.0/accessibility.md +++ b/versioned_docs/version-3.2.0/accessibility.md @@ -11,7 +11,7 @@ NativeBase uses [React Native ARIA](https://react-native-aria.geekyants.com/) to ## Accessible Labels -When a view is marked as accessible, it is a good practice to set an `accessibilityLabel` on the view, so that people who use voice-over know what element they have selected. Voice-over will read this string when a user selects the associated element. NativeBase with the use of [React Native ARIA](https://www.notion.so/Accessibility-83852d7c4b094e69a3e4f1047994bd1c) does this for you out of the box. +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 diff --git a/versioned_docs/version-3.2.0/alertDialog.md b/versioned_docs/version-3.2.0/alertDialog.md index ce30060b1..27399a140 100644 --- a/versioned_docs/version-3.2.0/alertDialog.md +++ b/versioned_docs/version-3.2.0/alertDialog.md @@ -56,7 +56,7 @@ function AlertDialogComponent() { - @@ -71,7 +71,7 @@ function AlertDialogComponent() { export default function () { return ( -
+
@@ -122,7 +122,7 @@ function AlertDialogComponent() { export default function () { return ( -
+
@@ -142,16 +142,19 @@ AlertDialog and its components compose the **[Modal](modal.md)** component, so a | ------------------- | --------- | -------------------------------------------------------------- | ------- | | leastDestructiveRef | React.Ref | The least destructive action to get focus when dialog is open. | - | + ## Accessibility Adheres to the [Alert and Message Dialogs WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#alertdialog) ### Keyboard Interactions -| Name | Description | -| ----------- | --------------------------------------------------------- | -| Space | Opens/closes the dialog. | -| Enter | Opens/closes the dialog. | -| Tab | Moves focus to the next focusable element. | -| Shift + Tab | Moves focus to the previous focusable element. | -| Esc | Closes the dialog and moves focus to AlertDialog.Trigger. | +| Name | Description | +| --------------------|-------------| +| Space | Opens/closes the dialog. | +| Enter | Opens/closes the dialog. | +| Tab | Moves focus to the next focusable element. | +| Shift + Tab | Moves focus to the previous focusable element. | +| Esc | Closes the dialog and moves focus to AlertDialog.Trigger. | + + diff --git a/versioned_docs/version-3.2.0/appDrawer.md b/versioned_docs/version-3.2.0/appDrawer.md index 6890a689e..7e0afecbd 100644 --- a/versioned_docs/version-3.2.0/appDrawer.md +++ b/versioned_docs/version-3.2.0/appDrawer.md @@ -34,13 +34,13 @@ function AppDrawer(){ "forum", ]; - return + return {icons.map((icon) => ( } /> ))} diff --git a/versioned_docs/version-3.2.0/box.md b/versioned_docs/version-3.2.0/box.md index 5c884c1ef..e22130f75 100644 --- a/versioned_docs/version-3.2.0/box.md +++ b/versioned_docs/version-3.2.0/box.md @@ -41,7 +41,7 @@ export const Example = () => { end: [1, 0], }, }} - p={12} + p="12" rounded="lg" _text={{ fontSize: "md", @@ -63,7 +63,7 @@ const config = { export default () => { return ( -
+
@@ -89,7 +89,7 @@ const Example = () => { end: [1, 0], }, }} - p={12} + p="12" rounded="lg" _text={{ fontSize: 'md', fontWeight: 'bold', color: 'white' }} > diff --git a/versioned_docs/version-3.2.0/buildingAppBar.md b/versioned_docs/version-3.2.0/buildingAppBar.md index 9f43bfcc8..463c93df3 100644 --- a/versioned_docs/version-3.2.0/buildingAppBar.md +++ b/versioned_docs/version-3.2.0/buildingAppBar.md @@ -21,12 +21,12 @@ function AppBar(){ - - + + } color="white" />} /> - Home + Home - + } size='sm' color="white" />} /> } color="white" size='sm' />} /> diff --git a/versioned_docs/version-3.2.0/buildingDrawerNavigation.md b/versioned_docs/version-3.2.0/buildingDrawerNavigation.md index 5ee14a952..4e59c8e32 100644 --- a/versioned_docs/version-3.2.0/buildingDrawerNavigation.md +++ b/versioned_docs/version-3.2.0/buildingDrawerNavigation.md @@ -36,11 +36,11 @@ import { const Drawer = createDrawerNavigator(); function Component(props) { return ( - - props.navigation.toggleDrawer()} position="absolute" ml={2} zIndex={1}> - + + props.navigation.toggleDrawer()} position="absolute" ml="2" zIndex="1"> + -
+
{props.route.name}
@@ -69,72 +69,72 @@ const getIcon = (screenName) => { function CustomDrawerContent(props) { return ( - - + + Mail - john_doe@gmail.com + john_doe@gmail.com - } space={4}> - + } space="4"> + {props.state.routeNames.map((name, index) => ( { props.navigation.navigate(name); }} > - + } /> - + size="5" as={} /> + {name} ))} - - Labels - + + Labels + - + } /> - + size="5" as={} /> + Family - + } /> - + size="5" as={} /> + Friends - + } /> - + size="5" as={} /> + Work @@ -148,7 +148,7 @@ function CustomDrawerContent(props) { } function MyDrawer() { return ( - + } > diff --git a/versioned_docs/version-3.2.0/buildingFooterTabs.md b/versioned_docs/version-3.2.0/buildingFooterTabs.md index f2d847ae0..b696cf4a0 100644 --- a/versioned_docs/version-3.2.0/buildingFooterTabs.md +++ b/versioned_docs/version-3.2.0/buildingFooterTabs.md @@ -31,79 +31,79 @@ export default function App() { const [selected, setSelected] = React.useState(1); return ( - -
+ +
- + setSelected(0)} >
} color="white" size="xs" /> - Favorites + Favorites
setSelected(1)} >
} color="white" size="xs" /> - Music + Music
setSelected(2)} >
} color="white" size="xs" /> - Places + Places
setSelected(3)} >
} color="white" size="xs" /> - News + News
diff --git a/versioned_docs/version-3.2.0/buildingSearchBar.md b/versioned_docs/version-3.2.0/buildingSearchBar.md index be697f529..3949946af 100644 --- a/versioned_docs/version-3.2.0/buildingSearchBar.md +++ b/versioned_docs/version-3.2.0/buildingSearchBar.md @@ -21,39 +21,39 @@ import { FontAwesome5 } from '@expo/vector-icons'; function SearchBar(){ return ( - - + + Cupertino } />} + InputLeftElement={} />} /> - + Material } />} - InputRightElement={} />} + InputLeftElement={} />} + InputRightElement={} />} /> @@ -63,7 +63,7 @@ function SearchBar(){ export default function () { return ( -
+
diff --git a/versioned_docs/version-3.2.0/buildingSwipeList.md b/versioned_docs/version-3.2.0/buildingSwipeList.md index e40c81eba..208a39a7d 100644 --- a/versioned_docs/version-3.2.0/buildingSwipeList.md +++ b/versioned_docs/version-3.2.0/buildingSwipeList.md @@ -12,133 +12,185 @@ Here is an example to show how easily and quickly we can use [react-native-swipe ```SnackPlayer name=SwipeList dependencies=react-native-swipe-list-view import React, { useState } from 'react'; -import { - Dimensions, - TouchableOpacity, - View, -} from 'react-native'; +import { Dimensions, TouchableOpacity, View } from 'react-native'; -import {NativeBaseProvider,Box, Text,Pressable,Heading,IconButton,Icon, HStack, Avatar } from 'native-base'; +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 } from '@expo/vector-icons'; +import { MaterialIcons, Ionicons, Entypo } from '@expo/vector-icons'; export default function App() { - const [mode, setMode] = useState('Basic'); - - return ( - - - Swipe list Example - - - - ); + const [mode, setMode] = useState('Basic'); + + return ( + + + + Inbox + + + + + ); } - function Basic() { - const [listData, setListData] = useState( - Array(20) - .fill('') - .map((_, i) => ({ key: `${i}`, text: `item #${i}` })) - ); - - const closeRow = (rowMap, rowKey) => { - if (rowMap[rowKey]) { - rowMap[rowKey].closeRow(); - } - }; - - const deleteRow = (rowMap, rowKey) => { - closeRow(rowMap, rowKey); - const newData = [...listData]; - const prevIndex = listData.findIndex(item => item.key === rowKey); - newData.splice(prevIndex, 1); - setListData(newData); - }; - - const onRowDidOpen = rowKey => { - console.log('This row opened', rowKey); - }; - - const renderItem = ({item, index}) => ( - - console.log('You touched me')} - alignItems= 'center' - bg="white" - borderBottomColor= 'trueGray.200' - borderBottomWidth= {1} - justifyContent= 'center' - height= {50} - underlayColor={'#AAA'} - _pressed={{ - bg:'trueGray.200' - }} - py={8} - > - - - - - {index} - - - {item.text} - - - - - - ); - - const renderHiddenItem = (data, rowMap) => ( - - closeRow(rowMap, data.item.key)} - _pressed={{ - opacity: 0.5 - }} - > - } color='white'/> - - deleteRow(rowMap, data.item.key)} - _pressed={{ - opacity: 0.5 - }} - > - } color="white" /> - - - ); - - return ( - - + 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: 'Sujitha Alexander', + 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 him 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.0/buildingTabView.md b/versioned_docs/version-3.2.0/buildingTabView.md index 5b44cc656..9835a1ea8 100644 --- a/versioned_docs/version-3.2.0/buildingTabView.md +++ b/versioned_docs/version-3.2.0/buildingTabView.md @@ -12,22 +12,26 @@ Here is an example to show how easily and quickly we can use [react-native-tab-v ```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 { + View, + StyleSheet, + Dimensions, + StatusBar, + TouchableOpacity, + Animated, + Pressable, +} from 'react-native'; import { TabView, SceneMap } from 'react-native-tab-view'; -import {NativeBaseProvider,Box, Text} from 'native-base'; +import { NativeBaseProvider, Box, Text, Center } from 'native-base'; import Constants from 'expo-constants'; -const FirstRoute = () => ( - -); +const FirstRoute = () =>
This is Tab 1
; -const SecondRoute = () => ( - -); +const SecondRoute = () =>
This is Tab 2
; -const ThirdRoute = () => ( - -); +const ThirdRoute = () =>
This is Tab 3
; + +const FourthRoute = () =>
This is Tab 4
; const initialLayout = { width: Dimensions.get('window').width }; @@ -35,18 +39,16 @@ 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: 'First' }, - { key: 'second', title: 'Second' }, - { key: 'third', title: 'Third' }, + { key: 'first', title: 'Tab 1' }, + { key: 'second', title: 'Tab 2' }, + { key: 'third', title: 'Tab 3' }, + { key: 'fourth', title: 'Tab 4' }, ]); const renderTabBar = (props) => { @@ -60,23 +62,25 @@ export default function TabViewExample() { 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} - + borderBottomWidth="3" + borderColor={borderColor} + flex="1" + alignItems="center" + p="3" + cursor="pointer"> + { + console.log(i); + setIndex(i); + }}> + {route.title} + - ); })} @@ -85,17 +89,18 @@ export default function TabViewExample() { return ( - + ); } + ``` diff --git a/versioned_docs/version-3.2.0/builldingCard.md b/versioned_docs/version-3.2.0/builldingCard.md index 514b14c30..1bb3e4440 100644 --- a/versioned_docs/version-3.2.0/builldingCard.md +++ b/versioned_docs/version-3.2.0/builldingCard.md @@ -15,41 +15,87 @@ And lastly a description. ```SnackPlayer name=Card import React from "react"; -import { VStack, HStack, Avatar, Image, Text, NativeBaseProvider, -AspectRatio, Center, Box, Stack, Heading } from "native-base"; +import { + Box, + Heading, + Icon, + AspectRatio, + Image, + Text, + Center, + HStack, + Stack, + NativeBaseProvider +} from 'native-base'; +import { MaterialIcons, Ionicons } from '@expo/vector-icons'; function CardComponent(){ return( - image base - - NEWS - - - June 22, 2021 - - The Stunning Dawki River in Meghalaya is So Clear That Boats Appear - Floating in Air - - - With lush green meadows, rivers clear as crystal, pine-covered - hills, gorgeous waterfalls, lakes and majestic forests, the - mesmerizing. Meghalaya is truly a Nature lover’s paradise… + + + 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/versioned_docs/version-3.2.0/container.md b/versioned_docs/version-3.2.0/container.md index 5b34afdc3..a09ac47e5 100644 --- a/versioned_docs/version-3.2.0/container.md +++ b/versioned_docs/version-3.2.0/container.md @@ -38,7 +38,7 @@ function ContainerComponent() { export default function () { return ( -
+
diff --git a/versioned_docs/version-3.2.0/customizingComponents.md b/versioned_docs/version-3.2.0/customizingComponents.md index c78a88e27..472b38539 100644 --- a/versioned_docs/version-3.2.0/customizingComponents.md +++ b/versioned_docs/version-3.2.0/customizingComponents.md @@ -53,14 +53,14 @@ As shown above, we can customize components by passing the **components** object - As the name suggests, it's used to define the base style of a component. - Base style can be a function or a plain object. Use function if you want to get access to defaultProps, current colorMode (light/dark) and theme object. -Take a look at an [example here](https://github.com/GeekyAnts/NativeBase/blob/master/src/theme/components/button.ts#L5) +Take a look at an [example here](https://github.com/GeekyAnts/NativeBase/blob/v3.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/master/src/theme/components/button.ts#L201) +Take a look at an [example here](https://github.com/GeekyAnts/NativeBase/blob/v3.1.0/src/theme/components/button.ts#L201). ```jsx @@ -186,7 +186,7 @@ function BuildingAFormExample() { export default function () { return ( -
+
diff --git a/versioned_docs/version-3.2.0/nativebase.mdx b/versioned_docs/version-3.2.0/getting-started.mdx similarity index 97% rename from versioned_docs/version-3.2.0/nativebase.mdx rename to versioned_docs/version-3.2.0/getting-started.mdx index 67326a804..d94973ce3 100644 --- a/versioned_docs/version-3.2.0/nativebase.mdx +++ b/versioned_docs/version-3.2.0/getting-started.mdx @@ -1,5 +1,5 @@ --- -id: nativebase +id: getting-started title: Getting Started slug: / --- @@ -37,7 +37,7 @@ import TOCInline from '@theme/TOCInline'; /> diff --git a/versioned_docs/version-3.2.0/hStack.md b/versioned_docs/version-3.2.0/hStack.md index 276f3d442..d8e8c178d 100644 --- a/versioned_docs/version-3.2.0/hStack.md +++ b/versioned_docs/version-3.2.0/hStack.md @@ -1,5 +1,5 @@ --- -id: hStack +id: h-stack title: HStack / Row --- diff --git a/versioned_docs/version-3.2.0/hidden.md b/versioned_docs/version-3.2.0/hidden.md new file mode 100644 index 000000000..54cc8ec53 --- /dev/null +++ b/versioned_docs/version-3.2.0/hidden.md @@ -0,0 +1,125 @@ +--- +id: hidden +title: Hidden +--- + +import { ComponentTheme } from '../../src/components'; + +Hidden is used to toggle the visibility value of child components responsively, based on the colorMode or based on the platform. It doesn't mount the child components in the restricted values of props. + +## Import + +```jsx +import { Hidden } from 'native-base'; +``` + +## Example + +### Basic + +```jsx + + + This text will be always hidden. + + +``` + +### Hidden according to breakpoints + +```jsx +<> + + + This text will be hidden from sm to lg screens. + + + + + This text will be hidden on sm and lg screens only. + + + +``` + +### Hidden according to colorMode + +```SnackPlayer name=ColorMode%20Usage +import React from 'react'; +import { + useColorMode, + Button, + VStack, + Center, + Box,Text, + Hidden, + useColorModeValue, + NativeBaseProvider +} from 'native-base'; + +function ColorModeExample () { + const { colorMode, toggleColorMode } = useColorMode(); + return ( + <> + + + + + This text will be hidden on light mode + + + + + This text will be hidden on dark mode + + + + + ); +} + +const LocalWrapper = ({ children }) => { + const bg = useColorModeValue('gray.200', 'gray.800') + return ( +
+ {children} +
+ ); +}; + +export default function () { + return ( + + + + + + ); +} +``` + +## Hidden according to platform + +```jsx + + + This text will be hidden on android and web. + + +``` + +## Props + +```ComponentPropTable path=composites,Fab,Fab.tsx + +``` diff --git a/versioned_docs/version-3.2.0/icon.md b/versioned_docs/version-3.2.0/icon.md index b1438011d..4b19156e5 100644 --- a/versioned_docs/version-3.2.0/icon.md +++ b/versioned_docs/version-3.2.0/icon.md @@ -11,14 +11,6 @@ You can use icons in multiple ways in NativeBase: ## Examples -### NativeBase Icons - -We provides a set of commonly used interface icons. So you can directly use them in your project. All our icons are create using [`createIcon`](icon#createicon) function from NativeBase. - -```ComponentSnackPlayer path=primitives,Icon,AllIcons.tsx - -``` - ### Basic ```ComponentSnackPlayer path=primitives,Icon,Basic.tsx @@ -27,6 +19,14 @@ We provides a set of commonly used interface icons. So you can directly use them Apart from the icons provided by [@expo/vector-icon](https://github.com/expo/vector-icons), you can also create custom icons using SVG. You can use all the components from [react-native-svg](https://github.com/react-native-svg/react-native-svg). +### NativeBase Icons + +We provides a set of commonly used interface icons. So you can directly use them in your project. All our icons are create using [`createIcon`](icon#createicon) function from NativeBase. + +```ComponentSnackPlayer path=primitives,Icon,AllIcons.tsx + +``` + ### Custom Icon ```ComponentSnackPlayer path=primitives,Icon,CustomIcon.tsx diff --git a/versioned_docs/version-3.2.0/iconButton.md b/versioned_docs/version-3.2.0/iconButton.md index cc11f8c64..4de337741 100644 --- a/versioned_docs/version-3.2.0/iconButton.md +++ b/versioned_docs/version-3.2.0/iconButton.md @@ -40,4 +40,4 @@ import { ComponentTheme } from '../../src/components'; ## Accessibility - Use accessibilityLabel for labelling icon buttons to make sure it's announced by screen reader devices. -- IconButton has a `role` set to [button](https://www.w3.org/TR/wai-aria-practices-1.2/#button). +- IconButton has a `role` set to [button](https://www.w3.org/TR/wai-aria-practices-1.2/#button). \ No newline at end of file diff --git a/versioned_docs/version-3.2.0/install-cra.mdx b/versioned_docs/version-3.2.0/install-cra.mdx index 545b206a7..853c65e3a 100644 --- a/versioned_docs/version-3.2.0/install-cra.mdx +++ b/versioned_docs/version-3.2.0/install-cra.mdx @@ -86,7 +86,7 @@ Put the below code in your App.js import React from 'react'; import { NativeBaseProvider, Box } from 'native-base'; -function App() { +export default function App() { return ( Hello world diff --git a/versioned_docs/version-3.2.0/install-expo.mdx b/versioned_docs/version-3.2.0/install-expo.mdx index 4b77d6efe..9d29951b2 100644 --- a/versioned_docs/version-3.2.0/install-expo.mdx +++ b/versioned_docs/version-3.2.0/install-expo.mdx @@ -9,7 +9,42 @@ import { TileLink } from '../../src/components'; Expo helps you to create universal (iOS, Android and Web) React Native apps with no build configuration. -### Create a new expo project + + + +### Create a new project using Expo CLI with NativeBase template + +

Plain Javascript

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

With Typescript

+
+ +```bash +expo init my-app --template expo-template-native-base-typescript +``` + +
+ +Yey! you are all set, start editing App.js/App.tsx now. + + + + + + +### Create a new expo project if not exist ```bash npm install --global expo-cli @@ -28,7 +63,7 @@ cd my-project/ { label: 'npm', value: 'npm' } ]}> - + ```bash yarn add native-base styled-components styled-system @@ -62,7 +97,7 @@ Put the below code in your App.js import React from 'react'; import { NativeBaseProvider, Box } from 'native-base'; -function App() { +export default function App() { return ( Hello world @@ -71,6 +106,9 @@ function App() { } ``` + + +
minions clapping
diff --git a/versioned_docs/version-3.2.0/install-rn.mdx b/versioned_docs/version-3.2.0/install-rn.mdx index 68d0283a3..8ed3a885d 100644 --- a/versioned_docs/version-3.2.0/install-rn.mdx +++ b/versioned_docs/version-3.2.0/install-rn.mdx @@ -7,7 +7,44 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import { TileLink } from '../../src/components'; -### Create a new project + + + + +### Create a new project using ReactNative CLI with NativeBase template + +[Refer this link](https://github.com/react-native-community/cli#about) to get infomation about the React Native CLI. + +

Plain Javascript

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

With Typescript

+
+ +```bash +npx react-native init MyApp --template react-native-template-native-base-typescript +``` + +
+ +Yey! you are all set, start editing App.js/App.tsx now. + + + + + +### Create a new project if not exist ```bash npx react-native init AwesomeNativeBase @@ -56,7 +93,7 @@ Put the below code in your App.js import React from 'react'; import { NativeBaseProvider, Box } from 'native-base'; -function App() { +export default function App() { return ( Hello world @@ -65,6 +102,10 @@ 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 47d76f137..f1e1bb417 100644 --- a/versioned_docs/version-3.2.0/interaction-styles.mdx +++ b/versioned_docs/version-3.2.0/interaction-styles.mdx @@ -1,5 +1,5 @@ --- -id: interaction-styles +id: pseudo-props title: Pseudo props in Detail --- diff --git a/versioned_docs/version-3.2.0/link.md b/versioned_docs/version-3.2.0/link.md index 5e77da915..54182c3ee 100644 --- a/versioned_docs/version-3.2.0/link.md +++ b/versioned_docs/version-3.2.0/link.md @@ -65,4 +65,4 @@ Link implements **[Box](box.md)**, so all the Box Props can be passed to it. ## Accessibility -Adheres to the [Link WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#link) +Adheres to the [Link WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#link) \ No newline at end of file diff --git a/versioned_docs/version-3.2.0/loginsignupforms.md b/versioned_docs/version-3.2.0/loginsignupforms.md index dbd302238..75b491f6d 100644 --- a/versioned_docs/version-3.2.0/loginsignupforms.md +++ b/versioned_docs/version-3.2.0/loginsignupforms.md @@ -32,8 +32,8 @@ export default function App() { @@ -44,14 +44,14 @@ export default function App() { Sign in to continue! - + Email ID - + Password @@ -59,47 +59,47 @@ export default function App() { Forget Password? - + - - } - color='muted.700' - size='sm' - /> - } - /> - } - color='muted.700' - size="sm" - /> - } - /> - } - color='muted.700' - size="sm" - /> - } - /> + + } + color='muted.700' + size='sm' + /> + } + /> + } + color='muted.700' + size="sm" + /> + } + /> + } + color='muted.700' + size="sm" + /> + } + /> @@ -142,8 +142,8 @@ export default function App() { @@ -154,7 +154,7 @@ export default function App() { Sign up to continue! - + Email @@ -173,42 +173,42 @@ export default function App() { - + - - } - color='muted.700' - size='sm' - /> - } - /> - } - color='muted.700' - size="sm" - /> - } - /> - } - color='muted.700' - size="sm" - /> - } - /> + + } + color='muted.700' + size='sm' + /> + } + /> + } + color='muted.700' + size="sm" + /> + } + /> + } + color='muted.700' + size="sm" + /> + } + /> diff --git a/versioned_docs/version-3.2.0/menu.md b/versioned_docs/version-3.2.0/menu.md index 736456663..ba2b694e2 100644 --- a/versioned_docs/version-3.2.0/menu.md +++ b/versioned_docs/version-3.2.0/menu.md @@ -89,6 +89,7 @@ Extends `MenuItem`. + ## Accessibility -Adheres to the [Menu WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#menu) +Adheres to the [Menu WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#menu) \ No newline at end of file diff --git a/versioned_docs/version-3.2.0/migration/Button.md b/versioned_docs/version-3.2.0/migration/Button.md index 28d7e47de..a33b068df 100644 --- a/versioned_docs/version-3.2.0/migration/Button.md +++ b/versioned_docs/version-3.2.0/migration/Button.md @@ -12,7 +12,7 @@ Migrating [`Button`](button.mdx) to v3 will provide a lot more **design**, **siz Migrating Button components can broadly described in these points: -- No need to wrap you text inside `Text` component anymore. +- No need to wrap your text inside `Text` component anymore. - `isDisabled` prop can be used to disable the button. - Icons in Button: `leftIcon` and `rightIcon` are the new alternative to iconLeft and iconRight respectively and they accept **tsx.Element**. diff --git a/versioned_docs/version-3.2.0/migration/Guide.md b/versioned_docs/version-3.2.0/migration/v3.md similarity index 81% rename from versioned_docs/version-3.2.0/migration/Guide.md rename to versioned_docs/version-3.2.0/migration/v3.md index 2b3095055..ced3b4587 100644 --- a/versioned_docs/version-3.2.0/migration/Guide.md +++ b/versioned_docs/version-3.2.0/migration/v3.md @@ -1,16 +1,16 @@ --- -id: Guide -title: Guide to v3 +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 -- Features -- Themes +- [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. diff --git a/versioned_docs/version-3.2.0/migration/v31tov32.md b/versioned_docs/version-3.2.0/migration/v31tov32.md deleted file mode 100644 index d46c07a5c..000000000 --- a/versioned_docs/version-3.2.0/migration/v31tov32.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -id: v3.1.0-to-3.2.0 -title: Upgrading to 3.2.0 ---- - -As we continue to improve NativeBase v3 we got a lot of feature requests and we also reimagined our theme to make it more consistent, easy to understand, optimized and promote good practices while writing code. - -But like everything comes at a price, `version 3.2.0` also comes with a few breaking changes from 3.1.0 . But don't worry we don't want to leave all the hassel on to you therefore we have created a code mod that will run over your project and migrate to v3.2.0 where ever it can and notify you of what is left to be migrated if any. - -To upgrade to 3.2.0 just go into your root directory and run the below command. - -```bash -npx upgrade native-base-code-mode -``` - -:::caution - -The above **code mod** only works for migrating from **3.0.0 - 3.1.0 to 3.2.0** . I doesn't support migrating from v2 to v3 currently. - -::: - -### Log of Breaking Changes - -- Theme token changes - - ```js - // ------------------------- radius.ts ------------------------- - - Radius - "sm" -> "xs" - "md" -> "sm" - "lg" -> "md" - "xl" -> "lg" - "pill" -> "25" - - // ------------------------- typography.ts ------------------------- - letterSpacing - "xxs" -> "2xs" - - lineHeight - "none" -> "2xs" - "shorter" -> "sm" - "short" -> "md" - "base" -> "lg" - "tall" -> 26 - "taller" -> "2xl" - "3" -> 12 - "4" -> "2xs" - "5" -> "sm" - "6" -> "lg" - "7" -> "xl" - "8" -> "2xl" - "9" -> 36 - "10" -> "3xl" - - fontSizes - "xxs" -> "2xs" - ``` - -- All utility props now takes string values as valid type, number is no longer a valid value type. - - This means that if you pass any value that is a number into a utility prop, then it will be treated as invalid and based on you strictMode config will show you error, warning or just ignore it. - - ```js - // Incorrect Way to pass utility props - ❌ - - ``` - - ```js - // Correct Way to pass utility props - ✅ - ``` diff --git a/versioned_docs/version-3.2.0/migration/v3xtov32.md b/versioned_docs/version-3.2.0/migration/v3xtov32.md new file mode 100644 index 000000000..a8a5eaff6 --- /dev/null +++ b/versioned_docs/version-3.2.0/migration/v3xtov32.md @@ -0,0 +1,68 @@ +--- +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. + + +## 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/versioned_docs/version-3.2.0/nativebase-factory.md b/versioned_docs/version-3.2.0/nativebase-factory.md index 69ed5628f..56c3a0ed7 100644 --- a/versioned_docs/version-3.2.0/nativebase-factory.md +++ b/versioned_docs/version-3.2.0/nativebase-factory.md @@ -27,7 +27,7 @@ function FactoryViewExample () { export default function () { return ( -
+
@@ -56,7 +56,7 @@ function FactoryViewExample () { export default function () { return ( -
+
@@ -87,7 +87,7 @@ function FactoryViewModeExample () { export default function () { return ( -
+
@@ -130,7 +130,7 @@ function FactoryViewRefExample () { export default function () { return ( -
+
diff --git a/versioned_docs/version-3.2.0/nativebase-formik-ui.md b/versioned_docs/version-3.2.0/nativebase-formik-ui.md deleted file mode 100644 index e1b73f8e8..000000000 --- a/versioned_docs/version-3.2.0/nativebase-formik-ui.md +++ /dev/null @@ -1,83 +0,0 @@ ---- -id: nativebase-formik-ui -title: Formik ---- - -NativeBase provides [Form components](button.md) which can be easily integrated with Formik. - -Let's take an example using [FormControl](formControl.md) and [Input](input.md) components - -```SnackPlayer name=Formik-example dependencies=formik@2.2.9 -import { - VStack, - Input, - Button, - FormControl, - NativeBaseProvider, -} from 'native-base'; -import React from 'react'; -import { Formik } from 'formik'; - -const validate = (values) => { - const errors = {}; - - if (!values.firstName) { - errors.firstName = 'Required'; - } - - return errors; - }; - -function FormikExample() { - const onSubmit = (data) => { - console.log('submiting with ', data); - }; - - return ( - - {({ handleChange, handleBlur, handleSubmit, values, errors }) => ( - - - First Name - {console.log("errors" , errors)} - - - {errors.firstName} - - - - - Last Name - - - {errors.lastName} - - - - - - )} - - ); -} - -export default function () { - return ( - - - - ); -} -``` diff --git a/versioned_docs/version-3.2.0/overlay.md b/versioned_docs/version-3.2.0/overlay.md index 4dbcbad8c..f18adee91 100644 --- a/versioned_docs/version-3.2.0/overlay.md +++ b/versioned_docs/version-3.2.0/overlay.md @@ -35,7 +35,7 @@ function OverlayComponent () { export default function () { return ( -
+
@@ -79,7 +79,7 @@ function OverlayComponent () { export default function () { return ( -
+
diff --git a/versioned_docs/version-3.2.0/popOver.md b/versioned_docs/version-3.2.0/popOver.md index 40a7f4d36..031539fa8 100644 --- a/versioned_docs/version-3.2.0/popOver.md +++ b/versioned_docs/version-3.2.0/popOver.md @@ -85,10 +85,10 @@ Adheres to the [Dialog WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria- ### Keyboard Interactions -| Name | Description | -| ----------- | ------------------------------------------------------ | -| Space | Opens/closes the popover. | -| Enter | Opens/closes the popover. | -| Tab | Moves focus to the next focusable element. | -| Shift + Tab | Moves focus to the previous focusable element. | -| Esc | Closes the popover and moves focus to Popover.Trigger. | +| Name | Description | +| --------------------|-------------| +| Space | Opens/closes the popover. | +| Enter | Opens/closes the popover. | +| Tab | Moves focus to the next focusable element. | +| Shift + Tab | Moves focus to the previous focusable element. | +| Esc | Closes the popover and moves focus to Popover.Trigger. | \ No newline at end of file diff --git a/versioned_docs/version-3.2.0/pseudoProps.md b/versioned_docs/version-3.2.0/pseudoProps.md new file mode 100644 index 000000000..b3a570462 --- /dev/null +++ b/versioned_docs/version-3.2.0/pseudoProps.md @@ -0,0 +1,86 @@ +--- +id: pseudo-props-101 +title: Pseudo Props 101 +--- + +Before getting into details of all the common Pseudo Props NativeBase has to offer let's check some key points that these pseudo props follow. + +## Nesting pseudo props: + +In versions before 3.2.0 there was a set order in which pseudo props can be nested, but it had a some learning curve so we have simplified it. Pseudo props can now be nested in any combination with one small thing to keep in mind. + +Example: So assume you want to change the text color of a button on its hover state. + +### Do's + +```jsx + +``` + +### Dont's + +```jsx + +``` + +The above thing translates to a Text(not Button) when hovered changes its color to `secondary.400` . + +## Precedence Order for Pseudo Props: + +Now all the pseudo props follow a specific order that defines which pseudo prop can override the other pseudo prop. You can find the precedence values associated with each pseudo prop. Higher number means higher precedence. + +```jsx +_disabled(100); + +_pressed(70); +_hover(60); +_focus(50); +_focusVisible(55); + +_active(30); +_checked(30); +_readOnly(40); +_invalid(40); + +_web(10); +_android(10); +_ios(10); + +_light(10); +_dark(10); +``` + +```SnackPlayer name=Pseudo%20Props%20Precedence +import React from 'react'; +import { Button, NativeBaseProvider, Center } from 'native-base'; + +function Component() { + return ( + // Here you can see _hover will be overrided by _pressed + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` diff --git a/versioned_docs/version-3.2.0/psuedoProps.md b/versioned_docs/version-3.2.0/psuedoProps.md deleted file mode 100644 index 0a7d6a905..000000000 --- a/versioned_docs/version-3.2.0/psuedoProps.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: psuedo-props -title: Psuedo Props 101 ---- - -Before getting into details of all the common Psuedo Props NativeBase has to offer let's check some key points that these psuedo props follow. - -## Nesting psuedo props: - -In versions before 3.2.0 there was a set order in which psuedo props can be nested, but it had a steep learning curve therefore we decided to remove it now. Any psuedo prop can be now nested to any level. With one small thing to keep in mind. - -Example: So assume you want to change the text color of a button on its hover state. - -### Do's - -```jsx - -``` - -### Dont's - -```jsx - -``` - -The above thing translates to a Text(not Button) when hovered changes its color to `secondary.400` . - -## Precedence Order for Psuedo Props: - -Now all the psuedo props follows a specific order that defines which psuedo prop can override the other psuedo prop. You can find the precedence values associated with each psuedo prop. - -```jsx -_disabled(100); - -_pressed(70); -_hover(60); -_focus(50); -_focusVisible(55); - -_active(30); -_checked(30); -_readOnly(40); -_invalid(40); - -_web(10); -_android(10); -_ios(10); - -_light(10); -_dark(10); -``` diff --git a/versioned_docs/version-3.2.0/reactHooksForms.md b/versioned_docs/version-3.2.0/reactHooksForms.md deleted file mode 100644 index f4efec13c..000000000 --- a/versioned_docs/version-3.2.0/reactHooksForms.md +++ /dev/null @@ -1,565 +0,0 @@ ---- -id: react-hook-forms -title: React Hook Forms ---- - -A Performant, flexible and extensible forms with easy-to-use validation. And below are some examples showing its integration with NativeBase. - -## Usage - -```jsx -import { - VStack, - Input, - Button, - FormControl, - NativeBaseProvider, -} from 'native-base'; -import React from 'react'; -import { useForm, Controller } from 'react-hook-form'; - -function FormHookExample() { - const { control, handleSubmit, errors } = useForm(); - const onSubmit = (data) => { - console.log('submiting with ', data); - }; - return ( - - - First Name - ( - onChange(val)} - value={value} - /> - )} - name="firstName" - rules={{ required: 'Field is required', minLength: 3 }} - defaultValue="" - /> - - {errors.firstName?.message} - - - - Last Name - ( - onChange(val)} - value={value} - /> - )} - name="lastName" - defaultValue="" - /> - - {errors.lastName?.message} - - - - Age - ( - onChange(val)} - value={value} - /> - )} - name="age" - rules={{ min: 18, required: 'Age is required' }} - defaultValue="" - /> - - {errors.age?.type === 'required' - ? errors.age?.message - : errors.age?.type === 'min' ?? 'Under age'} - - - - - ); -} -export default function () { - return ( - - - - ); -} -``` - -## Radio and Checkbox - -```jsx -import { - VStack, - Button, - FormControl, - Radio, - Checkbox, - Text, - Icon, - NativeBaseProvider, -} from 'native-base'; -import React from 'react'; -import { useForm, Controller } from 'react-hook-form'; - -function FormHookCheckboxExample() { - const { control, handleSubmit, errors } = useForm(); - const onSubmit = (data) => { - console.log('submiting with ', data); - }; - return ( - - - Hobbies - ( - { - onChange(values); - }} - flexDirection="row" - > - } - > - Darts - - } - > - Movie - - } - > - Camping - - - } - > - Chess - - - )} - rules={{ required: 'Atleast 1 hobbie needed' }} - name="hobbies" - defaultValue="" - /> - - {errors.hobbies?.message} - - - - Gender - ( - onChange(val)} - > - - Male - - - Female - - - )} - name="gender" - rules={{ required: 'Gender is required' }} - /> - - {errors.gender?.message} - - - - - ); -} -export default function () { - return ( - - - - ); -} -``` - -## Select - -```jsx -import { - VStack, - Button, - FormControl, - Select, - Icon, - NativeBaseProvider, -} from 'native-base'; -import React from 'react'; -import { useForm, Controller } from 'react-hook-form'; - -function FormHookSelectExample() { - const { control, handleSubmit, errors } = useForm(); - const onSubmit = (data) => { - console.log('submiting with ', data); - }; - return ( - - - Fav language: - ( - - )} - name="language" - rules={{ required: 'Field is required' }} - defaultValue="js" - /> - - {errors.language?.message} - - - - - ); -} -export default function () { - return ( - - - - ); -} -``` - -## Slider - -```jsx -import { - VStack, - Button, - FormControl, - Slider, - NativeBaseProvider, -} from 'native-base'; -import React from 'react'; -import { useForm, Controller } from 'react-hook-form'; - -function FormHookSliderExample() { - const { control, handleSubmit, errors } = useForm(); - const onSubmit = (data) => { - console.log('submiting with ', data); - }; - return ( - - - Amount you like NativeBase - ( - onChange(val)} defaultValue={value}> - - - - - - )} - name="like" - rules={{ required: 'Field is required', minLength: 3 }} - defaultValue={100} - /> - - {errors.like?.message} - - - - - ); -} -export default function () { - return ( - - - - ); -} -``` - -## Textarea - -```jsx -import { - VStack, - Button, - FormControl, - TextArea, - NativeBaseProvider, -} from 'native-base'; -import React from 'react'; -import { useForm, Controller } from 'react-hook-form'; - -function FormHookTextareaExample() { - const { control, handleSubmit, errors } = useForm(); - const onSubmit = (data) => { - console.log('submiting with ', data); - }; - return ( - - - What do you think? - ( -