diff --git a/docs/3.0.x/kitchen-sink.mdx b/docs/3.0.x/kitchen-sink.mdx index 1396d3917..ecca7b82c 100644 --- a/docs/3.0.x/kitchen-sink.mdx +++ b/docs/3.0.x/kitchen-sink.mdx @@ -8,7 +8,11 @@ import { KitchenSinkIframe, TileLink, NBHistory } from "../../src/components"; - + Kitchen Sink is a comprehensive demo app showcasing all the NativeBase components in action. It includes buttons, forms, icons and much more! @@ -20,9 +24,18 @@ import { KitchenSinkIframe, TileLink, NBHistory } from "../../src/components"; direction={{ base: "column", md: "row" }} > - + Scan with the - expo icon + expo icon {" "} Expo app on your Android device to see the special dish we cooked for diff --git a/docs/3.0.x/migration/action-sheet.md b/docs/3.0.x/migration/action-sheet.md index 86d49e720..d20c28299 100644 --- a/docs/3.0.x/migration/action-sheet.md +++ b/docs/3.0.x/migration/action-sheet.md @@ -10,7 +10,7 @@ We have sliced [`Actionsheet`](/action-sheet) into multiple smaller component wh Migrating Checkbox components can broadly described in these points: - **options** (prop) → `Actionsheet.Item` (component). -- Props like **cancelButtonIndex**, **cancelButtonIndex** are _no longer required_ as components like `Actionsheet.Item` can be customised as per need. +- Props like **cancelButtonIndex** are _no longer required_ as components like `Actionsheet.Item` can be customised as per need. - **title** (prop) → NativeBase components such as `Heading` and `Text` can be used inside `ActionSheet.Content` to show the title. - Declarative approach to show and hide using `isOpen` prop, instead of `show()` and `hide()`. @@ -25,7 +25,7 @@ values={[ ```tsx -import React, { Component } from 'react'; +import React, { Component } from "react"; import { Container, Header, @@ -33,8 +33,8 @@ import { Content, ActionSheet, Text, -} from 'native-base'; -var BUTTONS = ['Option 1', 'Option 2', 'Option 3', 'Delete', 'Cancel']; +} from "native-base"; +var BUTTONS = ["Option 1", "Option 2", "Option 3", "Delete", "Cancel"]; var DESTRUCTIVE_INDEX = 3; var CANCEL_INDEX = 4; export default class ActionSheetExample extends Component { @@ -53,7 +53,7 @@ export default class ActionSheetExample extends Component { options: BUTTONS, cancelButtonIndex: CANCEL_INDEX, destructiveButtonIndex: DESTRUCTIVE_INDEX, - title: 'Header', + title: "Header", }, (buttonIndex) => { this.setState({ clicked: BUTTONS[buttonIndex] }); @@ -74,8 +74,8 @@ export default class ActionSheetExample extends Component { ```tsx -import React from 'react'; -import { Button, Actionsheet, useDisclose } from 'native-base'; +import React from "react"; +import { Button, Actionsheet, useDisclose } from "native-base"; export default function () { const { isOpen, onOpen, onClose } = useDisclose(); diff --git a/docs/3.0.x/migration/button.md b/docs/3.0.x/migration/button.md index 7214bbc66..e09244c3c 100644 --- a/docs/3.0.x/migration/button.md +++ b/docs/3.0.x/migration/button.md @@ -16,7 +16,7 @@ Migrating Button components can broadly described in these points: - Colors of the Buttons: In v3 the color is controlled by `colorScheme` prop. So all the color providing props [ **light**, **info**, **success**, **warning**, **danger** and **dark** ] can be passed as value (and more) to `colorScheme` props. - Design of the Button: - With v3 we're providing some mostly frequently used designs as `variants` [ **solid**, **outline**, **ghost**, **link** and **unstyled** ] and lot more customisation. + With v3 we're providing some most frequently used designs as `variants` [ **solid**, **outline**, **ghost**, **link** and **unstyled** ] and lot more customisation. - Sizes of the Button: In v3 the size is controlled by `size` prop. And it accepts pre-defined sizes [ like xs, sm md, lg ] and also custom values. diff --git a/docs/3.0.x/migration/fab.md b/docs/3.0.x/migration/fab.md index 183cc1b57..3d4f698f6 100644 --- a/docs/3.0.x/migration/fab.md +++ b/docs/3.0.x/migration/fab.md @@ -2,7 +2,7 @@ Migrating [`FAB`](/fab) to v3 will provide a lot more **design**, **size**, **co ## Overview -Migrating Badge components can broadly described in these points: +Migrating Fab components can broadly described in these points: - Instead of Passing Icon as child, use `icon` prop. @@ -17,8 +17,8 @@ values={[ ```tsx -import React, { Component } from 'react'; -import { Container, Header, View, Icon, Fab } from 'native-base'; +import React, { Component } from "react"; +import { Container, Header, View, Icon, Fab } from "native-base"; export default function () { return ( @@ -26,7 +26,7 @@ export default function () { @@ -41,8 +41,8 @@ export default function () { ```tsx -import React from 'react'; -import { Fab, Icon } from 'native-base'; +import React from "react"; +import { Fab, Icon } from "native-base"; export default function () { return ( diff --git a/docs/3.1.x/kitchen-sink.mdx b/docs/3.1.x/kitchen-sink.mdx index 1396d3917..ecca7b82c 100644 --- a/docs/3.1.x/kitchen-sink.mdx +++ b/docs/3.1.x/kitchen-sink.mdx @@ -8,7 +8,11 @@ import { KitchenSinkIframe, TileLink, NBHistory } from "../../src/components"; - + Kitchen Sink is a comprehensive demo app showcasing all the NativeBase components in action. It includes buttons, forms, icons and much more! @@ -20,9 +24,18 @@ import { KitchenSinkIframe, TileLink, NBHistory } from "../../src/components"; direction={{ base: "column", md: "row" }} > - + Scan with the - expo icon + expo icon {" "} Expo app on your Android device to see the special dish we cooked for diff --git a/docs/3.1.x/migration/action-sheet.md b/docs/3.1.x/migration/action-sheet.md index 86d49e720..d20c28299 100644 --- a/docs/3.1.x/migration/action-sheet.md +++ b/docs/3.1.x/migration/action-sheet.md @@ -10,7 +10,7 @@ We have sliced [`Actionsheet`](/action-sheet) into multiple smaller component wh Migrating Checkbox components can broadly described in these points: - **options** (prop) → `Actionsheet.Item` (component). -- Props like **cancelButtonIndex**, **cancelButtonIndex** are _no longer required_ as components like `Actionsheet.Item` can be customised as per need. +- Props like **cancelButtonIndex** are _no longer required_ as components like `Actionsheet.Item` can be customised as per need. - **title** (prop) → NativeBase components such as `Heading` and `Text` can be used inside `ActionSheet.Content` to show the title. - Declarative approach to show and hide using `isOpen` prop, instead of `show()` and `hide()`. @@ -25,7 +25,7 @@ values={[ ```tsx -import React, { Component } from 'react'; +import React, { Component } from "react"; import { Container, Header, @@ -33,8 +33,8 @@ import { Content, ActionSheet, Text, -} from 'native-base'; -var BUTTONS = ['Option 1', 'Option 2', 'Option 3', 'Delete', 'Cancel']; +} from "native-base"; +var BUTTONS = ["Option 1", "Option 2", "Option 3", "Delete", "Cancel"]; var DESTRUCTIVE_INDEX = 3; var CANCEL_INDEX = 4; export default class ActionSheetExample extends Component { @@ -53,7 +53,7 @@ export default class ActionSheetExample extends Component { options: BUTTONS, cancelButtonIndex: CANCEL_INDEX, destructiveButtonIndex: DESTRUCTIVE_INDEX, - title: 'Header', + title: "Header", }, (buttonIndex) => { this.setState({ clicked: BUTTONS[buttonIndex] }); @@ -74,8 +74,8 @@ export default class ActionSheetExample extends Component { ```tsx -import React from 'react'; -import { Button, Actionsheet, useDisclose } from 'native-base'; +import React from "react"; +import { Button, Actionsheet, useDisclose } from "native-base"; export default function () { const { isOpen, onOpen, onClose } = useDisclose(); diff --git a/docs/3.1.x/migration/button.md b/docs/3.1.x/migration/button.md index 7214bbc66..e09244c3c 100644 --- a/docs/3.1.x/migration/button.md +++ b/docs/3.1.x/migration/button.md @@ -16,7 +16,7 @@ Migrating Button components can broadly described in these points: - Colors of the Buttons: In v3 the color is controlled by `colorScheme` prop. So all the color providing props [ **light**, **info**, **success**, **warning**, **danger** and **dark** ] can be passed as value (and more) to `colorScheme` props. - Design of the Button: - With v3 we're providing some mostly frequently used designs as `variants` [ **solid**, **outline**, **ghost**, **link** and **unstyled** ] and lot more customisation. + With v3 we're providing some most frequently used designs as `variants` [ **solid**, **outline**, **ghost**, **link** and **unstyled** ] and lot more customisation. - Sizes of the Button: In v3 the size is controlled by `size` prop. And it accepts pre-defined sizes [ like xs, sm md, lg ] and also custom values. diff --git a/docs/3.1.x/migration/fab.md b/docs/3.1.x/migration/fab.md index 183cc1b57..3d4f698f6 100644 --- a/docs/3.1.x/migration/fab.md +++ b/docs/3.1.x/migration/fab.md @@ -2,7 +2,7 @@ Migrating [`FAB`](/fab) to v3 will provide a lot more **design**, **size**, **co ## Overview -Migrating Badge components can broadly described in these points: +Migrating Fab components can broadly described in these points: - Instead of Passing Icon as child, use `icon` prop. @@ -17,8 +17,8 @@ values={[ ```tsx -import React, { Component } from 'react'; -import { Container, Header, View, Icon, Fab } from 'native-base'; +import React, { Component } from "react"; +import { Container, Header, View, Icon, Fab } from "native-base"; export default function () { return ( @@ -26,7 +26,7 @@ export default function () { @@ -41,8 +41,8 @@ export default function () { ```tsx -import React from 'react'; -import { Fab, Icon } from 'native-base'; +import React from "react"; +import { Fab, Icon } from "native-base"; export default function () { return ( diff --git a/docs/3.2.x/building-search-bar.md b/docs/3.2.x/building-search-bar.md index b01c8f850..bbcaf7672 100644 --- a/docs/3.2.x/building-search-bar.md +++ b/docs/3.2.x/building-search-bar.md @@ -13,7 +13,7 @@ Here are some examples to show how easily and quickly we can create so many type ![https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b4c4662d-8a9c-48a2-817d-000ff8f5f6b6/Screenshot_2021-01-18_at_7.51.08_PM.png](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b4c4662d-8a9c-48a2-817d-000ff8f5f6b6/Screenshot_2021-01-18_at_7.51.08_PM.png) --> ```jsx isLive -import React from 'react'; +import React from "react"; import { VStack, Input, @@ -26,9 +26,9 @@ import { Box, Divider, Heading, -} from 'native-base'; -import { Ionicons, MaterialIcons } from '@expo/vector-icons'; -import { FontAwesome5 } from '@expo/vector-icons'; +} from "native-base"; +import { Ionicons, MaterialIcons } from "@expo/vector-icons"; +import { FontAwesome5 } from "@expo/vector-icons"; function SearchBar() { return ( @@ -52,10 +52,9 @@ function SearchBar() { py="1" px="2" placeholderTextColor="gray.500" - _hover={{ bg: 'gray.200', borderWidth: 0 }} - borderWidth="0" + _hover={{ bg: "gray.200", borderWidth: 0 }} _web={{ - _focus: { style: { boxShadow: 'none' } }, + _focus: { style: { boxShadow: "none" } }, }} InputLeftElement={ - + Kitchen Sink is a comprehensive demo app showcasing all the NativeBase components in action. It includes buttons, forms, icons and much more! @@ -20,9 +24,18 @@ import { KitchenSinkIframe, TileLink, NBHistory } from "../../src/components"; direction={{ base: "column", md: "row" }} > - + Scan with the - expo icon + expo icon {" "} Expo app on your Android device to see the special dish we cooked for diff --git a/docs/3.2.x/migration/action-sheet.md b/docs/3.2.x/migration/action-sheet.md index 86d49e720..d20c28299 100644 --- a/docs/3.2.x/migration/action-sheet.md +++ b/docs/3.2.x/migration/action-sheet.md @@ -10,7 +10,7 @@ We have sliced [`Actionsheet`](/action-sheet) into multiple smaller component wh Migrating Checkbox components can broadly described in these points: - **options** (prop) → `Actionsheet.Item` (component). -- Props like **cancelButtonIndex**, **cancelButtonIndex** are _no longer required_ as components like `Actionsheet.Item` can be customised as per need. +- Props like **cancelButtonIndex** are _no longer required_ as components like `Actionsheet.Item` can be customised as per need. - **title** (prop) → NativeBase components such as `Heading` and `Text` can be used inside `ActionSheet.Content` to show the title. - Declarative approach to show and hide using `isOpen` prop, instead of `show()` and `hide()`. @@ -25,7 +25,7 @@ values={[ ```tsx -import React, { Component } from 'react'; +import React, { Component } from "react"; import { Container, Header, @@ -33,8 +33,8 @@ import { Content, ActionSheet, Text, -} from 'native-base'; -var BUTTONS = ['Option 1', 'Option 2', 'Option 3', 'Delete', 'Cancel']; +} from "native-base"; +var BUTTONS = ["Option 1", "Option 2", "Option 3", "Delete", "Cancel"]; var DESTRUCTIVE_INDEX = 3; var CANCEL_INDEX = 4; export default class ActionSheetExample extends Component { @@ -53,7 +53,7 @@ export default class ActionSheetExample extends Component { options: BUTTONS, cancelButtonIndex: CANCEL_INDEX, destructiveButtonIndex: DESTRUCTIVE_INDEX, - title: 'Header', + title: "Header", }, (buttonIndex) => { this.setState({ clicked: BUTTONS[buttonIndex] }); @@ -74,8 +74,8 @@ export default class ActionSheetExample extends Component { ```tsx -import React from 'react'; -import { Button, Actionsheet, useDisclose } from 'native-base'; +import React from "react"; +import { Button, Actionsheet, useDisclose } from "native-base"; export default function () { const { isOpen, onOpen, onClose } = useDisclose(); diff --git a/docs/3.2.x/migration/button.md b/docs/3.2.x/migration/button.md index 7214bbc66..e09244c3c 100644 --- a/docs/3.2.x/migration/button.md +++ b/docs/3.2.x/migration/button.md @@ -16,7 +16,7 @@ Migrating Button components can broadly described in these points: - Colors of the Buttons: In v3 the color is controlled by `colorScheme` prop. So all the color providing props [ **light**, **info**, **success**, **warning**, **danger** and **dark** ] can be passed as value (and more) to `colorScheme` props. - Design of the Button: - With v3 we're providing some mostly frequently used designs as `variants` [ **solid**, **outline**, **ghost**, **link** and **unstyled** ] and lot more customisation. + With v3 we're providing some most frequently used designs as `variants` [ **solid**, **outline**, **ghost**, **link** and **unstyled** ] and lot more customisation. - Sizes of the Button: In v3 the size is controlled by `size` prop. And it accepts pre-defined sizes [ like xs, sm md, lg ] and also custom values. diff --git a/docs/3.2.x/migration/fab.md b/docs/3.2.x/migration/fab.md index 183cc1b57..3d4f698f6 100644 --- a/docs/3.2.x/migration/fab.md +++ b/docs/3.2.x/migration/fab.md @@ -2,7 +2,7 @@ Migrating [`FAB`](/fab) to v3 will provide a lot more **design**, **size**, **co ## Overview -Migrating Badge components can broadly described in these points: +Migrating Fab components can broadly described in these points: - Instead of Passing Icon as child, use `icon` prop. @@ -17,8 +17,8 @@ values={[ ```tsx -import React, { Component } from 'react'; -import { Container, Header, View, Icon, Fab } from 'native-base'; +import React, { Component } from "react"; +import { Container, Header, View, Icon, Fab } from "native-base"; export default function () { return ( @@ -26,7 +26,7 @@ export default function () { @@ -41,8 +41,8 @@ export default function () { ```tsx -import React from 'react'; -import { Fab, Icon } from 'native-base'; +import React from "react"; +import { Fab, Icon } from "native-base"; export default function () { return ( diff --git a/docs/3.3.x/building-search-bar.md b/docs/3.3.x/building-search-bar.md index 5167b1387..1f3e0732c 100644 --- a/docs/3.3.x/building-search-bar.md +++ b/docs/3.3.x/building-search-bar.md @@ -13,7 +13,7 @@ Here are some examples to show how easily and quickly we can create so many type ![https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b4c4662d-8a9c-48a2-817d-000ff8f5f6b6/Screenshot_2021-01-18_at_7.51.08_PM.png](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b4c4662d-8a9c-48a2-817d-000ff8f5f6b6/Screenshot_2021-01-18_at_7.51.08_PM.png) --> ```jsx isLive=true -import React from 'react'; +import React from "react"; import { VStack, Input, @@ -26,9 +26,9 @@ import { Box, Divider, Heading, -} from 'native-base'; -import { Ionicons, MaterialIcons } from '@expo/vector-icons'; -import { FontAwesome5 } from '@expo/vector-icons'; +} from "native-base"; +import { Ionicons, MaterialIcons } from "@expo/vector-icons"; +import { FontAwesome5 } from "@expo/vector-icons"; function SearchBar() { return ( @@ -52,7 +52,6 @@ function SearchBar() { borderRadius="10" py="1" px="2" - borderWidth="0" InputLeftElement={ - + Kitchen Sink is a comprehensive demo app showcasing all the NativeBase components in action. It includes buttons, forms, icons and much more! @@ -20,9 +24,18 @@ import { KitchenSinkIframe, TileLink, NBHistory } from "../../src/components"; direction={{ base: "column", md: "row" }} > - + Scan with the - expo icon + expo icon {" "} Expo app on your Android device to see the special dish we cooked for diff --git a/docs/3.3.x/migration/action-sheet.md b/docs/3.3.x/migration/action-sheet.md index 86d49e720..d20c28299 100644 --- a/docs/3.3.x/migration/action-sheet.md +++ b/docs/3.3.x/migration/action-sheet.md @@ -10,7 +10,7 @@ We have sliced [`Actionsheet`](/action-sheet) into multiple smaller component wh Migrating Checkbox components can broadly described in these points: - **options** (prop) → `Actionsheet.Item` (component). -- Props like **cancelButtonIndex**, **cancelButtonIndex** are _no longer required_ as components like `Actionsheet.Item` can be customised as per need. +- Props like **cancelButtonIndex** are _no longer required_ as components like `Actionsheet.Item` can be customised as per need. - **title** (prop) → NativeBase components such as `Heading` and `Text` can be used inside `ActionSheet.Content` to show the title. - Declarative approach to show and hide using `isOpen` prop, instead of `show()` and `hide()`. @@ -25,7 +25,7 @@ values={[ ```tsx -import React, { Component } from 'react'; +import React, { Component } from "react"; import { Container, Header, @@ -33,8 +33,8 @@ import { Content, ActionSheet, Text, -} from 'native-base'; -var BUTTONS = ['Option 1', 'Option 2', 'Option 3', 'Delete', 'Cancel']; +} from "native-base"; +var BUTTONS = ["Option 1", "Option 2", "Option 3", "Delete", "Cancel"]; var DESTRUCTIVE_INDEX = 3; var CANCEL_INDEX = 4; export default class ActionSheetExample extends Component { @@ -53,7 +53,7 @@ export default class ActionSheetExample extends Component { options: BUTTONS, cancelButtonIndex: CANCEL_INDEX, destructiveButtonIndex: DESTRUCTIVE_INDEX, - title: 'Header', + title: "Header", }, (buttonIndex) => { this.setState({ clicked: BUTTONS[buttonIndex] }); @@ -74,8 +74,8 @@ export default class ActionSheetExample extends Component { ```tsx -import React from 'react'; -import { Button, Actionsheet, useDisclose } from 'native-base'; +import React from "react"; +import { Button, Actionsheet, useDisclose } from "native-base"; export default function () { const { isOpen, onOpen, onClose } = useDisclose(); diff --git a/docs/3.3.x/migration/button.md b/docs/3.3.x/migration/button.md index 7214bbc66..e09244c3c 100644 --- a/docs/3.3.x/migration/button.md +++ b/docs/3.3.x/migration/button.md @@ -16,7 +16,7 @@ Migrating Button components can broadly described in these points: - Colors of the Buttons: In v3 the color is controlled by `colorScheme` prop. So all the color providing props [ **light**, **info**, **success**, **warning**, **danger** and **dark** ] can be passed as value (and more) to `colorScheme` props. - Design of the Button: - With v3 we're providing some mostly frequently used designs as `variants` [ **solid**, **outline**, **ghost**, **link** and **unstyled** ] and lot more customisation. + With v3 we're providing some most frequently used designs as `variants` [ **solid**, **outline**, **ghost**, **link** and **unstyled** ] and lot more customisation. - Sizes of the Button: In v3 the size is controlled by `size` prop. And it accepts pre-defined sizes [ like xs, sm md, lg ] and also custom values. diff --git a/docs/3.3.x/migration/fab.md b/docs/3.3.x/migration/fab.md index 183cc1b57..3d4f698f6 100644 --- a/docs/3.3.x/migration/fab.md +++ b/docs/3.3.x/migration/fab.md @@ -2,7 +2,7 @@ Migrating [`FAB`](/fab) to v3 will provide a lot more **design**, **size**, **co ## Overview -Migrating Badge components can broadly described in these points: +Migrating Fab components can broadly described in these points: - Instead of Passing Icon as child, use `icon` prop. @@ -17,8 +17,8 @@ values={[ ```tsx -import React, { Component } from 'react'; -import { Container, Header, View, Icon, Fab } from 'native-base'; +import React, { Component } from "react"; +import { Container, Header, View, Icon, Fab } from "native-base"; export default function () { return ( @@ -26,7 +26,7 @@ export default function () { @@ -41,8 +41,8 @@ export default function () { ```tsx -import React from 'react'; -import { Fab, Icon } from 'native-base'; +import React from "react"; +import { Fab, Icon } from "native-base"; export default function () { return ( diff --git a/docs/3.4.x/building-app-bar.md b/docs/3.4.x/building-app-bar.md index 619b618ab..b3e13bd5d 100644 --- a/docs/3.4.x/building-app-bar.md +++ b/docs/3.4.x/building-app-bar.md @@ -10,7 +10,7 @@ The top app bar provides content and actions related to the current screen. It We can easily create it using basic layout components from NativeBase. ```jsx isLive=true -import React from 'react'; +import React from "react"; import { VStack, HStack, @@ -22,16 +22,16 @@ import { Center, Box, StatusBar, -} from 'native-base'; -import { MaterialIcons } from '@expo/vector-icons'; +} from "native-base"; +import { MaterialIcons } from "@expo/vector-icons"; function AppBar() { return ( <> - + ```jsx isLive=true -import React from 'react'; +import React from "react"; import { VStack, Input, @@ -26,9 +26,9 @@ import { Box, Divider, Heading, -} from 'native-base'; -import { Ionicons, MaterialIcons } from '@expo/vector-icons'; -import { FontAwesome5 } from '@expo/vector-icons'; +} from "native-base"; +import { Ionicons, MaterialIcons } from "@expo/vector-icons"; +import { FontAwesome5 } from "@expo/vector-icons"; function SearchBar() { return ( @@ -52,7 +52,6 @@ function SearchBar() { borderRadius="10" py="1" px="2" - borderWidth="0" InputLeftElement={ - + Kitchen Sink is a comprehensive demo app showcasing all the NativeBase components in action. It includes buttons, forms, icons and much more! @@ -18,9 +22,18 @@ title: Kitchen Sink direction={{ base: "column", md: "row" }} > - + Scan with the - expo icon + expo icon {" "} Expo app on your Android device to see the special dish we cooked for diff --git a/docs/3.4.x/migration/action-sheet.md b/docs/3.4.x/migration/action-sheet.md index 86d49e720..d20c28299 100644 --- a/docs/3.4.x/migration/action-sheet.md +++ b/docs/3.4.x/migration/action-sheet.md @@ -10,7 +10,7 @@ We have sliced [`Actionsheet`](/action-sheet) into multiple smaller component wh Migrating Checkbox components can broadly described in these points: - **options** (prop) → `Actionsheet.Item` (component). -- Props like **cancelButtonIndex**, **cancelButtonIndex** are _no longer required_ as components like `Actionsheet.Item` can be customised as per need. +- Props like **cancelButtonIndex** are _no longer required_ as components like `Actionsheet.Item` can be customised as per need. - **title** (prop) → NativeBase components such as `Heading` and `Text` can be used inside `ActionSheet.Content` to show the title. - Declarative approach to show and hide using `isOpen` prop, instead of `show()` and `hide()`. @@ -25,7 +25,7 @@ values={[ ```tsx -import React, { Component } from 'react'; +import React, { Component } from "react"; import { Container, Header, @@ -33,8 +33,8 @@ import { Content, ActionSheet, Text, -} from 'native-base'; -var BUTTONS = ['Option 1', 'Option 2', 'Option 3', 'Delete', 'Cancel']; +} from "native-base"; +var BUTTONS = ["Option 1", "Option 2", "Option 3", "Delete", "Cancel"]; var DESTRUCTIVE_INDEX = 3; var CANCEL_INDEX = 4; export default class ActionSheetExample extends Component { @@ -53,7 +53,7 @@ export default class ActionSheetExample extends Component { options: BUTTONS, cancelButtonIndex: CANCEL_INDEX, destructiveButtonIndex: DESTRUCTIVE_INDEX, - title: 'Header', + title: "Header", }, (buttonIndex) => { this.setState({ clicked: BUTTONS[buttonIndex] }); @@ -74,8 +74,8 @@ export default class ActionSheetExample extends Component { ```tsx -import React from 'react'; -import { Button, Actionsheet, useDisclose } from 'native-base'; +import React from "react"; +import { Button, Actionsheet, useDisclose } from "native-base"; export default function () { const { isOpen, onOpen, onClose } = useDisclose(); diff --git a/docs/3.4.x/migration/button.md b/docs/3.4.x/migration/button.md index 7214bbc66..e09244c3c 100644 --- a/docs/3.4.x/migration/button.md +++ b/docs/3.4.x/migration/button.md @@ -16,7 +16,7 @@ Migrating Button components can broadly described in these points: - Colors of the Buttons: In v3 the color is controlled by `colorScheme` prop. So all the color providing props [ **light**, **info**, **success**, **warning**, **danger** and **dark** ] can be passed as value (and more) to `colorScheme` props. - Design of the Button: - With v3 we're providing some mostly frequently used designs as `variants` [ **solid**, **outline**, **ghost**, **link** and **unstyled** ] and lot more customisation. + With v3 we're providing some most frequently used designs as `variants` [ **solid**, **outline**, **ghost**, **link** and **unstyled** ] and lot more customisation. - Sizes of the Button: In v3 the size is controlled by `size` prop. And it accepts pre-defined sizes [ like xs, sm md, lg ] and also custom values. diff --git a/docs/3.4.x/migration/fab.md b/docs/3.4.x/migration/fab.md index 183cc1b57..3d4f698f6 100644 --- a/docs/3.4.x/migration/fab.md +++ b/docs/3.4.x/migration/fab.md @@ -2,7 +2,7 @@ Migrating [`FAB`](/fab) to v3 will provide a lot more **design**, **size**, **co ## Overview -Migrating Badge components can broadly described in these points: +Migrating Fab components can broadly described in these points: - Instead of Passing Icon as child, use `icon` prop. @@ -17,8 +17,8 @@ values={[ ```tsx -import React, { Component } from 'react'; -import { Container, Header, View, Icon, Fab } from 'native-base'; +import React, { Component } from "react"; +import { Container, Header, View, Icon, Fab } from "native-base"; export default function () { return ( @@ -26,7 +26,7 @@ export default function () { @@ -41,8 +41,8 @@ export default function () { ```tsx -import React from 'react'; -import { Fab, Icon } from 'native-base'; +import React from "react"; +import { Fab, Icon } from "native-base"; export default function () { return ( diff --git a/docs/next/building-app-bar.md b/docs/next/building-app-bar.md index 619b618ab..0787f0fad 100644 --- a/docs/next/building-app-bar.md +++ b/docs/next/building-app-bar.md @@ -10,7 +10,7 @@ The top app bar provides content and actions related to the current screen. It We can easily create it using basic layout components from NativeBase. ```jsx isLive=true -import React from 'react'; +import React from "react"; import { VStack, HStack, @@ -22,16 +22,16 @@ import { Center, Box, StatusBar, -} from 'native-base'; -import { MaterialIcons } from '@expo/vector-icons'; +} from "native-base"; +import { MaterialIcons } from "@expo/vector-icons"; function AppBar() { return ( <> - + ```jsx isLive=true -import React from 'react'; +import React from "react"; import { VStack, Input, @@ -26,9 +26,9 @@ import { Box, Divider, Heading, -} from 'native-base'; -import { Ionicons, MaterialIcons } from '@expo/vector-icons'; -import { FontAwesome5 } from '@expo/vector-icons'; +} from "native-base"; +import { Ionicons, MaterialIcons } from "@expo/vector-icons"; +import { FontAwesome5 } from "@expo/vector-icons"; function SearchBar() { return ( @@ -52,7 +52,6 @@ function SearchBar() { borderRadius="10" py="1" px="2" - borderWidth="0" InputLeftElement={ - + Kitchen Sink is a comprehensive demo app showcasing all the NativeBase components in action. It includes buttons, forms, icons and much more! @@ -18,9 +22,18 @@ title: Kitchen Sink direction={{ base: "column", md: "row" }} > - + Scan with the - expo icon + expo icon {" "} Expo app on your Android device to see the special dish we cooked for diff --git a/docs/next/migration/action-sheet.md b/docs/next/migration/action-sheet.md index 86d49e720..d20c28299 100644 --- a/docs/next/migration/action-sheet.md +++ b/docs/next/migration/action-sheet.md @@ -10,7 +10,7 @@ We have sliced [`Actionsheet`](/action-sheet) into multiple smaller component wh Migrating Checkbox components can broadly described in these points: - **options** (prop) → `Actionsheet.Item` (component). -- Props like **cancelButtonIndex**, **cancelButtonIndex** are _no longer required_ as components like `Actionsheet.Item` can be customised as per need. +- Props like **cancelButtonIndex** are _no longer required_ as components like `Actionsheet.Item` can be customised as per need. - **title** (prop) → NativeBase components such as `Heading` and `Text` can be used inside `ActionSheet.Content` to show the title. - Declarative approach to show and hide using `isOpen` prop, instead of `show()` and `hide()`. @@ -25,7 +25,7 @@ values={[ ```tsx -import React, { Component } from 'react'; +import React, { Component } from "react"; import { Container, Header, @@ -33,8 +33,8 @@ import { Content, ActionSheet, Text, -} from 'native-base'; -var BUTTONS = ['Option 1', 'Option 2', 'Option 3', 'Delete', 'Cancel']; +} from "native-base"; +var BUTTONS = ["Option 1", "Option 2", "Option 3", "Delete", "Cancel"]; var DESTRUCTIVE_INDEX = 3; var CANCEL_INDEX = 4; export default class ActionSheetExample extends Component { @@ -53,7 +53,7 @@ export default class ActionSheetExample extends Component { options: BUTTONS, cancelButtonIndex: CANCEL_INDEX, destructiveButtonIndex: DESTRUCTIVE_INDEX, - title: 'Header', + title: "Header", }, (buttonIndex) => { this.setState({ clicked: BUTTONS[buttonIndex] }); @@ -74,8 +74,8 @@ export default class ActionSheetExample extends Component { ```tsx -import React from 'react'; -import { Button, Actionsheet, useDisclose } from 'native-base'; +import React from "react"; +import { Button, Actionsheet, useDisclose } from "native-base"; export default function () { const { isOpen, onOpen, onClose } = useDisclose(); diff --git a/docs/next/migration/button.md b/docs/next/migration/button.md index 7214bbc66..e09244c3c 100644 --- a/docs/next/migration/button.md +++ b/docs/next/migration/button.md @@ -16,7 +16,7 @@ Migrating Button components can broadly described in these points: - Colors of the Buttons: In v3 the color is controlled by `colorScheme` prop. So all the color providing props [ **light**, **info**, **success**, **warning**, **danger** and **dark** ] can be passed as value (and more) to `colorScheme` props. - Design of the Button: - With v3 we're providing some mostly frequently used designs as `variants` [ **solid**, **outline**, **ghost**, **link** and **unstyled** ] and lot more customisation. + With v3 we're providing some most frequently used designs as `variants` [ **solid**, **outline**, **ghost**, **link** and **unstyled** ] and lot more customisation. - Sizes of the Button: In v3 the size is controlled by `size` prop. And it accepts pre-defined sizes [ like xs, sm md, lg ] and also custom values. diff --git a/docs/next/migration/fab.md b/docs/next/migration/fab.md index 183cc1b57..3d4f698f6 100644 --- a/docs/next/migration/fab.md +++ b/docs/next/migration/fab.md @@ -2,7 +2,7 @@ Migrating [`FAB`](/fab) to v3 will provide a lot more **design**, **size**, **co ## Overview -Migrating Badge components can broadly described in these points: +Migrating Fab components can broadly described in these points: - Instead of Passing Icon as child, use `icon` prop. @@ -17,8 +17,8 @@ values={[ ```tsx -import React, { Component } from 'react'; -import { Container, Header, View, Icon, Fab } from 'native-base'; +import React, { Component } from "react"; +import { Container, Header, View, Icon, Fab } from "native-base"; export default function () { return ( @@ -26,7 +26,7 @@ export default function () { @@ -41,8 +41,8 @@ export default function () { ```tsx -import React from 'react'; -import { Fab, Icon } from 'native-base'; +import React from "react"; +import { Fab, Icon } from "native-base"; export default function () { return ( diff --git a/redirects.json b/redirects.json index 6191fa946..d7d729817 100644 --- a/redirects.json +++ b/redirects.json @@ -14198,5 +14198,640 @@ "source": "/next/nb-icons", "destination": "/next/icon", "permanent": true + }, + { + "source": "/3.4.x/migration/alert", + "destination": "/3.4.x/alert", + "permanent": true + }, + { + "source": "/3.4.x/migration/alert-dialog", + "destination": "/3.4.x/alert-dialog", + "permanent": true + }, + { + "source": "/3.4.x/migration/aspect-ratio", + "destination": "/3.4.x/aspect-ratio", + "permanent": true + }, + { + "source": "/3.4.x/migration/avatar", + "destination": "/3.4.x/avatar", + "permanent": true + }, + { + "source": "/3.4.x/migration/box", + "destination": "/3.4.x/box", + "permanent": true + }, + { + "source": "/3.4.x/migration/breakpoints", + "destination": "/3.4.x/breakpoints", + "permanent": true + }, + { + "source": "/3.4.x/migration/building-app-bar", + "destination": "/3.4.x/building-app-bar", + "permanent": true + }, + { + "source": "/3.4.x/migration/building-app-drawer", + "destination": "/3.4.x/building-app-drawer", + "permanent": true + }, + { + "source": "/3.4.x/migration/building-card", + "destination": "/3.4.x/building-card", + "permanent": true + }, + { + "source": "/3.4.x/migration/building-drawer-navigation", + "destination": "/3.4.x/building-drawer-navigation", + "permanent": true + }, + { + "source": "/3.1.x/migration/contribution", + "destination": "/3.1.x/contribution", + "permanent": true + }, + { + "source": "/3.2.x/migration/contribution", + "destination": "/3.2.x/contribution", + "permanent": true + }, + { + "source": "/3.3.x/migration/contribution", + "destination": "/3.3.x/contribution", + "permanent": true + }, + { + "source": "/3.4.x/migration/accessibility", + "destination": "/3.4.x/accessibility", + "permanent": true + }, + { + "source": "/3.4.x/migration/building-footer-tabs", + "destination": "/3.4.x/building-footer-tabs", + "permanent": true + }, + { + "source": "/3.4.x/migration/building-search-bar", + "destination": "/3.4.x/building-search-bar", + "permanent": true + }, + { + "source": "/3.4.x/migration/building-swipe-list", + "destination": "/3.4.x/building-swipe-list", + "permanent": true + }, + { + "source": "/3.4.x/migration/building-tab-view", + "destination": "/3.4.x/building-tab-view", + "permanent": true + }, + { + "source": "/3.4.x/migration/center", + "destination": "/3.4.x/center", + "permanent": true + }, + { + "source": "/3.4.x/migration/changelog", + "destination": "/3.4.x/changelog", + "permanent": true + }, + { + "source": "/3.4.x/migration/color-mode", + "destination": "/3.4.x/color-mode", + "permanent": true + }, + { + "source": "/3.4.x/migration/container", + "destination": "/3.4.x/container", + "permanent": true + }, + { + "source": "/3.4.x/migration/contribution", + "destination": "/3.4.x/contribution", + "permanent": true + }, + { + "source": "/3.4.x/migration/customizing-components", + "destination": "/3.4.x/customizing-components", + "permanent": true + }, + { + "source": "/3.4.x/migration/customizing-fonts", + "destination": "/3.4.x/customizing-fonts", + "permanent": true + }, + { + "source": "/3.4.x/migration/customizing-theme", + "destination": "/3.4.x/customizing-theme", + "permanent": true + }, + { + "source": "/3.4.x/migration/dark-mode", + "destination": "/3.4.x/dark-mode", + "permanent": true + }, + { + "source": "/3.4.x/migration/default-theme", + "destination": "/3.4.x/default-theme", + "permanent": true + }, + { + "source": "/3.4.x/migration/design-tokens", + "destination": "/3.4.x/design-tokens", + "permanent": true + }, + { + "source": "/3.4.x/migration/divider", + "destination": "/3.4.x/divider", + "permanent": true + }, + { + "source": "/3.4.x/migration/faq", + "destination": "/3.4.x/faq", + "permanent": true + }, + { + "source": "/3.4.x/migration/flat-list", + "destination": "/3.4.x/flat-list", + "permanent": true + }, + { + "source": "/3.4.x/migration/flex", + "destination": "/3.4.x/flex", + "permanent": true + }, + { + "source": "/3.4.x/migration/form-control", + "destination": "/3.4.x/form-control", + "permanent": true + }, + { + "source": "/3.4.x/migration/getting-started", + "destination": "/3.4.x/getting-started", + "permanent": true + }, + { + "source": "/3.4.x/migration/heading", + "destination": "/3.4.x/heading", + "permanent": true + }, + { + "source": "/3.4.x/migration/hidden", + "destination": "/3.4.x/hidden", + "permanent": true + }, + { + "source": "/3.4.x/migration/hstack", + "destination": "/3.4.x/hstack", + "permanent": true + }, + { + "source": "/3.4.x/migration/icon-button", + "destination": "/3.4.x/icon-button", + "permanent": true + }, + { + "source": "/3.4.x/migration/zstack", + "destination": "/3.4.x/zstack", + "permanent": true + }, + { + "source": "/3.4.x/migration/vstack", + "destination": "/3.4.x/vstack", + "permanent": true + }, + { + "source": "/3.4.x/migration/view", + "destination": "/3.4.x/view", + "permanent": true + }, + { + "source": "/3.4.x/migration/image", + "destination": "/3.4.x/image", + "permanent": true + }, + { + "source": "/3.4.x/migration/input", + "destination": "/3.4.x/input", + "permanent": true + }, + { + "source": "/3.4.x/migration/installation", + "destination": "/3.4.x/installation", + "permanent": true + }, + { + "source": "/3.4.x/migration/internal-pseudo-props", + "destination": "/3.4.x/internal-pseudo-props", + "permanent": true + }, + { + "source": "/3.4.x/migration/keyboard-avoiding-view", + "destination": "/3.4.x/keyboard-avoiding-view", + "permanent": true + }, + { + "source": "/3.4.x/migration/kitchen-sink", + "destination": "/3.4.x/kitchen-sink", + "permanent": true + }, + { + "source": "/3.4.x/migration/link", + "destination": "/3.4.x/link", + "permanent": true + }, + { + "source": "/3.4.x/migration/login-signup-forms", + "destination": "/3.4.x/login-signup-forms", + "permanent": true + }, + { + "source": "/3.4.x/migration/menu", + "destination": "/3.4.x/menu", + "permanent": true + }, + { + "source": "/3.4.x/migration/migration/action-sheet", + "destination": "/3.4.x/migration/action-sheet", + "permanent": true + }, + { + "source": "/3.4.x/migration/migration/badge", + "destination": "/3.4.x/migration/badge", + "permanent": true + }, + { + "source": "/3.4.x/migration/migration/button", + "destination": "/3.4.x/migration/button", + "permanent": true + }, + { + "source": "/3.4.x/migration/migration/card", + "destination": "/3.4.x/migration/card", + "permanent": true + }, + { + "source": "/3.4.x/migration/migration/checkbox", + "destination": "/3.4.x/migration/checkbox", + "permanent": true + }, + { + "source": "/3.4.x/migration/migration/date-picker", + "destination": "/3.4.x/migration/date-picker", + "permanent": true + }, + { + "source": "/3.4.x/migration/migration/deck-swiper", + "destination": "/3.4.x/migration/deck-swiper", + "permanent": true + }, + { + "source": "/3.4.x/migration/migration/drawer", + "destination": "/3.4.x/migration/drawer", + "permanent": true + }, + { + "source": "/3.4.x/migration/migration/fab", + "destination": "/3.4.x/migration/fab", + "permanent": true + }, + { + "source": "/3.4.x/migration/migration/footer-tab", + "destination": "/3.4.x/migration/footer-tab", + "permanent": true + }, + { + "source": "/3.4.x/migration/migration/form", + "destination": "/3.4.x/migration/form", + "permanent": true + }, + { + "source": "/3.4.x/migration/migration/header", + "destination": "/3.4.x/migration/header", + "permanent": true + }, + { + "source": "/3.4.x/migration/migration/icon", + "destination": "/3.4.x/migration/icon", + "permanent": true + }, + { + "source": "/3.4.x/migration/migration/layout", + "destination": "/3.4.x/migration/layout", + "permanent": true + }, + { + "source": "/3.4.x/migration/migration/picker", + "destination": "/3.4.x/migration/picker", + "permanent": true + }, + { + "source": "/3.4.x/migration/migration/radio-button", + "destination": "/3.4.x/migration/radio-button", + "permanent": true + }, + { + "source": "/3.4.x/migration/migration/search-bar", + "destination": "/3.4.x/migration/search-bar", + "permanent": true + }, + { + "source": "/3.4.x/migration/migration/segment", + "destination": "/3.4.x/migration/segment", + "permanent": true + }, + { + "source": "/3.4.x/migration/migration/spinner", + "destination": "/3.4.x/migration/spinner", + "permanent": true + }, + { + "source": "/3.4.x/migration/migration/swipe-list", + "destination": "/3.4.x/migration/swipe-list", + "permanent": true + }, + { + "source": "/3.4.x/migration/migration/tabs", + "destination": "/3.4.x/migration/tabs", + "permanent": true + }, + { + "source": "/3.4.x/migration/migration/thumbnail", + "destination": "/3.4.x/migration/thumbnail", + "permanent": true + }, + { + "source": "/3.4.x/migration/migration/toast", + "destination": "/3.4.x/migration/toast", + "permanent": true + }, + { + "source": "/3.4.x/migration/migration/typography", + "destination": "/3.4.x/migration/typography", + "permanent": true + }, + { + "source": "/3.4.x/migration/migration/v3", + "destination": "/3.4.x/migration/v3", + "permanent": true + }, + { + "source": "/3.4.x/migration/migration/v33xtov34x", + "destination": "/3.4.x/migration/v33xtov34x", + "permanent": true + }, + { + "source": "/3.4.x/migration/migration/v3xtov32", + "destination": "/3.4.x/migration/v3xtov32", + "permanent": true + }, + { + "source": "/3.4.x/migration/modal", + "destination": "/3.4.x/modal", + "permanent": true + }, + { + "source": "/3.4.x/migration/more-props", + "destination": "/3.4.x/more-props", + "permanent": true + }, + { + "source": "/3.4.x/migration/nativebase-factory", + "destination": "/3.4.x/nativebase-factory", + "permanent": true + }, + { + "source": "/3.4.x/migration/popover", + "destination": "/3.4.x/popover", + "permanent": true + }, + { + "source": "/3.4.x/migration/presence-transition", + "destination": "/3.4.x/presence-transition", + "permanent": true + }, + { + "source": "/3.4.x/migration/pressable", + "destination": "/3.4.x/pressable", + "permanent": true + }, + { + "source": "/3.4.x/migration/progress", + "destination": "/3.4.x/progress", + "permanent": true + }, + { + "source": "/3.4.x/migration/pseudo-props", + "destination": "/3.4.x/pseudo-props", + "permanent": true + }, + { + "source": "/3.4.x/migration/pseudo-props-101", + "destination": "/3.4.x/pseudo-props-101", + "permanent": true + }, + { + "source": "/3.4.x/migration/radio", + "destination": "/3.4.x/radio", + "permanent": true + }, + { + "source": "/3.4.x/migration/responsive", + "destination": "/3.4.x/responsive", + "permanent": true + }, + { + "source": "/3.4.x/migration/safe-area-view-props", + "destination": "/3.4.x/safe-area-view-props", + "permanent": true + }, + { + "source": "/3.4.x/migration/scrollview", + "destination": "/3.4.x/scrollview", + "permanent": true + }, + { + "source": "/3.4.x/migration/section-list", + "destination": "/3.4.x/section-list", + "permanent": true + }, + { + "source": "/3.4.x/migration/select", + "destination": "/3.4.x/select", + "permanent": true + }, + { + "source": "/3.4.x/migration/setup-provider", + "destination": "/3.4.x/setup-provider", + "permanent": true + }, + { + "source": "/3.4.x/migration/skeleton", + "destination": "/3.4.x/skeleton", + "permanent": true + }, + { + "source": "/3.4.x/migration/slide", + "destination": "/3.4.x/slide", + "permanent": true + }, + { + "source": "/3.4.x/migration/slider", + "destination": "/3.4.x/slider", + "permanent": true + }, + { + "source": "/3.4.x/migration/solito", + "destination": "/3.4.x/solito", + "permanent": true + }, + { + "source": "/3.4.x/migration/stack", + "destination": "/3.4.x/stack", + "permanent": true + }, + { + "source": "/3.4.x/migration/stagger", + "destination": "/3.4.x/stagger", + "permanent": true + }, + { + "source": "/3.4.x/migration/status-bar", + "destination": "/3.4.x/status-bar", + "permanent": true + }, + { + "source": "/3.4.x/migration/strict-mode", + "destination": "/3.4.x/strict-mode", + "permanent": true + }, + { + "source": "/3.4.x/migration/switch", + "destination": "/3.4.x/switch", + "permanent": true + }, + { + "source": "/3.4.x/migration/testing", + "destination": "/3.4.x/testing", + "permanent": true + }, + { + "source": "/3.4.x/migration/text", + "destination": "/3.4.x/text", + "permanent": true + }, + { + "source": "/3.4.x/migration/textarea", + "destination": "/3.4.x/textarea", + "permanent": true + }, + { + "source": "/3.4.x/migration/theme", + "destination": "/3.4.x/theme", + "permanent": true + }, + { + "source": "/3.4.x/migration/todo-list", + "destination": "/3.4.x/todo-list", + "permanent": true + }, + { + "source": "/3.4.x/migration/tooltip", + "destination": "/3.4.x/tooltip", + "permanent": true + }, + { + "source": "/3.4.x/migration/typescript", + "destination": "/3.4.x/typescript", + "permanent": true + }, + { + "source": "/3.4.x/migration/use-accessible-colors", + "destination": "/3.4.x/use-accessible-colors", + "permanent": true + }, + { + "source": "/3.4.x/migration/use-breakpoint-value", + "destination": "/3.4.x/use-breakpoint-value", + "permanent": true + }, + { + "source": "/3.4.x/migration/use-clipboard", + "destination": "/3.4.x/use-clipboard", + "permanent": true + }, + { + "source": "/3.4.x/migration/use-color-mode", + "destination": "/3.4.x/use-color-mode", + "permanent": true + }, + { + "source": "/3.4.x/migration/use-color-mode-value", + "destination": "/3.4.x/use-color-mode-value", + "permanent": true + }, + { + "source": "/3.4.x/migration/use-contrast-text", + "destination": "/3.4.x/use-contrast-text", + "permanent": true + }, + { + "source": "/3.4.x/migration/use-disclose", + "destination": "/3.4.x/use-disclose", + "permanent": true + }, + { + "source": "/3.4.x/migration/use-media-query", + "destination": "/3.4.x/use-media-query", + "permanent": true + }, + { + "source": "/3.4.x/migration/use-theme", + "destination": "/3.4.x/use-theme", + "permanent": true + }, + { + "source": "/3.4.x/migration/use-token", + "destination": "/3.4.x/use-token", + "permanent": true + }, + { + "source": "/3.4.x/migration/utility-first", + "destination": "/3.4.x/utility-first", + "permanent": true + }, + { + "source": "/3.4.x/migration/utility-props", + "destination": "/3.4.x/utility-props", + "permanent": true + }, + { + "source": "/3.4.x/migration/utility-props-specificity", + "destination": "/3.4.x/utility-props-specificity", + "permanent": true + }, + { + "source": "/next/migration/contribution", + "destination": "/next/contribution", + "permanent": true + }, + { + "source": "/next/migration/internal-pseudo-props", + "destination": "/next/internal-pseudo-props", + "permanent": true + }, + { + "source": "/next/migration/migration/v33xtov34x", + "destination": "/next/migration/v33xtov34x", + "permanent": true + }, + { + "source": "/next/migration/solito", + "destination": "/next/solito", + "permanent": true } ] diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx index 34e1fa907..51ae424ed 100644 --- a/src/components/Tabs/Tabs.tsx +++ b/src/components/Tabs/Tabs.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { Box, Pressable, Text } from "native-base"; +import { Box, Pressable, Text, useColorModeValue } from "native-base"; import { DocTabContext } from "./TabContext"; export const DocTabs = ({ children, values, defaultValue }: any) => { @@ -10,6 +10,7 @@ export const DocTabs = ({ children, values, defaultValue }: any) => { React.useEffect(() => { setSelected(defaultValue); }, []); + const textColor = useColorModeValue("black", "white"); return ( // @ts-ignore @@ -18,7 +19,10 @@ export const DocTabs = ({ children, values, defaultValue }: any) => { return ( onPressHandler(index)} justifyContent={"center"} alignItems="center" @@ -35,7 +39,7 @@ export const DocTabs = ({ children, values, defaultValue }: any) => {