diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 000000000..af14e1e92 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,4 @@ +/docs/3.4.x/color-mode.md +/docs/next/color-mode.md +/docs/3.4.x/dark-mode.md +/docs/next/dark-mode.md \ No newline at end of file diff --git a/docs.config.js b/docs.config.js index 812fd3c57..1f9fc7d4a 100644 --- a/docs.config.js +++ b/docs.config.js @@ -10,7 +10,7 @@ module.exports = { "3.1.x": "3.1.0", "3.2.x": "3.2.2", "3.3.x": "3.3.10", - "3.4.x": "3.4.0-rc.1", + "3.4.x": "3.4.11", }, componentOfTheWeek: { switch: "https://www.youtube.com/embed/VGUhi8IQHDw", diff --git a/docs/3.0.x/action-sheet.md b/docs/3.0.x/action-sheet.md index 6a2d64efd..19fd22b1c 100644 --- a/docs/3.0.x/action-sheet.md +++ b/docs/3.0.x/action-sheet.md @@ -16,7 +16,7 @@ NativeBase exports 3 modal-related components: - **Actionsheet.Item**: A button to wrap the options of the Actionsheet. ```jsx -import { Actionsheet } from 'native-base'; +import { Actionsheet } from "native-base"; ``` ## Examples @@ -61,7 +61,7 @@ import { Actionsheet } from 'native-base'; ### Actionsheet.Item -ActionsheetItem implements [Button](button#props) +ActionsheetItem implements [Button](button#h2-props) ## Styling diff --git a/docs/3.0.x/alert-dialog.md b/docs/3.0.x/alert-dialog.md index a3f5672d8..81bf39b88 100644 --- a/docs/3.0.x/alert-dialog.md +++ b/docs/3.0.x/alert-dialog.md @@ -17,7 +17,7 @@ import { ComponentTheme } from '../../src/components'; - `AlertDialog.CloseButton`: The button that closes the dialog. ```jsx -import { AlertDialog } from 'native-base'; +import { AlertDialog } from "native-base"; ``` ## Examples @@ -25,8 +25,8 @@ import { AlertDialog } from 'native-base'; ### Basic ```jsx isLive=true -import React from 'react'; -import { AlertDialog, Button, Center, NativeBaseProvider } from 'native-base'; +import React from "react"; +import { AlertDialog, Button, Center, NativeBaseProvider } from "native-base"; function AlertDialogComponent() { const [isOpen, setIsOpen] = React.useState(false); @@ -38,7 +38,7 @@ function AlertDialogComponent() { leastDestructiveRef={cancelRef} isOpen={isOpen} onClose={onClose} - motionPreset={'fade'} + motionPreset={"fade"} > @@ -75,8 +75,8 @@ export function Example() { ### Transition ```jsx isLive=true -import React from 'react'; -import { AlertDialog, Button, Center, NativeBaseProvider } from 'native-base'; +import React from "react"; +import { AlertDialog, Button, Center, NativeBaseProvider } from "native-base"; function AlertDialogComponent() { const [isOpen, setIsOpen] = React.useState(false); @@ -127,7 +127,7 @@ export function Example() { ## Props -AlertDialog and its components compose the **[Modal](/modal)** component, so all the [`Modal props`](/modal#props) can be passed to it. The only exception is that it requires `leastDestructiveRef` which is similar to `initialFocusRef` of `Modal`. +AlertDialog and its components compose the **[Modal](/modal)** component, so all the [`Modal props`](/modal#h2-props) can be passed to it. The only exception is that it requires `leastDestructiveRef` which is similar to `initialFocusRef` of `Modal`. | Name | Type | Description | Default | | ------------------- | --------- | -------------------------------------------------------------- | ------- | diff --git a/docs/3.0.x/select.md b/docs/3.0.x/select.md index 0268ca229..08816d99f 100644 --- a/docs/3.0.x/select.md +++ b/docs/3.0.x/select.md @@ -12,7 +12,7 @@ Select creates a dropdown list of items with the selected item in closed view. ## Import ```jsx -import { Select } from 'native-base'; +import { Select } from "native-base"; ``` ## Examples @@ -50,11 +50,11 @@ import { Select } from 'native-base'; | -------------------------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ---------- | | variant | `native`, `styled` | The variant of the select style to use. | `native` | | placeholder | string | The placeholder attribute specifies a short hint that describes the expected value of a selected field (only for styled variant). | - | -| \_placeholder | [`TextProps`](text.md#props) | Text props to be applied to placeholder (only for styled variant). | - | +| \_placeholder | [`TextProps`](text.md#h2-props) | Text props to be applied to placeholder (only for styled variant). | - | | selectedValue | string | The default value which is selected. | - | | onValueChange | function | Callback for on change on the input value. | - | | selectedItemBg | string | Background color for the selected item (only for styled variant). | `blue.500` | -| \_selectedItem | [`TextProps`](text.md#props) | Text prop for selected item (only for styled variant). | - | +| \_selectedItem | [`TextProps`](text.md#h2-props) | Text prop for selected item (only for styled variant). | - | | isDisabled | boolean | If true, the button will be disabled (not supported on ios for native variant). | - | | dropdownIcon | JSX.Element | If given, updates the dropdown Icon (only for styled variant). | - | | dropdownOpenIcon | JSX.Element | If given, updates the dropdown Icon when opened (only for styled variant). | - | @@ -62,7 +62,7 @@ import { Select } from 'native-base'; | \_ios | _StyleProps_ | Props which you only want to pass to ios device. | - | | \_android | _StyleProps_ | Props which you only want to pass to android device. | - | | \_web | _StyleProps_ | Props which you only want to pass to web device. | - | -| \_item | [`TextProps`](text.md#props) | TextProps to be applied to the label (only for styled variant). | - | +| \_item | [`TextProps`](text.md#h2-props) | TextProps to be applied to the label (only for styled variant). | - | | androidMode | `dialog`, `dropdown` | On Android, specifies how to display the selection items when the user taps on the picker (only for native variant). | `dialog` | | androidIconColor | string | On Android, specifies color of dropdown triangle. Input value can any color from theme like `default.300` (only for native variant). | - | | androidPrompt | string | On Android, prompt string for this picker, used on Android in dialog mode as the title of the dialog (only for native variant). | - | @@ -76,7 +76,7 @@ import { Select } from 'native-base'; | label | string | The label which will be displayed. | - | | value | string | The value to be used for the item. This is the value that will be returned on form submission. | - | | isDisabled | boolean | If true, the item will be disabled (only for `styled` variant). | - | -| \_label | [`TextProps`](text.md#props) | TextProps to be applied to label (only for `styled` variant). | - | --> +| \_label | [`TextProps`](text.md#h2-props) | TextProps to be applied to label (only for `styled` variant). | - | --> ## Styling diff --git a/docs/3.0.x/tooltip.md b/docs/3.0.x/tooltip.md index 1862f97ad..6a7826d79 100644 --- a/docs/3.0.x/tooltip.md +++ b/docs/3.0.x/tooltip.md @@ -10,7 +10,7 @@ A tooltip is a brief, informative message that appears when a user interacts wit ## Import ```jsx -import { Tooltip } from 'native-base'; +import { Tooltip } from "native-base"; ``` ## Examples @@ -29,7 +29,7 @@ import { Tooltip } from 'native-base'; ### Customizing tooltip -Tooltip is a wrapper around [Box](box.md). So, it also accepts all the [Box](box.md#props) props. +Tooltip is a wrapper around [Box](box.md). So, it also accepts all the [Box](box.md#h2-props) props. ```ComponentSnackPlayer path=composites,Tooltip,CustomTooltip.tsx diff --git a/docs/3.0.x/utility-props.md b/docs/3.0.x/utility-props.md index a2851b9da..6a8d79aaf 100644 --- a/docs/3.0.x/utility-props.md +++ b/docs/3.0.x/utility-props.md @@ -12,8 +12,8 @@ The following table shows a list of every style prop and the properties within e ### Margin and padding ```jsx isLive=true -import React from 'react'; -import { Box, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Box, NativeBaseProvider, Center } from "native-base"; const NBBox = (props) => { return ; @@ -64,8 +64,8 @@ export function Example() { ### Color and background color ```jsx isLive=true -import React from 'react'; -import { Box, NativeBaseProvider, Center, Text } from 'native-base'; +import React from "react"; +import { Box, NativeBaseProvider, Center, Text } from "native-base"; const NBBox = (props) => { return ; @@ -81,7 +81,7 @@ function Component() { {/* using theme colors to set text color */} - {' '} + {" "} I ❤️ NativeBase @@ -113,8 +113,8 @@ export function Example() { ### Typography ```jsx isLive=true -import React from 'react'; -import { Text, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Text, NativeBaseProvider, Center } from "native-base"; const NBText = (props) => { return ; @@ -127,15 +127,15 @@ function Component() { Sample Text {/* font-size `32px` */} - Sample Text{' '} + Sample Text{" "} {/* font-size `'2em'` */} {/* font-size of `theme.fontWeights.bold` */} - Sample Text{' '} + Sample Text{" "} {/* text-align `left` on all viewports and `center` from the first breakpoint and up */} - Sample Text + Sample Text ); } @@ -165,8 +165,8 @@ export function Example() { ### Layout, width and height ```jsx isLive=true -import React from 'react'; -import { Box, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Box, NativeBaseProvider, Center } from "native-base"; const NBBox = (props) => { return ; @@ -221,8 +221,8 @@ export function Example() { ### Flexbox ```jsx isLive=true -import React from 'react'; -import { Box, Flex, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Box, Flex, NativeBaseProvider, Center } from "native-base"; const NBBox = (props) => { return ; @@ -277,8 +277,8 @@ export function Example() { ### Borders ```jsx isLive=true -import React from 'react'; -import { Box, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Box, NativeBaseProvider, Center } from "native-base"; const NBBox = (props) => { return ; @@ -332,8 +332,8 @@ export function Example() { ### Borders Radius ```jsx isLive=true -import React from 'react'; -import { Box, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Box, NativeBaseProvider, Center } from "native-base"; const NBBox = (props) => { return ; @@ -381,8 +381,8 @@ export function Example() { ### Position ```jsx isLive=true -import React from 'react'; -import { Box, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Box, NativeBaseProvider, Center } from "native-base"; const NBBox = (props) => { return ; @@ -427,8 +427,8 @@ export function Example() { ### Shadow ```jsx isLive=true -import React from 'react'; -import { Box, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Box, NativeBaseProvider, Center } from "native-base"; const NBBox = (props) => { return ; @@ -470,17 +470,17 @@ export function Example() { Provides a way to pass props to child components inside Composite componets. ```jsx isLive=true -import React from 'react'; -import { Button, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Button, NativeBaseProvider, Center } from "native-base"; function App() { return ( + + ); } diff --git a/docs/3.4.x/contribution.md b/docs/3.4.x/contribution.md index d90c2a68a..7338e79fa 100644 --- a/docs/3.4.x/contribution.md +++ b/docs/3.4.x/contribution.md @@ -15,9 +15,9 @@ All work on NativeBase happens directly on [GitHub](https://github.com/GeekyAnt ### Branch Organization -According to our [release schedule](https://github.com/GeekyAnts/NativeBase/releases), we maintain a `canary` branch for all the external PR's which is like a development branch with latest changes. If you send a pull request, please do it against the this `canary` branch. Once a release candidate is ready, `canary` branch will be released as a rc release package and once a stable release test is done it will be released to `native-base` package. +According to our [release schedule](https://github.com/GeekyAnts/NativeBase/releases), we maintain a `canary` branches which are like development branches with the latest changes. If you send a pull request, please do it against the `master` branch. Once you create your PR we will update the base branch to a more specific canary branch if required. Once a release candidate is ready, `canary-patch` or `canary-minor` branch will be released as a rc release package and once a stable release test is done it will be released to `native-base` package and merged into the `master`. -![Screenshot 2022-02-07 at 1 27 46 PM](https://user-images.githubusercontent.com/62810976/161559404-c2e9064c-ae62-4395-92d9-9ddba2781d7a.png) +![Screenshot 2022-08-16 at 6 51 33 PM](https://user-images.githubusercontent.com/36300815/184890022-171cf7d9-2c37-4dfa-a302-e41e879a22d7.png) ### Bugs diff --git a/docs/3.4.x/customizing-fonts.md b/docs/3.4.x/customizing-fonts.md index c8ade5f00..c50d1c190 100644 --- a/docs/3.4.x/customizing-fonts.md +++ b/docs/3.4.x/customizing-fonts.md @@ -18,33 +18,33 @@ We extend the theme object and override `fontConfig` and `fonts` properties whic This mapping is needed to make sure fontWeight, fontStyle properties work in all platforms. ```jsx -import { NativeBaseProvider, extendTheme } from 'native-base'; +import { NativeBaseProvider, extendTheme } from "native-base"; const theme = extendTheme({ fontConfig: { Roboto: { 100: { - normal: 'Roboto-Light', - italic: 'Roboto-LightItalic', + normal: "Roboto-Light", + italic: "Roboto-LightItalic", }, 200: { - normal: 'Roboto-Light', - italic: 'Roboto-LightItalic', + normal: "Roboto-Light", + italic: "Roboto-LightItalic", }, 300: { - normal: 'Roboto-Light', - italic: 'Roboto-LightItalic', + normal: "Roboto-Light", + italic: "Roboto-LightItalic", }, 400: { - normal: 'Roboto-Regular', - italic: 'Roboto-Italic', + normal: "Roboto-Regular", + italic: "Roboto-Italic", }, 500: { - normal: 'Roboto-Medium', + normal: "Roboto-Medium", }, 600: { - normal: 'Roboto-Medium', - italic: 'Roboto-MediumItalic', + normal: "Roboto-Medium", + italic: "Roboto-MediumItalic", }, // Add more variants // 700: { @@ -63,9 +63,9 @@ const theme = extendTheme({ // Make sure values below matches any of the keys in `fontConfig` fonts: { - heading: 'Roboto', - body: 'Roboto', - mono: 'Roboto', + heading: "Roboto", + body: "Roboto", + mono: "Roboto", }, }); @@ -83,5 +83,5 @@ export default function App() { Fonts can be used as shown below. The below `Text` will be rendered in `Roboto-MediumItalic` font family. ```jsx - + ``` diff --git a/docs/3.4.x/dark-mode.md b/docs/3.4.x/dark-mode.md index 001121f4d..bf78ac170 100644 --- a/docs/3.4.x/dark-mode.md +++ b/docs/3.4.x/dark-mode.md @@ -5,18 +5,18 @@ title: Making components dark mode compatible By default, most of NativeBase's components are dark mode compatible. In some scenario, you might need to make your component respond to color mode. There are 2 way to achieve this: -1. By updating component's theme -2. By using useColorModeValue +- By updating component's theme +- By using useColorModeValue ## 1. By updating component's theme -In this approach we use NativeBase's `extendTheme` function to customise the components and then use themeTools to make the component dark mode compatible. +In this approach we use NativeBase's `extendTheme` function to customise the components and then use _light and _dark props to make the component dark mode compatible. Note: Changes on the theme will be reflected on the entire application. ```tsx import React from 'react'; -import { NativeBaseProvider, themeTools } from 'native-base'; +import { NativeBaseProvider } from 'native-base'; import { extendTheme } from 'native-base'; import { Content } from './Content'; @@ -26,7 +26,8 @@ export default function () { Heading: { baseStyle: (props: any) => { return { - color: themeTools.mode('red.300', 'blue.300')(props), + _light: { color: 'red.300' }, + _dark: { color: 'blue.300' }, }; }, }, @@ -44,7 +45,7 @@ In the above example, the Heading component's color property will now respond to ## 2. By using useColorModeValue -In this approach we use NativeBase's `useColorModeValue` function and update specific props instead of updating the entire theme. +In this approach we use NativeBase's `useColorModeValue` hook and update specific props instead of updating the entire theme. Note: Changes on the theme will be reflected on the entire application. diff --git a/docs/3.4.x/default-theme.md b/docs/3.4.x/default-theme.md index 511a8b802..c957a019c 100644 --- a/docs/3.4.x/default-theme.md +++ b/docs/3.4.x/default-theme.md @@ -15,7 +15,7 @@ You can add a `theme.colors` object to provide colors for your project. By def You can also add `.alpha:{number}` to add levels of opacity to a colour. The number can also be added in the theme file. Ex: `red.300:alpha.30`, You can read more about this in [`opacity section`](default-theme#opacity) -We recommend adding a palette that ranges from `50` to `900`. Tools like [Smart Swatch](https://smart-swatch.netlify.app/), [Palx](https://palx.jxnblk.com/) are available to generate these palettes. +We recommend adding a palette that ranges from `50` to `900`. Tools like [JSON Color Palette Generator](https://json-color-palette-generator.vercel.app), [Smart Swatch](https://smart-swatch.netlify.app/) or [Palx](https://palx.jxnblk.com/) are available to generate these palettes. @@ -32,24 +32,24 @@ To manage Typography options, the theme object supports the following keys: ```jsx const typography = { letterSpacings: { - 'xs': '-0.05em', - 'sm': '-0.025em', - 'md': 0, - 'lg': '0.025em', - 'xl': '0.05em', - '2xl': '0.1em', + "xs": "-0.05em", + "sm": "-0.025em", + "md": 0, + "lg": "0.025em", + "xl": "0.05em", + "2xl": "0.1em", }, lineHeights: { - '2xs': '1em', - 'xs': '1.125em', - 'sm': '1.25em', - 'md': '1.375em', - 'lg': '1.5em', - 'xl': '1.75em', - '2xl': '2em', - '3xl': '2.5em', - '4xl': '3em', - '5xl': '4em', + "2xs": "1em", + "xs": "1.125em", + "sm": "1.25em", + "md": "1.375em", + "lg": "1.5em", + "xl": "1.75em", + "2xl": "2em", + "3xl": "2.5em", + "4xl": "3em", + "5xl": "4em", }, fontWeights: { hairline: 100, @@ -61,7 +61,7 @@ const typography = { bold: 700, extrabold: 800, black: 900, - extrablack: 950, + extraBlack: 950, }, fonts: { heading: undefined, @@ -69,20 +69,20 @@ const typography = { mono: undefined, }, fontSizes: { - '2xs': 10, - 'xs': 12, - 'sm': 14, - 'md': 16, - 'lg': 18, - 'xl': 20, - '2xl': 24, - '3xl': 30, - '4xl': 36, - '5xl': 48, - '6xl': 60, - '7xl': 72, - '8xl': 96, - '9xl': 128, + "2xs": 10, + "xs": 12, + "sm": 14, + "md": 16, + "lg": 18, + "xl": 20, + "2xl": 24, + "3xl": 30, + "4xl": 36, + "5xl": 48, + "6xl": 60, + "7xl": 72, + "8xl": 96, + "9xl": 128, }, }; ``` @@ -130,7 +130,7 @@ The `shadow` key allows you to customize the global box shadow for your project. ```jsx export default { 0: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 1, @@ -140,7 +140,7 @@ export default { elevation: 1, }, 1: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 1, @@ -150,7 +150,7 @@ export default { elevation: 2, }, 2: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 1, @@ -160,7 +160,7 @@ export default { elevation: 3, }, 3: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 2, @@ -170,7 +170,7 @@ export default { elevation: 4, }, 4: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 2, @@ -180,7 +180,7 @@ export default { elevation: 5, }, 5: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 3, @@ -190,7 +190,7 @@ export default { elevation: 6, }, 6: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 3, @@ -200,7 +200,7 @@ export default { elevation: 7, }, 7: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 4, @@ -210,7 +210,7 @@ export default { elevation: 8, }, 8: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 4, @@ -220,7 +220,7 @@ export default { elevation: 9, }, 9: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 5, diff --git a/docs/3.4.x/flex.md b/docs/3.4.x/flex.md index 964b19ae5..62cb1c544 100644 --- a/docs/3.4.x/flex.md +++ b/docs/3.4.x/flex.md @@ -6,7 +6,7 @@ title: Flex `Flex` provides helpful style shorthand and is a [`Box`](box.md) with `display: flex`. ```jsx isShowcase -import React from 'react'; +import React from "react"; import { Flex, Center, @@ -15,17 +15,22 @@ import { VStack, Divider, Box, -} from 'native-base'; + useColorModeValue, +} from "native-base"; export function Example() { + const bgShade100 = useColorModeValue("primary.100", "primary.400"); + const bgShade200 = useColorModeValue("primary.200", "primary.500"); + const bgShade300 = useColorModeValue("primary.300", "primary.600"); + const bgShade400 = useColorModeValue("primary.400", "primary.700"); return ( @@ -36,19 +41,19 @@ export function Example() { mb="2.5" mt="1.5" _text={{ - color: 'coolGray.800', + color: "coolGray.800", }} > -
+
100
-
+
200
-
+
300
-
+
400
@@ -61,19 +66,19 @@ export function Example() { mb="2.5" mt="1.5" _text={{ - color: 'coolGray.800', + color: "coolGray.800", }} > -
+
100
-
+
200
-
+
300
-
+
400
@@ -85,19 +90,19 @@ export function Example() { mb="2.5" mt="1.5" _text={{ - color: 'coolGray.800', + color: "coolGray.800", }} > -
+
100
-
+
200
-
+
300
-
+
400
@@ -109,19 +114,19 @@ export function Example() { mb="2.5" mt="1.5" _text={{ - color: 'coolGray.800', + color: "coolGray.800", }} > -
+
100
-
+
200
-
+
300
-
+
400
@@ -136,7 +141,7 @@ export function Example() { ## Import ```jsx -import { Flex, Spacer } from 'native-base'; +import { Flex, Spacer } from "native-base"; ``` - `Flex`: a **[Box](box.md)** with `display: flex` diff --git a/docs/3.4.x/form-control.md b/docs/3.4.x/form-control.md index fd52eecb7..5558f25b8 100644 --- a/docs/3.4.x/form-control.md +++ b/docs/3.4.x/form-control.md @@ -8,7 +8,7 @@ import { ComponentTheme } from '../src/components'; `FormControl` is used to form elements by providing context such as `isInvalid`, `isDisabled`, and `isRequired`. ```jsx isShowcase gradient="3" -import React from 'react'; +import React from "react"; import { FormControl, Input, @@ -17,7 +17,7 @@ import { Box, Center, NativeBaseProvider, -} from 'native-base'; +} from "native-base"; const Example = () => { return ( @@ -26,9 +26,16 @@ const Example = () => { Password { return ( ); }; ``` -The `Input` component allows a user to provide input in a text field. - ## Examples ### Basic diff --git a/docs/3.4.x/modal.md b/docs/3.4.x/modal.md index de1c66ae8..52761ec54 100644 --- a/docs/3.4.x/modal.md +++ b/docs/3.4.x/modal.md @@ -8,9 +8,9 @@ import { ComponentTheme } from '../src/components'; A `Modal` is an overlay on the primary window or another dialog window. Content behind the modal dialog remains **inert** and users cannot interact with it. ```jsx isShowcase -import React from 'react'; -import { Button, Modal, FormControl, Input } from 'native-base'; -import { useState } from 'react'; +import React from "react"; +import { Button, Modal, FormControl, Input } from "native-base"; +import { useState } from "react"; export const Example = () => { const [showModal, setShowModal] = useState(false); @@ -63,7 +63,7 @@ export const Example = () => { ## Import -NativeBase exports Modal Compound component: +NativeBase export a Modal Compound component: - `Modal`: The wrapper that provides context for its children. - `Modal.Content`: The container for the modal dialog's content. @@ -73,7 +73,7 @@ NativeBase exports Modal Compound component: - `Modal.CloseButton`: The button that closes the modal. ```jsx -import { Modal } from 'native-base'; +import { Modal } from "native-base"; ``` ## Examples diff --git a/docs/3.4.x/nativebase-factory.md b/docs/3.4.x/nativebase-factory.md index 61a6e9730..27d3a26cc 100644 --- a/docs/3.4.x/nativebase-factory.md +++ b/docs/3.4.x/nativebase-factory.md @@ -3,10 +3,10 @@ id: nativebase-factory title: NativeBase Factory --- -NativeBase factory is a function that converts non-nativebase components to nativebase enabled components so you can pass style props to them. +NativeBase factory is a function that converts Non-NativeBase components to NativeBase enabled components so you can pass style props to them. ```jsx -import { Factory } from 'native-base'; +import { Factory } from "native-base"; ``` ## Usage diff --git a/docs/3.4.x/presence-transition.md b/docs/3.4.x/presence-transition.md index f5705cc53..ebab11624 100644 --- a/docs/3.4.x/presence-transition.md +++ b/docs/3.4.x/presence-transition.md @@ -6,19 +6,19 @@ title: PresenceTransition PresenceTransition provides a declarative API to add entry and exit transitions. ```jsx isShowcase -import React from 'react'; +import React from "react"; import { Button, Center, PresenceTransition, NativeBaseProvider, -} from 'native-base'; +} from "native-base"; export const Example = () => { const [isOpen, setIsOpen] = React.useState(false); return (
{ w="200" h="100" _text={{ - color: 'white', + color: "white", }} shadow={2} > @@ -65,7 +65,7 @@ export const Example = () => { ## Props -```ComponentPropTable path=components,composites,Transitions,PresenceTransition.tsx showStylingProps=true +```ComponentPropTable path=composites,Transitions,PresenceTransition.tsx showStylingProps=true ``` @@ -88,7 +88,7 @@ interface ISupportedTransitions { ```js interface ITransitionStyleProps extends ISupportedTransitions { transition?: { - type?: 'timing' | 'spring', + type?: "timing" | "spring", easing?: (value: number) => number, overshootClamping?: boolean, restDisplacementThreshold?: number, diff --git a/docs/3.4.x/safe-area-view-props.md b/docs/3.4.x/safe-area-view-props.md index 87b69a291..a45e5d457 100644 --- a/docs/3.4.x/safe-area-view-props.md +++ b/docs/3.4.x/safe-area-view-props.md @@ -17,7 +17,7 @@ Internally, NativeBase uses [useSafeAreaInsets](https://docs.expo.io/versions/la :::info -SafeAreaView props can only be applied on [Box](box.md) as of now. To make you App SafeArea safe, just wrap your app with a Box and pass safeArea props to it. +SafeAreaView props can only be applied on [Box](box.md) as of now. To make your app SafeArea safe, just wrap your app with a Box and pass safeArea props to it. ::: @@ -26,8 +26,8 @@ SafeAreaView props can only be applied on [Box](box.md) as of now. To make you A ### Flexible SafeArea ```jsx isLive=true -import React from 'react'; -import { NativeBaseProvider, Box, Text } from 'native-base'; +import React from "react"; +import { NativeBaseProvider, Box, Text } from "native-base"; function MyComponent() { return ( // This would look different on devices with different insets @@ -50,8 +50,8 @@ export function Example() { ### Fixed SafeArea ```jsx isLive=true -import React from 'react'; -import { NativeBaseProvider, Box, Text } from 'native-base'; +import React from "react"; +import { NativeBaseProvider, Box, Text } from "native-base"; function MyComponent() { return ( // This would look same on all devices @@ -76,8 +76,8 @@ export function Example() { If you want to add the SafeAreaView props to other components, you can use the hook. Since, `SafeAreaView` props add relevant padding to the components, you will need to pass the padding manually that you are applying to the component for it to return the SafeArea adjusted padding. ```jsx isLive=true -import React from 'react'; -import { NativeBaseProvider, Box, Text, useSafeArea } from 'native-base'; +import React from "react"; +import { NativeBaseProvider, Box, Text, useSafeArea } from "native-base"; function MyComponent() { const safeAreaProps = useSafeArea({ safeAreaTop: true, pt: 2 }); return ( diff --git a/docs/3.4.x/select.md b/docs/3.4.x/select.md index db5a45a57..836c59f20 100644 --- a/docs/3.4.x/select.md +++ b/docs/3.4.x/select.md @@ -10,11 +10,11 @@ import { AndroidBadge } from "../src/components/index"; Select creates a dropdown list of items with the selected item in closed view. ```jsx isShowcase -import React from 'react'; -import { Select, VStack, CheckIcon } from 'native-base'; +import React from "react"; +import { Select, VStack, CheckIcon } from "native-base"; export const Example = () => { - let [service, setService] = React.useState(''); + let [service, setService] = React.useState(""); return ( @@ -25,11 +25,19 @@ export const Example = () => { accessibilityLabel="Choose Service" placeholder="Choose Service" _selectedItem={{ - bg: 'teal.600', + bg: "teal.600", endIcon: , }} - _light={{ bg: 'coolGray.100' }} - _dark={{ bg: 'coolGray.800' }} + _light={{ + bg: "coolGray.100", + _hover: { bg: "coolGray.200" }, + _focus: { bg: "coolGray.200:alpha.70" }, + }} + _dark={{ + bg: "coolGray.800", + _hover: { bg: "coolGray.900" }, + _focus: { bg: "coolGray.900:alpha.70" }, + }} onValueChange={(itemValue) => setService(itemValue)} > @@ -50,7 +58,7 @@ export const Example = () => { ## Import ```jsx -import { Select } from 'native-base'; +import { Select } from "native-base"; ``` ## Examples diff --git a/docs/3.4.x/setup-provider.md b/docs/3.4.x/setup-provider.md index 7cab1810a..c1497f317 100644 --- a/docs/3.4.x/setup-provider.md +++ b/docs/3.4.x/setup-provider.md @@ -8,9 +8,9 @@ NativeBaseProvider is a component that makes the theme available throughout your **App.js** ```jsx -import React from 'react'; +import React from "react"; // 1. import `NativeBaseProvider` component -import { NativeBaseProvider, Text, Box } from 'native-base'; +import { NativeBaseProvider, Text, Box } from "native-base"; export default function App() { // 2. Use at the root of your app @@ -32,13 +32,13 @@ NativeBase 3.0 provides an `extendTheme` function that deep merges the default ```jsx // 1. Import the extendTheme function -import { extendTheme, NativeBaseProvider } from 'native-base'; +import { extendTheme, NativeBaseProvider } from "native-base"; // 2. Extend the theme to include custom colors, fonts, etc const newColorTheme = { brand: { - 900: '#8287af', - 800: '#7c83db', - 700: '#b3bef6', + 900: "#8287af", + 800: "#7c83db", + 700: "#b3bef6", }, }; const theme = extendTheme({ colors: newColorTheme }); @@ -59,25 +59,25 @@ If you want to do something with the color modes in your app, you can use colorM In the below example we will show how to store the active ColorMode in an async storage, so it can be consistent all around your app. ```tsx -import React from 'react'; -import { NativeBaseProvider, ColorMode } from 'native-base'; -import type { StorageManager } from 'native-base'; -import AsyncStorage from '@react-native-async-storage/async-storage'; +import React from "react"; +import { NativeBaseProvider, ColorMode } from "native-base"; +import type { StorageManager } from "native-base"; +import AsyncStorage from "@react-native-async-storage/async-storage"; export default ({ children, theme }: any) => { const colorModeManager: StorageManager = { get: async () => { try { - let val = await AsyncStorage.getItem('@my-app-color-mode'); - return val === 'dark' ? 'dark' : 'light'; + let val = await AsyncStorage.getItem("@my-app-color-mode"); + return val === "dark" ? "dark" : "light"; } catch (e) { console.log(e); - return 'light'; + return "light"; } }, set: async (value: ColorMode) => { try { - await AsyncStorage.setItem('@my-app-color-mode', value); + await AsyncStorage.setItem("@my-app-color-mode", value); } catch (e) { console.log(e); } @@ -96,13 +96,13 @@ export default ({ children, theme }: any) => { If you want to use [Gradient feature in Box](box#with-linear-gradient), you need to pass linear gradient dependency as a config object in NativeBaseProvider. This dependency can be either from [expo-linear-gradient](https://docs.expo.io/versions/latest/sdk/linear-gradient/) or [react-native-linear-gradient](https://www.npmjs.com/package/react-native-linear-gradient) ```jsx -import React from 'react'; -import { NativeBaseProvider } from 'native-base'; +import React from "react"; +import { NativeBaseProvider } from "native-base"; const config = { dependencies: { // For Expo projects (Bare or managed workflow) - 'linear-gradient': require('expo-linear-gradient').LinearGradient, + "linear-gradient": require("expo-linear-gradient").LinearGradient, // For non expo projects // 'linear-gradient': require('react-native-linear-gradient').default, }, @@ -121,11 +121,11 @@ export default () => { ## Add isSSR (Optional) -If you are using NativeBase for a server side rendering app, you can use isSSR prop to determine whether to render the theme or not. +If you are using NativeBase for a server side rendering app like Next.js, you have to pass isSSR prop. This will resolve the responsive props to media queries on the server side and fix an issue with jumping UI on hydration. ```jsx -import React from 'react'; -import { NativeBaseProvider } from 'native-base'; +import React from "react"; +import { NativeBaseProvider } from "native-base"; export default () => { return ( diff --git a/docs/3.4.x/sidebar.json b/docs/3.4.x/sidebar.json index 9f1d028d1..83d67f331 100644 --- a/docs/3.4.x/sidebar.json +++ b/docs/3.4.x/sidebar.json @@ -170,7 +170,7 @@ }, { "id": "typescript", - "title": "Typescript", + "title": "TypeScript", "showToc": false } ] @@ -181,7 +181,7 @@ "pages": [ { "id": "aspect-ratio", - "title": "Aspect Ratio" + "title": "AspectRatio" }, { "id": "box", diff --git a/docs/3.4.x/slider.md b/docs/3.4.x/slider.md index a903e424d..e420ef51c 100644 --- a/docs/3.4.x/slider.md +++ b/docs/3.4.x/slider.md @@ -8,8 +8,8 @@ import { ComponentTheme } from '../src/components'; The `Slider` allows users to select options from a given range of values. ```jsx isShowcase -import React from 'react'; -import { Slider, Box, Center, NativeBaseProvider } from 'native-base'; +import React from "react"; +import { Slider, Box, Center, NativeBaseProvider } from "native-base"; export const Example = () => { return ( @@ -32,7 +32,7 @@ export const Example = () => { ## Import -NativeBase exports 4 slider-related components: +NativeBase exports 4 Slider related components: - `Slider`: The wrapper that provides context and functionality for all children. - `Slider.Track`: The empty part of the slider that shows the track. @@ -40,7 +40,7 @@ NativeBase exports 4 slider-related components: - `Slider.Thumb`: The handle that's used to change the slider value. ```jsx -import { Slider } from 'native-base'; +import { Slider } from "native-base"; ``` ## Examples diff --git a/docs/3.4.x/textarea.md b/docs/3.4.x/textarea.md index 6e53fa038..ff3358227 100644 --- a/docs/3.4.x/textarea.md +++ b/docs/3.4.x/textarea.md @@ -8,8 +8,8 @@ import { ComponentTheme } from '../src/components'; The `Textarea` component helps create multi-line text inputs. ```jsx isShowcase -import React from 'react'; -import { TextArea } from 'native-base'; +import React from "react"; +import { TextArea } from "native-base"; export const Example = () => { return ( @@ -18,9 +18,17 @@ export const Example = () => { h={20} placeholder="Text Area Placeholder" w="200" - _light={{ placeholderTextColor: 'trueGray.700' }} - _dark={{ bg: 'coolGray.800' }} - _hover={{ bg: 'coolGray.200' }} + _light={{ + placeholderTextColor: "trueGray.700", + bg: "coolGray.100", + _hover: { bg: "coolGray.200" }, + _focus: { bg: "coolGray.200:alpha.70" }, + }} + _dark={{ + bg: "coolGray.800", + _hover: { bg: "coolGray.900" }, + _focus: { bg: "coolGray.900:alpha.70" }, + }} /> ); }; diff --git a/docs/3.4.x/theme.md b/docs/3.4.x/theme.md index 80bce66f8..7e270b521 100644 --- a/docs/3.4.x/theme.md +++ b/docs/3.4.x/theme.md @@ -8,14 +8,14 @@ NativeBase provides multiple tools to use the central theme defined in the app. ## useTheme ```jsx isLive=true -import React from 'react'; +import React from "react"; import { NativeBaseProvider, useTheme, FlatList, Center, Box, -} from 'native-base'; +} from "native-base"; function ColorPalete() { const { colors } = useTheme(); @@ -23,7 +23,7 @@ function ColorPalete() { } /> @@ -47,17 +47,17 @@ export function Example() { You can also get specific values from the theme with [`useToken`](/use-token) hook. ```jsx isLive=true -import React from 'react'; -import { useToken, NativeBaseProvider, Center, Text } from 'native-base'; +import React from "react"; +import { useToken, NativeBaseProvider, Center, Text } from "native-base"; function Tokens() { - const [contrastThreshold, lightText] = useToken('colors', [ - 'contrastThreshold', - 'lightText', + const [contrastThreshold, lightText] = useToken("colors", [ + "contrastThreshold", + "lightText", ]); return (
- Contrast threshold is:{' '} + Contrast threshold is:{" "} {contrastThreshold} @@ -79,20 +79,20 @@ export function Example() { ## useContrastText -If you are defining the background yourself and pass a contrasting color to the text then you can use [`useContrastText`](use-contrast-text). +If you are defining the background yourself and want to pass a contrasting color to the text then you can use [`useContrastText`](use-contrast-text). ```jsx isLive=true -import React from 'react'; +import React from "react"; import { Button, Stack, useContrastText, NativeBaseProvider, Center, -} from 'native-base'; +} from "native-base"; function UseContrastingTextHook() { - const bgDark = 'primary.600'; - const bgLight = 'primary.200'; + const bgDark = "primary.600"; + const bgLight = "primary.200"; const colorContrastDark = useContrastText(bgDark); const colorContrastLight = useContrastText(bgLight); @@ -125,21 +125,25 @@ export function Example() { If you want to define some conditionals based on current color mode or change the color mode then you can try [useColorMode](use-color-mode). ```jsx isLive=true -import React from 'react'; +import React from "react"; import { NativeBaseProvider, useColorMode, Text, Button, Center, -} from 'native-base'; +} from "native-base"; function UseColorMode() { const { colorMode, toggleColorMode } = useColorMode(); return ( -
+
- The active color mode is{' '} + The active color mode is{" "} {colorMode} @@ -165,7 +169,7 @@ export function Example() { If you do not want to add conditionals for color mode everywhere and keep the code clean, then you can use [useColorModeValue](use-color-mode-value) hook. It takes two parameters, light mode value as the first and dark mode value as second. ```jsx isLive=true -import React from 'react'; +import React from "react"; import { NativeBaseProvider, useColorMode, @@ -173,16 +177,18 @@ import { Button, Center, useColorModeValue, -} from 'native-base'; +} from "native-base"; function UseColorMode() { const { toggleColorMode } = useColorMode(); + const backgroundColor = useColorModeValue("warmGray.50", "coolGray.800"); + const colorMode = useColorModeValue("Light", "Dark"); return ( -
+
- The active color mode is{' '} + The active color mode is{" "} - {useColorModeValue('Light', 'Dark')} + {colorMode} diff --git a/docs/3.4.x/tooltip.md b/docs/3.4.x/tooltip.md index efa3e0440..1992c7bc9 100644 --- a/docs/3.4.x/tooltip.md +++ b/docs/3.4.x/tooltip.md @@ -8,8 +8,8 @@ import { ComponentTheme } from '../src/components'; A tooltip provides a brief, informative message when a user interacts with an element. Methods of tooltip initiation include: through a mouse-hover gesture or a keyboard-hover gesture. ```jsx isShowcase -import React from 'react'; -import { Tooltip, Button } from 'native-base'; +import React from "react"; +import { Tooltip, Button } from "native-base"; export function Example() { return ( @@ -23,7 +23,7 @@ export function Example() { ## Import ```jsx -import { Tooltip } from 'native-base'; +import { Tooltip } from "native-base"; ``` ## Examples @@ -42,7 +42,7 @@ import { Tooltip } from 'native-base'; ### Customizing tooltip -Tooltip is a wrapper around [Box](box.md). So, it also accepts all the [Box](box.md#props) props. +Tooltip is a wrapper around [Box](box.md). So, it also accepts all the [Box](box.md#h2-props) props. ```ComponentSnackPlayer path=components,composites,Tooltip,CustomTooltip.tsx diff --git a/docs/3.4.x/typescript.mdx b/docs/3.4.x/typescript.mdx index 30226ed8b..a94ae1c8d 100644 --- a/docs/3.4.x/typescript.mdx +++ b/docs/3.4.x/typescript.mdx @@ -1,14 +1,14 @@ --- id: typescript -title: Typescript +title: TypeScript --- import Image from "next/Image"; import { AspectRatio } from "native-base"; -To enable typescript for custom theme tokens or variants, we'll follow two simple steps. +To enable TypeScript for custom theme tokens or variants, we'll follow two simple steps. -Below, in the [extendTheme](http://localhost:3002/customizing-theme) function, we're adding a space token and a custom variant for the Button. +Below, in the [extendTheme](customizing-theme) function, we're adding a space token and a custom variant for the Button. ```jsx import { extendTheme } from 'native-base'; diff --git a/docs/3.4.x/use-accessible-colors.md b/docs/3.4.x/use-accessible-colors.md index 7878e776a..e0c971dfe 100644 --- a/docs/3.4.x/use-accessible-colors.md +++ b/docs/3.4.x/use-accessible-colors.md @@ -3,12 +3,12 @@ id: use-accessible-colors title: useAccessibleColors --- -`useAccessibleColors` is a custom hook that enhance color settings for better [color and contrast accessibility](https://web.dev/color-and-contrast-accessibility/) in the app. By default, accessible colors are off. This allows better color matching to the theme of the app. You can also use this hook if you want to continue using accessible text colors. You can also pass it in the config for [`NativeBaseProvider`](setup-provider.md) with [`extendTheme`](/setup-provider#add-custom-theme-optional). +`useAccessibleColors` is a custom hook that updates your color config for better [color and contrast accessibility](https://web.dev/color-and-contrast-accessibility/) in the app. By default, accessible colors are off. You can also use this hook if you want to continue using accessible text colors. You can also pass it in the config for [`NativeBaseProvider`](setup-provider.md) with [`extendTheme`](/setup-provider#h2-add-custom-theme-optional). ## Import ```jsx -import { useAccessibleColors } from 'native-base'; +import { useAccessibleColors } from "native-base"; ``` ## Example diff --git a/docs/3.4.x/use-contrast-text.md b/docs/3.4.x/use-contrast-text.md index 41c0c0888..65d425e7c 100644 --- a/docs/3.4.x/use-contrast-text.md +++ b/docs/3.4.x/use-contrast-text.md @@ -3,12 +3,12 @@ id: use-contrast-text title: useContrastText --- -`useContrastText` is a custom hook that provides color contrast (either `lightText` or `darkText`) to the color being used as a parameter. +`useContrastText` is a custom hook that provides color contrast text color (either `lightText` or `darkText`) against the background color that is passed as a parameter. ## Import ```jsx -import { useContrastText } from 'native-base'; +import { useContrastText } from "native-base"; ``` ## Examples @@ -29,4 +29,4 @@ By default, NativeBase provides contrasting color based on its theme. You can al ## Return value -Accepts and returns a color defined in the theme. +Accepts a background color and returns a text color that maintains the contrast ratio for better accessibility. diff --git a/docs/3.4.x/utility-props-specificity.md b/docs/3.4.x/utility-props-specificity.md index 9abb86545..5d714e848 100644 --- a/docs/3.4.x/utility-props-specificity.md +++ b/docs/3.4.x/utility-props-specificity.md @@ -13,6 +13,9 @@ title: Utility Props Specificity - If we have a similar prop which is also defined in the baseStyle of that component, the value of the prop will override the value of the prop defined in the baseStyle. +
+
+ Let's take an example of `Input` to understand better. ```jsx diff --git a/docs/3.4.x/utility-props.md b/docs/3.4.x/utility-props.md index 44e8c3e57..20281f505 100644 --- a/docs/3.4.x/utility-props.md +++ b/docs/3.4.x/utility-props.md @@ -12,8 +12,8 @@ The following table shows a list of every style prop and the properties within e ### Margin and padding ```jsx isLive=true -import React from 'react'; -import { Box, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Box, NativeBaseProvider, Center } from "native-base"; const NBBox = (props) => { return ; @@ -64,8 +64,8 @@ export function Example() { ### Color and background color ```jsx isLive=true -import React from 'react'; -import { Box, NativeBaseProvider, Center, Text } from 'native-base'; +import React from "react"; +import { Box, NativeBaseProvider, Center, Text } from "native-base"; function NBBox(props) { return ; @@ -81,7 +81,7 @@ function Component() { {/* using theme colors to set text color */} - {' '} + {" "} I love NativeBase @@ -121,8 +121,8 @@ Above props can be written in the format: [`color`]:alpha.[`opacityToken`], this
```jsx isLive=true -import React from 'react'; -import { HStack, Stack, Center, NativeBaseProvider } from 'native-base'; +import React from "react"; +import { HStack, Stack, Center, NativeBaseProvider } from "native-base"; function App() { return ( @@ -132,7 +132,7 @@ function App() { bg="primary.400:alpha.30" rounded="md" _text={{ - color: 'white', + color: "white", }} > Box 1 @@ -142,7 +142,7 @@ function App() { bg="primary.400:alpha.70" rounded="md" _text={{ - color: 'white', + color: "white", }} > Box 2 @@ -152,7 +152,7 @@ function App() { size="16" rounded="md" _text={{ - color: 'white', + color: "white", }} shadow="1" > @@ -177,8 +177,8 @@ export function Example() { ### Typography ```jsx isLive=true -import React from 'react'; -import { Text, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Text, NativeBaseProvider, Center } from "native-base"; const NBText = (props) => { return ; @@ -189,7 +189,7 @@ function Component() { <> {/* font-size of `theme.fontSizes.2xl` */} - Thank You{' '} + Thank You{" "} {/* text decoration `underline` */} Merci Beaucoup @@ -227,8 +227,8 @@ export function Example() { ### Layout, width and height ```jsx isLive=true -import React from 'react'; -import { Box, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Box, NativeBaseProvider, Center } from "native-base"; const NBBox = (props) => { return ; @@ -283,8 +283,8 @@ export function Example() { ### Flexbox ```jsx isLive=true -import React from 'react'; -import { Box, Flex, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Box, Flex, NativeBaseProvider, Center } from "native-base"; const NBBox = (props) => { return ; @@ -339,8 +339,8 @@ export function Example() { ### Borders ```jsx isLive=true -import React from 'react'; -import { Box, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Box, NativeBaseProvider, Center } from "native-base"; const NBBox = (props) => { return ; @@ -393,8 +393,8 @@ export function Example() { ### Borders Radius ```jsx isLive=true -import React from 'react'; -import { Box, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Box, NativeBaseProvider, Center } from "native-base"; const NBBox = (props) => { return ; @@ -442,8 +442,8 @@ export function Example() { ### Position ```jsx isLive=true -import React from 'react'; -import { Box, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Box, NativeBaseProvider, Center } from "native-base"; const NBBox = (props) => { return ; @@ -483,8 +483,8 @@ export function Example() { ### Shadow ```jsx isLive=true -import React from 'react'; -import { Box, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Box, NativeBaseProvider, Center } from "native-base"; const NBBox = (props) => { return ; @@ -526,17 +526,17 @@ export function Example() { Provides a way to pass props to child components inside Composite components. ```jsx isLive=true -import React from 'react'; -import { Button, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Button, NativeBaseProvider, Center } from "native-base"; function App() { return ( + +
); } diff --git a/docs/next/contribution.md b/docs/next/contribution.md index d90c2a68a..7338e79fa 100644 --- a/docs/next/contribution.md +++ b/docs/next/contribution.md @@ -15,9 +15,9 @@ All work on NativeBase happens directly on [GitHub](https://github.com/GeekyAnt ### Branch Organization -According to our [release schedule](https://github.com/GeekyAnts/NativeBase/releases), we maintain a `canary` branch for all the external PR's which is like a development branch with latest changes. If you send a pull request, please do it against the this `canary` branch. Once a release candidate is ready, `canary` branch will be released as a rc release package and once a stable release test is done it will be released to `native-base` package. +According to our [release schedule](https://github.com/GeekyAnts/NativeBase/releases), we maintain a `canary` branches which are like development branches with the latest changes. If you send a pull request, please do it against the `master` branch. Once you create your PR we will update the base branch to a more specific canary branch if required. Once a release candidate is ready, `canary-patch` or `canary-minor` branch will be released as a rc release package and once a stable release test is done it will be released to `native-base` package and merged into the `master`. -![Screenshot 2022-02-07 at 1 27 46 PM](https://user-images.githubusercontent.com/62810976/161559404-c2e9064c-ae62-4395-92d9-9ddba2781d7a.png) +![Screenshot 2022-08-16 at 6 51 33 PM](https://user-images.githubusercontent.com/36300815/184890022-171cf7d9-2c37-4dfa-a302-e41e879a22d7.png) ### Bugs diff --git a/docs/next/customizing-fonts.md b/docs/next/customizing-fonts.md index c8ade5f00..c50d1c190 100644 --- a/docs/next/customizing-fonts.md +++ b/docs/next/customizing-fonts.md @@ -18,33 +18,33 @@ We extend the theme object and override `fontConfig` and `fonts` properties whic This mapping is needed to make sure fontWeight, fontStyle properties work in all platforms. ```jsx -import { NativeBaseProvider, extendTheme } from 'native-base'; +import { NativeBaseProvider, extendTheme } from "native-base"; const theme = extendTheme({ fontConfig: { Roboto: { 100: { - normal: 'Roboto-Light', - italic: 'Roboto-LightItalic', + normal: "Roboto-Light", + italic: "Roboto-LightItalic", }, 200: { - normal: 'Roboto-Light', - italic: 'Roboto-LightItalic', + normal: "Roboto-Light", + italic: "Roboto-LightItalic", }, 300: { - normal: 'Roboto-Light', - italic: 'Roboto-LightItalic', + normal: "Roboto-Light", + italic: "Roboto-LightItalic", }, 400: { - normal: 'Roboto-Regular', - italic: 'Roboto-Italic', + normal: "Roboto-Regular", + italic: "Roboto-Italic", }, 500: { - normal: 'Roboto-Medium', + normal: "Roboto-Medium", }, 600: { - normal: 'Roboto-Medium', - italic: 'Roboto-MediumItalic', + normal: "Roboto-Medium", + italic: "Roboto-MediumItalic", }, // Add more variants // 700: { @@ -63,9 +63,9 @@ const theme = extendTheme({ // Make sure values below matches any of the keys in `fontConfig` fonts: { - heading: 'Roboto', - body: 'Roboto', - mono: 'Roboto', + heading: "Roboto", + body: "Roboto", + mono: "Roboto", }, }); @@ -83,5 +83,5 @@ export default function App() { Fonts can be used as shown below. The below `Text` will be rendered in `Roboto-MediumItalic` font family. ```jsx - + ``` diff --git a/docs/next/dark-mode.md b/docs/next/dark-mode.md index 001121f4d..bf78ac170 100644 --- a/docs/next/dark-mode.md +++ b/docs/next/dark-mode.md @@ -5,18 +5,18 @@ title: Making components dark mode compatible By default, most of NativeBase's components are dark mode compatible. In some scenario, you might need to make your component respond to color mode. There are 2 way to achieve this: -1. By updating component's theme -2. By using useColorModeValue +- By updating component's theme +- By using useColorModeValue ## 1. By updating component's theme -In this approach we use NativeBase's `extendTheme` function to customise the components and then use themeTools to make the component dark mode compatible. +In this approach we use NativeBase's `extendTheme` function to customise the components and then use _light and _dark props to make the component dark mode compatible. Note: Changes on the theme will be reflected on the entire application. ```tsx import React from 'react'; -import { NativeBaseProvider, themeTools } from 'native-base'; +import { NativeBaseProvider } from 'native-base'; import { extendTheme } from 'native-base'; import { Content } from './Content'; @@ -26,7 +26,8 @@ export default function () { Heading: { baseStyle: (props: any) => { return { - color: themeTools.mode('red.300', 'blue.300')(props), + _light: { color: 'red.300' }, + _dark: { color: 'blue.300' }, }; }, }, @@ -44,7 +45,7 @@ In the above example, the Heading component's color property will now respond to ## 2. By using useColorModeValue -In this approach we use NativeBase's `useColorModeValue` function and update specific props instead of updating the entire theme. +In this approach we use NativeBase's `useColorModeValue` hook and update specific props instead of updating the entire theme. Note: Changes on the theme will be reflected on the entire application. diff --git a/docs/next/default-theme.md b/docs/next/default-theme.md index 511a8b802..c957a019c 100644 --- a/docs/next/default-theme.md +++ b/docs/next/default-theme.md @@ -15,7 +15,7 @@ You can add a `theme.colors` object to provide colors for your project. By def You can also add `.alpha:{number}` to add levels of opacity to a colour. The number can also be added in the theme file. Ex: `red.300:alpha.30`, You can read more about this in [`opacity section`](default-theme#opacity) -We recommend adding a palette that ranges from `50` to `900`. Tools like [Smart Swatch](https://smart-swatch.netlify.app/), [Palx](https://palx.jxnblk.com/) are available to generate these palettes. +We recommend adding a palette that ranges from `50` to `900`. Tools like [JSON Color Palette Generator](https://json-color-palette-generator.vercel.app), [Smart Swatch](https://smart-swatch.netlify.app/) or [Palx](https://palx.jxnblk.com/) are available to generate these palettes. @@ -32,24 +32,24 @@ To manage Typography options, the theme object supports the following keys: ```jsx const typography = { letterSpacings: { - 'xs': '-0.05em', - 'sm': '-0.025em', - 'md': 0, - 'lg': '0.025em', - 'xl': '0.05em', - '2xl': '0.1em', + "xs": "-0.05em", + "sm": "-0.025em", + "md": 0, + "lg": "0.025em", + "xl": "0.05em", + "2xl": "0.1em", }, lineHeights: { - '2xs': '1em', - 'xs': '1.125em', - 'sm': '1.25em', - 'md': '1.375em', - 'lg': '1.5em', - 'xl': '1.75em', - '2xl': '2em', - '3xl': '2.5em', - '4xl': '3em', - '5xl': '4em', + "2xs": "1em", + "xs": "1.125em", + "sm": "1.25em", + "md": "1.375em", + "lg": "1.5em", + "xl": "1.75em", + "2xl": "2em", + "3xl": "2.5em", + "4xl": "3em", + "5xl": "4em", }, fontWeights: { hairline: 100, @@ -61,7 +61,7 @@ const typography = { bold: 700, extrabold: 800, black: 900, - extrablack: 950, + extraBlack: 950, }, fonts: { heading: undefined, @@ -69,20 +69,20 @@ const typography = { mono: undefined, }, fontSizes: { - '2xs': 10, - 'xs': 12, - 'sm': 14, - 'md': 16, - 'lg': 18, - 'xl': 20, - '2xl': 24, - '3xl': 30, - '4xl': 36, - '5xl': 48, - '6xl': 60, - '7xl': 72, - '8xl': 96, - '9xl': 128, + "2xs": 10, + "xs": 12, + "sm": 14, + "md": 16, + "lg": 18, + "xl": 20, + "2xl": 24, + "3xl": 30, + "4xl": 36, + "5xl": 48, + "6xl": 60, + "7xl": 72, + "8xl": 96, + "9xl": 128, }, }; ``` @@ -130,7 +130,7 @@ The `shadow` key allows you to customize the global box shadow for your project. ```jsx export default { 0: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 1, @@ -140,7 +140,7 @@ export default { elevation: 1, }, 1: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 1, @@ -150,7 +150,7 @@ export default { elevation: 2, }, 2: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 1, @@ -160,7 +160,7 @@ export default { elevation: 3, }, 3: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 2, @@ -170,7 +170,7 @@ export default { elevation: 4, }, 4: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 2, @@ -180,7 +180,7 @@ export default { elevation: 5, }, 5: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 3, @@ -190,7 +190,7 @@ export default { elevation: 6, }, 6: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 3, @@ -200,7 +200,7 @@ export default { elevation: 7, }, 7: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 4, @@ -210,7 +210,7 @@ export default { elevation: 8, }, 8: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 4, @@ -220,7 +220,7 @@ export default { elevation: 9, }, 9: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 5, diff --git a/docs/next/flex.md b/docs/next/flex.md index 964b19ae5..62cb1c544 100644 --- a/docs/next/flex.md +++ b/docs/next/flex.md @@ -6,7 +6,7 @@ title: Flex `Flex` provides helpful style shorthand and is a [`Box`](box.md) with `display: flex`. ```jsx isShowcase -import React from 'react'; +import React from "react"; import { Flex, Center, @@ -15,17 +15,22 @@ import { VStack, Divider, Box, -} from 'native-base'; + useColorModeValue, +} from "native-base"; export function Example() { + const bgShade100 = useColorModeValue("primary.100", "primary.400"); + const bgShade200 = useColorModeValue("primary.200", "primary.500"); + const bgShade300 = useColorModeValue("primary.300", "primary.600"); + const bgShade400 = useColorModeValue("primary.400", "primary.700"); return ( @@ -36,19 +41,19 @@ export function Example() { mb="2.5" mt="1.5" _text={{ - color: 'coolGray.800', + color: "coolGray.800", }} > -
+
100
-
+
200
-
+
300
-
+
400
@@ -61,19 +66,19 @@ export function Example() { mb="2.5" mt="1.5" _text={{ - color: 'coolGray.800', + color: "coolGray.800", }} > -
+
100
-
+
200
-
+
300
-
+
400
@@ -85,19 +90,19 @@ export function Example() { mb="2.5" mt="1.5" _text={{ - color: 'coolGray.800', + color: "coolGray.800", }} > -
+
100
-
+
200
-
+
300
-
+
400
@@ -109,19 +114,19 @@ export function Example() { mb="2.5" mt="1.5" _text={{ - color: 'coolGray.800', + color: "coolGray.800", }} > -
+
100
-
+
200
-
+
300
-
+
400
@@ -136,7 +141,7 @@ export function Example() { ## Import ```jsx -import { Flex, Spacer } from 'native-base'; +import { Flex, Spacer } from "native-base"; ``` - `Flex`: a **[Box](box.md)** with `display: flex` diff --git a/docs/next/form-control.md b/docs/next/form-control.md index fd52eecb7..5558f25b8 100644 --- a/docs/next/form-control.md +++ b/docs/next/form-control.md @@ -8,7 +8,7 @@ import { ComponentTheme } from '../src/components'; `FormControl` is used to form elements by providing context such as `isInvalid`, `isDisabled`, and `isRequired`. ```jsx isShowcase gradient="3" -import React from 'react'; +import React from "react"; import { FormControl, Input, @@ -17,7 +17,7 @@ import { Box, Center, NativeBaseProvider, -} from 'native-base'; +} from "native-base"; const Example = () => { return ( @@ -26,9 +26,16 @@ const Example = () => { Password { return ( ); }; ``` -The `Input` component allows a user to provide input in a text field. - ## Examples ### Basic diff --git a/docs/next/modal.md b/docs/next/modal.md index de1c66ae8..52761ec54 100644 --- a/docs/next/modal.md +++ b/docs/next/modal.md @@ -8,9 +8,9 @@ import { ComponentTheme } from '../src/components'; A `Modal` is an overlay on the primary window or another dialog window. Content behind the modal dialog remains **inert** and users cannot interact with it. ```jsx isShowcase -import React from 'react'; -import { Button, Modal, FormControl, Input } from 'native-base'; -import { useState } from 'react'; +import React from "react"; +import { Button, Modal, FormControl, Input } from "native-base"; +import { useState } from "react"; export const Example = () => { const [showModal, setShowModal] = useState(false); @@ -63,7 +63,7 @@ export const Example = () => { ## Import -NativeBase exports Modal Compound component: +NativeBase export a Modal Compound component: - `Modal`: The wrapper that provides context for its children. - `Modal.Content`: The container for the modal dialog's content. @@ -73,7 +73,7 @@ NativeBase exports Modal Compound component: - `Modal.CloseButton`: The button that closes the modal. ```jsx -import { Modal } from 'native-base'; +import { Modal } from "native-base"; ``` ## Examples diff --git a/docs/next/nativebase-factory.md b/docs/next/nativebase-factory.md index 61a6e9730..27d3a26cc 100644 --- a/docs/next/nativebase-factory.md +++ b/docs/next/nativebase-factory.md @@ -3,10 +3,10 @@ id: nativebase-factory title: NativeBase Factory --- -NativeBase factory is a function that converts non-nativebase components to nativebase enabled components so you can pass style props to them. +NativeBase factory is a function that converts Non-NativeBase components to NativeBase enabled components so you can pass style props to them. ```jsx -import { Factory } from 'native-base'; +import { Factory } from "native-base"; ``` ## Usage diff --git a/docs/next/presence-transition.md b/docs/next/presence-transition.md index f5705cc53..ebab11624 100644 --- a/docs/next/presence-transition.md +++ b/docs/next/presence-transition.md @@ -6,19 +6,19 @@ title: PresenceTransition PresenceTransition provides a declarative API to add entry and exit transitions. ```jsx isShowcase -import React from 'react'; +import React from "react"; import { Button, Center, PresenceTransition, NativeBaseProvider, -} from 'native-base'; +} from "native-base"; export const Example = () => { const [isOpen, setIsOpen] = React.useState(false); return (
{ w="200" h="100" _text={{ - color: 'white', + color: "white", }} shadow={2} > @@ -65,7 +65,7 @@ export const Example = () => { ## Props -```ComponentPropTable path=components,composites,Transitions,PresenceTransition.tsx showStylingProps=true +```ComponentPropTable path=composites,Transitions,PresenceTransition.tsx showStylingProps=true ``` @@ -88,7 +88,7 @@ interface ISupportedTransitions { ```js interface ITransitionStyleProps extends ISupportedTransitions { transition?: { - type?: 'timing' | 'spring', + type?: "timing" | "spring", easing?: (value: number) => number, overshootClamping?: boolean, restDisplacementThreshold?: number, diff --git a/docs/next/safe-area-view-props.md b/docs/next/safe-area-view-props.md index 87b69a291..a45e5d457 100644 --- a/docs/next/safe-area-view-props.md +++ b/docs/next/safe-area-view-props.md @@ -17,7 +17,7 @@ Internally, NativeBase uses [useSafeAreaInsets](https://docs.expo.io/versions/la :::info -SafeAreaView props can only be applied on [Box](box.md) as of now. To make you App SafeArea safe, just wrap your app with a Box and pass safeArea props to it. +SafeAreaView props can only be applied on [Box](box.md) as of now. To make your app SafeArea safe, just wrap your app with a Box and pass safeArea props to it. ::: @@ -26,8 +26,8 @@ SafeAreaView props can only be applied on [Box](box.md) as of now. To make you A ### Flexible SafeArea ```jsx isLive=true -import React from 'react'; -import { NativeBaseProvider, Box, Text } from 'native-base'; +import React from "react"; +import { NativeBaseProvider, Box, Text } from "native-base"; function MyComponent() { return ( // This would look different on devices with different insets @@ -50,8 +50,8 @@ export function Example() { ### Fixed SafeArea ```jsx isLive=true -import React from 'react'; -import { NativeBaseProvider, Box, Text } from 'native-base'; +import React from "react"; +import { NativeBaseProvider, Box, Text } from "native-base"; function MyComponent() { return ( // This would look same on all devices @@ -76,8 +76,8 @@ export function Example() { If you want to add the SafeAreaView props to other components, you can use the hook. Since, `SafeAreaView` props add relevant padding to the components, you will need to pass the padding manually that you are applying to the component for it to return the SafeArea adjusted padding. ```jsx isLive=true -import React from 'react'; -import { NativeBaseProvider, Box, Text, useSafeArea } from 'native-base'; +import React from "react"; +import { NativeBaseProvider, Box, Text, useSafeArea } from "native-base"; function MyComponent() { const safeAreaProps = useSafeArea({ safeAreaTop: true, pt: 2 }); return ( diff --git a/docs/next/select.md b/docs/next/select.md index db5a45a57..836c59f20 100644 --- a/docs/next/select.md +++ b/docs/next/select.md @@ -10,11 +10,11 @@ import { AndroidBadge } from "../src/components/index"; Select creates a dropdown list of items with the selected item in closed view. ```jsx isShowcase -import React from 'react'; -import { Select, VStack, CheckIcon } from 'native-base'; +import React from "react"; +import { Select, VStack, CheckIcon } from "native-base"; export const Example = () => { - let [service, setService] = React.useState(''); + let [service, setService] = React.useState(""); return ( @@ -25,11 +25,19 @@ export const Example = () => { accessibilityLabel="Choose Service" placeholder="Choose Service" _selectedItem={{ - bg: 'teal.600', + bg: "teal.600", endIcon: , }} - _light={{ bg: 'coolGray.100' }} - _dark={{ bg: 'coolGray.800' }} + _light={{ + bg: "coolGray.100", + _hover: { bg: "coolGray.200" }, + _focus: { bg: "coolGray.200:alpha.70" }, + }} + _dark={{ + bg: "coolGray.800", + _hover: { bg: "coolGray.900" }, + _focus: { bg: "coolGray.900:alpha.70" }, + }} onValueChange={(itemValue) => setService(itemValue)} > @@ -50,7 +58,7 @@ export const Example = () => { ## Import ```jsx -import { Select } from 'native-base'; +import { Select } from "native-base"; ``` ## Examples diff --git a/docs/next/setup-provider.md b/docs/next/setup-provider.md index 7cab1810a..c1497f317 100644 --- a/docs/next/setup-provider.md +++ b/docs/next/setup-provider.md @@ -8,9 +8,9 @@ NativeBaseProvider is a component that makes the theme available throughout your **App.js** ```jsx -import React from 'react'; +import React from "react"; // 1. import `NativeBaseProvider` component -import { NativeBaseProvider, Text, Box } from 'native-base'; +import { NativeBaseProvider, Text, Box } from "native-base"; export default function App() { // 2. Use at the root of your app @@ -32,13 +32,13 @@ NativeBase 3.0 provides an `extendTheme` function that deep merges the default ```jsx // 1. Import the extendTheme function -import { extendTheme, NativeBaseProvider } from 'native-base'; +import { extendTheme, NativeBaseProvider } from "native-base"; // 2. Extend the theme to include custom colors, fonts, etc const newColorTheme = { brand: { - 900: '#8287af', - 800: '#7c83db', - 700: '#b3bef6', + 900: "#8287af", + 800: "#7c83db", + 700: "#b3bef6", }, }; const theme = extendTheme({ colors: newColorTheme }); @@ -59,25 +59,25 @@ If you want to do something with the color modes in your app, you can use colorM In the below example we will show how to store the active ColorMode in an async storage, so it can be consistent all around your app. ```tsx -import React from 'react'; -import { NativeBaseProvider, ColorMode } from 'native-base'; -import type { StorageManager } from 'native-base'; -import AsyncStorage from '@react-native-async-storage/async-storage'; +import React from "react"; +import { NativeBaseProvider, ColorMode } from "native-base"; +import type { StorageManager } from "native-base"; +import AsyncStorage from "@react-native-async-storage/async-storage"; export default ({ children, theme }: any) => { const colorModeManager: StorageManager = { get: async () => { try { - let val = await AsyncStorage.getItem('@my-app-color-mode'); - return val === 'dark' ? 'dark' : 'light'; + let val = await AsyncStorage.getItem("@my-app-color-mode"); + return val === "dark" ? "dark" : "light"; } catch (e) { console.log(e); - return 'light'; + return "light"; } }, set: async (value: ColorMode) => { try { - await AsyncStorage.setItem('@my-app-color-mode', value); + await AsyncStorage.setItem("@my-app-color-mode", value); } catch (e) { console.log(e); } @@ -96,13 +96,13 @@ export default ({ children, theme }: any) => { If you want to use [Gradient feature in Box](box#with-linear-gradient), you need to pass linear gradient dependency as a config object in NativeBaseProvider. This dependency can be either from [expo-linear-gradient](https://docs.expo.io/versions/latest/sdk/linear-gradient/) or [react-native-linear-gradient](https://www.npmjs.com/package/react-native-linear-gradient) ```jsx -import React from 'react'; -import { NativeBaseProvider } from 'native-base'; +import React from "react"; +import { NativeBaseProvider } from "native-base"; const config = { dependencies: { // For Expo projects (Bare or managed workflow) - 'linear-gradient': require('expo-linear-gradient').LinearGradient, + "linear-gradient": require("expo-linear-gradient").LinearGradient, // For non expo projects // 'linear-gradient': require('react-native-linear-gradient').default, }, @@ -121,11 +121,11 @@ export default () => { ## Add isSSR (Optional) -If you are using NativeBase for a server side rendering app, you can use isSSR prop to determine whether to render the theme or not. +If you are using NativeBase for a server side rendering app like Next.js, you have to pass isSSR prop. This will resolve the responsive props to media queries on the server side and fix an issue with jumping UI on hydration. ```jsx -import React from 'react'; -import { NativeBaseProvider } from 'native-base'; +import React from "react"; +import { NativeBaseProvider } from "native-base"; export default () => { return ( diff --git a/docs/next/sidebar.json b/docs/next/sidebar.json index 9f1d028d1..83d67f331 100644 --- a/docs/next/sidebar.json +++ b/docs/next/sidebar.json @@ -170,7 +170,7 @@ }, { "id": "typescript", - "title": "Typescript", + "title": "TypeScript", "showToc": false } ] @@ -181,7 +181,7 @@ "pages": [ { "id": "aspect-ratio", - "title": "Aspect Ratio" + "title": "AspectRatio" }, { "id": "box", diff --git a/docs/next/slider.md b/docs/next/slider.md index a903e424d..e420ef51c 100644 --- a/docs/next/slider.md +++ b/docs/next/slider.md @@ -8,8 +8,8 @@ import { ComponentTheme } from '../src/components'; The `Slider` allows users to select options from a given range of values. ```jsx isShowcase -import React from 'react'; -import { Slider, Box, Center, NativeBaseProvider } from 'native-base'; +import React from "react"; +import { Slider, Box, Center, NativeBaseProvider } from "native-base"; export const Example = () => { return ( @@ -32,7 +32,7 @@ export const Example = () => { ## Import -NativeBase exports 4 slider-related components: +NativeBase exports 4 Slider related components: - `Slider`: The wrapper that provides context and functionality for all children. - `Slider.Track`: The empty part of the slider that shows the track. @@ -40,7 +40,7 @@ NativeBase exports 4 slider-related components: - `Slider.Thumb`: The handle that's used to change the slider value. ```jsx -import { Slider } from 'native-base'; +import { Slider } from "native-base"; ``` ## Examples diff --git a/docs/next/textarea.md b/docs/next/textarea.md index 6e53fa038..ff3358227 100644 --- a/docs/next/textarea.md +++ b/docs/next/textarea.md @@ -8,8 +8,8 @@ import { ComponentTheme } from '../src/components'; The `Textarea` component helps create multi-line text inputs. ```jsx isShowcase -import React from 'react'; -import { TextArea } from 'native-base'; +import React from "react"; +import { TextArea } from "native-base"; export const Example = () => { return ( @@ -18,9 +18,17 @@ export const Example = () => { h={20} placeholder="Text Area Placeholder" w="200" - _light={{ placeholderTextColor: 'trueGray.700' }} - _dark={{ bg: 'coolGray.800' }} - _hover={{ bg: 'coolGray.200' }} + _light={{ + placeholderTextColor: "trueGray.700", + bg: "coolGray.100", + _hover: { bg: "coolGray.200" }, + _focus: { bg: "coolGray.200:alpha.70" }, + }} + _dark={{ + bg: "coolGray.800", + _hover: { bg: "coolGray.900" }, + _focus: { bg: "coolGray.900:alpha.70" }, + }} /> ); }; diff --git a/docs/next/theme.md b/docs/next/theme.md index 80bce66f8..7e270b521 100644 --- a/docs/next/theme.md +++ b/docs/next/theme.md @@ -8,14 +8,14 @@ NativeBase provides multiple tools to use the central theme defined in the app. ## useTheme ```jsx isLive=true -import React from 'react'; +import React from "react"; import { NativeBaseProvider, useTheme, FlatList, Center, Box, -} from 'native-base'; +} from "native-base"; function ColorPalete() { const { colors } = useTheme(); @@ -23,7 +23,7 @@ function ColorPalete() { } /> @@ -47,17 +47,17 @@ export function Example() { You can also get specific values from the theme with [`useToken`](/use-token) hook. ```jsx isLive=true -import React from 'react'; -import { useToken, NativeBaseProvider, Center, Text } from 'native-base'; +import React from "react"; +import { useToken, NativeBaseProvider, Center, Text } from "native-base"; function Tokens() { - const [contrastThreshold, lightText] = useToken('colors', [ - 'contrastThreshold', - 'lightText', + const [contrastThreshold, lightText] = useToken("colors", [ + "contrastThreshold", + "lightText", ]); return (
- Contrast threshold is:{' '} + Contrast threshold is:{" "} {contrastThreshold} @@ -79,20 +79,20 @@ export function Example() { ## useContrastText -If you are defining the background yourself and pass a contrasting color to the text then you can use [`useContrastText`](use-contrast-text). +If you are defining the background yourself and want to pass a contrasting color to the text then you can use [`useContrastText`](use-contrast-text). ```jsx isLive=true -import React from 'react'; +import React from "react"; import { Button, Stack, useContrastText, NativeBaseProvider, Center, -} from 'native-base'; +} from "native-base"; function UseContrastingTextHook() { - const bgDark = 'primary.600'; - const bgLight = 'primary.200'; + const bgDark = "primary.600"; + const bgLight = "primary.200"; const colorContrastDark = useContrastText(bgDark); const colorContrastLight = useContrastText(bgLight); @@ -125,21 +125,25 @@ export function Example() { If you want to define some conditionals based on current color mode or change the color mode then you can try [useColorMode](use-color-mode). ```jsx isLive=true -import React from 'react'; +import React from "react"; import { NativeBaseProvider, useColorMode, Text, Button, Center, -} from 'native-base'; +} from "native-base"; function UseColorMode() { const { colorMode, toggleColorMode } = useColorMode(); return ( -
+
- The active color mode is{' '} + The active color mode is{" "} {colorMode} @@ -165,7 +169,7 @@ export function Example() { If you do not want to add conditionals for color mode everywhere and keep the code clean, then you can use [useColorModeValue](use-color-mode-value) hook. It takes two parameters, light mode value as the first and dark mode value as second. ```jsx isLive=true -import React from 'react'; +import React from "react"; import { NativeBaseProvider, useColorMode, @@ -173,16 +177,18 @@ import { Button, Center, useColorModeValue, -} from 'native-base'; +} from "native-base"; function UseColorMode() { const { toggleColorMode } = useColorMode(); + const backgroundColor = useColorModeValue("warmGray.50", "coolGray.800"); + const colorMode = useColorModeValue("Light", "Dark"); return ( -
+
- The active color mode is{' '} + The active color mode is{" "} - {useColorModeValue('Light', 'Dark')} + {colorMode} diff --git a/docs/next/tooltip.md b/docs/next/tooltip.md index efa3e0440..1992c7bc9 100644 --- a/docs/next/tooltip.md +++ b/docs/next/tooltip.md @@ -8,8 +8,8 @@ import { ComponentTheme } from '../src/components'; A tooltip provides a brief, informative message when a user interacts with an element. Methods of tooltip initiation include: through a mouse-hover gesture or a keyboard-hover gesture. ```jsx isShowcase -import React from 'react'; -import { Tooltip, Button } from 'native-base'; +import React from "react"; +import { Tooltip, Button } from "native-base"; export function Example() { return ( @@ -23,7 +23,7 @@ export function Example() { ## Import ```jsx -import { Tooltip } from 'native-base'; +import { Tooltip } from "native-base"; ``` ## Examples @@ -42,7 +42,7 @@ import { Tooltip } from 'native-base'; ### Customizing tooltip -Tooltip is a wrapper around [Box](box.md). So, it also accepts all the [Box](box.md#props) props. +Tooltip is a wrapper around [Box](box.md). So, it also accepts all the [Box](box.md#h2-props) props. ```ComponentSnackPlayer path=components,composites,Tooltip,CustomTooltip.tsx diff --git a/docs/next/typescript.mdx b/docs/next/typescript.mdx index 299cda84e..a94ae1c8d 100644 --- a/docs/next/typescript.mdx +++ b/docs/next/typescript.mdx @@ -6,9 +6,9 @@ title: TypeScript import Image from "next/Image"; import { AspectRatio } from "native-base"; -To enable typescript for custom theme tokens or variants, we'll follow two simple steps. +To enable TypeScript for custom theme tokens or variants, we'll follow two simple steps. -Below, in the [extendTheme](http://localhost:3002/customizing-theme) function, we're adding a space token and a custom variant for the Button. +Below, in the [extendTheme](customizing-theme) function, we're adding a space token and a custom variant for the Button. ```jsx import { extendTheme } from 'native-base'; diff --git a/docs/next/use-accessible-colors.md b/docs/next/use-accessible-colors.md index 7878e776a..e0c971dfe 100644 --- a/docs/next/use-accessible-colors.md +++ b/docs/next/use-accessible-colors.md @@ -3,12 +3,12 @@ id: use-accessible-colors title: useAccessibleColors --- -`useAccessibleColors` is a custom hook that enhance color settings for better [color and contrast accessibility](https://web.dev/color-and-contrast-accessibility/) in the app. By default, accessible colors are off. This allows better color matching to the theme of the app. You can also use this hook if you want to continue using accessible text colors. You can also pass it in the config for [`NativeBaseProvider`](setup-provider.md) with [`extendTheme`](/setup-provider#add-custom-theme-optional). +`useAccessibleColors` is a custom hook that updates your color config for better [color and contrast accessibility](https://web.dev/color-and-contrast-accessibility/) in the app. By default, accessible colors are off. You can also use this hook if you want to continue using accessible text colors. You can also pass it in the config for [`NativeBaseProvider`](setup-provider.md) with [`extendTheme`](/setup-provider#h2-add-custom-theme-optional). ## Import ```jsx -import { useAccessibleColors } from 'native-base'; +import { useAccessibleColors } from "native-base"; ``` ## Example diff --git a/docs/next/use-contrast-text.md b/docs/next/use-contrast-text.md index 41c0c0888..65d425e7c 100644 --- a/docs/next/use-contrast-text.md +++ b/docs/next/use-contrast-text.md @@ -3,12 +3,12 @@ id: use-contrast-text title: useContrastText --- -`useContrastText` is a custom hook that provides color contrast (either `lightText` or `darkText`) to the color being used as a parameter. +`useContrastText` is a custom hook that provides color contrast text color (either `lightText` or `darkText`) against the background color that is passed as a parameter. ## Import ```jsx -import { useContrastText } from 'native-base'; +import { useContrastText } from "native-base"; ``` ## Examples @@ -29,4 +29,4 @@ By default, NativeBase provides contrasting color based on its theme. You can al ## Return value -Accepts and returns a color defined in the theme. +Accepts a background color and returns a text color that maintains the contrast ratio for better accessibility. diff --git a/docs/next/utility-props-specificity.md b/docs/next/utility-props-specificity.md index 9abb86545..b09639c6e 100644 --- a/docs/next/utility-props-specificity.md +++ b/docs/next/utility-props-specificity.md @@ -11,9 +11,9 @@ title: Utility Props Specificity In the above example, we have two similar props for the Input component, but as you might have noticed `px="2"` is more specific than `p="0"` in terms of providing padding to the Input. This follows React Native's specificity precedence while applying utility style props to a component, order does not matter. So, `px="2"` will be applied when the Input component is rendered. -- If we have a similar prop which is also defined in the baseStyle of that component, the value of the prop will override the value of the prop defined in the baseStyle. +- If we have a similar prop which is also defined in the baseStyle of that component, the value of the prop will override the value of the prop defined in the baseStyle - Let's take an example of `Input` to understand better. + . Let's take an example of `Input` to understand better. ```jsx diff --git a/docs/next/utility-props.md b/docs/next/utility-props.md index 44e8c3e57..20281f505 100644 --- a/docs/next/utility-props.md +++ b/docs/next/utility-props.md @@ -12,8 +12,8 @@ The following table shows a list of every style prop and the properties within e ### Margin and padding ```jsx isLive=true -import React from 'react'; -import { Box, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Box, NativeBaseProvider, Center } from "native-base"; const NBBox = (props) => { return ; @@ -64,8 +64,8 @@ export function Example() { ### Color and background color ```jsx isLive=true -import React from 'react'; -import { Box, NativeBaseProvider, Center, Text } from 'native-base'; +import React from "react"; +import { Box, NativeBaseProvider, Center, Text } from "native-base"; function NBBox(props) { return ; @@ -81,7 +81,7 @@ function Component() { {/* using theme colors to set text color */} - {' '} + {" "} I love NativeBase @@ -121,8 +121,8 @@ Above props can be written in the format: [`color`]:alpha.[`opacityToken`], this
```jsx isLive=true -import React from 'react'; -import { HStack, Stack, Center, NativeBaseProvider } from 'native-base'; +import React from "react"; +import { HStack, Stack, Center, NativeBaseProvider } from "native-base"; function App() { return ( @@ -132,7 +132,7 @@ function App() { bg="primary.400:alpha.30" rounded="md" _text={{ - color: 'white', + color: "white", }} > Box 1 @@ -142,7 +142,7 @@ function App() { bg="primary.400:alpha.70" rounded="md" _text={{ - color: 'white', + color: "white", }} > Box 2 @@ -152,7 +152,7 @@ function App() { size="16" rounded="md" _text={{ - color: 'white', + color: "white", }} shadow="1" > @@ -177,8 +177,8 @@ export function Example() { ### Typography ```jsx isLive=true -import React from 'react'; -import { Text, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Text, NativeBaseProvider, Center } from "native-base"; const NBText = (props) => { return ; @@ -189,7 +189,7 @@ function Component() { <> {/* font-size of `theme.fontSizes.2xl` */} - Thank You{' '} + Thank You{" "} {/* text decoration `underline` */} Merci Beaucoup @@ -227,8 +227,8 @@ export function Example() { ### Layout, width and height ```jsx isLive=true -import React from 'react'; -import { Box, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Box, NativeBaseProvider, Center } from "native-base"; const NBBox = (props) => { return ; @@ -283,8 +283,8 @@ export function Example() { ### Flexbox ```jsx isLive=true -import React from 'react'; -import { Box, Flex, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Box, Flex, NativeBaseProvider, Center } from "native-base"; const NBBox = (props) => { return ; @@ -339,8 +339,8 @@ export function Example() { ### Borders ```jsx isLive=true -import React from 'react'; -import { Box, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Box, NativeBaseProvider, Center } from "native-base"; const NBBox = (props) => { return ; @@ -393,8 +393,8 @@ export function Example() { ### Borders Radius ```jsx isLive=true -import React from 'react'; -import { Box, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Box, NativeBaseProvider, Center } from "native-base"; const NBBox = (props) => { return ; @@ -442,8 +442,8 @@ export function Example() { ### Position ```jsx isLive=true -import React from 'react'; -import { Box, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Box, NativeBaseProvider, Center } from "native-base"; const NBBox = (props) => { return ; @@ -483,8 +483,8 @@ export function Example() { ### Shadow ```jsx isLive=true -import React from 'react'; -import { Box, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Box, NativeBaseProvider, Center } from "native-base"; const NBBox = (props) => { return ; @@ -526,17 +526,17 @@ export function Example() { Provides a way to pass props to child components inside Composite components. ```jsx isLive=true -import React from 'react'; -import { Button, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Button, NativeBaseProvider, Center } from "native-base"; function App() { return (