diff --git a/docs.config.js b/docs.config.js index 1f9fc7d4a..dfa69a610 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.11", + "3.4.x": "3.4.19", }, componentOfTheWeek: { switch: "https://www.youtube.com/embed/VGUhi8IQHDw", diff --git a/docs/3.0.x/accessibility.md b/docs/3.0.x/accessibility.md index a59a76697..069abea69 100644 --- a/docs/3.0.x/accessibility.md +++ b/docs/3.0.x/accessibility.md @@ -7,7 +7,7 @@ NativeBase comes with the latest accessibility standards out of the box includin ## Accessible Roles -NativeBase uses [React Native ARIA](https://react-native-aria.geekyants.com/) to implements [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.2/) standards to its components. This is designed to provide meaning for controls that aren't built using components provided by the platform. +NativeBase uses [React Native ARIA](https://react-native-aria.geekyants.com/) to implement [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.2/) standards to its components. This is designed to provide meaning for controls that aren't built using components provided by the platform. ## Accessible Labels @@ -15,10 +15,10 @@ When a view is marked as accessible, it is a good practice to set an `accessibil ## Keyboard Navigation -Many complex components, like Tabs and Dialog, come with expectations from users on how to interact with their content using a keyboard or other non-mouse input modalities. NativeBase Primitives provide basic keyboard support in accordance with the [WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices-1.2/). +Many complex components, like Tabs and Dialog, come with expectations from users on how to interact with their content using a keyboard or other non-mouse input modalities. NativeBase Primitives provide basic keyboard support in accordance with the [WAI-ARIA authoring practices](https://www.w3.org/WAI/ARIA/apg/). ## Focus Management Proper keyboard navigation and good labelling often go hand-in-hand with managing focus. When a user interacts with a component and something changes as a result, it's often helpful to move focus with the interaction. And for screen reader users, moving focus often results in an announcement to convey the new context, which relies on proper labelling. -In many NativeBase Components, we move focus based on the interactions a user normally takes in a given component. For example, in `Modal`, when the modal is opened, the focus is programmatically moved to the `first focusable element` and trapped inside the modal to anticipate a response to the prompt. +In many NativeBase Components, we move focus based on the interactions a user normally makes in a given component. For example, in `Modal`, when the modal is opened, the focus is programmatically moved to the `first focusable element` and trapped inside the modal to anticipate a response to the prompt. diff --git a/docs/3.0.x/alert-dialog.md b/docs/3.0.x/alert-dialog.md index 81bf39b88..5e2b29e6e 100644 --- a/docs/3.0.x/alert-dialog.md +++ b/docs/3.0.x/alert-dialog.md @@ -9,10 +9,10 @@ import { ComponentTheme } from '../../src/components'; ## Import -- `AlertDialog`: provides context and state for the dialog. -- `AlertDialog.Header`: contains the title announced by screen readers. -- `AlertDialog.Body`: contains the description announced by screen readers. -- `AlertDialog.Footer`: contains the actions of the dialog. +- `AlertDialog`: Provides context and state for the dialog. +- `AlertDialog.Header`: Contains the title announced by screen readers. +- `AlertDialog.Body`: Contains the description announced by screen readers. +- `AlertDialog.Footer`: Contains the actions of the dialog. - `AlertDialog.Content`: The wrapper for the alert dialog's content. - `AlertDialog.CloseButton`: The button that closes the dialog. @@ -135,7 +135,7 @@ AlertDialog and its components compose the **[Modal](/modal)** component, so all ## Accessibility -Adheres to the [Alert and Message Dialogs WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#alertdialog) +Adheres to the [Alert and Message Dialogs WAI-ARIA design pattern.](https://www.w3.org/WAI/ARIA/apg/#alertdialog) ### Keyboard Interactions diff --git a/docs/3.0.x/box.md b/docs/3.0.x/box.md index a583fecc4..a12b95783 100644 --- a/docs/3.0.x/box.md +++ b/docs/3.0.x/box.md @@ -25,7 +25,7 @@ This is a generic component for low level layout needs. It is similar to a [`div ### With Linear gradient -If you're using [Expo](https://docs.expo.io/) managed or bare workflow, you can install [expo-linear-gradient](https://docs.expo.io/versions/latest/sdk/linear-gradient/) and configure it in the [NativeBaseProvider](setup-provider#add-external-dependencies-optional) as shown below. +If you're using [Expo](https://docs.expo.dev/index.html) managed or bare workflow, you can install [expo-linear-gradient](https://docs.expo.dev/versions/latest/sdk/linear-gradient/) and configure it in the [NativeBaseProvider](setup-provider#add-external-dependencies-optional) as shown below. ```jsx isLive=true import React from 'react'; diff --git a/docs/3.0.x/building-drawer-navigation.md b/docs/3.0.x/building-drawer-navigation.md index 84d0258f5..b37b7bb17 100644 --- a/docs/3.0.x/building-drawer-navigation.md +++ b/docs/3.0.x/building-drawer-navigation.md @@ -10,13 +10,13 @@ Common pattern in navigation is to use drawer from left (sometimes right) side f Here is an example to show how easily and quickly we can use React Native's [DrawerNavigation](https://reactnavigation.org/docs/drawer-based-navigation/) in NB. ```jsx isSnackPlayer name="Building Drawer Navigation" -import * as React from 'react'; -import { NavigationContainer } from '@react-navigation/native'; +import * as React from "react"; +import { NavigationContainer } from "@react-navigation/native"; import { createDrawerNavigator, DrawerContentScrollView, -} from '@react-navigation/drawer'; -import { MaterialCommunityIcons } from '@expo/vector-icons'; +} from "@react-navigation/drawer"; +import { MaterialCommunityIcons } from "@expo/vector-icons"; import { NativeBaseProvider, Button, @@ -30,7 +30,8 @@ import { HStack, Divider, Icon, -} from 'native-base'; +} from "native-base"; +global.__reanimatedWorkletInit = () => {}; const Drawer = createDrawerNavigator(); function Component(props) { return ( @@ -52,18 +53,18 @@ function Component(props) { const getIcon = (screenName) => { switch (screenName) { - case 'Inbox': - return 'email'; - case 'Outbox': - return 'send'; - case 'Favorites': - return 'heart'; - case 'Archive': - return 'archive'; - case 'Trash': - return 'trash-can'; - case 'Spam': - return 'alert-circle'; + case "Inbox": + return "email"; + case "Outbox": + return "send"; + case "Favorites": + return "heart"; + case "Archive": + return "archive"; + case "Trash": + return "trash-can"; + case "Spam": + return "alert-circle"; default: return undefined; } @@ -90,8 +91,8 @@ function CustomDrawerContent(props) { rounded="md" bg={ index === props.state.index - ? 'rgba(6, 182, 212, 0.1)' - : 'transparent' + ? "rgba(6, 182, 212, 0.1)" + : "transparent" } onPress={(event) => { props.navigation.navigate(name); @@ -100,7 +101,7 @@ function CustomDrawerContent(props) { } @@ -108,7 +109,7 @@ function CustomDrawerContent(props) { {name} diff --git a/docs/3.0.x/building-footer-tabs.md b/docs/3.0.x/building-footer-tabs.md index 00f1e7531..ef3f5cfef 100644 --- a/docs/3.0.x/building-footer-tabs.md +++ b/docs/3.0.x/building-footer-tabs.md @@ -32,7 +32,7 @@ export function Example() { return ( -
+ ``` -With NativeBase, you can create your own design system. NativeBase follows [styled-system's specification](https://styled-system.com/theme-specification/) to construct design system. +With NativeBase, you can create your own design system. NativeBase follows the [styled-system's specification](https://styled-system.com/theme-specification/) to construct design systems. Checkout the **[default NativeBase theme](default-theme)** and how to customize it **[here](customizingTheme)**. diff --git a/docs/3.0.x/divider.md b/docs/3.0.x/divider.md index 50f50a696..a65c8b86a 100644 --- a/docs/3.0.x/divider.md +++ b/docs/3.0.x/divider.md @@ -27,7 +27,7 @@ The Divider displays a thin horizontal or vertical line. Pass the `orientation` prop and set it to either `horizontal` or `vertical`. -> **Note:** If the horizontal orientation is used, make sure that the parent element is assigned a width and If the vertical orientation is used, make sure that the parent element is assigned a height. +> **Note:** If the horizontal orientation is used, make sure that the parent element is assigned a width. If the vertical orientation is used, make sure that the parent element is assigned a height. ```ComponentSnackPlayer path=composites,Divider,Orientation.tsx diff --git a/docs/3.0.x/flex.md b/docs/3.0.x/flex.md index 3c06d7d51..0e9fddc8d 100644 --- a/docs/3.0.x/flex.md +++ b/docs/3.0.x/flex.md @@ -16,7 +16,7 @@ import { Flex, Spacer } from 'native-base'; ## Usage -Flex components comes with some helpful shorthand props: +Flex components come with some helpful shorthand props: - `flexDirection` is `direction` - `flexWrap` is `wrap` diff --git a/docs/3.0.x/icon-button.md b/docs/3.0.x/icon-button.md index dcf790c3f..401a7faa7 100644 --- a/docs/3.0.x/icon-button.md +++ b/docs/3.0.x/icon-button.md @@ -5,7 +5,7 @@ title: IconButton import { ComponentTheme } from '../../src/components'; -`IconButton` composes the `Button` component. It is generally used to make an Icon pressable. +`IconButton` consists of the `Button` component. It is generally used to make an Icon pressable. ## Examples @@ -40,4 +40,4 @@ import { ComponentTheme } from '../../src/components'; ## Accessibility - Use accessibilityLabel for labelling icon buttons to make sure it's announced by screen reader devices. -- IconButton has a `role` set to [button](https://www.w3.org/TR/wai-aria-practices-1.2/#button). +- IconButton has a `role` set to [button](https://www.w3.org/WAI/ARIA/apg/#button). diff --git a/docs/3.0.x/icon.md b/docs/3.0.x/icon.md index b1438011d..925dfa107 100644 --- a/docs/3.0.x/icon.md +++ b/docs/3.0.x/icon.md @@ -5,15 +5,15 @@ title: Icon You can use icons in multiple ways in NativeBase: -- Create icon by creating an SVG Icon -- Create icon using createIcon function and use it as a component +- Create icon by creating an SVG Icon. +- Create icon using createIcon function and use it as a component. - Use a third-party icon library ( such as [@expo/vector-icons](https://github.com/expo/vector-icons) ), with `as` prop. ## Examples ### NativeBase Icons -We provides a set of commonly used interface icons. So you can directly use them in your project. All our icons are create using [`createIcon`](icon#createicon) function from NativeBase. +We provide a set of commonly used interface icons which you can directly use in your project. All our icons are create using [`createIcon`](icon#createicon) function from NativeBase. ```ComponentSnackPlayer path=primitives,Icon,AllIcons.tsx diff --git a/docs/3.0.x/installation.mdx b/docs/3.0.x/installation.mdx index 9f76d074d..5e84ef533 100644 --- a/docs/3.0.x/installation.mdx +++ b/docs/3.0.x/installation.mdx @@ -5,7 +5,7 @@ title: Installation import { InstallationTiles } from "../../src/components"; -**NativeBase** is supported in [Expo](https://docs.expo.io/get-started/installation/) or React Native CLI initiated apps. Web support is made possible by [react-native-web](https://necolas.github.io/react-native-web/). +**NativeBase** is supported in [Expo](https://docs.expo.dev/get-started/installation/) or React Native CLI initiated apps. Web support is made possible by [react-native-web](https://necolas.github.io/react-native-web/). Refer the guides shown below to setup NativeBase in your React app. diff --git a/docs/3.0.x/link.md b/docs/3.0.x/link.md index 6b5920dee..23c65f296 100644 --- a/docs/3.0.x/link.md +++ b/docs/3.0.x/link.md @@ -65,4 +65,4 @@ Link implements **[Box](box.md)**, so all the Box Props can be passed to it. ## Accessibility -Adheres to the [Link WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#link) +Adheres to the [Link WAI-ARIA design pattern.](https://www.w3.org/WAI/ARIA/apg/#link) diff --git a/docs/3.0.x/menu.md b/docs/3.0.x/menu.md index 736456663..768f136bd 100644 --- a/docs/3.0.x/menu.md +++ b/docs/3.0.x/menu.md @@ -91,4 +91,4 @@ Extends `MenuItem`. ## Accessibility -Adheres to the [Menu WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#menu) +Adheres to the [Menu WAI-ARIA design pattern.](https://www.w3.org/WAI/ARIA/apg/#menu) diff --git a/docs/3.0.x/migration/v3.md b/docs/3.0.x/migration/v3.md index 2b3095055..4ed6cbe32 100644 --- a/docs/3.0.x/migration/v3.md +++ b/docs/3.0.x/migration/v3.md @@ -3,7 +3,7 @@ id: Guide title: Guide to v3 --- -`v3` comes with a lot of changes in philosophy as well as the API. We have re-imagined how we should code for React Native as well as web. Keeping this in mind, you might face a lot of changes from v2 to v3. This might be a bit of tedious work but we promise you, it will be worth it! +`v3` comes with a lot of changes in philosophy as well as the API. We have re-imagined how we should code for React Native as well as web. Keeping this in mind, you might come across a lot of changes while upgrading from v2 to v3. This might seem to be a bit of tedious work but we promise you, it will be worth it! If you are looking to upgrade NativeBase from `v2` to `v3` in your application, we recommend looking into the following sections first: @@ -14,6 +14,6 @@ If you are looking to upgrade NativeBase from `v2` to `v3` in your application, This will allow you to leverage `v3` to the fullest. We have further divided the migration guide into different components, so that it's easier to search for a specific one. -We hope that `v3` is able to fulfill all the expectations set by it's predecessor and makes the overall UX and DX of your application better. +We hope that `v3` is able to fulfill all the expectations set by its predecessor and makes the overall UX and DX of your application better. Happy Coding! diff --git a/docs/3.0.x/modal.md b/docs/3.0.x/modal.md index e4be0e19f..bd3a97962 100644 --- a/docs/3.0.x/modal.md +++ b/docs/3.0.x/modal.md @@ -9,7 +9,7 @@ A Modal is a window overlaid on either the primary window or another dialog wind ## Import -NativeBase exports Modal Compound component: +NativeBase exports a Modal Compound component: - `Modal`: The wrapper that provides context for its children. - `Modal.Content`: The container for the modal dialog's content. @@ -66,7 +66,7 @@ If you want a specifically aligned Modal, pass `justifyContent` and `alignItems` ## Accessibility -Uses React Native ARIA [@react-native-aria/focus](https://react-native-aria.geekyants.com/docs/FocusScope) which follows the [Dialog Modal WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#dialog_modal). +Uses React Native ARIA [@react-native-aria/focus](https://react-native-aria.geekyants.com/docs/FocusScope) which follows the [Dialog Modal WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/#dialog_modal). ### Keyboard Interactions diff --git a/docs/3.0.x/nativebase-factory.md b/docs/3.0.x/nativebase-factory.md index b09d046c7..02c521dd3 100644 --- a/docs/3.0.x/nativebase-factory.md +++ b/docs/3.0.x/nativebase-factory.md @@ -147,5 +147,5 @@ export function Example() { | Name | Type | Description | Default | | -------------- | --------------- | ----------------------------------------------------------------------------- | ------- | -| component | React component | Original component to be passed on which nativebase props have to be applied. | - | +| component | React component | Original component to be passed on which NativeBase props have to be applied. | - | | componentTheme | Object | This object can include `baseStyle`, `sizes`, `variants`, `defaultProps` | - | diff --git a/docs/3.0.x/popover.md b/docs/3.0.x/popover.md index 219b602ac..d78d315ba 100644 --- a/docs/3.0.x/popover.md +++ b/docs/3.0.x/popover.md @@ -83,7 +83,7 @@ You can pass custom backgroundColor using `bg` or `backgroundColor`, `borderColo ## Accessibility -Adheres to the [Dialog WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#dialog_modal) +Adheres to the [Dialog WAI-ARIA design pattern.](https://www.w3.org/WAI/ARIA/apg/#dialog_modal) ### Keyboard Interactions diff --git a/docs/3.0.x/progress.md b/docs/3.0.x/progress.md index 9fe5ee80c..7b0b68ed3 100644 --- a/docs/3.0.x/progress.md +++ b/docs/3.0.x/progress.md @@ -58,5 +58,5 @@ import { Progress } from 'native-base'; ## Accessibility - Adheres to the `progressbar` [role requirements.](https://www.w3.org/TR/wai-aria-1.2/#progressbar) -- On web, `aria-valuenow`, `aria-valuemin` and `aria-valuemax` to ensure the progress percent is visible to screen readers. -- On mobile, [accessibilityValue](https://reactnative.dev/docs/accessibility#accessibilityvalue) is used to ensure it's announced by Talkback and VoiceOver. +- On web, `aria-valuenow`, `aria-valuemin` and `aria-valuemax` is used to ensure the progress percent is visible to screen readers. +- On mobile, [accessibilityValue](https://reactnative.dev/docs/accessibility#accessibilityvalue) is used to ensure it is announced by Talkback and VoiceOver. diff --git a/docs/3.0.x/radio.md b/docs/3.0.x/radio.md index 63485030b..051604896 100644 --- a/docs/3.0.x/radio.md +++ b/docs/3.0.x/radio.md @@ -79,7 +79,7 @@ import { ComponentTheme } from '../../src/components'; ## Accessibility -Uses React Native ARIA [@react-native-aria/radio](https://react-native-aria.geekyants.com/docs/useRadioGroup) which follows the [Radio Group WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#radiobutton). +Uses React Native ARIA [@react-native-aria/radio](https://react-native-aria.geekyants.com/docs/useRadioGroup) which follows the [Radio Group WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/#radiobutton). ### Keyboard Interactions diff --git a/docs/3.0.x/responsive.md b/docs/3.0.x/responsive.md index e2d967c7e..aed4a6590 100644 --- a/docs/3.0.x/responsive.md +++ b/docs/3.0.x/responsive.md @@ -23,7 +23,7 @@ To make styles responsive, you can use either the array or object syntax. All style props that arrays as values for responsive styles. -For Example to make a `Box` width or w responsive using the array syntax, here's what you need to do: +For example, to make a `Box` width or w responsive using the array syntax, here's what you need to do: ```jsx isLive=true import React from 'react'; @@ -56,7 +56,7 @@ export function Example() { You can also define responsive values with breakpoint aliases in an object. Any undefined alias key will define the base, non-responsive value. -For Example to make a `Text` fontSize responsive using the object syntax, here's what you need to do: +For example, to make a `Text` fontSize responsive using the object syntax, here's what you need to do: ```jsx isLive=true import React from 'react'; diff --git a/docs/3.0.x/safe-area-view-props.md b/docs/3.0.x/safe-area-view-props.md index f566c1947..a574e2d76 100644 --- a/docs/3.0.x/safe-area-view-props.md +++ b/docs/3.0.x/safe-area-view-props.md @@ -3,7 +3,7 @@ id: safe-area-view-props title: SafeAreaView Props --- -To make your components respect the [SafeAreaView](https://reactnative.dev/docs/safeareaview) of the device, we have provided some props that you can use with Box component. They apply a safe padding to your component in the parts decided by the passed props. These props accept either a boolean or a number. If boolean is passed then component takes flexible inset and adjusts its children according to the the device. If a number is passed then it provides a fixed inset in the chosen direction. +To make your components respect the [SafeAreaView](https://reactnative.dev/docs/safeareaview) of the device, we have provided some props that you can use with Box component. They apply a safe padding to your component in the parts decided by the passed props. These props accept either a boolean or a number. If a Boolean is passed, then the component takes a flexible inset and adjusts its children according to the device. If a number is passed, then it provides a fixed inset in the chosen direction. - `safeArea`: Apply safe padding to all edges. - `safeAreaX`: Apply safe padding to x direction. @@ -13,11 +13,11 @@ To make your components respect the [SafeAreaView](https://reactnative.dev/docs/ - `safeAreaLeft`: Apply safe padding to left. - `safeAreaRight`: Apply safe padding to right. -Internally, NativeBase uses [useSafeAreaInsets](https://docs.expo.io/versions/latest/sdk/safe-area-context/#hooks) hook of [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context). +Internally, NativeBase uses [useSafeAreaInsets](https://docs.expo.dev/versions/latest/sdk/safe-area-context/#hooks) hook of [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context). :::info -SafeAreaView props can only be applied on [Box](box.md) as of now. To make you App SafeArea safe, just wrap your app with a Box and pass safeArea props to it. +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. ::: @@ -73,7 +73,7 @@ export function Example() { ### Using Hook -If you want to add the SafeAreaView props to other components, you can use the hook. Since, `SafeAreaView` props add relevant padding to the components, you will need to pass the padding manually that you are applying to the component for it to return the SafeArea adjusted padding. +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'; diff --git a/docs/3.0.x/setup-provider.md b/docs/3.0.x/setup-provider.md index b4eb8da17..2e6a09db5 100644 --- a/docs/3.0.x/setup-provider.md +++ b/docs/3.0.x/setup-provider.md @@ -56,7 +56,7 @@ function App() { If you want to do something with the color modes in your app, you can use colorModeManager Prop of NativeBaseProvider to achieve it. -In the below example we will show how to store the active ColorMode in an async storage, so it can be consistent all around your app. +In the example below, we 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'; @@ -93,7 +93,7 @@ export default ({ children, theme }: any) => { ## Add external dependencies (Optional) -If you want to use [Gradient feature in Box](box#with-linear-gradient), you need to pass linear gradient dependency as a config object in NativeBaseProvider. This dependency can be either from [expo-linear-gradient](https://docs.expo.io/versions/latest/sdk/linear-gradient/) or [react-native-linear-gradient](https://www.npmjs.com/package/react-native-linear-gradient) +If you want to use the [Gradient feature in Box](box#with-linear-gradient),it has 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'; @@ -124,6 +124,6 @@ export default () => { | Name | Type | Description | Default | | -------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------ | | initialWindowMetrics | Object | Mock data for frame and insets. [Refer this](https://github.com/th3rdwave/react-native-safe-area-context#testing) for further information. | - | -| colorModeManager | { get : Function , set : Function } | Manage Color mode in your app | - | -| theme | Object | use custom theme in your app | NativeBase Default Theme | +| colorModeManager | { get : Function , set : Function } | Manages Color mode in your app | - | +| theme | Object | Provides a custom theme for your app. | NativeBase Default Theme | | config | {dependencies: {}} | To include external dependencies. For example - [Linear gradient](box#with-linear-gradient) | - | diff --git a/docs/3.0.x/slider.md b/docs/3.0.x/slider.md index b8d94b9e9..ec7a22f25 100644 --- a/docs/3.0.x/slider.md +++ b/docs/3.0.x/slider.md @@ -14,7 +14,7 @@ NativeBase exports 4 slider-related components: - `Slider`: The wrapper that provides context and functionality for all children. - `Slider.Track`: The empty part of the slider that shows the track. - `Slider.FilledTrack`: The filled part of the slider. -- `Slider.Thumb`: The handle that's used to change the slider value. +- `Slider.Thumb`: The handle that is used to change the slider value. ```jsx import { Slider } from 'native-base'; @@ -74,7 +74,7 @@ import { Slider } from 'native-base'; ## Accessibility -Adheres to the [Slider WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#slidertwothumb) +Adheres to the [Slider WAI-ARIA design pattern.](https://www.w3.org/WAI/ARIA/apg/#slidertwothumb) ### Keyboard Interactions diff --git a/docs/3.0.x/theme.md b/docs/3.0.x/theme.md index ccb14a2a7..259439050 100644 --- a/docs/3.0.x/theme.md +++ b/docs/3.0.x/theme.md @@ -3,7 +3,7 @@ id: theme title: Using Theme --- -NativeBase provides multiple tools to use the central theme defined in the app. First tool is [`useTheme`](/use-theme), which you can use to access the values from the current theme. +NativeBase provides multiple tools to use the central theme defined in the app. The first tool is [`useTheme`](/use-theme), which you can use to access the values from the current theme. ## useTheme @@ -77,7 +77,7 @@ 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 pass a contrasting color to the text, then you can use [`useContrastText`](use-contrast-text). ```jsx isLive=true import React from 'react'; @@ -120,7 +120,7 @@ export function Example() { ## useColorMode -If you want to define some conditionals based on current color mode or change the color mode then you can try [useColorMode](useColorMode.md). +If you want to define some conditionals based on current color mode or change the color mode, then you can try [useColorMode](useColorMode.md). ```jsx isLive=true import React from 'react'; diff --git a/docs/3.0.x/toast.md b/docs/3.0.x/toast.md index e0da14f77..d6019a4b4 100644 --- a/docs/3.0.x/toast.md +++ b/docs/3.0.x/toast.md @@ -5,7 +5,7 @@ title: Toast import { ComponentTheme } from '../../src/components'; -`Toast` is used to show alerts on top of an overlay. `Toast` will close itself when the close button is clicked, or after a timeout — the default is 5 seconds. The toast component is used to give feeback to users after an action has taken place. +`Toast` is used to show alerts on top of an overlay. `Toast` will close itself when the close button is clicked on or after a timeout — the default is 5 seconds. The toast component is used to give feeback to users after an action has taken place. Toasts can be configured to appear at either the top or the bottom of an application window, and it is possible to have more than one toast onscreen at a time. @@ -39,7 +39,7 @@ Display a custom component instead of the default Toast UI. ### Closing Toasts -Toasts can be closed imperatively, individually (via the close instance method) or all together (via the closeAll instance method). +Toasts can be closed imperatively, individually (via the close instance method), or all together (via the closeAll instance method). ```ComponentSnackPlayer path=composites,Toast,CloseToast.tsx @@ -56,7 +56,7 @@ You can use status to change the color of your toasts. ### Preventing Duplicate Toast -In some cases you might need to prevent duplicate of specific toasts. To achieve you need to pass an id and use the toast.isActive method to determine when to call toast.show(...). +In some cases, you might need to prevent duplicates of specific toasts. To achieve this, you need to pass an id and use the toast.isActive method to determine when to call toast.show(...). ```ComponentSnackPlayer path=composites,Toast,PreventDuplicate.tsx @@ -64,7 +64,7 @@ In some cases you might need to prevent duplicate of specific toasts. To achieve ## Props -Below props can be passed while calling toast.show. +The following props can be passed while calling toast.show. ```ComponentPropTable path=composites,Toast,ToastDummy.tsx diff --git a/docs/3.0.x/use-color-mode.md b/docs/3.0.x/use-color-mode.md index caf92e3cc..41973385e 100644 --- a/docs/3.0.x/use-color-mode.md +++ b/docs/3.0.x/use-color-mode.md @@ -8,13 +8,13 @@ title: useColorMode ## Import ```jsx -import { useColorMode } from 'native-base'; +import { useColorMode } from "native-base"; ``` ## Example ```jsx isLive=true -import React from 'react'; +import React from "react"; import { NativeBaseProvider, VStack, @@ -22,12 +22,12 @@ import { Text, Button, Center, -} from 'native-base'; +} from "native-base"; function UseColorMode() { const { colorMode, toggleColorMode } = useColorMode(); return ( -
+
The active color mode is {colorMode} @@ -51,6 +51,6 @@ export function Example() { | Name | Type | Description | Default | | --------------- | --------------- | ------------------------------------------ | ------- | -| colorMode | `light`, `dark` | The active color mode | `light` | +| colorMode | `light`, `dark` | The active color mode. | `light` | | setColorMode | function | Use to set color mode. | - | | toggleColorMode | function | Use to toggle between light and dark mode. | - | diff --git a/docs/3.0.x/use-contrast-text.md b/docs/3.0.x/use-contrast-text.md index 1dde80c84..6ecea23c6 100644 --- a/docs/3.0.x/use-contrast-text.md +++ b/docs/3.0.x/use-contrast-text.md @@ -54,7 +54,7 @@ export function Example() { ### Using Accessible Colors -By default, NativeBase provides contrasting color based on its theme. You can also choose to get color with better [color and contrast accessibility](https://web.dev/color-and-contrast-accessibility/) with the help of [`useAccessibleColors`](use-accessible-colors) hook. +By default, NativeBase provides contrasting colors based on its theme. You can also choose to get colors with better [color and contrast accessibility](https://web.dev/color-and-contrast-accessibility/) with the help of [`useAccessibleColors`](use-accessible-colors) hook. ```jsx isLive=true import React from 'react'; diff --git a/docs/3.0.x/utility-first.mdx b/docs/3.0.x/utility-first.mdx index 7e2a78ebc..3fc48a93b 100644 --- a/docs/3.0.x/utility-first.mdx +++ b/docs/3.0.x/utility-first.mdx @@ -13,7 +13,7 @@ To understand utility props, let's take an example. ## With React Native -Let's try the traditional way of building the above card in React Native. +Let's try the traditional way of building the following card in React Native. @@ -175,8 +175,8 @@ export function Example() { The above example demonstrates the usage of [utility props](utility-props) alongwith [VStack](vstack), [HStack](hstack) components. This approach allows us to style components without using StyleSheet API. -Apart from productivity boost and saving time there are other benefits by styling components using utility props. -No need to name styles anymore, no need to define an object and think about naming them. +Apart from productivity boosts and saving time, there are other benefits to styling components using utility props. +No need to name styles anymore, no need to define an object and think about naming it. Using utility-first props, you can focus on creating reusable components instead of reusable stylesheets. diff --git a/docs/3.1.x/accessibility.md b/docs/3.1.x/accessibility.md index a59a76697..069abea69 100644 --- a/docs/3.1.x/accessibility.md +++ b/docs/3.1.x/accessibility.md @@ -7,7 +7,7 @@ NativeBase comes with the latest accessibility standards out of the box includin ## Accessible Roles -NativeBase uses [React Native ARIA](https://react-native-aria.geekyants.com/) to implements [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.2/) standards to its components. This is designed to provide meaning for controls that aren't built using components provided by the platform. +NativeBase uses [React Native ARIA](https://react-native-aria.geekyants.com/) to implement [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.2/) standards to its components. This is designed to provide meaning for controls that aren't built using components provided by the platform. ## Accessible Labels @@ -15,10 +15,10 @@ When a view is marked as accessible, it is a good practice to set an `accessibil ## Keyboard Navigation -Many complex components, like Tabs and Dialog, come with expectations from users on how to interact with their content using a keyboard or other non-mouse input modalities. NativeBase Primitives provide basic keyboard support in accordance with the [WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices-1.2/). +Many complex components, like Tabs and Dialog, come with expectations from users on how to interact with their content using a keyboard or other non-mouse input modalities. NativeBase Primitives provide basic keyboard support in accordance with the [WAI-ARIA authoring practices](https://www.w3.org/WAI/ARIA/apg/). ## Focus Management Proper keyboard navigation and good labelling often go hand-in-hand with managing focus. When a user interacts with a component and something changes as a result, it's often helpful to move focus with the interaction. And for screen reader users, moving focus often results in an announcement to convey the new context, which relies on proper labelling. -In many NativeBase Components, we move focus based on the interactions a user normally takes in a given component. For example, in `Modal`, when the modal is opened, the focus is programmatically moved to the `first focusable element` and trapped inside the modal to anticipate a response to the prompt. +In many NativeBase Components, we move focus based on the interactions a user normally makes in a given component. For example, in `Modal`, when the modal is opened, the focus is programmatically moved to the `first focusable element` and trapped inside the modal to anticipate a response to the prompt. diff --git a/docs/3.1.x/alert-dialog.md b/docs/3.1.x/alert-dialog.md index 76e62c0d0..8622b10f4 100644 --- a/docs/3.1.x/alert-dialog.md +++ b/docs/3.1.x/alert-dialog.md @@ -9,10 +9,10 @@ import { ComponentTheme } from '../../src/components'; ## Import -- `AlertDialog`: provides context and state for the dialog. -- `AlertDialog.Header`: contains the title announced by screen readers. -- `AlertDialog.Body`: contains the description announced by screen readers. -- `AlertDialog.Footer`: contains the actions of the dialog. +- `AlertDialog`: Provides context and state for the dialog. +- `AlertDialog.Header`: Contains the title announced by screen readers. +- `AlertDialog.Body`: Contains the description announced by screen readers. +- `AlertDialog.Footer`: Contains the actions of the dialog. - `AlertDialog.Content`: The wrapper for the alert dialog's content. - `AlertDialog.CloseButton`: The button that closes the dialog. @@ -139,7 +139,7 @@ AlertDialog and its components compose the **[Modal](/modal)** component, so all ## Accessibility -Adheres to the [Alert and Message Dialogs WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#alertdialog) +Adheres to the [Alert and Message Dialogs WAI-ARIA design pattern.](https://www.w3.org/WAI/ARIA/apg/#alertdialog) ### Keyboard Interactions diff --git a/docs/3.1.x/box.md b/docs/3.1.x/box.md index 19548e192..a03c3f457 100644 --- a/docs/3.1.x/box.md +++ b/docs/3.1.x/box.md @@ -25,7 +25,7 @@ This is a generic component for low level layout needs. It is similar to a [`div ### With Linear gradient -If you're using [Expo](https://docs.expo.io/) managed or bare workflow, you can install [expo-linear-gradient](https://docs.expo.io/versions/latest/sdk/linear-gradient/) and configure it in the [NativeBaseProvider](setup-provider#add-external-dependencies-optional) as shown below. +If you're using [Expo](https://docs.expo.dev/index.html) managed or bare workflow, you can install [expo-linear-gradient](https://docs.expo.dev/versions/latest/sdk/linear-gradient/) and configure it in the [NativeBaseProvider](setup-provider#add-external-dependencies-optional) as shown below. ```jsx isLive=true import React from 'react'; diff --git a/docs/3.1.x/building-drawer-navigation.md b/docs/3.1.x/building-drawer-navigation.md index 699ce1623..875a15880 100644 --- a/docs/3.1.x/building-drawer-navigation.md +++ b/docs/3.1.x/building-drawer-navigation.md @@ -10,13 +10,13 @@ Common pattern in navigation is to use drawer from left (sometimes right) side f Here is an example to show how easily and quickly we can use React Native's [DrawerNavigation](https://reactnavigation.org/docs/drawer-based-navigation/) in NB. ```jsx isSnackPlayer name="Building Drawer Navigation" -import * as React from 'react'; -import { NavigationContainer } from '@react-navigation/native'; +import * as React from "react"; +import { NavigationContainer } from "@react-navigation/native"; import { createDrawerNavigator, DrawerContentScrollView, -} from '@react-navigation/drawer'; -import { MaterialCommunityIcons } from '@expo/vector-icons'; +} from "@react-navigation/drawer"; +import { MaterialCommunityIcons } from "@expo/vector-icons"; import { NativeBaseProvider, Button, @@ -30,7 +30,8 @@ import { HStack, Divider, Icon, -} from 'native-base'; +} from "native-base"; +global.__reanimatedWorkletInit = () => {}; const Drawer = createDrawerNavigator(); function Component(props) { return ( @@ -52,18 +53,18 @@ function Component(props) { const getIcon = (screenName) => { switch (screenName) { - case 'Inbox': - return 'email'; - case 'Outbox': - return 'send'; - case 'Favorites': - return 'heart'; - case 'Archive': - return 'archive'; - case 'Trash': - return 'trash-can'; - case 'Spam': - return 'alert-circle'; + case "Inbox": + return "email"; + case "Outbox": + return "send"; + case "Favorites": + return "heart"; + case "Archive": + return "archive"; + case "Trash": + return "trash-can"; + case "Spam": + return "alert-circle"; default: return undefined; } @@ -90,8 +91,8 @@ function CustomDrawerContent(props) { rounded="md" bg={ index === props.state.index - ? 'rgba(6, 182, 212, 0.1)' - : 'transparent' + ? "rgba(6, 182, 212, 0.1)" + : "transparent" } onPress={(event) => { props.navigation.navigate(name); @@ -100,7 +101,7 @@ function CustomDrawerContent(props) { } @@ -108,7 +109,7 @@ function CustomDrawerContent(props) { {name} diff --git a/docs/3.1.x/building-footer-tabs.md b/docs/3.1.x/building-footer-tabs.md index 00f1e7531..0429db35b 100644 --- a/docs/3.1.x/building-footer-tabs.md +++ b/docs/3.1.x/building-footer-tabs.md @@ -32,7 +32,7 @@ export function Example() { return ( -
+ ``` -With NativeBase, you can create your own design system. NativeBase follows [styled-system's specification](https://styled-system.com/theme-specification/) to construct design system. +With NativeBase, you can create your own design system. NativeBase follows the [styled-system's specification](https://styled-system.com/theme-specification/) to construct design systems. Checkout the **[default NativeBase theme](default-theme)** and how to customize it **[here](customizingTheme)**. diff --git a/docs/3.1.x/divider.md b/docs/3.1.x/divider.md index 50f50a696..a65c8b86a 100644 --- a/docs/3.1.x/divider.md +++ b/docs/3.1.x/divider.md @@ -27,7 +27,7 @@ The Divider displays a thin horizontal or vertical line. Pass the `orientation` prop and set it to either `horizontal` or `vertical`. -> **Note:** If the horizontal orientation is used, make sure that the parent element is assigned a width and If the vertical orientation is used, make sure that the parent element is assigned a height. +> **Note:** If the horizontal orientation is used, make sure that the parent element is assigned a width. If the vertical orientation is used, make sure that the parent element is assigned a height. ```ComponentSnackPlayer path=composites,Divider,Orientation.tsx diff --git a/docs/3.1.x/flex.md b/docs/3.1.x/flex.md index 3c06d7d51..0e9fddc8d 100644 --- a/docs/3.1.x/flex.md +++ b/docs/3.1.x/flex.md @@ -16,7 +16,7 @@ import { Flex, Spacer } from 'native-base'; ## Usage -Flex components comes with some helpful shorthand props: +Flex components come with some helpful shorthand props: - `flexDirection` is `direction` - `flexWrap` is `wrap` diff --git a/docs/3.1.x/icon-button.md b/docs/3.1.x/icon-button.md index cc11f8c64..ff222d2ea 100644 --- a/docs/3.1.x/icon-button.md +++ b/docs/3.1.x/icon-button.md @@ -5,7 +5,7 @@ title: IconButton import { ComponentTheme } from '../../src/components'; -`IconButton` composes the `Button` component. It is generally used to make an Icon pressable. +`IconButton` consists of the `Button` component. It is generally used to make an Icon pressable. ## Examples @@ -40,4 +40,4 @@ import { ComponentTheme } from '../../src/components'; ## Accessibility - Use accessibilityLabel for labelling icon buttons to make sure it's announced by screen reader devices. -- IconButton has a `role` set to [button](https://www.w3.org/TR/wai-aria-practices-1.2/#button). +- IconButton has a `role` set to [button](https://www.w3.org/WAI/ARIA/apg/#button). diff --git a/docs/3.1.x/icon.md b/docs/3.1.x/icon.md index b1438011d..925dfa107 100644 --- a/docs/3.1.x/icon.md +++ b/docs/3.1.x/icon.md @@ -5,15 +5,15 @@ title: Icon You can use icons in multiple ways in NativeBase: -- Create icon by creating an SVG Icon -- Create icon using createIcon function and use it as a component +- Create icon by creating an SVG Icon. +- Create icon using createIcon function and use it as a component. - Use a third-party icon library ( such as [@expo/vector-icons](https://github.com/expo/vector-icons) ), with `as` prop. ## Examples ### NativeBase Icons -We provides a set of commonly used interface icons. So you can directly use them in your project. All our icons are create using [`createIcon`](icon#createicon) function from NativeBase. +We provide a set of commonly used interface icons which you can directly use in your project. All our icons are create using [`createIcon`](icon#createicon) function from NativeBase. ```ComponentSnackPlayer path=primitives,Icon,AllIcons.tsx diff --git a/docs/3.1.x/installation.mdx b/docs/3.1.x/installation.mdx index 8b84699b0..cedcd23f3 100644 --- a/docs/3.1.x/installation.mdx +++ b/docs/3.1.x/installation.mdx @@ -5,7 +5,7 @@ title: Installation import { InstallationTiles } from "../../src/components"; -**NativeBase** is supported in [Expo](https://docs.expo.io/get-started/installation/) or React Native CLI initiated apps. Web support is made possible by [react-native-web](https://necolas.github.io/react-native-web/). +**NativeBase** is supported in [Expo](https://docs.expo.dev/get-started/installation/) or React Native CLI initiated apps. Web support is made possible by [react-native-web](https://necolas.github.io/react-native-web/). Refer the guides shown below to setup NativeBase in your React app. diff --git a/docs/3.1.x/link.md b/docs/3.1.x/link.md index 6b5920dee..23c65f296 100644 --- a/docs/3.1.x/link.md +++ b/docs/3.1.x/link.md @@ -65,4 +65,4 @@ Link implements **[Box](box.md)**, so all the Box Props can be passed to it. ## Accessibility -Adheres to the [Link WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#link) +Adheres to the [Link WAI-ARIA design pattern.](https://www.w3.org/WAI/ARIA/apg/#link) diff --git a/docs/3.1.x/menu.md b/docs/3.1.x/menu.md index 736456663..768f136bd 100644 --- a/docs/3.1.x/menu.md +++ b/docs/3.1.x/menu.md @@ -91,4 +91,4 @@ Extends `MenuItem`. ## Accessibility -Adheres to the [Menu WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#menu) +Adheres to the [Menu WAI-ARIA design pattern.](https://www.w3.org/WAI/ARIA/apg/#menu) diff --git a/docs/3.1.x/migration/v3.md b/docs/3.1.x/migration/v3.md index 782ee3850..24813b8ee 100644 --- a/docs/3.1.x/migration/v3.md +++ b/docs/3.1.x/migration/v3.md @@ -3,7 +3,7 @@ id: guide title: Guide to v3 --- -`v3` comes with a lot of changes in philosophy as well as the API. We have re-imagined how we should code for React Native as well as web. Keeping this in mind, you might face a lot of changes from v2 to v3. This might be a bit of tedious work but we promise you, it will be worth it! +`v3` comes with a lot of changes in philosophy as well as the API. We have re-imagined how we should code for React Native as well as web. Keeping this in mind, you might come across a lot of changes while upgrading from v2 to v3. This might seem to be a bit of tedious work but we promise you, it will be worth it! If you are looking to upgrade NativeBase from `v2` to `v3` in your application, we recommend looking into the following sections first: @@ -14,6 +14,6 @@ If you are looking to upgrade NativeBase from `v2` to `v3` in your application, This will allow you to leverage `v3` to the fullest. We have further divided the migration guide into different components, so that it's easier to search for a specific one. -We hope that `v3` is able to fulfill all the expectations set by it's predecessor and makes the overall UX and DX of your application better. +We hope that `v3` is able to fulfill all the expectations set by its predecessor and makes the overall UX and DX of your application better. Happy Coding! diff --git a/docs/3.1.x/modal.md b/docs/3.1.x/modal.md index 4bdc52a0e..67ca6d581 100644 --- a/docs/3.1.x/modal.md +++ b/docs/3.1.x/modal.md @@ -9,7 +9,7 @@ A Modal is a window overlaid on either the primary window or another dialog wind ## Import -NativeBase exports Modal Compound component: +NativeBase exports a Modal Compound component: - `Modal`: The wrapper that provides context for its children. - `Modal.Content`: The container for the modal dialog's content. @@ -66,7 +66,7 @@ If you want a specifically aligned Modal, pass `justifyContent` and `alignItems` ## Accessibility -Uses React Native ARIA [@react-native-aria/focus](https://react-native-aria.geekyants.com/docs/FocusScope) which follows the [Dialog Modal WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#dialog_modal). +Uses React Native ARIA [@react-native-aria/focus](https://react-native-aria.geekyants.com/docs/FocusScope) which follows the [Dialog Modal WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/#dialog_modal). ### Keyboard Interactions diff --git a/docs/3.1.x/nativebase-factory.md b/docs/3.1.x/nativebase-factory.md index 74c8b749b..d7aff6d55 100644 --- a/docs/3.1.x/nativebase-factory.md +++ b/docs/3.1.x/nativebase-factory.md @@ -147,5 +147,5 @@ export function Example() { | Name | Type | Description | Default | | -------------- | --------------- | ----------------------------------------------------------------------------- | ------- | -| component | React component | Original component to be passed on which nativebase props have to be applied. | - | +| component | React component | Original component to be passed on which NativeBase props have to be applied. | - | | componentTheme | Object | This object can include `baseStyle`, `sizes`, `variants`, `defaultProps` | - | diff --git a/docs/3.1.x/popover.md b/docs/3.1.x/popover.md index 2f02f027d..fd1295cb0 100644 --- a/docs/3.1.x/popover.md +++ b/docs/3.1.x/popover.md @@ -83,7 +83,7 @@ You can pass custom backgroundColor using `bg` or `backgroundColor`, `borderColo ## Accessibility -Adheres to the [Dialog WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#dialog_modal) +Adheres to the [Dialog WAI-ARIA design pattern.](https://www.w3.org/WAI/ARIA/apg/#dialog_modal) ### Keyboard Interactions diff --git a/docs/3.1.x/progress.md b/docs/3.1.x/progress.md index 9fe5ee80c..7b0b68ed3 100644 --- a/docs/3.1.x/progress.md +++ b/docs/3.1.x/progress.md @@ -58,5 +58,5 @@ import { Progress } from 'native-base'; ## Accessibility - Adheres to the `progressbar` [role requirements.](https://www.w3.org/TR/wai-aria-1.2/#progressbar) -- On web, `aria-valuenow`, `aria-valuemin` and `aria-valuemax` to ensure the progress percent is visible to screen readers. -- On mobile, [accessibilityValue](https://reactnative.dev/docs/accessibility#accessibilityvalue) is used to ensure it's announced by Talkback and VoiceOver. +- On web, `aria-valuenow`, `aria-valuemin` and `aria-valuemax` is used to ensure the progress percent is visible to screen readers. +- On mobile, [accessibilityValue](https://reactnative.dev/docs/accessibility#accessibilityvalue) is used to ensure it is announced by Talkback and VoiceOver. diff --git a/docs/3.1.x/radio.md b/docs/3.1.x/radio.md index 63485030b..051604896 100644 --- a/docs/3.1.x/radio.md +++ b/docs/3.1.x/radio.md @@ -79,7 +79,7 @@ import { ComponentTheme } from '../../src/components'; ## Accessibility -Uses React Native ARIA [@react-native-aria/radio](https://react-native-aria.geekyants.com/docs/useRadioGroup) which follows the [Radio Group WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#radiobutton). +Uses React Native ARIA [@react-native-aria/radio](https://react-native-aria.geekyants.com/docs/useRadioGroup) which follows the [Radio Group WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/#radiobutton). ### Keyboard Interactions diff --git a/docs/3.1.x/responsive.md b/docs/3.1.x/responsive.md index 4c89364f1..a23ad01d1 100644 --- a/docs/3.1.x/responsive.md +++ b/docs/3.1.x/responsive.md @@ -23,7 +23,7 @@ To make styles responsive, you can use either the array or object syntax. All style props that arrays as values for responsive styles. -For Example to make a `Box` width or w responsive using the array syntax, here's what you need to do: +For example, to make a `Box` width or w responsive using the array syntax, here's what you need to do: ```jsx isLive=true import React from 'react'; @@ -58,7 +58,7 @@ export function Example() { You can also define responsive values with breakpoint aliases in an object. Any undefined alias key will define the base, non-responsive value. -For Example to make a `Text` fontSize responsive using the object syntax, here's what you need to do: +For example, to make a `Text` fontSize responsive using the object syntax, here's what you need to do: ```jsx isLive=true import React from 'react'; diff --git a/docs/3.1.x/safe-area-view-props.md b/docs/3.1.x/safe-area-view-props.md index f566c1947..a574e2d76 100644 --- a/docs/3.1.x/safe-area-view-props.md +++ b/docs/3.1.x/safe-area-view-props.md @@ -3,7 +3,7 @@ id: safe-area-view-props title: SafeAreaView Props --- -To make your components respect the [SafeAreaView](https://reactnative.dev/docs/safeareaview) of the device, we have provided some props that you can use with Box component. They apply a safe padding to your component in the parts decided by the passed props. These props accept either a boolean or a number. If boolean is passed then component takes flexible inset and adjusts its children according to the the device. If a number is passed then it provides a fixed inset in the chosen direction. +To make your components respect the [SafeAreaView](https://reactnative.dev/docs/safeareaview) of the device, we have provided some props that you can use with Box component. They apply a safe padding to your component in the parts decided by the passed props. These props accept either a boolean or a number. If a Boolean is passed, then the component takes a flexible inset and adjusts its children according to the device. If a number is passed, then it provides a fixed inset in the chosen direction. - `safeArea`: Apply safe padding to all edges. - `safeAreaX`: Apply safe padding to x direction. @@ -13,11 +13,11 @@ To make your components respect the [SafeAreaView](https://reactnative.dev/docs/ - `safeAreaLeft`: Apply safe padding to left. - `safeAreaRight`: Apply safe padding to right. -Internally, NativeBase uses [useSafeAreaInsets](https://docs.expo.io/versions/latest/sdk/safe-area-context/#hooks) hook of [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context). +Internally, NativeBase uses [useSafeAreaInsets](https://docs.expo.dev/versions/latest/sdk/safe-area-context/#hooks) hook of [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context). :::info -SafeAreaView props can only be applied on [Box](box.md) as of now. To make you App SafeArea safe, just wrap your app with a Box and pass safeArea props to it. +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. ::: @@ -73,7 +73,7 @@ export function Example() { ### Using Hook -If you want to add the SafeAreaView props to other components, you can use the hook. Since, `SafeAreaView` props add relevant padding to the components, you will need to pass the padding manually that you are applying to the component for it to return the SafeArea adjusted padding. +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'; diff --git a/docs/3.1.x/setup-provider.md b/docs/3.1.x/setup-provider.md index b4eb8da17..1e4230177 100644 --- a/docs/3.1.x/setup-provider.md +++ b/docs/3.1.x/setup-provider.md @@ -56,7 +56,7 @@ function App() { If you want to do something with the color modes in your app, you can use colorModeManager Prop of NativeBaseProvider to achieve it. -In the below example we will show how to store the active ColorMode in an async storage, so it can be consistent all around your app. +In the example below, we 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'; @@ -93,7 +93,7 @@ export default ({ children, theme }: any) => { ## Add external dependencies (Optional) -If you want to use [Gradient feature in Box](box#with-linear-gradient), you need to pass linear gradient dependency as a config object in NativeBaseProvider. This dependency can be either from [expo-linear-gradient](https://docs.expo.io/versions/latest/sdk/linear-gradient/) or [react-native-linear-gradient](https://www.npmjs.com/package/react-native-linear-gradient) +If you want to use the [Gradient feature in Box](box#with-linear-gradient),it has 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'; @@ -124,6 +124,6 @@ export default () => { | Name | Type | Description | Default | | -------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------ | | initialWindowMetrics | Object | Mock data for frame and insets. [Refer this](https://github.com/th3rdwave/react-native-safe-area-context#testing) for further information. | - | -| colorModeManager | { get : Function , set : Function } | Manage Color mode in your app | - | -| theme | Object | use custom theme in your app | NativeBase Default Theme | +| colorModeManager | { get : Function , set : Function } | Manages Color mode in your app | - | +| theme | Object | Provides a custom theme for your app. | NativeBase Default Theme | | config | {dependencies: {}} | To include external dependencies. For example - [Linear gradient](box#with-linear-gradient) | - | diff --git a/docs/3.1.x/slider.md b/docs/3.1.x/slider.md index b8d94b9e9..ec7a22f25 100644 --- a/docs/3.1.x/slider.md +++ b/docs/3.1.x/slider.md @@ -14,7 +14,7 @@ NativeBase exports 4 slider-related components: - `Slider`: The wrapper that provides context and functionality for all children. - `Slider.Track`: The empty part of the slider that shows the track. - `Slider.FilledTrack`: The filled part of the slider. -- `Slider.Thumb`: The handle that's used to change the slider value. +- `Slider.Thumb`: The handle that is used to change the slider value. ```jsx import { Slider } from 'native-base'; @@ -74,7 +74,7 @@ import { Slider } from 'native-base'; ## Accessibility -Adheres to the [Slider WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#slidertwothumb) +Adheres to the [Slider WAI-ARIA design pattern.](https://www.w3.org/WAI/ARIA/apg/#slidertwothumb) ### Keyboard Interactions diff --git a/docs/3.1.x/theme.md b/docs/3.1.x/theme.md index ccb14a2a7..259439050 100644 --- a/docs/3.1.x/theme.md +++ b/docs/3.1.x/theme.md @@ -3,7 +3,7 @@ id: theme title: Using Theme --- -NativeBase provides multiple tools to use the central theme defined in the app. First tool is [`useTheme`](/use-theme), which you can use to access the values from the current theme. +NativeBase provides multiple tools to use the central theme defined in the app. The first tool is [`useTheme`](/use-theme), which you can use to access the values from the current theme. ## useTheme @@ -77,7 +77,7 @@ 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 pass a contrasting color to the text, then you can use [`useContrastText`](use-contrast-text). ```jsx isLive=true import React from 'react'; @@ -120,7 +120,7 @@ export function Example() { ## useColorMode -If you want to define some conditionals based on current color mode or change the color mode then you can try [useColorMode](useColorMode.md). +If you want to define some conditionals based on current color mode or change the color mode, then you can try [useColorMode](useColorMode.md). ```jsx isLive=true import React from 'react'; diff --git a/docs/3.1.x/toast.md b/docs/3.1.x/toast.md index af50b7379..c6e2d5894 100644 --- a/docs/3.1.x/toast.md +++ b/docs/3.1.x/toast.md @@ -5,7 +5,7 @@ title: Toast import { ComponentTheme } from '../../src/components'; -`Toast` is used to show alerts on top of an overlay. `Toast` will close itself when the close button is clicked, or after a timeout — the default is 5 seconds. The toast component is used to give feeback to users after an action has taken place. +`Toast` is used to show alerts on top of an overlay. `Toast` will close itself when the close button is clicked on or after a timeout — the default is 5 seconds. The toast component is used to give feeback to users after an action has taken place. Toasts can be configured to appear at either the top or the bottom of an application window, and it is possible to have more than one toast onscreen at a time. @@ -39,7 +39,7 @@ Display a custom component instead of the default Toast UI. ### Closing Toasts -Toasts can be closed imperatively, individually (via the close instance method) or all together (via the closeAll instance method). +Toasts can be closed imperatively, individually (via the close instance method), or all together (via the closeAll instance method). ```ComponentSnackPlayer path=composites,Toast,CloseToast.tsx @@ -56,7 +56,7 @@ You can use status to change the color of your toasts. ### Preventing Duplicate Toast -In some cases you might need to prevent duplicate of specific toasts. To achieve you need to pass an id and use the toast.isActive method to determine when to call toast.show(...). +In some cases, you might need to prevent duplicates of specific toasts. To achieve this, you need to pass an id and use the toast.isActive method to determine when to call toast.show(...). ```ComponentSnackPlayer path=composites,Toast,PreventDuplicate.tsx @@ -64,7 +64,7 @@ In some cases you might need to prevent duplicate of specific toasts. To achieve ### Standalone Toast -You can use standalone toast where you don't have access to `useToast` hook. e.g. in a different file, out of a React component. +You can use standalone toast where you don't have access to `useToast` hook, for example, in a different file, out of a React component. ```ComponentSnackPlayer path=composites,Toast,StandaloneToast.tsx @@ -72,7 +72,7 @@ You can use standalone toast where you don't have access to `useToast` hook. e.g ## Props -Below props can be passed while calling toast.show. +The following props can be passed while calling toast.show. ```ComponentPropTable path=composites,Toast,ToastDummy.tsx diff --git a/docs/3.1.x/use-color-mode.md b/docs/3.1.x/use-color-mode.md index caf92e3cc..41973385e 100644 --- a/docs/3.1.x/use-color-mode.md +++ b/docs/3.1.x/use-color-mode.md @@ -8,13 +8,13 @@ title: useColorMode ## Import ```jsx -import { useColorMode } from 'native-base'; +import { useColorMode } from "native-base"; ``` ## Example ```jsx isLive=true -import React from 'react'; +import React from "react"; import { NativeBaseProvider, VStack, @@ -22,12 +22,12 @@ import { Text, Button, Center, -} from 'native-base'; +} from "native-base"; function UseColorMode() { const { colorMode, toggleColorMode } = useColorMode(); return ( -
+
The active color mode is {colorMode} @@ -51,6 +51,6 @@ export function Example() { | Name | Type | Description | Default | | --------------- | --------------- | ------------------------------------------ | ------- | -| colorMode | `light`, `dark` | The active color mode | `light` | +| colorMode | `light`, `dark` | The active color mode. | `light` | | setColorMode | function | Use to set color mode. | - | | toggleColorMode | function | Use to toggle between light and dark mode. | - | diff --git a/docs/3.1.x/use-contrast-text.md b/docs/3.1.x/use-contrast-text.md index 1dde80c84..6ecea23c6 100644 --- a/docs/3.1.x/use-contrast-text.md +++ b/docs/3.1.x/use-contrast-text.md @@ -54,7 +54,7 @@ export function Example() { ### Using Accessible Colors -By default, NativeBase provides contrasting color based on its theme. You can also choose to get color with better [color and contrast accessibility](https://web.dev/color-and-contrast-accessibility/) with the help of [`useAccessibleColors`](use-accessible-colors) hook. +By default, NativeBase provides contrasting colors based on its theme. You can also choose to get colors with better [color and contrast accessibility](https://web.dev/color-and-contrast-accessibility/) with the help of [`useAccessibleColors`](use-accessible-colors) hook. ```jsx isLive=true import React from 'react'; diff --git a/docs/3.1.x/utility-first.mdx b/docs/3.1.x/utility-first.mdx index 1e7214bde..18387f81a 100644 --- a/docs/3.1.x/utility-first.mdx +++ b/docs/3.1.x/utility-first.mdx @@ -13,7 +13,7 @@ To understand utility props, let's take an example. ## With React Native -Let's try the traditional way of building the above card in React Native. +Let's try the traditional way of building the following card in React Native. @@ -173,8 +173,8 @@ export function Example() { The above example demonstrates the usage of [utility props](utility-props) alongwith [VStack](vstack), [HStack](hstack) components. This approach allows us to style components without using StyleSheet API. -Apart from productivity boost and saving time there are other benefits by styling components using utility props. -No need to name styles anymore, no need to define an object and think about naming them. +Apart from productivity boosts and saving time, there are other benefits to styling components using utility props. +No need to name styles anymore, no need to define an object and think about naming it. Using utility-first props, you can focus on creating reusable components instead of reusable stylesheets. diff --git a/docs/3.2.x/accessibility.md b/docs/3.2.x/accessibility.md index 3ccb492bb..a2efba9ca 100644 --- a/docs/3.2.x/accessibility.md +++ b/docs/3.2.x/accessibility.md @@ -7,7 +7,7 @@ NativeBase comes with the latest accessibility standards out of the box includin ## Accessible Roles -NativeBase uses [React Native ARIA](https://react-native-aria.geekyants.com/) to implements [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.2/) standards to its components. This is designed to provide meaning for controls that aren't built using components provided by the platform. +NativeBase uses [React Native ARIA](https://react-native-aria.geekyants.com/) to implement [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.2/) standards to its components. This is designed to provide meaning for controls that aren't built using components provided by the platform. ## Accessible Labels @@ -15,10 +15,10 @@ When a view is marked as accessible, it is a good practice to set an `accessibil ## Keyboard Navigation -Many complex components, like Tabs and Dialog, come with expectations from users on how to interact with their content using a keyboard or other non-mouse input modalities. NativeBase Primitives provide basic keyboard support in accordance with the [WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices-1.2/). +Many complex components, like Tabs and Dialog, come with expectations from users on how to interact with their content using a keyboard or other non-mouse input modalities. NativeBase Primitives provide basic keyboard support in accordance with the [WAI-ARIA authoring practices](https://www.w3.org/WAI/ARIA/apg/). ## Focus Management Proper keyboard navigation and good labelling often go hand-in-hand with managing focus. When a user interacts with a component and something changes as a result, it's often helpful to move focus with the interaction. And for screen reader users, moving focus often results in an announcement to convey the new context, which relies on proper labelling. -In many NativeBase Components, we move focus based on the interactions a user normally takes in a given component. For example, in `Modal`, when the modal is opened, the focus is programmatically moved to the `first focusable element` and trapped inside the modal to anticipate a response to the prompt. +In many NativeBase Components, we move focus based on the interactions a user normally makes in a given component. For example, in `Modal`, when the modal is opened, the focus is programmatically moved to the `first focusable element` and trapped inside the modal to anticipate a response to the prompt. diff --git a/docs/3.2.x/alert-dialog.md b/docs/3.2.x/alert-dialog.md index c64c1dca7..79ab42bf8 100644 --- a/docs/3.2.x/alert-dialog.md +++ b/docs/3.2.x/alert-dialog.md @@ -9,10 +9,10 @@ import { ComponentTheme } from '../../src/components'; ## Import -- `AlertDialog`: provides context and state for the dialog. -- `AlertDialog.Header`: contains the title announced by screen readers. -- `AlertDialog.Body`: contains the description announced by screen readers. -- `AlertDialog.Footer`: contains the actions of the dialog. +- `AlertDialog`: Provides context and state for the dialog. +- `AlertDialog.Header`: Contains the title announced by screen readers. +- `AlertDialog.Body`: Contains the description announced by screen readers. +- `AlertDialog.Footer`: Contains the actions of the dialog. - `AlertDialog.Content`: The wrapper for the alert dialog's content. - `AlertDialog.CloseButton`: The button that closes the dialog. @@ -42,7 +42,7 @@ AlertDialog and its components compose the **[Modal](/modal)** component, so all ## Accessibility -Adheres to the [Alert and Message Dialogs WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#alertdialog) +Adheres to the [Alert and Message Dialogs WAI-ARIA design pattern.](https://www.w3.org/WAI/ARIA/apg/#alertdialog) ### Keyboard Interactions diff --git a/docs/3.2.x/box.md b/docs/3.2.x/box.md index 75dc75f09..22a3eb016 100644 --- a/docs/3.2.x/box.md +++ b/docs/3.2.x/box.md @@ -25,7 +25,7 @@ This is a generic component for low level layout needs. It is similar to a [`div ### With Linear gradient -If you're using [Expo](https://docs.expo.io/) managed or bare workflow, you can install [expo-linear-gradient](https://docs.expo.io/versions/latest/sdk/linear-gradient/) and configure it in the [NativeBaseProvider](setup-provider#add-external-dependencies-optional) as shown below. +If you're using [Expo](https://docs.expo.dev/index.html) managed or bare workflow, you can install [expo-linear-gradient](https://docs.expo.dev/versions/latest/sdk/linear-gradient/) and configure it in the [NativeBaseProvider](setup-provider#add-external-dependencies-optional) as shown below. ```jsx isLive import React from 'react'; diff --git a/docs/3.2.x/building-drawer-navigation.md b/docs/3.2.x/building-drawer-navigation.md index 4900e99b6..59c0f5c36 100644 --- a/docs/3.2.x/building-drawer-navigation.md +++ b/docs/3.2.x/building-drawer-navigation.md @@ -10,13 +10,13 @@ Common pattern in navigation is to use drawer from left (sometimes right) side f Here is an example to show how easily and quickly we can use React Native's [DrawerNavigation](https://reactnavigation.org/docs/drawer-based-navigation/) in NB. ```jsx isSnackPlayer name=BuildingDrawerNavigation -import * as React from 'react'; -import { NavigationContainer } from '@react-navigation/native'; +import * as React from "react"; +import { NavigationContainer } from "@react-navigation/native"; import { createDrawerNavigator, DrawerContentScrollView, -} from '@react-navigation/drawer'; -import { MaterialCommunityIcons } from '@expo/vector-icons'; +} from "@react-navigation/drawer"; +import { MaterialCommunityIcons } from "@expo/vector-icons"; import { NativeBaseProvider, Button, @@ -30,7 +30,8 @@ import { HStack, Divider, Icon, -} from 'native-base'; +} from "native-base"; +global.__reanimatedWorkletInit = () => {}; const Drawer = createDrawerNavigator(); function Component(props) { return ( @@ -44,18 +45,18 @@ function Component(props) { const getIcon = (screenName) => { switch (screenName) { - case 'Inbox': - return 'email'; - case 'Outbox': - return 'send'; - case 'Favorites': - return 'heart'; - case 'Archive': - return 'archive'; - case 'Trash': - return 'trash-can'; - case 'Spam': - return 'alert-circle'; + case "Inbox": + return "email"; + case "Outbox": + return "send"; + case "Favorites": + return "heart"; + case "Archive": + return "archive"; + case "Trash": + return "trash-can"; + case "Spam": + return "alert-circle"; default: return undefined; } @@ -82,8 +83,8 @@ function CustomDrawerContent(props) { rounded="md" bg={ index === props.state.index - ? 'rgba(6, 182, 212, 0.1)' - : 'transparent' + ? "rgba(6, 182, 212, 0.1)" + : "transparent" } onPress={(event) => { props.navigation.navigate(name); @@ -92,7 +93,7 @@ function CustomDrawerContent(props) { } @@ -100,7 +101,7 @@ function CustomDrawerContent(props) { {name} diff --git a/docs/3.2.x/building-footer-tabs.md b/docs/3.2.x/building-footer-tabs.md index cc90c529f..c1e6425ff 100644 --- a/docs/3.2.x/building-footer-tabs.md +++ b/docs/3.2.x/building-footer-tabs.md @@ -31,7 +31,7 @@ export function Example() { return ( -
+ ``` -With NativeBase, you can create your own design system. NativeBase follows [styled-system's specification](https://styled-system.com/theme-specification/) to construct design system. +With NativeBase, you can create your own design system. NativeBase follows the [styled-system's specification](https://styled-system.com/theme-specification/) to construct design systems. Checkout the **[default NativeBase theme](default-theme)** and how to customize it **[here](customizing-theme)**. diff --git a/docs/3.2.x/divider.md b/docs/3.2.x/divider.md index 84221be27..38a22c284 100644 --- a/docs/3.2.x/divider.md +++ b/docs/3.2.x/divider.md @@ -27,7 +27,7 @@ The Divider displays a thin horizontal or vertical line. Pass the `orientation` prop and set it to either `horizontal` or `vertical`. -> **Note:** If the horizontal orientation is used, make sure that the parent element is assigned a width and If the vertical orientation is used, make sure that the parent element is assigned a height. +> **Note:** If the horizontal orientation is used, make sure that the parent element is assigned a width. If the vertical orientation is used, make sure that the parent element is assigned a height. ```ComponentSnackPlayer path=components,composites,Divider,Orientation.tsx diff --git a/docs/3.2.x/flex.md b/docs/3.2.x/flex.md index 56469253f..1f5cb3f3b 100644 --- a/docs/3.2.x/flex.md +++ b/docs/3.2.x/flex.md @@ -16,7 +16,7 @@ import { Flex, Spacer } from 'native-base'; ## Usage -Flex components comes with some helpful shorthand props: +Flex components come with some helpful shorthand props: - `flexDirection` is `direction` - `flexWrap` is `wrap` diff --git a/docs/3.2.x/hidden.md b/docs/3.2.x/hidden.md index b030ed15b..c3df0afb3 100644 --- a/docs/3.2.x/hidden.md +++ b/docs/3.2.x/hidden.md @@ -5,7 +5,7 @@ title: Hidden import { ComponentTheme } from '../../src/components'; -Hidden is used to toggle the visibility value of child components responsively, based on the colorMode or based on the platform. It doesn't mount the child components in the restricted values of props. +Hidden is used to toggle the visibility value of child components responsively, based on the colorMode or based on the platform. It does not mount the child components in the restricted values of props. ## Import diff --git a/docs/3.2.x/icon-button.md b/docs/3.2.x/icon-button.md index 74f6e7309..6d3e1382e 100644 --- a/docs/3.2.x/icon-button.md +++ b/docs/3.2.x/icon-button.md @@ -5,7 +5,7 @@ title: IconButton import { ComponentTheme } from '../../src/components'; -`IconButton` composes the `Button` component. It is generally used to make an Icon pressable. +`IconButton` consists of the `Button` component. It is generally used to make an Icon pressable. ## Examples @@ -40,4 +40,4 @@ import { ComponentTheme } from '../../src/components'; ## Accessibility - Use accessibilityLabel for labelling icon buttons to make sure it's announced by screen reader devices. -- IconButton has a `role` set to [button](https://www.w3.org/TR/wai-aria-practices-1.2/#button). +- IconButton has a `role` set to [button](https://www.w3.org/WAI/ARIA/apg/#button). diff --git a/docs/3.2.x/icon.md b/docs/3.2.x/icon.md index cb1996111..1047c10bd 100644 --- a/docs/3.2.x/icon.md +++ b/docs/3.2.x/icon.md @@ -5,8 +5,8 @@ title: Icon You can use icons in multiple ways in NativeBase: -- Create icon by creating an SVG Icon -- Create icon using createIcon function and use it as a component +- Create icon by creating an SVG Icon. +- Create icon using createIcon function and use it as a component. - Use a third-party icon library ( such as [@expo/vector-icons](https://github.com/expo/vector-icons) ), with `as` prop. ## Examples @@ -21,7 +21,7 @@ Apart from the icons provided by [@expo/vector-icon](https://github.com/expo/vec ### NativeBase Icons -We provides a set of commonly used interface icons. So you can directly use them in your project. All our icons are create using [`createIcon`](icon#createicon) function from NativeBase. +We provide a set of commonly used interface icons which you can directly use in your project. All our icons are create using [`createIcon`](icon#createicon) function from NativeBase. ```ComponentSnackPlayer path=components,primitives,Icon,AllIcons.tsx diff --git a/docs/3.2.x/image.md b/docs/3.2.x/image.md index d07913ed3..767347d6d 100644 --- a/docs/3.2.x/image.md +++ b/docs/3.2.x/image.md @@ -52,7 +52,7 @@ Generic Image components from [React Native](https://reactnative.dev). ### With Next's require statement -When using require statement from next for image keep this in mind. +When using require statement from next for image, keep this in mind. ```jsx diff --git a/docs/3.2.x/installation.mdx b/docs/3.2.x/installation.mdx index a67907828..0d5304dae 100644 --- a/docs/3.2.x/installation.mdx +++ b/docs/3.2.x/installation.mdx @@ -5,7 +5,7 @@ title: Installation import { InstallationTiles } from "../../src/components"; -**NativeBase** is supported in [Expo](https://docs.expo.io/get-started/installation/) or React Native CLI initiated apps. Web support is made possible by [react-native-web](https://necolas.github.io/react-native-web/). +**NativeBase** is supported in [Expo](https://docs.expo.dev/get-started/installation/) or React Native CLI initiated apps. Web support is made possible by [react-native-web](https://necolas.github.io/react-native-web/). Refer the guides shown below to setup NativeBase in your React app. diff --git a/docs/3.2.x/link.md b/docs/3.2.x/link.md index f9d3b7321..118c40335 100644 --- a/docs/3.2.x/link.md +++ b/docs/3.2.x/link.md @@ -57,4 +57,4 @@ import { Link } from 'native-base'; ## Accessibility -Adheres to the [Link WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#link) +Adheres to the [Link WAI-ARIA design pattern.](https://www.w3.org/WAI/ARIA/apg/#link) diff --git a/docs/3.2.x/menu.md b/docs/3.2.x/menu.md index 0f6770f1f..79d5468da 100644 --- a/docs/3.2.x/menu.md +++ b/docs/3.2.x/menu.md @@ -91,4 +91,4 @@ Extends `MenuItem`. ## Accessibility -Adheres to the [Menu WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#menu) +Adheres to the [Menu WAI-ARIA design pattern.](https://www.w3.org/WAI/ARIA/apg/#menu) diff --git a/docs/3.2.x/migration/v3.md b/docs/3.2.x/migration/v3.md index c3e20cf47..349226570 100644 --- a/docs/3.2.x/migration/v3.md +++ b/docs/3.2.x/migration/v3.md @@ -3,7 +3,7 @@ id: migration-guide-three title: Upgrading to v3 --- -`v3` comes with a lot of changes in philosophy as well as the API. We have re-imagined how we should code for React Native as well as web. Keeping this in mind, you might face a lot of changes from v2 to v3. This might be a bit of tedious work but we promise you, it will be worth it! +`v3` comes with a lot of changes in philosophy as well as the API. We have re-imagined how we should code for React Native as well as web. Keeping this in mind, you might come across a lot of changes while upgrading from v2 to v3. This might seem to be a bit of tedious work but we promise you, it will be worth it! If you are looking to upgrade NativeBase from `v2` to `v3` in your application, we recommend looking into the following sections first: @@ -14,6 +14,6 @@ If you are looking to upgrade NativeBase from `v2` to `v3` in your application, This will allow you to leverage `v3` to the fullest. We have further divided the migration guide into different components, so that it's easier to search for a specific one. -We hope that `v3` is able to fulfill all the expectations set by it's predecessor and makes the overall UX and DX of your application better. +We hope that `v3` is able to fulfill all the expectations set by its predecessor and makes the overall UX and DX of your application better. Happy Coding! diff --git a/docs/3.2.x/migration/v3xtov32.mdx b/docs/3.2.x/migration/v3xtov32.mdx index 37f3b3739..ee5be30ed 100644 --- a/docs/3.2.x/migration/v3xtov32.mdx +++ b/docs/3.2.x/migration/v3xtov32.mdx @@ -3,13 +3,13 @@ id: migration-guide-three-point-two title: Upgrading to 3.2.0 from 3.x --- -As we continue to improve NativeBase v3 we got a lot of feature requests and we also revamped our theme to make it more consistent, easy to understand, optimized and promote good practices while writing code. +As we continued to improve NativeBase v3, we got a lot of feature requests and we also revamped our theme to make it more consistent, easy to understand, and optimized to promote good practices while writing code. -To do that we had to make some changes to our theme in `v3.2.0`. These are breaking changes if you are using some of the tokens in your project. To make it easy for you to upgrade, we are providing three options: +In order to do this, we had to make some changes to our theme in `v3.2.0`. These are breaking changes if you are using some of the tokens in your project. To make it easy for you to upgrade, we are providing three options: -## Extend previous version's theme for backward compatibility +## Extend Previous Version's Theme for Backward Compatibility -You need to add `v3CompatibleTheme` to your `NativeBaseProvider` which preserves all the old token that were changed or removed in v3.2.0. +You need to add `v3CompatibleTheme` to your `NativeBaseProvider` which preserves all the old tokens that were changed or removed in v3.2.0. ```jsx import { @@ -34,8 +34,8 @@ If you are updating from 3.1.x to 3.2.x in a Next.js project, you might need to ### Updating next.config.js/ts -- Now need to include only react-native-web and native-base in transplie-modules -- No need of webpack config just add withFonts(from next-fonts) and withExpo(from @expo/next-adapter) +- Now need to include only react-native-web and native-base in transplie-modules. +- No need of webpack config just add withFonts(from next-fonts) and withExpo(from @expo/next-adapter). ```jsx {5-22,27-40} const withFonts = require('next-fonts'); @@ -212,9 +212,9 @@ Below is a rough account of the breaking API changes as well as the minimal chan We have introduced [strict mode](../strict-mode) in `v3.2.0` which is `off` by default. If you don't want to have strict mode, step 1 is enough. If you want to comply with the strict mode, you also need to do these: -1. All utility props which take theme tokens as values, now take only string values as a valid type +1. All utility props which take theme tokens as values, now take only string values as a valid type. -This means that if you pass a number value which is supposed to be a theme token, into a utility prop, then it will be treated as invalid and based on you strict mode config will show you an error or a warning. +This means that if you pass a number value that is supposed to be a theme token into a utility prop, then it will be treated as invalid and based on your strict mode config will show you an error or a warning. ```js // Incorrect Way to pass theme tokens to utility props diff --git a/docs/3.2.x/modal.md b/docs/3.2.x/modal.md index c8bb4ccb1..28fce488a 100644 --- a/docs/3.2.x/modal.md +++ b/docs/3.2.x/modal.md @@ -9,7 +9,7 @@ A Modal is a window overlaid on either the primary window or another dialog wind ## Import -NativeBase exports Modal Compound component: +NativeBase exports a Modal Compound component: - `Modal`: The wrapper that provides context for its children. - `Modal.Content`: The container for the modal dialog's content. @@ -78,7 +78,7 @@ If you want a specifically aligned Modal, pass `justifyContent` and `alignItems` ## Accessibility -Uses React Native ARIA [@react-native-aria/focus](https://react-native-aria.geekyants.com/docs/FocusScope) which follows the [Dialog Modal WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#dialog_modal). +Uses React Native ARIA [@react-native-aria/focus](https://react-native-aria.geekyants.com/docs/FocusScope) which follows the [Dialog Modal WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/#dialog_modal). ### Keyboard Interactions diff --git a/docs/3.2.x/nativebase-factory.md b/docs/3.2.x/nativebase-factory.md index 61a6e9730..1b839814e 100644 --- a/docs/3.2.x/nativebase-factory.md +++ b/docs/3.2.x/nativebase-factory.md @@ -37,5 +37,5 @@ import { Factory } from 'native-base'; | Name | Type | Description | Default | | -------------- | --------------- | ----------------------------------------------------------------------------- | ------- | -| component | React component | Original component to be passed on which nativebase props have to be applied. | - | +| component | React component | Original component to be passed on which NativeBase props have to be applied. | - | | componentTheme | Object | This object can include `baseStyle`, `sizes`, `variants`, `defaultProps` | - | diff --git a/docs/3.2.x/popover.md b/docs/3.2.x/popover.md index ffd41c4b3..fb7e32a14 100644 --- a/docs/3.2.x/popover.md +++ b/docs/3.2.x/popover.md @@ -85,7 +85,7 @@ You can pass custom backgroundColor using `bg` or `backgroundColor`, `borderColo ## Accessibility -Adheres to the [Dialog WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#dialog_modal) +Adheres to the [Dialog WAI-ARIA design pattern.](https://www.w3.org/WAI/ARIA/apg/#dialog_modal) ### Keyboard Interactions diff --git a/docs/3.2.x/progress.md b/docs/3.2.x/progress.md index ca5e27524..dc431c74d 100644 --- a/docs/3.2.x/progress.md +++ b/docs/3.2.x/progress.md @@ -58,5 +58,5 @@ import { Progress } from 'native-base'; ## Accessibility - Adheres to the `progressbar` [role requirements.](https://www.w3.org/TR/wai-aria-1.2/#progressbar) -- On web, `aria-valuenow`, `aria-valuemin` and `aria-valuemax` to ensure the progress percent is visible to screen readers. -- On mobile, [accessibilityValue](https://reactnative.dev/docs/accessibility#accessibilityvalue) is used to ensure it's announced by Talkback and VoiceOver. +- On web, `aria-valuenow`, `aria-valuemin` and `aria-valuemax` is used to ensure the progress percent is visible to screen readers. +- On mobile, [accessibilityValue](https://reactnative.dev/docs/accessibility#accessibilityvalue) is used to ensure it is announced by Talkback and VoiceOver. diff --git a/docs/3.2.x/pseudo-props-101.md b/docs/3.2.x/pseudo-props-101.md index 5c5da7572..c26b06e07 100644 --- a/docs/3.2.x/pseudo-props-101.md +++ b/docs/3.2.x/pseudo-props-101.md @@ -3,7 +3,7 @@ id: pseudo-props-101 title: 'Pseudo props: Do’s & Dont’s' --- -Before getting into details of all the common Pseudo Props NativeBase has to offer let's check some key points that these pseudo props follow. +Before getting into details of all the common Pseudo Props NativeBase has to offer, let's check some key points that these pseudo props follow. ## Nesting pseudo props: @@ -124,7 +124,7 @@ export function Example() { ### Don'ts -- The below approach is similar to the above one, but this time we have passed inline color in `Icon`. So, if you pass styling in `Icon` itself and then also pass it in `_icon` then styling passed in `_icon` will not be applied because the props passed in `Icon` should have higher specificity than `_icon` and that will prevent `Icon` to override props from `_icon`. +- The below approach is similar to the above one, but this time we have passed inline color in `Icon`. So, if you pass styling in `Icon` itself and then also pass it in `_icon`, then styling passed in `_icon` will not be applied because the props passed in `Icon` should have higher specificity than `_icon` and that will prevent `Icon` to override props from `_icon`. - In below case color from `_icon` will not be applied to `Icon` and you will not be able to change the color of `Icon` on state changes like hover, pressed and focus. ```jsx isLive=true diff --git a/docs/3.2.x/radio.md b/docs/3.2.x/radio.md index f03bd8b09..f5c0f0627 100644 --- a/docs/3.2.x/radio.md +++ b/docs/3.2.x/radio.md @@ -79,7 +79,7 @@ import { ComponentTheme } from '../../src/components'; ## Accessibility -Uses React Native ARIA [@react-native-aria/radio](https://react-native-aria.geekyants.com/docs/useRadioGroup) which follows the [Radio Group WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#radiobutton). +Uses React Native ARIA [@react-native-aria/radio](https://react-native-aria.geekyants.com/docs/useRadioGroup) which follows the [Radio Group WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/#radiobutton). ### Keyboard Interactions diff --git a/docs/3.2.x/responsive.md b/docs/3.2.x/responsive.md index 66c2458d6..75f1c2075 100644 --- a/docs/3.2.x/responsive.md +++ b/docs/3.2.x/responsive.md @@ -23,7 +23,7 @@ To make styles responsive, you can use either the array or object syntax. All style props that arrays as values for responsive styles. -For Example to make a `Box` width or w responsive using the array syntax, here's what you need to do: +For example, to make a `Box` width or w responsive using the array syntax, here's what you need to do: ```jsx isLive import React from 'react'; @@ -56,7 +56,7 @@ export function Example() { You can also define responsive values with breakpoint aliases in an object. Any undefined alias key will define the base, non-responsive value. -For Example to make a `Text` fontSize responsive using the object syntax, here's what you need to do: +For example, to make a `Text` fontSize responsive using the object syntax, here's what you need to do: ```jsx isLive import React from 'react'; diff --git a/docs/3.2.x/safe-area-view-props.md b/docs/3.2.x/safe-area-view-props.md index 9b59a2fd5..3c078a33b 100644 --- a/docs/3.2.x/safe-area-view-props.md +++ b/docs/3.2.x/safe-area-view-props.md @@ -3,7 +3,7 @@ id: safe-area-view-props title: SafeAreaView Props --- -To make your components respect the [SafeAreaView](https://reactnative.dev/docs/safeareaview) of the device, we have provided some props that you can use with Box component. They apply a safe padding to your component in the parts decided by the passed props. These props accept either a boolean or a number. If boolean is passed then component takes flexible inset and adjusts its children according to the the device. If a number is passed then it provides a fixed inset in the chosen direction. +To make your components respect the [SafeAreaView](https://reactnative.dev/docs/safeareaview) of the device, we have provided some props that you can use with Box component. They apply a safe padding to your component in the parts decided by the passed props. These props accept either a boolean or a number. If a Boolean is passed, then the component takes a flexible inset and adjusts its children according to the device. If a number is passed, then it provides a fixed inset in the chosen direction. - `safeArea`: Apply safe padding to all edges. - `safeAreaX`: Apply safe padding to x direction. @@ -13,11 +13,11 @@ To make your components respect the [SafeAreaView](https://reactnative.dev/docs/ - `safeAreaLeft`: Apply safe padding to left. - `safeAreaRight`: Apply safe padding to right. -Internally, NativeBase uses [useSafeAreaInsets](https://docs.expo.io/versions/latest/sdk/safe-area-context/#hooks) hook of [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context). +Internally, NativeBase uses [useSafeAreaInsets](https://docs.expo.dev/versions/latest/sdk/safe-area-context/#hooks) hook of [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context). :::info -SafeAreaView props can only be applied on [Box](box.md) as of now. To make you App SafeArea safe, just wrap your app with a Box and pass safeArea props to it. +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. ::: @@ -73,7 +73,7 @@ export function Example() { ### Using Hook -If you want to add the SafeAreaView props to other components, you can use the hook. Since, `SafeAreaView` props add relevant padding to the components, you will need to pass the padding manually that you are applying to the component for it to return the SafeArea adjusted padding. +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 import React from 'react'; diff --git a/docs/3.2.x/setup-provider.md b/docs/3.2.x/setup-provider.md index b4eb8da17..2e6a09db5 100644 --- a/docs/3.2.x/setup-provider.md +++ b/docs/3.2.x/setup-provider.md @@ -56,7 +56,7 @@ function App() { If you want to do something with the color modes in your app, you can use colorModeManager Prop of NativeBaseProvider to achieve it. -In the below example we will show how to store the active ColorMode in an async storage, so it can be consistent all around your app. +In the example below, we 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'; @@ -93,7 +93,7 @@ export default ({ children, theme }: any) => { ## Add external dependencies (Optional) -If you want to use [Gradient feature in Box](box#with-linear-gradient), you need to pass linear gradient dependency as a config object in NativeBaseProvider. This dependency can be either from [expo-linear-gradient](https://docs.expo.io/versions/latest/sdk/linear-gradient/) or [react-native-linear-gradient](https://www.npmjs.com/package/react-native-linear-gradient) +If you want to use the [Gradient feature in Box](box#with-linear-gradient),it has 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'; @@ -124,6 +124,6 @@ export default () => { | Name | Type | Description | Default | | -------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------ | | initialWindowMetrics | Object | Mock data for frame and insets. [Refer this](https://github.com/th3rdwave/react-native-safe-area-context#testing) for further information. | - | -| colorModeManager | { get : Function , set : Function } | Manage Color mode in your app | - | -| theme | Object | use custom theme in your app | NativeBase Default Theme | +| colorModeManager | { get : Function , set : Function } | Manages Color mode in your app | - | +| theme | Object | Provides a custom theme for your app. | NativeBase Default Theme | | config | {dependencies: {}} | To include external dependencies. For example - [Linear gradient](box#with-linear-gradient) | - | diff --git a/docs/3.2.x/slider.md b/docs/3.2.x/slider.md index 1e1d34811..e74195f1a 100644 --- a/docs/3.2.x/slider.md +++ b/docs/3.2.x/slider.md @@ -14,7 +14,7 @@ NativeBase exports 4 slider-related components: - `Slider`: The wrapper that provides context and functionality for all children. - `Slider.Track`: The empty part of the slider that shows the track. - `Slider.FilledTrack`: The filled part of the slider. -- `Slider.Thumb`: The handle that's used to change the slider value. +- `Slider.Thumb`: The handle that is used to change the slider value. ```jsx import { Slider } from 'native-base'; @@ -74,7 +74,7 @@ import { Slider } from 'native-base'; ## Accessibility -Adheres to the [Slider WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#slidertwothumb) +Adheres to the [Slider WAI-ARIA design pattern.](https://www.w3.org/WAI/ARIA/apg/#slidertwothumb) ### Keyboard Interactions diff --git a/docs/3.2.x/strict-mode.md b/docs/3.2.x/strict-mode.md index 4cba756d2..88848f2b3 100644 --- a/docs/3.2.x/strict-mode.md +++ b/docs/3.2.x/strict-mode.md @@ -3,7 +3,7 @@ id: strict-mode title: Strict Mode --- -NativeBase comes with its very own Strict Mode that lets you control the level of strictness for your App and Dev environment. A really handy tool to maintain best practices through out your codebase. +NativeBase comes with its very own Strict Mode that lets you control the level of strictness for your App and Dev environment. A really handy tool to maintain best practices throughout your codebase. ## What it does? @@ -11,7 +11,7 @@ Strict Mode is a config that you pass into NativeBase config. It takes 3 values ## Levels of Strictness -- **error** - Choosing this mode will throw an error indicating the cause of the error. +- **error** - Choosing this mode will show an error indicating the cause of the error. - **warn** - Choosing this mode will show a warning indicating the issue. - **off** - Choosing this mode simply means you want to go rogue and not follow the design system and best practices. diff --git a/docs/3.2.x/theme.md b/docs/3.2.x/theme.md index b0250a5d9..cedfc03a3 100644 --- a/docs/3.2.x/theme.md +++ b/docs/3.2.x/theme.md @@ -3,7 +3,7 @@ id: theme title: Using Theme --- -NativeBase provides multiple tools to use the central theme defined in the app. First tool is [`useTheme`](/use-theme), which you can use to access the values from the current theme. +NativeBase provides multiple tools to use the central theme defined in the app. The first tool is [`useTheme`](/use-theme), which you can use to access the values from the current theme. ## useTheme @@ -79,7 +79,7 @@ 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 pass a contrasting color to the text, then you can use [`useContrastText`](use-contrast-text). ```jsx isLive=true import React from 'react'; @@ -122,7 +122,7 @@ export function Example() { ## useColorMode -If you want to define some conditionals based on current color mode or change the color mode then you can try [useColorMode](useColorMode.md). +If you want to define some conditionals based on current color mode or change the color mode, then you can try [useColorMode](useColorMode.md). ```jsx isLive=true import React from 'react'; diff --git a/docs/3.2.x/toast.md b/docs/3.2.x/toast.md index 686740b74..2cac17bc3 100644 --- a/docs/3.2.x/toast.md +++ b/docs/3.2.x/toast.md @@ -5,7 +5,7 @@ title: Toast import { ComponentTheme } from '../../src/components'; -`Toast` is used to show alerts on top of an overlay. `Toast` will close itself when the close button is clicked, or after a timeout — the default is 5 seconds. The toast component is used to give feeback to users after an action has taken place. +`Toast` is used to show alerts on top of an overlay. `Toast` will close itself when the close button is clicked on or after a timeout — the default is 5 seconds. The toast component is used to give feeback to users after an action has taken place. Toasts can be configured to appear at either the top or the bottom of an application window, and it is possible to have more than one toast onscreen at a time. @@ -39,7 +39,7 @@ Display a custom component instead of the default Toast UI. ### Closing Toasts -Toasts can be closed imperatively, individually (via the close instance method) or all together (via the closeAll instance method). +Toasts can be closed imperatively, individually (via the close instance method), or all together (via the closeAll instance method). ```ComponentSnackPlayer path=components,composites,Toast,CloseToast.tsx @@ -56,7 +56,7 @@ You can use status to change the color of your toasts. ### Preventing Duplicate Toast -In some cases you might need to prevent duplicate of specific toasts. To achieve you need to pass an id and use the toast.isActive method to determine when to call toast.show(...). +In some cases, you might need to prevent duplicates of specific toasts. To achieve this, you need to pass an id and use the toast.isActive method to determine when to call toast.show(...). ```ComponentSnackPlayer path=components,composites,Toast,PreventDuplicate.tsx @@ -64,7 +64,7 @@ In some cases you might need to prevent duplicate of specific toasts. To achieve ### Standalone Toast -You can use standalone toast where you don't have access to `useToast` hook. e.g. in a different file, out of a React component. +You can use standalone toast where you don't have access to `useToast` hook, for example, in a different file, out of a React component. ```ComponentSnackPlayer path=components,composites,Toast,StandaloneToast.tsx @@ -72,7 +72,7 @@ You can use standalone toast where you don't have access to `useToast` hook. e.g ## Props -Below props can be passed while calling toast.show. +The following props can be passed while calling toast.show. ```ComponentPropTable path=composites,Toast,ToastDummy.tsx diff --git a/docs/3.2.x/use-color-mode.md b/docs/3.2.x/use-color-mode.md index 3226a6437..ed18b08c3 100644 --- a/docs/3.2.x/use-color-mode.md +++ b/docs/3.2.x/use-color-mode.md @@ -8,7 +8,7 @@ title: useColorMode ## Import ```jsx -import { useColorMode } from 'native-base'; +import { useColorMode } from "native-base"; ``` ## Example @@ -21,6 +21,6 @@ import { useColorMode } from 'native-base'; | Name | Type | Description | Default | | --------------- | --------------- | ------------------------------------------ | ------- | -| colorMode | `light`, `dark` | The active color mode | `light` | +| colorMode | `light`, `dark` | The active color mode. | `light` | | setColorMode | function | Use to set color mode. | - | | toggleColorMode | function | Use to toggle between light and dark mode. | - | diff --git a/docs/3.2.x/use-contrast-text.md b/docs/3.2.x/use-contrast-text.md index be529d27e..61caa6983 100644 --- a/docs/3.2.x/use-contrast-text.md +++ b/docs/3.2.x/use-contrast-text.md @@ -21,7 +21,7 @@ import { useContrastText } from 'native-base'; ### Using Accessible Colors -By default, NativeBase provides contrasting color based on its theme. You can also choose to get color with better [color and contrast accessibility](https://web.dev/color-and-contrast-accessibility/) with the help of [`useAccessibleColors`](use-accessible-colors) hook. +By default, NativeBase provides contrasting colors based on its theme. You can also choose to get colors with better [color and contrast accessibility](https://web.dev/color-and-contrast-accessibility/) with the help of [`useAccessibleColors`](use-accessible-colors) hook. ```ComponentSnackPlayer path=hooks,useAccessibleColors,Basic.tsx diff --git a/docs/3.2.x/utility-first.mdx b/docs/3.2.x/utility-first.mdx index 15a579d4c..b89f141ae 100644 --- a/docs/3.2.x/utility-first.mdx +++ b/docs/3.2.x/utility-first.mdx @@ -13,7 +13,7 @@ To understand utility props, let's take an example. ## With React Native -Let's try the traditional way of building the above card in React Native. +Let's try the traditional way of building the card below in React Native. @@ -173,8 +173,8 @@ export function Example() { The above example demonstrates the usage of [utility props](utility-props) alongwith [VStack](vstack), [HStack](h-stack) components. This approach allows us to style components without using StyleSheet API. -Apart from productivity boost and saving time there are other benefits by styling components using utility props. -No need to name styles anymore, no need to define an object and think about naming them. +Apart from productivity boosts and saving time, there are other benefits to styling components using utility props. +No need to name styles anymore, no need to define an object and think about naming it. Using utility-first props, you can focus on creating reusable components instead of reusable stylesheets. diff --git a/docs/3.2.x/utility-props-specificity.md b/docs/3.2.x/utility-props-specificity.md index 9abb86545..77931a0a0 100644 --- a/docs/3.2.x/utility-props-specificity.md +++ b/docs/3.2.x/utility-props-specificity.md @@ -9,7 +9,7 @@ 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. + 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, the 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. diff --git a/docs/3.3.x/accessibility.md b/docs/3.3.x/accessibility.md index 3ccb492bb..a2efba9ca 100644 --- a/docs/3.3.x/accessibility.md +++ b/docs/3.3.x/accessibility.md @@ -7,7 +7,7 @@ NativeBase comes with the latest accessibility standards out of the box includin ## Accessible Roles -NativeBase uses [React Native ARIA](https://react-native-aria.geekyants.com/) to implements [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.2/) standards to its components. This is designed to provide meaning for controls that aren't built using components provided by the platform. +NativeBase uses [React Native ARIA](https://react-native-aria.geekyants.com/) to implement [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.2/) standards to its components. This is designed to provide meaning for controls that aren't built using components provided by the platform. ## Accessible Labels @@ -15,10 +15,10 @@ When a view is marked as accessible, it is a good practice to set an `accessibil ## Keyboard Navigation -Many complex components, like Tabs and Dialog, come with expectations from users on how to interact with their content using a keyboard or other non-mouse input modalities. NativeBase Primitives provide basic keyboard support in accordance with the [WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices-1.2/). +Many complex components, like Tabs and Dialog, come with expectations from users on how to interact with their content using a keyboard or other non-mouse input modalities. NativeBase Primitives provide basic keyboard support in accordance with the [WAI-ARIA authoring practices](https://www.w3.org/WAI/ARIA/apg/). ## Focus Management Proper keyboard navigation and good labelling often go hand-in-hand with managing focus. When a user interacts with a component and something changes as a result, it's often helpful to move focus with the interaction. And for screen reader users, moving focus often results in an announcement to convey the new context, which relies on proper labelling. -In many NativeBase Components, we move focus based on the interactions a user normally takes in a given component. For example, in `Modal`, when the modal is opened, the focus is programmatically moved to the `first focusable element` and trapped inside the modal to anticipate a response to the prompt. +In many NativeBase Components, we move focus based on the interactions a user normally makes in a given component. For example, in `Modal`, when the modal is opened, the focus is programmatically moved to the `first focusable element` and trapped inside the modal to anticipate a response to the prompt. diff --git a/docs/3.3.x/alert-dialog.md b/docs/3.3.x/alert-dialog.md index e7d1af2c9..8d605c7b0 100644 --- a/docs/3.3.x/alert-dialog.md +++ b/docs/3.3.x/alert-dialog.md @@ -60,10 +60,10 @@ export const Example = () => { ## Import -- `AlertDialog`: provides context and state for the dialog. -- `AlertDialog.Header`: contains the title announced by screen readers. -- `AlertDialog.Body`: contains the description announced by screen readers. -- `AlertDialog.Footer`: contains the actions of the dialog. +- `AlertDialog`: Provides context and state for the dialog. +- `AlertDialog.Header`: Contains the title announced by screen readers. +- `AlertDialog.Body`: Contains the description announced by screen readers. +- `AlertDialog.Footer`: Contains the actions of the dialog. - `AlertDialog.Content`: The wrapper for the alert dialog's content. - `AlertDialog.CloseButton`: The button that closes the dialog. @@ -93,7 +93,7 @@ AlertDialog and its components compose the **[Modal](/modal)** component, so all ## Accessibility -Adheres to the [Alert and Message Dialogs WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#alertdialog) +Adheres to the [Alert and Message Dialogs WAI-ARIA design pattern.](https://www.w3.org/WAI/ARIA/apg/#alertdialog) ### Keyboard Interactions diff --git a/docs/3.3.x/badge.md b/docs/3.3.x/badge.md index 63f673f84..5c8e24cbd 100644 --- a/docs/3.3.x/badge.md +++ b/docs/3.3.x/badge.md @@ -5,7 +5,7 @@ title: Badge import { ComponentTheme } from '../src/components'; -`Badges` allows the highlight of an item’s status. This provides quick recognition. +`Badges` allow the highlighting of an item’s status. This provides quick recognition. ```jsx isShowcase import React from 'react'; diff --git a/docs/3.3.x/box.md b/docs/3.3.x/box.md index 400bf1408..5642e591e 100644 --- a/docs/3.3.x/box.md +++ b/docs/3.3.x/box.md @@ -49,7 +49,7 @@ export const Example = () => { ### With Linear gradient -If you're using [Expo](https://docs.expo.io/) managed or bare workflow, you can install [expo-linear-gradient](https://docs.expo.io/versions/latest/sdk/linear-gradient/) and configure it in the [NativeBaseProvider](setup-provider#add-external-dependencies-optional) as shown below. +If you're using [Expo](https://docs.expo.dev/index.html) managed or bare workflow, you can install [expo-linear-gradient](https://docs.expo.dev/versions/latest/sdk/linear-gradient/) and configure it in the [NativeBaseProvider](setup-provider#add-external-dependencies-optional) as shown below. ```jsx isLive=true import React from 'react'; diff --git a/docs/3.3.x/building-drawer-navigation.md b/docs/3.3.x/building-drawer-navigation.md index 4900e99b6..59c0f5c36 100644 --- a/docs/3.3.x/building-drawer-navigation.md +++ b/docs/3.3.x/building-drawer-navigation.md @@ -10,13 +10,13 @@ Common pattern in navigation is to use drawer from left (sometimes right) side f Here is an example to show how easily and quickly we can use React Native's [DrawerNavigation](https://reactnavigation.org/docs/drawer-based-navigation/) in NB. ```jsx isSnackPlayer name=BuildingDrawerNavigation -import * as React from 'react'; -import { NavigationContainer } from '@react-navigation/native'; +import * as React from "react"; +import { NavigationContainer } from "@react-navigation/native"; import { createDrawerNavigator, DrawerContentScrollView, -} from '@react-navigation/drawer'; -import { MaterialCommunityIcons } from '@expo/vector-icons'; +} from "@react-navigation/drawer"; +import { MaterialCommunityIcons } from "@expo/vector-icons"; import { NativeBaseProvider, Button, @@ -30,7 +30,8 @@ import { HStack, Divider, Icon, -} from 'native-base'; +} from "native-base"; +global.__reanimatedWorkletInit = () => {}; const Drawer = createDrawerNavigator(); function Component(props) { return ( @@ -44,18 +45,18 @@ function Component(props) { const getIcon = (screenName) => { switch (screenName) { - case 'Inbox': - return 'email'; - case 'Outbox': - return 'send'; - case 'Favorites': - return 'heart'; - case 'Archive': - return 'archive'; - case 'Trash': - return 'trash-can'; - case 'Spam': - return 'alert-circle'; + case "Inbox": + return "email"; + case "Outbox": + return "send"; + case "Favorites": + return "heart"; + case "Archive": + return "archive"; + case "Trash": + return "trash-can"; + case "Spam": + return "alert-circle"; default: return undefined; } @@ -82,8 +83,8 @@ function CustomDrawerContent(props) { rounded="md" bg={ index === props.state.index - ? 'rgba(6, 182, 212, 0.1)' - : 'transparent' + ? "rgba(6, 182, 212, 0.1)" + : "transparent" } onPress={(event) => { props.navigation.navigate(name); @@ -92,7 +93,7 @@ function CustomDrawerContent(props) { } @@ -100,7 +101,7 @@ function CustomDrawerContent(props) { {name} diff --git a/docs/3.3.x/building-footer-tabs.md b/docs/3.3.x/building-footer-tabs.md index 9a3a04d46..cf0572203 100644 --- a/docs/3.3.x/building-footer-tabs.md +++ b/docs/3.3.x/building-footer-tabs.md @@ -38,7 +38,7 @@ export function Example() { maxW="300px" alignSelf="center" > -
+ { ## Accessibility -Uses React Native ARIA [@react-native-aria/checkbox](https://react-native-aria.geekyants.com/docs/useCheckbox) which follows the [Checkbox WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#checkbox). +Uses React Native ARIA [@react-native-aria/checkbox](https://react-native-aria.geekyants.com/docs/useCheckbox) which follows the [Checkbox WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/#checkbox). ### Keyboard Interactions diff --git a/docs/3.3.x/contribution.md b/docs/3.3.x/contribution.md index d90c2a68a..42f3e911e 100644 --- a/docs/3.3.x/contribution.md +++ b/docs/3.3.x/contribution.md @@ -15,7 +15,7 @@ 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 `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. ![Screenshot 2022-02-07 at 1 27 46 PM](https://user-images.githubusercontent.com/62810976/161559404-c2e9064c-ae62-4395-92d9-9ddba2781d7a.png) diff --git a/docs/3.3.x/customizing-components.md b/docs/3.3.x/customizing-components.md index 331c8391a..9bd0207c8 100644 --- a/docs/3.3.x/customizing-components.md +++ b/docs/3.3.x/customizing-components.md @@ -46,7 +46,7 @@ export default function () { As shown above, we can customize components by passing the **components** object with the **key** being the **name** of the **component**. Whereas you set `defaultProps` or `baseStyle` to customize the components. -### Difference between baseStyle and defaultProps? +### Difference between baseStyle and defaultProps #### Base Style @@ -58,7 +58,7 @@ Take a look at an [example here](https://github.com/GeekyAnts/NativeBase/blob/v3 #### Default Props - Default props can be used to initialize props of a component. -- For e.g. You have a Button component and it has 2 variants. i.e. outline, solid. You can use it like. +- For e.g. You have a Button component and it has 2 variants. i.e. outline, solid. Take a look at an [example here](https://github.com/GeekyAnts/NativeBase/blob/v3.1.0/src/theme/components/button.ts#L201). diff --git a/docs/3.3.x/customizing-fonts.md b/docs/3.3.x/customizing-fonts.md index c8ade5f00..1e6fe1dc0 100644 --- a/docs/3.3.x/customizing-fonts.md +++ b/docs/3.3.x/customizing-fonts.md @@ -9,7 +9,7 @@ Follow 3 simple steps to add a custom font family. [Refer this guide if you're using Expo](https://docs.expo.io/guides/using-custom-fonts/) -[Refer this guide if you're using React Native init](https://medium.com/@aravindmnair/add-custom-fonts-to-react-native-0-60-easily-in-3-steps-fcd71459f4c9) +[Refer this guide if you're using React Native init](https://aravindmnair.medium.com/add-custom-fonts-to-react-native-0-60-easily-in-3-steps-fcd71459f4c9) ### Extend NativeBase theme object. diff --git a/docs/3.3.x/customizing-theme.md b/docs/3.3.x/customizing-theme.md index 59fa3ab11..d573b7170 100644 --- a/docs/3.3.x/customizing-theme.md +++ b/docs/3.3.x/customizing-theme.md @@ -5,7 +5,7 @@ title: Customizing Theme import { NativeBaseProvider, Box } from 'native-base'; -Theme is one core elements of NativeBase. You can customize NativeBase's theme as per your liking. NativeBase theme is complex object which looks like +The Theme is one of the core elements of NativeBase. You can customize NativeBase's theme as per your liking. NativeBase theme is a complex object. Here is what it looks like. ```tsx // theme @@ -20,7 +20,7 @@ Theme is one core elements of NativeBase. You can customize NativeBase's theme a } ``` -It has many [other properties](default-theme) but in this recipe, we'll only update few of them (namely colors, fonts, and config) using NativeBase's `extendTheme` function. +It has many [other properties](default-theme) but in this recipe, we will update only a few of them (namely colors, fonts, and config) using NativeBase's `extendTheme` function. ```tsx import React from 'react'; @@ -65,9 +65,9 @@ export default function () { In the above example, the following changes have been made: - Added a new color named **primary**. -- Updated one of the shade of **amber** color. +- Updated one of the shades of **amber** color. - Updated the initial color mode to **dark**. Default is **light**. -- Finally passed the new **theme** object to the **NativeBaseProvider**. +- Passed the new **theme** object to the **NativeBaseProvider**. ### Using the new tokens in components diff --git a/docs/3.3.x/dark-mode.md b/docs/3.3.x/dark-mode.md index 001121f4d..9825a0266 100644 --- a/docs/3.3.x/dark-mode.md +++ b/docs/3.3.x/dark-mode.md @@ -1,9 +1,9 @@ --- id: dark-mode -title: Making components dark mode compatible +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: +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 ways to achieve this: 1. By updating component's theme 2. By using useColorModeValue diff --git a/docs/3.3.x/default-theme.md b/docs/3.3.x/default-theme.md index 511a8b802..7b83315e4 100644 --- a/docs/3.3.x/default-theme.md +++ b/docs/3.3.x/default-theme.md @@ -11,7 +11,7 @@ Theming in NativeBase is based on the **[Styled System Theme Specification](htt ## Colors -You can add a `theme.colors` object to provide colors for your project. By default these colors can be referenced by the `color`, `borderColor`, `backgroundColor`, etc.. props. +You can add a `theme.colors` object to provide colors for your project. By default, these colors can be referenced by the `color`, `borderColor`, `backgroundColor`, etc. props. You can also add `.alpha:{number}` to add levels of opacity to a colour. The number can also be added in the theme file. Ex: `red.300:alpha.30`, You can read more about this in [`opacity section`](default-theme#opacity) @@ -97,7 +97,7 @@ The `size` key allows you to customize the global spacing and sizing scale for ## Opacity -The `opacity` key is used in opacity style object and to define colors opacity using the red-green-blue-alpha (RGBA) model, RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity of the color. +The `opacity` key is used in opacity style object and to define color opacity, using the red-green-blue-alpha (RGBA) model. RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity of the color. diff --git a/docs/3.3.x/design-tokens.md b/docs/3.3.x/design-tokens.md index ab3f6c29b..79a3f7c70 100644 --- a/docs/3.3.x/design-tokens.md +++ b/docs/3.3.x/design-tokens.md @@ -5,7 +5,7 @@ title: Design tokens Design tokens are the values or constants needed to construct a design system. These values can represent spacing, color, typography etc. Design tokens help to achieve consistency in building user interfaces across all platforms. -Let's take an example by defining a space and color design tokens. +Let's take an example by defining a space and color design token. ```jsx title="colors" const colors = { @@ -64,6 +64,6 @@ The above Box will be translated to ``` -With NativeBase, you can create your own design system. NativeBase follows [styled-system's specification](https://styled-system.com/theme-specification/) to construct design system. +With NativeBase, you can create your own design system. NativeBase follows the [styled-system's specification](https://styled-system.com/theme-specification/) to construct design systems. Checkout the **[default NativeBase theme](default-theme)** and how to customize it **[here](customizing-theme)**. diff --git a/docs/3.3.x/divider.md b/docs/3.3.x/divider.md index 27616bbc3..61c7745aa 100644 --- a/docs/3.3.x/divider.md +++ b/docs/3.3.x/divider.md @@ -46,7 +46,7 @@ The Divider displays a thin horizontal or vertical line. Pass the `orientation` prop and set it to either `horizontal` or `vertical`. -> **Note:** If the horizontal orientation is used, make sure that the parent element is assigned a width and If the vertical orientation is used, make sure that the parent element is assigned a height. +> **Note:** If the horizontal orientation is used, make sure that the parent element is assigned a width. If the vertical orientation is used, make sure that the parent element is assigned a height. ```ComponentSnackPlayer path=components,composites,Divider,Orientation.tsx diff --git a/docs/3.3.x/flex.md b/docs/3.3.x/flex.md index 964b19ae5..647930df8 100644 --- a/docs/3.3.x/flex.md +++ b/docs/3.3.x/flex.md @@ -144,7 +144,7 @@ import { Flex, Spacer } from 'native-base'; ## Usage -Flex components comes with some helpful shorthand props: +Flex components come with some helpful shorthand props: - `flexDirection` is `direction` - `flexWrap` is `wrap` diff --git a/docs/3.3.x/hidden.md b/docs/3.3.x/hidden.md index a9c55e9aa..6dd4906a7 100644 --- a/docs/3.3.x/hidden.md +++ b/docs/3.3.x/hidden.md @@ -5,7 +5,7 @@ title: Hidden import { ComponentTheme } from '../src/components'; -Hidden is used to toggle the visibility value of child components responsively, based on the colorMode or based on the platform. It doesn't mount the child components in the restricted values of props. +Hidden is used to toggle the visibility value of child components responsively, based on the colorMode or based on the platform. It does not mount the child components in the restricted values of props. ## Import diff --git a/docs/3.3.x/icon-button.md b/docs/3.3.x/icon-button.md index 6628662f3..e7f5b6d12 100644 --- a/docs/3.3.x/icon-button.md +++ b/docs/3.3.x/icon-button.md @@ -5,7 +5,7 @@ title: IconButton import { ComponentTheme } from '../src/components'; -`IconButton` composes the `Button` component. It is generally used to make an Icon pressable. +`IconButton` consists of the `Button` component. It is generally used to make an Icon pressable. ```jsx isShowcase import React from 'react'; @@ -78,4 +78,4 @@ export const Example = () => { ## Accessibility - Use accessibilityLabel for labelling icon buttons to make sure it's announced by screen reader devices. -- IconButton has a `role` set to [button](https://www.w3.org/TR/wai-aria-practices-1.2/#button). +- IconButton has a `role` set to [button](https://www.w3.org/WAI/ARIA/apg/#button). diff --git a/docs/3.3.x/icon.md b/docs/3.3.x/icon.md index 4bd175ce3..780c05065 100644 --- a/docs/3.3.x/icon.md +++ b/docs/3.3.x/icon.md @@ -3,10 +3,10 @@ id: icon title: Icon --- -NativeBase allows you to use icons in multiples ways. They are listed below: +NativeBase allows you to use icons in multiples ways: -- Create icon by creating an SVG Icon -- Create icon using createIcon function and use it as a component +- Create icon by creating an SVG Icon. +- Create icon using createIcon function and use it as a component. - Use a third-party icon library ( such as [@expo/vector-icons](https://github.com/expo/vector-icons) ), with `as` prop. ```jsx isShowcase @@ -37,7 +37,7 @@ Apart from the icons provided by [@expo/vector-icon](https://github.com/expo/vec ### NativeBase Icons -We provides a set of commonly used interface icons. So you can directly use them in your project. All our icons are create using [`createIcon`](icon#createicon) function from NativeBase. +We provide a set of commonly used interface icons which you can directly use in your project. All our icons are create using [`createIcon`](icon#createicon) function from NativeBase. ```ComponentSnackPlayer path=components,primitives,Icon,AllIcons.tsx diff --git a/docs/3.3.x/image.md b/docs/3.3.x/image.md index 2a43dd65d..b21a686fc 100644 --- a/docs/3.3.x/image.md +++ b/docs/3.3.x/image.md @@ -69,7 +69,7 @@ export function Example() { ### With Next's require statement -When using require statement from next for image keep this in mind. +When using require statement from next for image, keep this in mind. ```jsx diff --git a/docs/3.3.x/installation.mdx b/docs/3.3.x/installation.mdx index 32352fbde..884efcc41 100644 --- a/docs/3.3.x/installation.mdx +++ b/docs/3.3.x/installation.mdx @@ -5,7 +5,7 @@ title: Installation import { InstallationTiles } from "../src/components"; -**NativeBase** is supported in [Expo](https://docs.expo.io/get-started/installation/) or React Native CLI initiated apps. Web support is made possible by [react-native-web](https://necolas.github.io/react-native-web/). +**NativeBase** is supported in [Expo](https://docs.expo.dev/get-started/installation/) or React Native CLI initiated apps. Web support is made possible by [react-native-web](https://necolas.github.io/react-native-web/). Refer the guides shown below to setup NativeBase in your React app. diff --git a/docs/3.3.x/link.md b/docs/3.3.x/link.md index 0e1fcea4e..6133c097d 100644 --- a/docs/3.3.x/link.md +++ b/docs/3.3.x/link.md @@ -70,4 +70,4 @@ import { Link } from 'native-base'; ## Accessibility -Adheres to the [Link WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#link) +Adheres to the [Link WAI-ARIA design pattern.](https://www.w3.org/WAI/ARIA/apg/#link) diff --git a/docs/3.3.x/menu.md b/docs/3.3.x/menu.md index 24f7b77e0..029a2d418 100644 --- a/docs/3.3.x/menu.md +++ b/docs/3.3.x/menu.md @@ -123,4 +123,4 @@ Extends `MenuItem`. ## Accessibility -Adheres to the [Menu WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#menu) +Adheres to the [Menu WAI-ARIA design pattern.](https://www.w3.org/WAI/ARIA/apg/#menu) diff --git a/docs/3.3.x/migration/v3.md b/docs/3.3.x/migration/v3.md index c3e20cf47..349226570 100644 --- a/docs/3.3.x/migration/v3.md +++ b/docs/3.3.x/migration/v3.md @@ -3,7 +3,7 @@ id: migration-guide-three title: Upgrading to v3 --- -`v3` comes with a lot of changes in philosophy as well as the API. We have re-imagined how we should code for React Native as well as web. Keeping this in mind, you might face a lot of changes from v2 to v3. This might be a bit of tedious work but we promise you, it will be worth it! +`v3` comes with a lot of changes in philosophy as well as the API. We have re-imagined how we should code for React Native as well as web. Keeping this in mind, you might come across a lot of changes while upgrading from v2 to v3. This might seem to be a bit of tedious work but we promise you, it will be worth it! If you are looking to upgrade NativeBase from `v2` to `v3` in your application, we recommend looking into the following sections first: @@ -14,6 +14,6 @@ If you are looking to upgrade NativeBase from `v2` to `v3` in your application, This will allow you to leverage `v3` to the fullest. We have further divided the migration guide into different components, so that it's easier to search for a specific one. -We hope that `v3` is able to fulfill all the expectations set by it's predecessor and makes the overall UX and DX of your application better. +We hope that `v3` is able to fulfill all the expectations set by its predecessor and makes the overall UX and DX of your application better. Happy Coding! diff --git a/docs/3.3.x/migration/v3xtov32.mdx b/docs/3.3.x/migration/v3xtov32.mdx index 37f3b3739..948bfef2b 100644 --- a/docs/3.3.x/migration/v3xtov32.mdx +++ b/docs/3.3.x/migration/v3xtov32.mdx @@ -3,13 +3,13 @@ id: migration-guide-three-point-two title: Upgrading to 3.2.0 from 3.x --- -As we continue to improve NativeBase v3 we got a lot of feature requests and we also revamped our theme to make it more consistent, easy to understand, optimized and promote good practices while writing code. +As we continued to improve NativeBase v3, we got a lot of feature requests and we also revamped our theme to make it more consistent, easy to understand, and optimized to promote good practices while writing code. -To do that we had to make some changes to our theme in `v3.2.0`. These are breaking changes if you are using some of the tokens in your project. To make it easy for you to upgrade, we are providing three options: +In order to do this, we had to make some changes to our theme in `v3.2.0`. These are breaking changes if you are using some of the tokens in your project. To make it easy for you to upgrade, we are providing three options: -## Extend previous version's theme for backward compatibility +## Extend Previous Version's Theme for Backward Compatibility -You need to add `v3CompatibleTheme` to your `NativeBaseProvider` which preserves all the old token that were changed or removed in v3.2.0. +You need to add `v3CompatibleTheme` to your `NativeBaseProvider` which preserves all the old tokens that were changed or removed in v3.2.0. ```jsx import { @@ -34,8 +34,8 @@ If you are updating from 3.1.x to 3.2.x in a Next.js project, you might need to ### Updating next.config.js/ts -- Now need to include only react-native-web and native-base in transplie-modules -- No need of webpack config just add withFonts(from next-fonts) and withExpo(from @expo/next-adapter) +- Now need to include only react-native-web and native-base in transplie-modules. +- No need of webpack config just add withFonts(from next-fonts) and withExpo(from @expo/next-adapter). ```jsx {5-22,27-40} const withFonts = require('next-fonts'); @@ -212,9 +212,9 @@ Below is a rough account of the breaking API changes as well as the minimal chan We have introduced [strict mode](../strict-mode) in `v3.2.0` which is `off` by default. If you don't want to have strict mode, step 1 is enough. If you want to comply with the strict mode, you also need to do these: -1. All utility props which take theme tokens as values, now take only string values as a valid type +1. All utility props which take theme tokens as values, now take only string values as a valid type. -This means that if you pass a number value which is supposed to be a theme token, into a utility prop, then it will be treated as invalid and based on you strict mode config will show you an error or a warning. +This means that if you pass a number value that is supposed to be a theme token into a utility prop, then it will be treated as invalid and based on your strict mode config will show you an error or a warning. ```js // Incorrect Way to pass theme tokens to utility props diff --git a/docs/3.3.x/modal.md b/docs/3.3.x/modal.md index de1c66ae8..c664426fd 100644 --- a/docs/3.3.x/modal.md +++ b/docs/3.3.x/modal.md @@ -63,7 +63,7 @@ export const Example = () => { ## Import -NativeBase exports Modal Compound component: +NativeBase exports a Modal Compound component: - `Modal`: The wrapper that provides context for its children. - `Modal.Content`: The container for the modal dialog's content. @@ -132,7 +132,7 @@ If you want a specifically aligned Modal, pass `justifyContent` and `alignItems` ## Accessibility -Uses React Native ARIA [@react-native-aria/focus](https://react-native-aria.geekyants.com/docs/FocusScope) which follows the [Dialog Modal WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#dialog_modal). +Uses React Native ARIA [@react-native-aria/focus](https://react-native-aria.geekyants.com/docs/FocusScope) which follows the [Dialog Modal WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/#dialog_modal). ### Keyboard Interactions diff --git a/docs/3.3.x/nativebase-factory.md b/docs/3.3.x/nativebase-factory.md index 61a6e9730..1b839814e 100644 --- a/docs/3.3.x/nativebase-factory.md +++ b/docs/3.3.x/nativebase-factory.md @@ -37,5 +37,5 @@ import { Factory } from 'native-base'; | Name | Type | Description | Default | | -------------- | --------------- | ----------------------------------------------------------------------------- | ------- | -| component | React component | Original component to be passed on which nativebase props have to be applied. | - | +| component | React component | Original component to be passed on which NativeBase props have to be applied. | - | | componentTheme | Object | This object can include `baseStyle`, `sizes`, `variants`, `defaultProps` | - | diff --git a/docs/3.3.x/popover.md b/docs/3.3.x/popover.md index a5e1562d8..3aa06cbda 100644 --- a/docs/3.3.x/popover.md +++ b/docs/3.3.x/popover.md @@ -5,7 +5,7 @@ title: Popover import { ComponentTheme } from '../src/components'; -`Popover` floats around a trigger. It is a non-modal dialog and used to provide contextual information to the user. It should be paired with a pressable trigger element. +`Popover` floats around a trigger. It is a non-modal dialog used to provide contextual information to the user. It should be paired with a pressable trigger element. ```jsx isShowcase import React from 'react'; @@ -124,7 +124,7 @@ You can pass custom backgroundColor using `bg` or `backgroundColor`, `borderColo ## Accessibility -Adheres to the [Dialog WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#dialog_modal) +Adheres to the [Dialog WAI-ARIA design pattern.](https://www.w3.org/WAI/ARIA/apg/#dialog_modal) ### Keyboard Interactions diff --git a/docs/3.3.x/progress.md b/docs/3.3.x/progress.md index fdb6c4b32..6fa5abec7 100644 --- a/docs/3.3.x/progress.md +++ b/docs/3.3.x/progress.md @@ -71,5 +71,5 @@ import { Progress } from 'native-base'; ## Accessibility - Adheres to the `progressbar` [role requirements.](https://www.w3.org/TR/wai-aria-1.2/#progressbar) -- On web, `aria-valuenow`, `aria-valuemin` and `aria-valuemax` to ensure the progress percent is visible to screen readers. -- On mobile, [accessibilityValue](https://reactnative.dev/docs/accessibility#accessibilityvalue) is used to ensure it's announced by Talkback and VoiceOver. +- On web, `aria-valuenow`, `aria-valuemin` and `aria-valuemax` is used to ensure the progress percent is visible to screen readers. +- On mobile, [accessibilityValue](https://reactnative.dev/docs/accessibility#accessibilityvalue) is used to ensure it is announced by Talkback and VoiceOver. diff --git a/docs/3.3.x/pseudo-props-101.md b/docs/3.3.x/pseudo-props-101.md index 322929e17..9b3d197ee 100644 --- a/docs/3.3.x/pseudo-props-101.md +++ b/docs/3.3.x/pseudo-props-101.md @@ -3,7 +3,7 @@ id: pseudo-props-101 title: 'Pseudo props: Do’s & Dont’s' --- -Before getting into details of all the common Pseudo Props NativeBase has to offer let's check some key points that these pseudo props follow. +Before getting into details of all the common Pseudo Props NativeBase has to offer, let's check some key points that these pseudo props follow. ## Nesting pseudo props: @@ -124,7 +124,7 @@ export function Example() { ### Don'ts -- The below approach is similar to the above one, but this time we have passed inline color in Icon. So, if you pass styling in Icon itself and then also pass it in `_icon` then styling passed in `_icon` will not be applied because the props passed in Icon should have higher specificity than `_icon` and that will prevent Icon to override props from `_icon`. +- The below approach is similar to the above one, but this time we have passed inline color in Icon. So, if you pass styling in Icon itself and then also pass it in `_icon`, then styling passed in `_icon` will not be applied because the props passed in Icon should have higher specificity than `_icon` and that will prevent Icon to override props from `_icon`. - In below case color from `_icon` will not be applied to Icon and you will not be able to change the color of Icon on state changes like hover, pressed and focus. ```jsx isLive=true diff --git a/docs/3.3.x/radio.md b/docs/3.3.x/radio.md index 1a70671a3..55d81c120 100644 --- a/docs/3.3.x/radio.md +++ b/docs/3.3.x/radio.md @@ -5,7 +5,7 @@ title: Radio import { ComponentTheme } from '../src/components'; -`Radio` limits the selection from a series of option to only one. +`Radio` limits the selection from a series of options to only one. ```jsx isShowcase import React from 'react'; @@ -104,7 +104,7 @@ export const Example = () => { ## Accessibility -Uses React Native ARIA [@react-native-aria/radio](https://react-native-aria.geekyants.com/docs/useRadioGroup) which follows the [Radio Group WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#radiobutton). +Uses React Native ARIA [@react-native-aria/radio](https://react-native-aria.geekyants.com/docs/useRadioGroup) which follows the [Radio Group WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/#radiobutton). ### Keyboard Interactions diff --git a/docs/3.3.x/responsive.md b/docs/3.3.x/responsive.md index 4920b6918..6a4dd3261 100644 --- a/docs/3.3.x/responsive.md +++ b/docs/3.3.x/responsive.md @@ -23,7 +23,7 @@ To make styles responsive, you can use either the array or object syntax. All style props that arrays as values for responsive styles. -For Example to make a `Box` width or w responsive using the array syntax, here's what you need to do: +For example, to make a `Box` width or w responsive using the array syntax, here's what you need to do: ```jsx isLive=true import React from 'react'; @@ -56,7 +56,7 @@ export function Example() { You can also define responsive values with breakpoint aliases in an object. Any undefined alias key will define the base, non-responsive value. -For Example to make a `Text` fontSize responsive using the object syntax, here's what you need to do: +For example, to make a `Text` fontSize responsive using the object syntax, here's what you need to do: ```jsx isLive=true import React from 'react'; diff --git a/docs/3.3.x/safe-area-view-props.md b/docs/3.3.x/safe-area-view-props.md index 87b69a291..b2a11868c 100644 --- a/docs/3.3.x/safe-area-view-props.md +++ b/docs/3.3.x/safe-area-view-props.md @@ -3,7 +3,7 @@ id: safe-area-view-props title: SafeAreaView Props --- -To make your components respect the [SafeAreaView](https://reactnative.dev/docs/safeareaview) of the device, we have provided some props that you can use with Box component. They apply a safe padding to your component in the parts decided by the passed props. These props accept either a boolean or a number. If boolean is passed then component takes flexible inset and adjusts its children according to the the device. If a number is passed then it provides a fixed inset in the chosen direction. +To make your components respect the [SafeAreaView](https://reactnative.dev/docs/safeareaview) of the device, we have provided some props that you can use with Box component. They apply a safe padding to your component in the parts decided by the passed props. These props accept either a boolean or a number. If a Boolean is passed, then the component takes a flexible inset and adjusts its children according to the device. If a number is passed, then it provides a fixed inset in the chosen direction. - `safeArea`: Apply safe padding to all edges. - `safeAreaX`: Apply safe padding to x direction. @@ -13,11 +13,11 @@ To make your components respect the [SafeAreaView](https://reactnative.dev/docs/ - `safeAreaLeft`: Apply safe padding to left. - `safeAreaRight`: Apply safe padding to right. -Internally, NativeBase uses [useSafeAreaInsets](https://docs.expo.io/versions/latest/sdk/safe-area-context/#hooks) hook of [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context). +Internally, NativeBase uses [useSafeAreaInsets](https://docs.expo.dev/versions/latest/sdk/safe-area-context/#hooks) hook of [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context). :::info -SafeAreaView props can only be applied on [Box](box.md) as of now. To make you App SafeArea safe, just wrap your app with a Box and pass safeArea props to it. +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. ::: @@ -73,7 +73,7 @@ export function Example() { ### Using Hook -If you want to add the SafeAreaView props to other components, you can use the hook. Since, `SafeAreaView` props add relevant padding to the components, you will need to pass the padding manually that you are applying to the component for it to return the SafeArea adjusted padding. +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'; diff --git a/docs/3.3.x/setup-provider.md b/docs/3.3.x/setup-provider.md index 9143607f7..58334f55b 100644 --- a/docs/3.3.x/setup-provider.md +++ b/docs/3.3.x/setup-provider.md @@ -56,7 +56,7 @@ function App() { If you want to do something with the color modes in your app, you can use `colorModeManager` Prop of `NativeBaseProvider` to achieve it. -In the below example we will show how to store the active `ColorMode` in an async storage, so it can be consistent all around our app. +In the example below, we show how to store the active `ColorMode` in an async storage, so it can be consistent all around our app. ```tsx import React from 'react'; @@ -93,8 +93,7 @@ export default ({ children, theme }: any) => { ## Add external dependencies (Optional) -If you want to use [Gradient feature in Box](box#with-linear-gradient), you need to pass linear gradient dependency as a config object in `NativeBaseProvider`. This dependency can be either from [expo-linear-gradient](https://docs.expo.io/versions/latest/sdk/linear-gradient/) or [react-native-linear-gradient](https://www.npmjs.com/package/react-native-linear-gradient) - +If you want to use the [Gradient feature in Box](box#with-linear-gradient),it has 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'; @@ -124,6 +123,6 @@ export default () => { | Name | Type | Description | Default | | -------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------ | | initialWindowMetrics | Object | Mock data for frame and insets. [Refer this](https://github.com/th3rdwave/react-native-safe-area-context#testing) for further information. | - | -| colorModeManager | { get : Function , set : Function } | Manage Color mode in your app | - | -| theme | Object | use custom theme in your app | NativeBase Default Theme | +| colorModeManager | { get : Function , set : Function } | Manages Color mode in your app | - | +| theme | Object | Provides a custom theme for your app. | NativeBase Default Theme | | config | {dependencies: {}} | To include external dependencies. For example - [Linear gradient](box#with-linear-gradient) | - | diff --git a/docs/3.3.x/slider.md b/docs/3.3.x/slider.md index a903e424d..b2346267a 100644 --- a/docs/3.3.x/slider.md +++ b/docs/3.3.x/slider.md @@ -37,7 +37,7 @@ NativeBase exports 4 slider-related components: - `Slider`: The wrapper that provides context and functionality for all children. - `Slider.Track`: The empty part of the slider that shows the track. - `Slider.FilledTrack`: The filled part of the slider. -- `Slider.Thumb`: The handle that's used to change the slider value. +- `Slider.Thumb`: The handle that is used to change the slider value. ```jsx import { Slider } from 'native-base'; @@ -97,7 +97,7 @@ import { Slider } from 'native-base'; ## Accessibility -Adheres to the [Slider WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#slidertwothumb) +Adheres to the [Slider WAI-ARIA design pattern.](https://www.w3.org/WAI/ARIA/apg/#slidertwothumb) ### Keyboard Interactions diff --git a/docs/3.3.x/strict-mode.md b/docs/3.3.x/strict-mode.md index 4cba756d2..88848f2b3 100644 --- a/docs/3.3.x/strict-mode.md +++ b/docs/3.3.x/strict-mode.md @@ -3,7 +3,7 @@ id: strict-mode title: Strict Mode --- -NativeBase comes with its very own Strict Mode that lets you control the level of strictness for your App and Dev environment. A really handy tool to maintain best practices through out your codebase. +NativeBase comes with its very own Strict Mode that lets you control the level of strictness for your App and Dev environment. A really handy tool to maintain best practices throughout your codebase. ## What it does? @@ -11,7 +11,7 @@ Strict Mode is a config that you pass into NativeBase config. It takes 3 values ## Levels of Strictness -- **error** - Choosing this mode will throw an error indicating the cause of the error. +- **error** - Choosing this mode will show an error indicating the cause of the error. - **warn** - Choosing this mode will show a warning indicating the issue. - **off** - Choosing this mode simply means you want to go rogue and not follow the design system and best practices. diff --git a/docs/3.3.x/theme.md b/docs/3.3.x/theme.md index 80bce66f8..3385c17fd 100644 --- a/docs/3.3.x/theme.md +++ b/docs/3.3.x/theme.md @@ -3,7 +3,7 @@ id: theme title: Using Theme --- -NativeBase provides multiple tools to use the central theme defined in the app. First tool is [`useTheme`](/use-theme), which you can use to access the values from the current theme. +NativeBase provides multiple tools to use the central theme defined in the app. The first tool is [`useTheme`](/use-theme), which you can use to access the values from the current theme. ## useTheme @@ -79,7 +79,7 @@ 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 pass a contrasting color to the text, then you can use [`useContrastText`](use-contrast-text). ```jsx isLive=true import React from 'react'; @@ -122,7 +122,7 @@ export function Example() { ## useColorMode -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). +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'; diff --git a/docs/3.3.x/toast.md b/docs/3.3.x/toast.md index f2f12b509..c197364d1 100644 --- a/docs/3.3.x/toast.md +++ b/docs/3.3.x/toast.md @@ -5,7 +5,7 @@ title: Toast import { ComponentTheme } from '../src/components'; -`Toast` display alerts on top of an overlay. The `Toast` terminates itself when the close button is clicked or after a preset timeout — the default is 5 seconds. The component also allows users to give feedback when an action is completed. +`Toast` displays alerts on top of an overlay. The `Toast` terminates itself when the close button is clicked on or after a preset timeout — the default is 5 seconds. The component also allows users to give feedback when an action is completed. Toasts can also be configured to pop up at different areas of the application window—top or bottom. More than one instance of toast can be present onscreen at one time. @@ -61,7 +61,7 @@ Display a custom component instead of the default Toast UI. ### Closing Toasts -Toasts can be closed imperatively, individually (via the close instance method) or all together (via the closeAll instance method). +Toasts can be closed imperatively, individually (via the close instance method), or all together (via the closeAll instance method). ```ComponentSnackPlayer path=components,composites,Toast,CloseToast.tsx @@ -78,7 +78,7 @@ You can use status to change the color of your toasts. ### Preventing Duplicate Toast -In some cases you might need to prevent duplicate of specific toasts. To achieve you need to pass an id and use the toast.isActive method to determine when to call toast.show(...). +In some cases, you might need to prevent duplicates of specific toasts. To achieve this, you need to pass an id and use the toast.isActive method to determine when to call toast.show(...). ```ComponentSnackPlayer path=components,composites,Toast,PreventDuplicate.tsx @@ -86,7 +86,7 @@ In some cases you might need to prevent duplicate of specific toasts. To achieve ### Standalone Toast -You can use standalone toast where you don't have access to `useToast` hook. e.g. in a different file, out of a React component. +You can use standalone toast where you don't have access to `useToast` hook, for example, in a different file, out of a React component. ```ComponentSnackPlayer path=components,composites,Toast,StandaloneToast.tsx @@ -94,7 +94,7 @@ You can use standalone toast where you don't have access to `useToast` hook. e.g ## Props -Below props can be passed while calling toast.show. +The following props can be passed while calling toast.show. ```ComponentPropTable path=composites,Toast,ToastDummy.tsx diff --git a/docs/3.3.x/use-accessible-colors.md b/docs/3.3.x/use-accessible-colors.md index 7878e776a..4519f899b 100644 --- a/docs/3.3.x/use-accessible-colors.md +++ b/docs/3.3.x/use-accessible-colors.md @@ -3,7 +3,7 @@ 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 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 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). ## Import diff --git a/docs/3.3.x/use-color-mode.md b/docs/3.3.x/use-color-mode.md index 49c60815d..1dd612d12 100644 --- a/docs/3.3.x/use-color-mode.md +++ b/docs/3.3.x/use-color-mode.md @@ -8,7 +8,7 @@ title: useColorMode ## Import ```jsx -import { useColorMode } from 'native-base'; +import { useColorMode } from "native-base"; ``` ## Example @@ -21,6 +21,6 @@ import { useColorMode } from 'native-base'; | Name | Type | Description | Default | | --------------- | --------------- | ------------------------------------------ | ------- | -| colorMode | `light`, `dark` | The active color mode | `light` | +| colorMode | `light`, `dark` | The active color mode. | `light` | | setColorMode | function | Use to set color mode. | - | | toggleColorMode | function | Use to toggle between light and dark mode. | - | diff --git a/docs/3.3.x/use-contrast-text.md b/docs/3.3.x/use-contrast-text.md index 41c0c0888..4e1381321 100644 --- a/docs/3.3.x/use-contrast-text.md +++ b/docs/3.3.x/use-contrast-text.md @@ -21,7 +21,7 @@ import { useContrastText } from 'native-base'; ### Using Accessible Colors -By default, NativeBase provides contrasting color based on its theme. You can also choose to get color with better [color and contrast accessibility](https://web.dev/color-and-contrast-accessibility/) with the help of [`useAccessibleColors`](use-accessible-colors) hook. +By default, NativeBase provides contrasting colors based on its theme. You can also choose to get colors with better [color and contrast accessibility](https://web.dev/color-and-contrast-accessibility/) with the help of [`useAccessibleColors`](use-accessible-colors) hook. ```ComponentSnackPlayer path=hooks,useAccessibleColors,Basic.tsx diff --git a/docs/3.3.x/use-disclose.md b/docs/3.3.x/use-disclose.md index 976f04080..768d8c311 100644 --- a/docs/3.3.x/use-disclose.md +++ b/docs/3.3.x/use-disclose.md @@ -3,7 +3,7 @@ id: use-disclosure title: useDisclose --- -`useDisclose` handles common open, close, or toggle scenarios and can control feedback component such as **Modal**, **AlertDialog**, **Drawer**, etc. +`useDisclose` handles common open, close, or toggle scenarios and can control feedback components such as **Modal**, **AlertDialog**, **Drawer**, etc. ## Import diff --git a/docs/3.3.x/use-media-query.md b/docs/3.3.x/use-media-query.md index 08086335a..782c52d85 100644 --- a/docs/3.3.x/use-media-query.md +++ b/docs/3.3.x/use-media-query.md @@ -3,7 +3,7 @@ id: use-media-query title: useMediaQuery --- -`useMediaQuery` is a custom hook that helps detect matches between between a single media query or multiple media queries. React Native does not natively support media queries, so `useMediaQuery` is still limited. +`useMediaQuery` is a custom hook that helps detect matches between a single media query or multiple media queries. React Native does not natively support media queries, so `useMediaQuery` is still limited. ## Import diff --git a/docs/3.3.x/utility-first.mdx b/docs/3.3.x/utility-first.mdx index 254857fe6..6f47cb124 100644 --- a/docs/3.3.x/utility-first.mdx +++ b/docs/3.3.x/utility-first.mdx @@ -14,7 +14,7 @@ To understand utility props, let's take an example. ## With React Native -Let's try the traditional way of building the above card in React Native. +Let's try the traditional way of building the following card in React Native. @@ -174,8 +174,8 @@ export function Example() { The above example demonstrates the usage of [utility props](utility-props) alongwith [VStack](vstack), [HStack](h-stack) components. This approach allows us to style components without using StyleSheet API. -Apart from productivity boost and saving time there are other benefits by styling components using utility props. -No need to name styles anymore, no need to define an object and think about naming them. +Apartfrom productivity boosts and saving time, there are other benefits to styling components using utility props. +No need to name styles anymore, no need to define an object and think about naming it. Using utility-first props, you can focus on creating reusable components instead of reusable stylesheets. diff --git a/docs/3.3.x/utility-props-specificity.md b/docs/3.3.x/utility-props-specificity.md index 9abb86545..d527ad4eb 100644 --- a/docs/3.3.x/utility-props-specificity.md +++ b/docs/3.3.x/utility-props-specificity.md @@ -9,7 +9,7 @@ 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. + 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, the 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. diff --git a/docs/3.4.x/accessibility.md b/docs/3.4.x/accessibility.md index 3ccb492bb..a2efba9ca 100644 --- a/docs/3.4.x/accessibility.md +++ b/docs/3.4.x/accessibility.md @@ -7,7 +7,7 @@ NativeBase comes with the latest accessibility standards out of the box includin ## Accessible Roles -NativeBase uses [React Native ARIA](https://react-native-aria.geekyants.com/) to implements [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.2/) standards to its components. This is designed to provide meaning for controls that aren't built using components provided by the platform. +NativeBase uses [React Native ARIA](https://react-native-aria.geekyants.com/) to implement [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.2/) standards to its components. This is designed to provide meaning for controls that aren't built using components provided by the platform. ## Accessible Labels @@ -15,10 +15,10 @@ When a view is marked as accessible, it is a good practice to set an `accessibil ## Keyboard Navigation -Many complex components, like Tabs and Dialog, come with expectations from users on how to interact with their content using a keyboard or other non-mouse input modalities. NativeBase Primitives provide basic keyboard support in accordance with the [WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices-1.2/). +Many complex components, like Tabs and Dialog, come with expectations from users on how to interact with their content using a keyboard or other non-mouse input modalities. NativeBase Primitives provide basic keyboard support in accordance with the [WAI-ARIA authoring practices](https://www.w3.org/WAI/ARIA/apg/). ## Focus Management Proper keyboard navigation and good labelling often go hand-in-hand with managing focus. When a user interacts with a component and something changes as a result, it's often helpful to move focus with the interaction. And for screen reader users, moving focus often results in an announcement to convey the new context, which relies on proper labelling. -In many NativeBase Components, we move focus based on the interactions a user normally takes in a given component. For example, in `Modal`, when the modal is opened, the focus is programmatically moved to the `first focusable element` and trapped inside the modal to anticipate a response to the prompt. +In many NativeBase Components, we move focus based on the interactions a user normally makes in a given component. For example, in `Modal`, when the modal is opened, the focus is programmatically moved to the `first focusable element` and trapped inside the modal to anticipate a response to the prompt. diff --git a/docs/3.4.x/alert-dialog.md b/docs/3.4.x/alert-dialog.md index e7d1af2c9..8d605c7b0 100644 --- a/docs/3.4.x/alert-dialog.md +++ b/docs/3.4.x/alert-dialog.md @@ -60,10 +60,10 @@ export const Example = () => { ## Import -- `AlertDialog`: provides context and state for the dialog. -- `AlertDialog.Header`: contains the title announced by screen readers. -- `AlertDialog.Body`: contains the description announced by screen readers. -- `AlertDialog.Footer`: contains the actions of the dialog. +- `AlertDialog`: Provides context and state for the dialog. +- `AlertDialog.Header`: Contains the title announced by screen readers. +- `AlertDialog.Body`: Contains the description announced by screen readers. +- `AlertDialog.Footer`: Contains the actions of the dialog. - `AlertDialog.Content`: The wrapper for the alert dialog's content. - `AlertDialog.CloseButton`: The button that closes the dialog. @@ -93,7 +93,7 @@ AlertDialog and its components compose the **[Modal](/modal)** component, so all ## Accessibility -Adheres to the [Alert and Message Dialogs WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#alertdialog) +Adheres to the [Alert and Message Dialogs WAI-ARIA design pattern.](https://www.w3.org/WAI/ARIA/apg/#alertdialog) ### Keyboard Interactions diff --git a/docs/3.4.x/badge.md b/docs/3.4.x/badge.md index 63f673f84..5c8e24cbd 100644 --- a/docs/3.4.x/badge.md +++ b/docs/3.4.x/badge.md @@ -5,7 +5,7 @@ title: Badge import { ComponentTheme } from '../src/components'; -`Badges` allows the highlight of an item’s status. This provides quick recognition. +`Badges` allow the highlighting of an item’s status. This provides quick recognition. ```jsx isShowcase import React from 'react'; diff --git a/docs/3.4.x/box.md b/docs/3.4.x/box.md index 400bf1408..5642e591e 100644 --- a/docs/3.4.x/box.md +++ b/docs/3.4.x/box.md @@ -49,7 +49,7 @@ export const Example = () => { ### With Linear gradient -If you're using [Expo](https://docs.expo.io/) managed or bare workflow, you can install [expo-linear-gradient](https://docs.expo.io/versions/latest/sdk/linear-gradient/) and configure it in the [NativeBaseProvider](setup-provider#add-external-dependencies-optional) as shown below. +If you're using [Expo](https://docs.expo.dev/index.html) managed or bare workflow, you can install [expo-linear-gradient](https://docs.expo.dev/versions/latest/sdk/linear-gradient/) and configure it in the [NativeBaseProvider](setup-provider#add-external-dependencies-optional) as shown below. ```jsx isLive=true import React from 'react'; diff --git a/docs/3.4.x/building-drawer-navigation.md b/docs/3.4.x/building-drawer-navigation.md index 4900e99b6..59c0f5c36 100644 --- a/docs/3.4.x/building-drawer-navigation.md +++ b/docs/3.4.x/building-drawer-navigation.md @@ -10,13 +10,13 @@ Common pattern in navigation is to use drawer from left (sometimes right) side f Here is an example to show how easily and quickly we can use React Native's [DrawerNavigation](https://reactnavigation.org/docs/drawer-based-navigation/) in NB. ```jsx isSnackPlayer name=BuildingDrawerNavigation -import * as React from 'react'; -import { NavigationContainer } from '@react-navigation/native'; +import * as React from "react"; +import { NavigationContainer } from "@react-navigation/native"; import { createDrawerNavigator, DrawerContentScrollView, -} from '@react-navigation/drawer'; -import { MaterialCommunityIcons } from '@expo/vector-icons'; +} from "@react-navigation/drawer"; +import { MaterialCommunityIcons } from "@expo/vector-icons"; import { NativeBaseProvider, Button, @@ -30,7 +30,8 @@ import { HStack, Divider, Icon, -} from 'native-base'; +} from "native-base"; +global.__reanimatedWorkletInit = () => {}; const Drawer = createDrawerNavigator(); function Component(props) { return ( @@ -44,18 +45,18 @@ function Component(props) { const getIcon = (screenName) => { switch (screenName) { - case 'Inbox': - return 'email'; - case 'Outbox': - return 'send'; - case 'Favorites': - return 'heart'; - case 'Archive': - return 'archive'; - case 'Trash': - return 'trash-can'; - case 'Spam': - return 'alert-circle'; + case "Inbox": + return "email"; + case "Outbox": + return "send"; + case "Favorites": + return "heart"; + case "Archive": + return "archive"; + case "Trash": + return "trash-can"; + case "Spam": + return "alert-circle"; default: return undefined; } @@ -82,8 +83,8 @@ function CustomDrawerContent(props) { rounded="md" bg={ index === props.state.index - ? 'rgba(6, 182, 212, 0.1)' - : 'transparent' + ? "rgba(6, 182, 212, 0.1)" + : "transparent" } onPress={(event) => { props.navigation.navigate(name); @@ -92,7 +93,7 @@ function CustomDrawerContent(props) { } @@ -100,7 +101,7 @@ function CustomDrawerContent(props) { {name} diff --git a/docs/3.4.x/building-footer-tabs.md b/docs/3.4.x/building-footer-tabs.md index 9a3a04d46..cf0572203 100644 --- a/docs/3.4.x/building-footer-tabs.md +++ b/docs/3.4.x/building-footer-tabs.md @@ -38,7 +38,7 @@ export function Example() { maxW="300px" alignSelf="center" > -
+ { ## Accessibility -Uses React Native ARIA [@react-native-aria/checkbox](https://react-native-aria.geekyants.com/docs/useCheckbox) which follows the [Checkbox WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#checkbox). +Uses React Native ARIA [@react-native-aria/checkbox](https://react-native-aria.geekyants.com/docs/useCheckbox) which follows the [Checkbox WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/#checkbox). ### Keyboard Interactions diff --git a/docs/3.4.x/contribution.md b/docs/3.4.x/contribution.md index 7338e79fa..0e1ca5e1f 100644 --- a/docs/3.4.x/contribution.md +++ b/docs/3.4.x/contribution.md @@ -15,7 +15,7 @@ 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` 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`. +According to our [release schedule](https://github.com/GeekyAnts/NativeBase/releases), we maintain `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-08-16 at 6 51 33 PM](https://user-images.githubusercontent.com/36300815/184890022-171cf7d9-2c37-4dfa-a302-e41e879a22d7.png) diff --git a/docs/3.4.x/customizing-components.md b/docs/3.4.x/customizing-components.md index 331c8391a..acd76d533 100644 --- a/docs/3.4.x/customizing-components.md +++ b/docs/3.4.x/customizing-components.md @@ -46,7 +46,7 @@ export default function () { As shown above, we can customize components by passing the **components** object with the **key** being the **name** of the **component**. Whereas you set `defaultProps` or `baseStyle` to customize the components. -### Difference between baseStyle and defaultProps? +### Difference between baseStyle and defaultProps #### Base Style @@ -58,7 +58,7 @@ Take a look at an [example here](https://github.com/GeekyAnts/NativeBase/blob/v3 #### Default Props - Default props can be used to initialize props of a component. -- For e.g. You have a Button component and it has 2 variants. i.e. outline, solid. You can use it like. +- For e.g. You have a Button component and it has 2 variants. i.e. outline, solid. Take a look at an [example here](https://github.com/GeekyAnts/NativeBase/blob/v3.1.0/src/theme/components/button.ts#L201). diff --git a/docs/3.4.x/customizing-fonts.md b/docs/3.4.x/customizing-fonts.md index c50d1c190..31c84a26e 100644 --- a/docs/3.4.x/customizing-fonts.md +++ b/docs/3.4.x/customizing-fonts.md @@ -9,7 +9,7 @@ Follow 3 simple steps to add a custom font family. [Refer this guide if you're using Expo](https://docs.expo.io/guides/using-custom-fonts/) -[Refer this guide if you're using React Native init](https://medium.com/@aravindmnair/add-custom-fonts-to-react-native-0-60-easily-in-3-steps-fcd71459f4c9) +[Refer this guide if you're using React Native init](https://aravindmnair.medium.com/add-custom-fonts-to-react-native-0-60-easily-in-3-steps-fcd71459f4c9) ### Extend NativeBase theme object. diff --git a/docs/3.4.x/customizing-theme.md b/docs/3.4.x/customizing-theme.md index 59fa3ab11..d573b7170 100644 --- a/docs/3.4.x/customizing-theme.md +++ b/docs/3.4.x/customizing-theme.md @@ -5,7 +5,7 @@ title: Customizing Theme import { NativeBaseProvider, Box } from 'native-base'; -Theme is one core elements of NativeBase. You can customize NativeBase's theme as per your liking. NativeBase theme is complex object which looks like +The Theme is one of the core elements of NativeBase. You can customize NativeBase's theme as per your liking. NativeBase theme is a complex object. Here is what it looks like. ```tsx // theme @@ -20,7 +20,7 @@ Theme is one core elements of NativeBase. You can customize NativeBase's theme a } ``` -It has many [other properties](default-theme) but in this recipe, we'll only update few of them (namely colors, fonts, and config) using NativeBase's `extendTheme` function. +It has many [other properties](default-theme) but in this recipe, we will update only a few of them (namely colors, fonts, and config) using NativeBase's `extendTheme` function. ```tsx import React from 'react'; @@ -65,9 +65,9 @@ export default function () { In the above example, the following changes have been made: - Added a new color named **primary**. -- Updated one of the shade of **amber** color. +- Updated one of the shades of **amber** color. - Updated the initial color mode to **dark**. Default is **light**. -- Finally passed the new **theme** object to the **NativeBaseProvider**. +- Passed the new **theme** object to the **NativeBaseProvider**. ### Using the new tokens in components diff --git a/docs/3.4.x/dark-mode.md b/docs/3.4.x/dark-mode.md index bf78ac170..d6e4a3b2e 100644 --- a/docs/3.4.x/dark-mode.md +++ b/docs/3.4.x/dark-mode.md @@ -1,9 +1,9 @@ --- id: dark-mode -title: Making components dark mode compatible +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: +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 ways to achieve this: - By updating component's theme - By using useColorModeValue diff --git a/docs/3.4.x/default-theme.md b/docs/3.4.x/default-theme.md index cfa558329..801915daa 100644 --- a/docs/3.4.x/default-theme.md +++ b/docs/3.4.x/default-theme.md @@ -11,11 +11,11 @@ Theming in NativeBase is based on the **[Styled System Theme Specification](htt ## Colors -You can add a `theme.colors` object to provide colors for your project. By default these colors can be referenced by the `color`, `borderColor`, `backgroundColor`, etc.. props. +You can add a `theme.colors` object to provide colors for your project. By default, these colors can be referenced by the `color`, `borderColor`, `backgroundColor`, etc. props. You can also add `.alpha:{number}` to add levels of opacity to a colour. The number can also be added in the theme file. Ex: `red.300:alpha.30`, You can read more about this in [`opacity section`](default-theme#opacity) -We recommend adding a palette that ranges from `50` to `900`. Tools like [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. +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. @@ -97,7 +97,7 @@ The `size` key allows you to customize the global spacing and sizing scale for ## Opacity -The `opacity` key is used in opacity style object and to define colors opacity using the red-green-blue-alpha (RGBA) model, RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity of the color. +The `opacity` key is used in opacity style object and to define color opacity, using the red-green-blue-alpha (RGBA) model. RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity of the color. diff --git a/docs/3.4.x/design-tokens.md b/docs/3.4.x/design-tokens.md index ab3f6c29b..79a3f7c70 100644 --- a/docs/3.4.x/design-tokens.md +++ b/docs/3.4.x/design-tokens.md @@ -5,7 +5,7 @@ title: Design tokens Design tokens are the values or constants needed to construct a design system. These values can represent spacing, color, typography etc. Design tokens help to achieve consistency in building user interfaces across all platforms. -Let's take an example by defining a space and color design tokens. +Let's take an example by defining a space and color design token. ```jsx title="colors" const colors = { @@ -64,6 +64,6 @@ The above Box will be translated to ``` -With NativeBase, you can create your own design system. NativeBase follows [styled-system's specification](https://styled-system.com/theme-specification/) to construct design system. +With NativeBase, you can create your own design system. NativeBase follows the [styled-system's specification](https://styled-system.com/theme-specification/) to construct design systems. Checkout the **[default NativeBase theme](default-theme)** and how to customize it **[here](customizing-theme)**. diff --git a/docs/3.4.x/divider.md b/docs/3.4.x/divider.md index 27616bbc3..61c7745aa 100644 --- a/docs/3.4.x/divider.md +++ b/docs/3.4.x/divider.md @@ -46,7 +46,7 @@ The Divider displays a thin horizontal or vertical line. Pass the `orientation` prop and set it to either `horizontal` or `vertical`. -> **Note:** If the horizontal orientation is used, make sure that the parent element is assigned a width and If the vertical orientation is used, make sure that the parent element is assigned a height. +> **Note:** If the horizontal orientation is used, make sure that the parent element is assigned a width. If the vertical orientation is used, make sure that the parent element is assigned a height. ```ComponentSnackPlayer path=components,composites,Divider,Orientation.tsx diff --git a/docs/3.4.x/flex.md b/docs/3.4.x/flex.md index 62cb1c544..74e118840 100644 --- a/docs/3.4.x/flex.md +++ b/docs/3.4.x/flex.md @@ -149,7 +149,7 @@ import { Flex, Spacer } from "native-base"; ## Usage -Flex components comes with some helpful shorthand props: +Flex components come with some helpful shorthand props: - `flexDirection` is `direction` - `flexWrap` is `wrap` diff --git a/docs/3.4.x/hidden.md b/docs/3.4.x/hidden.md index a9c55e9aa..6dd4906a7 100644 --- a/docs/3.4.x/hidden.md +++ b/docs/3.4.x/hidden.md @@ -5,7 +5,7 @@ title: Hidden import { ComponentTheme } from '../src/components'; -Hidden is used to toggle the visibility value of child components responsively, based on the colorMode or based on the platform. It doesn't mount the child components in the restricted values of props. +Hidden is used to toggle the visibility value of child components responsively, based on the colorMode or based on the platform. It does not mount the child components in the restricted values of props. ## Import diff --git a/docs/3.4.x/icon-button.md b/docs/3.4.x/icon-button.md index 6628662f3..e7f5b6d12 100644 --- a/docs/3.4.x/icon-button.md +++ b/docs/3.4.x/icon-button.md @@ -5,7 +5,7 @@ title: IconButton import { ComponentTheme } from '../src/components'; -`IconButton` composes the `Button` component. It is generally used to make an Icon pressable. +`IconButton` consists of the `Button` component. It is generally used to make an Icon pressable. ```jsx isShowcase import React from 'react'; @@ -78,4 +78,4 @@ export const Example = () => { ## Accessibility - Use accessibilityLabel for labelling icon buttons to make sure it's announced by screen reader devices. -- IconButton has a `role` set to [button](https://www.w3.org/TR/wai-aria-practices-1.2/#button). +- IconButton has a `role` set to [button](https://www.w3.org/WAI/ARIA/apg/#button). diff --git a/docs/3.4.x/icon.md b/docs/3.4.x/icon.md index 4bd175ce3..780c05065 100644 --- a/docs/3.4.x/icon.md +++ b/docs/3.4.x/icon.md @@ -3,10 +3,10 @@ id: icon title: Icon --- -NativeBase allows you to use icons in multiples ways. They are listed below: +NativeBase allows you to use icons in multiples ways: -- Create icon by creating an SVG Icon -- Create icon using createIcon function and use it as a component +- Create icon by creating an SVG Icon. +- Create icon using createIcon function and use it as a component. - Use a third-party icon library ( such as [@expo/vector-icons](https://github.com/expo/vector-icons) ), with `as` prop. ```jsx isShowcase @@ -37,7 +37,7 @@ Apart from the icons provided by [@expo/vector-icon](https://github.com/expo/vec ### NativeBase Icons -We provides a set of commonly used interface icons. So you can directly use them in your project. All our icons are create using [`createIcon`](icon#createicon) function from NativeBase. +We provide a set of commonly used interface icons which you can directly use in your project. All our icons are create using [`createIcon`](icon#createicon) function from NativeBase. ```ComponentSnackPlayer path=components,primitives,Icon,AllIcons.tsx diff --git a/docs/3.4.x/image.md b/docs/3.4.x/image.md index 2a43dd65d..b21a686fc 100644 --- a/docs/3.4.x/image.md +++ b/docs/3.4.x/image.md @@ -69,7 +69,7 @@ export function Example() { ### With Next's require statement -When using require statement from next for image keep this in mind. +When using require statement from next for image, keep this in mind. ```jsx diff --git a/docs/3.4.x/installation.mdx b/docs/3.4.x/installation.mdx index 32352fbde..884efcc41 100644 --- a/docs/3.4.x/installation.mdx +++ b/docs/3.4.x/installation.mdx @@ -5,7 +5,7 @@ title: Installation import { InstallationTiles } from "../src/components"; -**NativeBase** is supported in [Expo](https://docs.expo.io/get-started/installation/) or React Native CLI initiated apps. Web support is made possible by [react-native-web](https://necolas.github.io/react-native-web/). +**NativeBase** is supported in [Expo](https://docs.expo.dev/get-started/installation/) or React Native CLI initiated apps. Web support is made possible by [react-native-web](https://necolas.github.io/react-native-web/). Refer the guides shown below to setup NativeBase in your React app. diff --git a/docs/3.4.x/internal-pseudo-props.md b/docs/3.4.x/internal-pseudo-props.md index 353c58104..765aa51d7 100644 --- a/docs/3.4.x/internal-pseudo-props.md +++ b/docs/3.4.x/internal-pseudo-props.md @@ -3,7 +3,7 @@ id: internal-pseudo-props title: 'Internal Pseudo Props' --- -NativeBase uses some internal pseudo props to get more customizable components. +NativeBase uses internal pseudo props to get more customizable components. ## Use of internal pseudo props @@ -167,7 +167,7 @@ NativeBase uses following pseudo props in different components. | \_alt | Used to style alt text in Image. | | \_input | Used to style Input. | | \_radio | Used to style radio in RadioGroup. | -| \_item | Used to style SelectItem in select. | +| \_item | Used to style SelectItem in Select. | | \_selectedItem | Used to style selected item in Select. | | \_actionSheetContent | Used to style actionsheet content in Select. | | \_actionsheetBody | Used to style actionsheet content in Select. | diff --git a/docs/3.4.x/link.md b/docs/3.4.x/link.md index 0e1fcea4e..6133c097d 100644 --- a/docs/3.4.x/link.md +++ b/docs/3.4.x/link.md @@ -70,4 +70,4 @@ import { Link } from 'native-base'; ## Accessibility -Adheres to the [Link WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#link) +Adheres to the [Link WAI-ARIA design pattern.](https://www.w3.org/WAI/ARIA/apg/#link) diff --git a/docs/3.4.x/menu.md b/docs/3.4.x/menu.md index 24f7b77e0..029a2d418 100644 --- a/docs/3.4.x/menu.md +++ b/docs/3.4.x/menu.md @@ -123,4 +123,4 @@ Extends `MenuItem`. ## Accessibility -Adheres to the [Menu WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#menu) +Adheres to the [Menu WAI-ARIA design pattern.](https://www.w3.org/WAI/ARIA/apg/#menu) diff --git a/docs/3.4.x/migration/v3.md b/docs/3.4.x/migration/v3.md index c3e20cf47..349226570 100644 --- a/docs/3.4.x/migration/v3.md +++ b/docs/3.4.x/migration/v3.md @@ -3,7 +3,7 @@ id: migration-guide-three title: Upgrading to v3 --- -`v3` comes with a lot of changes in philosophy as well as the API. We have re-imagined how we should code for React Native as well as web. Keeping this in mind, you might face a lot of changes from v2 to v3. This might be a bit of tedious work but we promise you, it will be worth it! +`v3` comes with a lot of changes in philosophy as well as the API. We have re-imagined how we should code for React Native as well as web. Keeping this in mind, you might come across a lot of changes while upgrading from v2 to v3. This might seem to be a bit of tedious work but we promise you, it will be worth it! If you are looking to upgrade NativeBase from `v2` to `v3` in your application, we recommend looking into the following sections first: @@ -14,6 +14,6 @@ If you are looking to upgrade NativeBase from `v2` to `v3` in your application, This will allow you to leverage `v3` to the fullest. We have further divided the migration guide into different components, so that it's easier to search for a specific one. -We hope that `v3` is able to fulfill all the expectations set by it's predecessor and makes the overall UX and DX of your application better. +We hope that `v3` is able to fulfill all the expectations set by its predecessor and makes the overall UX and DX of your application better. Happy Coding! diff --git a/docs/3.4.x/migration/v3xtov32.mdx b/docs/3.4.x/migration/v3xtov32.mdx index 37f3b3739..42e657ef4 100644 --- a/docs/3.4.x/migration/v3xtov32.mdx +++ b/docs/3.4.x/migration/v3xtov32.mdx @@ -3,13 +3,13 @@ id: migration-guide-three-point-two title: Upgrading to 3.2.0 from 3.x --- -As we continue to improve NativeBase v3 we got a lot of feature requests and we also revamped our theme to make it more consistent, easy to understand, optimized and promote good practices while writing code. +As we continued to improve NativeBase v3, we got a lot of feature requests and we also revamped our theme to make it more consistent, easy to understand, and optimized to promote good practices while writing code. -To do that we had to make some changes to our theme in `v3.2.0`. These are breaking changes if you are using some of the tokens in your project. To make it easy for you to upgrade, we are providing three options: +In order to do this, we had to make some changes to our theme in `v3.2.0`. These are breaking changes if you are using some of the tokens in your project. To make it easy for you to upgrade, we are providing three options: -## Extend previous version's theme for backward compatibility +## Extend Previous Version's Theme for Backward Compatibility -You need to add `v3CompatibleTheme` to your `NativeBaseProvider` which preserves all the old token that were changed or removed in v3.2.0. +You need to add `v3CompatibleTheme` to your `NativeBaseProvider` which preserves all the old tokens that were changed or removed in v3.2.0. ```jsx import { @@ -34,8 +34,8 @@ If you are updating from 3.1.x to 3.2.x in a Next.js project, you might need to ### Updating next.config.js/ts -- Now need to include only react-native-web and native-base in transplie-modules -- No need of webpack config just add withFonts(from next-fonts) and withExpo(from @expo/next-adapter) +- Now need to include only react-native-web and native-base in transplie-modules. +- No need of webpack config just add withFonts(from next-fonts) and withExpo(from @expo/next-adapter). ```jsx {5-22,27-40} const withFonts = require('next-fonts'); @@ -212,9 +212,9 @@ Below is a rough account of the breaking API changes as well as the minimal chan We have introduced [strict mode](../strict-mode) in `v3.2.0` which is `off` by default. If you don't want to have strict mode, step 1 is enough. If you want to comply with the strict mode, you also need to do these: -1. All utility props which take theme tokens as values, now take only string values as a valid type +1. All utility props which take theme tokens as values, now take only string values as a valid type. -This means that if you pass a number value which is supposed to be a theme token, into a utility prop, then it will be treated as invalid and based on you strict mode config will show you an error or a warning. +This means that if you pass a number value that is supposed to be a theme token into a utility prop, then it will be treated as invalid and based on your strict mode config will show you an error or a warning. ```js // Incorrect Way to pass theme tokens to utility props diff --git a/docs/3.4.x/modal.md b/docs/3.4.x/modal.md index 52761ec54..321832e5b 100644 --- a/docs/3.4.x/modal.md +++ b/docs/3.4.x/modal.md @@ -63,7 +63,7 @@ export const Example = () => { ## Import -NativeBase export a Modal Compound component: +NativeBase exports a Modal Compound component: - `Modal`: The wrapper that provides context for its children. - `Modal.Content`: The container for the modal dialog's content. @@ -132,7 +132,7 @@ If you want a specifically aligned Modal, pass `justifyContent` and `alignItems` ## Accessibility -Uses React Native ARIA [@react-native-aria/focus](https://react-native-aria.geekyants.com/docs/FocusScope) which follows the [Dialog Modal WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#dialog_modal). +Uses React Native ARIA [@react-native-aria/focus](https://react-native-aria.geekyants.com/docs/FocusScope) which follows the [Dialog Modal WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/#dialog_modal). ### Keyboard Interactions diff --git a/docs/3.4.x/nativebase-factory.md b/docs/3.4.x/nativebase-factory.md index 27d3a26cc..7bbf60990 100644 --- a/docs/3.4.x/nativebase-factory.md +++ b/docs/3.4.x/nativebase-factory.md @@ -37,5 +37,5 @@ import { Factory } from "native-base"; | Name | Type | Description | Default | | -------------- | --------------- | ----------------------------------------------------------------------------- | ------- | -| component | React component | Original component to be passed on which nativebase props have to be applied. | - | +| component | React component | Original component to be passed on which NativeBase props have to be applied. | - | | componentTheme | Object | This object can include `baseStyle`, `sizes`, `variants`, `defaultProps` | - | diff --git a/docs/3.4.x/popover.md b/docs/3.4.x/popover.md index a5e1562d8..3aa06cbda 100644 --- a/docs/3.4.x/popover.md +++ b/docs/3.4.x/popover.md @@ -5,7 +5,7 @@ title: Popover import { ComponentTheme } from '../src/components'; -`Popover` floats around a trigger. It is a non-modal dialog and used to provide contextual information to the user. It should be paired with a pressable trigger element. +`Popover` floats around a trigger. It is a non-modal dialog used to provide contextual information to the user. It should be paired with a pressable trigger element. ```jsx isShowcase import React from 'react'; @@ -124,7 +124,7 @@ You can pass custom backgroundColor using `bg` or `backgroundColor`, `borderColo ## Accessibility -Adheres to the [Dialog WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#dialog_modal) +Adheres to the [Dialog WAI-ARIA design pattern.](https://www.w3.org/WAI/ARIA/apg/#dialog_modal) ### Keyboard Interactions diff --git a/docs/3.4.x/progress.md b/docs/3.4.x/progress.md index fdb6c4b32..6fa5abec7 100644 --- a/docs/3.4.x/progress.md +++ b/docs/3.4.x/progress.md @@ -71,5 +71,5 @@ import { Progress } from 'native-base'; ## Accessibility - Adheres to the `progressbar` [role requirements.](https://www.w3.org/TR/wai-aria-1.2/#progressbar) -- On web, `aria-valuenow`, `aria-valuemin` and `aria-valuemax` to ensure the progress percent is visible to screen readers. -- On mobile, [accessibilityValue](https://reactnative.dev/docs/accessibility#accessibilityvalue) is used to ensure it's announced by Talkback and VoiceOver. +- On web, `aria-valuenow`, `aria-valuemin` and `aria-valuemax` is used to ensure the progress percent is visible to screen readers. +- On mobile, [accessibilityValue](https://reactnative.dev/docs/accessibility#accessibilityvalue) is used to ensure it is announced by Talkback and VoiceOver. diff --git a/docs/3.4.x/pseudo-props-101.md b/docs/3.4.x/pseudo-props-101.md index 322929e17..9b3d197ee 100644 --- a/docs/3.4.x/pseudo-props-101.md +++ b/docs/3.4.x/pseudo-props-101.md @@ -3,7 +3,7 @@ id: pseudo-props-101 title: 'Pseudo props: Do’s & Dont’s' --- -Before getting into details of all the common Pseudo Props NativeBase has to offer let's check some key points that these pseudo props follow. +Before getting into details of all the common Pseudo Props NativeBase has to offer, let's check some key points that these pseudo props follow. ## Nesting pseudo props: @@ -124,7 +124,7 @@ export function Example() { ### Don'ts -- The below approach is similar to the above one, but this time we have passed inline color in Icon. So, if you pass styling in Icon itself and then also pass it in `_icon` then styling passed in `_icon` will not be applied because the props passed in Icon should have higher specificity than `_icon` and that will prevent Icon to override props from `_icon`. +- The below approach is similar to the above one, but this time we have passed inline color in Icon. So, if you pass styling in Icon itself and then also pass it in `_icon`, then styling passed in `_icon` will not be applied because the props passed in Icon should have higher specificity than `_icon` and that will prevent Icon to override props from `_icon`. - In below case color from `_icon` will not be applied to Icon and you will not be able to change the color of Icon on state changes like hover, pressed and focus. ```jsx isLive=true diff --git a/docs/3.4.x/radio.md b/docs/3.4.x/radio.md index 1a70671a3..55d81c120 100644 --- a/docs/3.4.x/radio.md +++ b/docs/3.4.x/radio.md @@ -5,7 +5,7 @@ title: Radio import { ComponentTheme } from '../src/components'; -`Radio` limits the selection from a series of option to only one. +`Radio` limits the selection from a series of options to only one. ```jsx isShowcase import React from 'react'; @@ -104,7 +104,7 @@ export const Example = () => { ## Accessibility -Uses React Native ARIA [@react-native-aria/radio](https://react-native-aria.geekyants.com/docs/useRadioGroup) which follows the [Radio Group WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#radiobutton). +Uses React Native ARIA [@react-native-aria/radio](https://react-native-aria.geekyants.com/docs/useRadioGroup) which follows the [Radio Group WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/#radiobutton). ### Keyboard Interactions diff --git a/docs/3.4.x/responsive.md b/docs/3.4.x/responsive.md index 9a68afd1b..912c63194 100644 --- a/docs/3.4.x/responsive.md +++ b/docs/3.4.x/responsive.md @@ -23,16 +23,16 @@ To make styles responsive, you can use either the array or object syntax. All style props that arrays as values for responsive styles. -For Example to make a `Box` width or w responsive using the array syntax, here's what you need to do: +For example, to make a `Box` width or w responsive using the array syntax, here's what you need to do: ```jsx isLive=true -import React from 'react'; -import { NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { NativeBaseProvider, Center } from "native-base"; function BreakpointExample() { return (
+ This is responsive text ); @@ -86,42 +86,41 @@ export function Example() { Here's a simple example of a component that uses a stacked layout on small screens, and a side-by-side layout on larger screens. ```jsx isLive=true -import React from 'react'; -import { - useToken, - NativeBaseProvider, - Center, - Text, - Box, - HStack, - Image, - Stack, - Heading, -} from 'native-base'; +import React from "react"; +import { Center, Text, Box, HStack, Image, Stack, Heading } from "native-base"; function App() { return ( - + image
- + The Garden City @@ -150,22 +149,21 @@ function App() { industry. The city is also known for its parks and nightlife. - - - 6 mins ago - - + + 6 mins ago + ); -} +} // Example template which wraps component with NativeBaseProvider -// Example template which wraps component with NativeBaseProvider export function Example() { return (
diff --git a/docs/3.4.x/safe-area-view-props.md b/docs/3.4.x/safe-area-view-props.md index a45e5d457..2a507d5b9 100644 --- a/docs/3.4.x/safe-area-view-props.md +++ b/docs/3.4.x/safe-area-view-props.md @@ -3,7 +3,7 @@ id: safe-area-view-props title: SafeAreaView Props --- -To make your components respect the [SafeAreaView](https://reactnative.dev/docs/safeareaview) of the device, we have provided some props that you can use with Box component. They apply a safe padding to your component in the parts decided by the passed props. These props accept either a boolean or a number. If boolean is passed then component takes flexible inset and adjusts its children according to the the device. If a number is passed then it provides a fixed inset in the chosen direction. +To make your components respect the [SafeAreaView](https://reactnative.dev/docs/safeareaview) of the device, we have provided some props that you can use with Box component. They apply a safe padding to your component in the parts decided by the passed props. These props accept either a boolean or a number. If a Boolean is passed, then the component takes a flexible inset and adjusts its children according to the device. If a number is passed, then it provides a fixed inset in the chosen direction. - `safeArea`: Apply safe padding to all edges. - `safeAreaX`: Apply safe padding to x direction. @@ -13,11 +13,11 @@ To make your components respect the [SafeAreaView](https://reactnative.dev/docs/ - `safeAreaLeft`: Apply safe padding to left. - `safeAreaRight`: Apply safe padding to right. -Internally, NativeBase uses [useSafeAreaInsets](https://docs.expo.io/versions/latest/sdk/safe-area-context/#hooks) hook of [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context). +Internally, NativeBase uses [useSafeAreaInsets](https://docs.expo.dev/versions/latest/sdk/safe-area-context/#hooks) hook of [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context). :::info -SafeAreaView props can only be applied on [Box](box.md) as of now. To make your 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. ::: @@ -73,7 +73,7 @@ export function Example() { ### Using Hook -If you want to add the SafeAreaView props to other components, you can use the hook. Since, `SafeAreaView` props add relevant padding to the components, you will need to pass the padding manually that you are applying to the component for it to return the SafeArea adjusted padding. +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"; diff --git a/docs/3.4.x/setup-provider.md b/docs/3.4.x/setup-provider.md index c1497f317..c5b09bdf2 100644 --- a/docs/3.4.x/setup-provider.md +++ b/docs/3.4.x/setup-provider.md @@ -56,7 +56,7 @@ function App() { If you want to do something with the color modes in your app, you can use colorModeManager Prop of NativeBaseProvider to achieve it. -In the below example we will show how to store the active ColorMode in an async storage, so it can be consistent all around your app. +In the example below, we 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"; @@ -93,7 +93,7 @@ export default ({ children, theme }: any) => { ## Add external dependencies (Optional) -If you want to use [Gradient feature in Box](box#with-linear-gradient), you need to pass linear gradient dependency as a config object in NativeBaseProvider. This dependency can be either from [expo-linear-gradient](https://docs.expo.io/versions/latest/sdk/linear-gradient/) or [react-native-linear-gradient](https://www.npmjs.com/package/react-native-linear-gradient) +If you want to use the [Gradient feature in Box](box#with-linear-gradient),it has 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"; @@ -142,8 +142,8 @@ export default () => { | Name | Type | Description | Default | | -------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------ | -| isSSR | Boolean | Tells the provider if your app is Server Side Rendered or not? | - | +| isSSR | Boolean | Tells the provider if your app is rendered on the server side or not. | - | | initialWindowMetrics | Object | Mock data for frame and insets. [Refer this](https://github.com/th3rdwave/react-native-safe-area-context#testing) for further information. | - | -| colorModeManager | { get : Function , set : Function } | Manage Color mode in your app | - | -| theme | Object | use custom theme in your app | NativeBase Default Theme | +| colorModeManager | { get : Function , set : Function } | Manages Color mode in your app | - | +| theme | Object | Provides a custom theme for your app. | NativeBase Default Theme | | config | {dependencies: {}} | To include external dependencies. For example - [Linear gradient](box#with-linear-gradient) | - | diff --git a/docs/3.4.x/slider.md b/docs/3.4.x/slider.md index e420ef51c..4309c3722 100644 --- a/docs/3.4.x/slider.md +++ b/docs/3.4.x/slider.md @@ -37,7 +37,7 @@ NativeBase exports 4 Slider related components: - `Slider`: The wrapper that provides context and functionality for all children. - `Slider.Track`: The empty part of the slider that shows the track. - `Slider.FilledTrack`: The filled part of the slider. -- `Slider.Thumb`: The handle that's used to change the slider value. +- `Slider.Thumb`: The handle that is used to change the slider value. ```jsx import { Slider } from "native-base"; @@ -97,7 +97,7 @@ import { Slider } from "native-base"; ## Accessibility -Adheres to the [Slider WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#slidertwothumb) +Adheres to the [Slider WAI-ARIA design pattern.](https://www.w3.org/WAI/ARIA/apg/#slidertwothumb) ### Keyboard Interactions diff --git a/docs/3.4.x/solito.mdx b/docs/3.4.x/solito.mdx index 0ac1fcace..d88063de4 100644 --- a/docs/3.4.x/solito.mdx +++ b/docs/3.4.x/solito.mdx @@ -1,4 +1,4 @@ -For a long long time, the React Native community has been looking for a way to make Universal Apps a reality with Server Side Rendering support. The major roadblock that was stopping us was Navigation. Solito is most probably the answer. And as we know, NativeBase already works on all three platforms. This makes the NativeBase and Solito combination a match made in heaven. +For a long time, The React Native community had been looking for a way to make Universal Apps a reality with Server Side Rendering support for quite some time. The major roadblock that was stopping us was Navigation. Solito is the most probable answer. NativeBase already works on all three platforms, as we know, making the NativeBase and Solito combination a match made in heaven. With it, your next application can run with the same codebase on all three platforms. Here is how to proceed. diff --git a/docs/3.4.x/strict-mode.md b/docs/3.4.x/strict-mode.md index 4cba756d2..546268d08 100644 --- a/docs/3.4.x/strict-mode.md +++ b/docs/3.4.x/strict-mode.md @@ -3,15 +3,14 @@ id: strict-mode title: Strict Mode --- -NativeBase comes with its very own Strict Mode that lets you control the level of strictness for your App and Dev environment. A really handy tool to maintain best practices through out your codebase. +NativeBase comes with its very own Strict Mode that lets you control the level of strictness for your App and Dev environment. A really handy tool to maintain best practices throughout your codebase. ## What it does? -Strict Mode is a config that you pass into NativeBase config. It takes 3 values `error`, `warn` and `off` by default it is set to `warn`. Based on your chosen option it checks for every prop in your project if you have used proper `token values` from theme and you are only passing `string values` to the props and if not then it throws an error or warning or does nothing. - +Strict Mode is a config that you pass into NativeBase config. It takes 3 values - `error`, `warn` and `off`. By default, it is set to `warn`. Based on your chosen option, it checks for every prop in your project. It checks if you have used proper `token values` from the theme and if you are only passing `string values` to the props. If not, then it throws an error or warning, or does nothing. ## Levels of Strictness -- **error** - Choosing this mode will throw an error indicating the cause of the error. +- **error** - Choosing this mode will show an error indicating the cause of the error. - **warn** - Choosing this mode will show a warning indicating the issue. - **off** - Choosing this mode simply means you want to go rogue and not follow the design system and best practices. diff --git a/docs/3.4.x/theme.md b/docs/3.4.x/theme.md index 47cf4931e..16d6ace2b 100644 --- a/docs/3.4.x/theme.md +++ b/docs/3.4.x/theme.md @@ -3,7 +3,7 @@ id: theme title: Using Theme --- -NativeBase provides multiple tools to use the central theme defined in the app. First tool is [`useTheme`](/use-theme), which you can use to access the values from the current theme. +NativeBase provides multiple tools to use the central theme defined in the app. The first tool is [`useTheme`](/use-theme), which you can use to access the values from the current theme. ## useTheme @@ -79,7 +79,7 @@ export function Example() { ## useContrastText -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). +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"; @@ -122,7 +122,7 @@ export function Example() { ## useColorMode -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). +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"; diff --git a/docs/3.4.x/toast.md b/docs/3.4.x/toast.md index 8b87ca46b..583286c52 100644 --- a/docs/3.4.x/toast.md +++ b/docs/3.4.x/toast.md @@ -5,7 +5,7 @@ title: Toast import { ComponentTheme } from '../src/components'; -`Toast` display alerts on top of an overlay. The `Toast` terminates itself when the close button is clicked or after a preset timeout — the default is 5 seconds. The component also allows users to give feedback when an action is completed. +`Toast` displays alerts on top of an overlay. The `Toast` terminates itself when the close button is clicked or after a preset timeout — the default is 5 seconds. The component also allows users to give feedback when an action is completed. Toasts can also be configured to pop up at different areas of the application window—top or bottom. More than one instance of toast can be present onscreen at one time. @@ -61,7 +61,7 @@ Display a custom component instead of the default Toast UI. ### Closing Toasts -Toasts can be closed imperatively, individually (via the close instance method) or all together (via the closeAll instance method). +Toasts can be closed imperatively, individually (via the close instance method), or all together (via the closeAll instance method). ```ComponentSnackPlayer path=components,composites,Toast,CloseToast.tsx @@ -69,7 +69,7 @@ Toasts can be closed imperatively, individually (via the close instance method) ### Status & Variant Recipes -You create custom Toasts that responds to different status and variants, similarly like the `Alert` component. Below is a recipe that you can try out. +You can create custom Toasts that respond to different statuses and variants, similar to the Alert component. Below is a recipe that you can try out. ```ComponentSnackPlayer path=components,composites,Toast,VariantRecipies.tsx @@ -77,7 +77,7 @@ You create custom Toasts that responds to different status and variants, similar ### Preventing Duplicate Toast -In some cases you might need to prevent duplicate of specific toasts. To achieve you need to pass an id and use the toast.isActive method to determine when to call toast.show(...). +In some cases, you might need to prevent duplicates of specific toasts. To achieve this, you need to pass an id and use the toast.isActive method to determine when to call toast.show(...). ```ComponentSnackPlayer path=components,composites,Toast,PreventDuplicate.tsx @@ -85,7 +85,7 @@ In some cases you might need to prevent duplicate of specific toasts. To achieve ### Standalone Toast -You can use standalone toast where you don't have access to `useToast` hook. e.g. in a different file, out of a React component. +You can use standalone toast where you don't have access to `useToast` hook, for example, in a different file, out of a React component. ```ComponentSnackPlayer path=components,composites,Toast,StandaloneToast.tsx @@ -93,7 +93,7 @@ You can use standalone toast where you don't have access to `useToast` hook. e.g ## Props -Below props can be passed while calling toast.show. +The following props can be passed while calling toast.show. ```ComponentPropTable path=composites,Toast,ToastDummy.tsx diff --git a/docs/3.4.x/use-accessible-colors.md b/docs/3.4.x/use-accessible-colors.md index e0c971dfe..982d0d456 100644 --- a/docs/3.4.x/use-accessible-colors.md +++ b/docs/3.4.x/use-accessible-colors.md @@ -3,7 +3,7 @@ id: use-accessible-colors title: useAccessibleColors --- -`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). +`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 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 diff --git a/docs/3.4.x/use-color-mode.md b/docs/3.4.x/use-color-mode.md index 49c60815d..1dd612d12 100644 --- a/docs/3.4.x/use-color-mode.md +++ b/docs/3.4.x/use-color-mode.md @@ -8,7 +8,7 @@ title: useColorMode ## Import ```jsx -import { useColorMode } from 'native-base'; +import { useColorMode } from "native-base"; ``` ## Example @@ -21,6 +21,6 @@ import { useColorMode } from 'native-base'; | Name | Type | Description | Default | | --------------- | --------------- | ------------------------------------------ | ------- | -| colorMode | `light`, `dark` | The active color mode | `light` | +| colorMode | `light`, `dark` | The active color mode. | `light` | | setColorMode | function | Use to set color mode. | - | | toggleColorMode | function | Use to toggle between light and dark mode. | - | diff --git a/docs/3.4.x/use-contrast-text.md b/docs/3.4.x/use-contrast-text.md index 65d425e7c..376cca3fa 100644 --- a/docs/3.4.x/use-contrast-text.md +++ b/docs/3.4.x/use-contrast-text.md @@ -21,7 +21,7 @@ import { useContrastText } from "native-base"; ### Using Accessible Colors -By default, NativeBase provides contrasting color based on its theme. You can also choose to get color with better [color and contrast accessibility](https://web.dev/color-and-contrast-accessibility/) with the help of [`useAccessibleColors`](use-accessible-colors) hook. +By default, NativeBase provides contrasting colors based on its theme. You can also choose to get colors with better [color and contrast accessibility](https://web.dev/color-and-contrast-accessibility/) with the help of [`useAccessibleColors`](use-accessible-colors) hook. ```ComponentSnackPlayer path=hooks,useAccessibleColors,Basic.tsx diff --git a/docs/3.4.x/use-disclose.md b/docs/3.4.x/use-disclose.md index 976f04080..768d8c311 100644 --- a/docs/3.4.x/use-disclose.md +++ b/docs/3.4.x/use-disclose.md @@ -3,7 +3,7 @@ id: use-disclosure title: useDisclose --- -`useDisclose` handles common open, close, or toggle scenarios and can control feedback component such as **Modal**, **AlertDialog**, **Drawer**, etc. +`useDisclose` handles common open, close, or toggle scenarios and can control feedback components such as **Modal**, **AlertDialog**, **Drawer**, etc. ## Import diff --git a/docs/3.4.x/use-media-query.md b/docs/3.4.x/use-media-query.md index 08086335a..782c52d85 100644 --- a/docs/3.4.x/use-media-query.md +++ b/docs/3.4.x/use-media-query.md @@ -3,7 +3,7 @@ id: use-media-query title: useMediaQuery --- -`useMediaQuery` is a custom hook that helps detect matches between between a single media query or multiple media queries. React Native does not natively support media queries, so `useMediaQuery` is still limited. +`useMediaQuery` is a custom hook that helps detect matches between a single media query or multiple media queries. React Native does not natively support media queries, so `useMediaQuery` is still limited. ## Import diff --git a/docs/3.4.x/utility-first.mdx b/docs/3.4.x/utility-first.mdx index 3af4fac1d..c51ada580 100644 --- a/docs/3.4.x/utility-first.mdx +++ b/docs/3.4.x/utility-first.mdx @@ -14,7 +14,7 @@ To understand utility props, let's take an example. ## With React Native -Let's try the traditional way of building the above card in React Native. +Let's try the traditional way of building the following card in React Native. @@ -175,8 +175,8 @@ export function Example() { The above example demonstrates the usage of [utility props](utility-props) alongwith [VStack](vstack), [HStack](h-stack) components. This approach allows us to style components without using StyleSheet API. -Apart from productivity boost and saving time there are other benefits by styling components using utility props. -No need to name styles anymore, no need to define an object and think about naming them. +Apart from productivity boosts and saving time, there are other benefits to styling components using utility props. +No need to name styles anymore, no need to define an object and think about naming it. Using utility-first props, you can focus on creating reusable components instead of reusable stylesheets. diff --git a/docs/3.4.x/utility-props-specificity.md b/docs/3.4.x/utility-props-specificity.md index 5d714e848..c0542f2d1 100644 --- a/docs/3.4.x/utility-props-specificity.md +++ b/docs/3.4.x/utility-props-specificity.md @@ -9,7 +9,7 @@ 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. + 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, the 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. diff --git a/docs/next/accessibility.md b/docs/next/accessibility.md index 3ccb492bb..a2efba9ca 100644 --- a/docs/next/accessibility.md +++ b/docs/next/accessibility.md @@ -7,7 +7,7 @@ NativeBase comes with the latest accessibility standards out of the box includin ## Accessible Roles -NativeBase uses [React Native ARIA](https://react-native-aria.geekyants.com/) to implements [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.2/) standards to its components. This is designed to provide meaning for controls that aren't built using components provided by the platform. +NativeBase uses [React Native ARIA](https://react-native-aria.geekyants.com/) to implement [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.2/) standards to its components. This is designed to provide meaning for controls that aren't built using components provided by the platform. ## Accessible Labels @@ -15,10 +15,10 @@ When a view is marked as accessible, it is a good practice to set an `accessibil ## Keyboard Navigation -Many complex components, like Tabs and Dialog, come with expectations from users on how to interact with their content using a keyboard or other non-mouse input modalities. NativeBase Primitives provide basic keyboard support in accordance with the [WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices-1.2/). +Many complex components, like Tabs and Dialog, come with expectations from users on how to interact with their content using a keyboard or other non-mouse input modalities. NativeBase Primitives provide basic keyboard support in accordance with the [WAI-ARIA authoring practices](https://www.w3.org/WAI/ARIA/apg/). ## Focus Management Proper keyboard navigation and good labelling often go hand-in-hand with managing focus. When a user interacts with a component and something changes as a result, it's often helpful to move focus with the interaction. And for screen reader users, moving focus often results in an announcement to convey the new context, which relies on proper labelling. -In many NativeBase Components, we move focus based on the interactions a user normally takes in a given component. For example, in `Modal`, when the modal is opened, the focus is programmatically moved to the `first focusable element` and trapped inside the modal to anticipate a response to the prompt. +In many NativeBase Components, we move focus based on the interactions a user normally makes in a given component. For example, in `Modal`, when the modal is opened, the focus is programmatically moved to the `first focusable element` and trapped inside the modal to anticipate a response to the prompt. diff --git a/docs/next/alert-dialog.md b/docs/next/alert-dialog.md index e7d1af2c9..8d605c7b0 100644 --- a/docs/next/alert-dialog.md +++ b/docs/next/alert-dialog.md @@ -60,10 +60,10 @@ export const Example = () => { ## Import -- `AlertDialog`: provides context and state for the dialog. -- `AlertDialog.Header`: contains the title announced by screen readers. -- `AlertDialog.Body`: contains the description announced by screen readers. -- `AlertDialog.Footer`: contains the actions of the dialog. +- `AlertDialog`: Provides context and state for the dialog. +- `AlertDialog.Header`: Contains the title announced by screen readers. +- `AlertDialog.Body`: Contains the description announced by screen readers. +- `AlertDialog.Footer`: Contains the actions of the dialog. - `AlertDialog.Content`: The wrapper for the alert dialog's content. - `AlertDialog.CloseButton`: The button that closes the dialog. @@ -93,7 +93,7 @@ AlertDialog and its components compose the **[Modal](/modal)** component, so all ## Accessibility -Adheres to the [Alert and Message Dialogs WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#alertdialog) +Adheres to the [Alert and Message Dialogs WAI-ARIA design pattern.](https://www.w3.org/WAI/ARIA/apg/#alertdialog) ### Keyboard Interactions diff --git a/docs/next/badge.md b/docs/next/badge.md index 63f673f84..5c8e24cbd 100644 --- a/docs/next/badge.md +++ b/docs/next/badge.md @@ -5,7 +5,7 @@ title: Badge import { ComponentTheme } from '../src/components'; -`Badges` allows the highlight of an item’s status. This provides quick recognition. +`Badges` allow the highlighting of an item’s status. This provides quick recognition. ```jsx isShowcase import React from 'react'; diff --git a/docs/next/box.md b/docs/next/box.md index 400bf1408..5642e591e 100644 --- a/docs/next/box.md +++ b/docs/next/box.md @@ -49,7 +49,7 @@ export const Example = () => { ### With Linear gradient -If you're using [Expo](https://docs.expo.io/) managed or bare workflow, you can install [expo-linear-gradient](https://docs.expo.io/versions/latest/sdk/linear-gradient/) and configure it in the [NativeBaseProvider](setup-provider#add-external-dependencies-optional) as shown below. +If you're using [Expo](https://docs.expo.dev/index.html) managed or bare workflow, you can install [expo-linear-gradient](https://docs.expo.dev/versions/latest/sdk/linear-gradient/) and configure it in the [NativeBaseProvider](setup-provider#add-external-dependencies-optional) as shown below. ```jsx isLive=true import React from 'react'; diff --git a/docs/next/building-drawer-navigation.md b/docs/next/building-drawer-navigation.md index 4900e99b6..59c0f5c36 100644 --- a/docs/next/building-drawer-navigation.md +++ b/docs/next/building-drawer-navigation.md @@ -10,13 +10,13 @@ Common pattern in navigation is to use drawer from left (sometimes right) side f Here is an example to show how easily and quickly we can use React Native's [DrawerNavigation](https://reactnavigation.org/docs/drawer-based-navigation/) in NB. ```jsx isSnackPlayer name=BuildingDrawerNavigation -import * as React from 'react'; -import { NavigationContainer } from '@react-navigation/native'; +import * as React from "react"; +import { NavigationContainer } from "@react-navigation/native"; import { createDrawerNavigator, DrawerContentScrollView, -} from '@react-navigation/drawer'; -import { MaterialCommunityIcons } from '@expo/vector-icons'; +} from "@react-navigation/drawer"; +import { MaterialCommunityIcons } from "@expo/vector-icons"; import { NativeBaseProvider, Button, @@ -30,7 +30,8 @@ import { HStack, Divider, Icon, -} from 'native-base'; +} from "native-base"; +global.__reanimatedWorkletInit = () => {}; const Drawer = createDrawerNavigator(); function Component(props) { return ( @@ -44,18 +45,18 @@ function Component(props) { const getIcon = (screenName) => { switch (screenName) { - case 'Inbox': - return 'email'; - case 'Outbox': - return 'send'; - case 'Favorites': - return 'heart'; - case 'Archive': - return 'archive'; - case 'Trash': - return 'trash-can'; - case 'Spam': - return 'alert-circle'; + case "Inbox": + return "email"; + case "Outbox": + return "send"; + case "Favorites": + return "heart"; + case "Archive": + return "archive"; + case "Trash": + return "trash-can"; + case "Spam": + return "alert-circle"; default: return undefined; } @@ -82,8 +83,8 @@ function CustomDrawerContent(props) { rounded="md" bg={ index === props.state.index - ? 'rgba(6, 182, 212, 0.1)' - : 'transparent' + ? "rgba(6, 182, 212, 0.1)" + : "transparent" } onPress={(event) => { props.navigation.navigate(name); @@ -92,7 +93,7 @@ function CustomDrawerContent(props) { } @@ -100,7 +101,7 @@ function CustomDrawerContent(props) { {name} diff --git a/docs/next/building-footer-tabs.md b/docs/next/building-footer-tabs.md index 9a3a04d46..5ce7d9e80 100644 --- a/docs/next/building-footer-tabs.md +++ b/docs/next/building-footer-tabs.md @@ -38,7 +38,7 @@ export function Example() { maxW="300px" alignSelf="center" > -
+ { ## Accessibility -Uses React Native ARIA [@react-native-aria/checkbox](https://react-native-aria.geekyants.com/docs/useCheckbox) which follows the [Checkbox WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#checkbox). +Uses React Native ARIA [@react-native-aria/checkbox](https://react-native-aria.geekyants.com/docs/useCheckbox) which follows the [Checkbox WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/#checkbox). ### Keyboard Interactions diff --git a/docs/next/contribution.md b/docs/next/contribution.md index 7338e79fa..0e1ca5e1f 100644 --- a/docs/next/contribution.md +++ b/docs/next/contribution.md @@ -15,7 +15,7 @@ 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` 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`. +According to our [release schedule](https://github.com/GeekyAnts/NativeBase/releases), we maintain `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-08-16 at 6 51 33 PM](https://user-images.githubusercontent.com/36300815/184890022-171cf7d9-2c37-4dfa-a302-e41e879a22d7.png) diff --git a/docs/next/customizing-components.md b/docs/next/customizing-components.md index 331c8391a..acd76d533 100644 --- a/docs/next/customizing-components.md +++ b/docs/next/customizing-components.md @@ -46,7 +46,7 @@ export default function () { As shown above, we can customize components by passing the **components** object with the **key** being the **name** of the **component**. Whereas you set `defaultProps` or `baseStyle` to customize the components. -### Difference between baseStyle and defaultProps? +### Difference between baseStyle and defaultProps #### Base Style @@ -58,7 +58,7 @@ Take a look at an [example here](https://github.com/GeekyAnts/NativeBase/blob/v3 #### Default Props - Default props can be used to initialize props of a component. -- For e.g. You have a Button component and it has 2 variants. i.e. outline, solid. You can use it like. +- For e.g. You have a Button component and it has 2 variants. i.e. outline, solid. Take a look at an [example here](https://github.com/GeekyAnts/NativeBase/blob/v3.1.0/src/theme/components/button.ts#L201). diff --git a/docs/next/customizing-fonts.md b/docs/next/customizing-fonts.md index c50d1c190..31c84a26e 100644 --- a/docs/next/customizing-fonts.md +++ b/docs/next/customizing-fonts.md @@ -9,7 +9,7 @@ Follow 3 simple steps to add a custom font family. [Refer this guide if you're using Expo](https://docs.expo.io/guides/using-custom-fonts/) -[Refer this guide if you're using React Native init](https://medium.com/@aravindmnair/add-custom-fonts-to-react-native-0-60-easily-in-3-steps-fcd71459f4c9) +[Refer this guide if you're using React Native init](https://aravindmnair.medium.com/add-custom-fonts-to-react-native-0-60-easily-in-3-steps-fcd71459f4c9) ### Extend NativeBase theme object. diff --git a/docs/next/customizing-theme.md b/docs/next/customizing-theme.md index 59fa3ab11..cff320d03 100644 --- a/docs/next/customizing-theme.md +++ b/docs/next/customizing-theme.md @@ -5,7 +5,7 @@ title: Customizing Theme import { NativeBaseProvider, Box } from 'native-base'; -Theme is one core elements of NativeBase. You can customize NativeBase's theme as per your liking. NativeBase theme is complex object which looks like +The Theme is one of the core elements of NativeBase. You can customize NativeBase's theme as per your liking. NativeBase theme is a complex object. Here is what it looks like. ```tsx // theme @@ -20,37 +20,37 @@ Theme is one core elements of NativeBase. You can customize NativeBase's theme a } ``` -It has many [other properties](default-theme) but in this recipe, we'll only update few of them (namely colors, fonts, and config) using NativeBase's `extendTheme` function. +It has many [other properties](default-theme) but in this recipe, we will update only a few of them (namely colors, fonts, and config) using NativeBase's `extendTheme` function. ```tsx -import React from 'react'; -import { NativeBaseProvider, extendTheme } from 'native-base'; -import { Content } from './Content'; +import React from "react"; +import { NativeBaseProvider, extendTheme } from "native-base"; +import { Content } from "./Content"; export default function () { const theme = extendTheme({ colors: { // Add new color primary: { - 50: '#E3F2F9', - 100: '#C5E4F3', - 200: '#A2D4EC', - 300: '#7AC1E4', - 400: '#47A9DA', - 500: '#0088CC', - 600: '#007AB8', - 700: '#006BA1', - 800: '#005885', - 900: '#003F5E', + 50: "#E3F2F9", + 100: "#C5E4F3", + 200: "#A2D4EC", + 300: "#7AC1E4", + 400: "#47A9DA", + 500: "#0088CC", + 600: "#007AB8", + 700: "#006BA1", + 800: "#005885", + 900: "#003F5E", }, // Redefining only one shade, rest of the color will remain same. amber: { - 400: '#d97706', + 400: "#d97706", }, }, config: { // Changing initialColorMode to 'dark' - initialColorMode: 'dark', + initialColorMode: "dark", }, }); @@ -65,37 +65,40 @@ export default function () { In the above example, the following changes have been made: - Added a new color named **primary**. -- Updated one of the shade of **amber** color. +- Updated one of the shades of **amber** color. - Updated the initial color mode to **dark**. Default is **light**. -- Finally passed the new **theme** object to the **NativeBaseProvider**. +- Passed the new **theme** object to the **NativeBaseProvider**. ### Using the new tokens in components ```jsx isLive +import React from "react"; +import { NativeBaseProvider, extendTheme, Box } from "native-base"; + export function Example() { const theme = extendTheme({ colors: { // Add new color primary: { - 50: '#E3F2F9', - 100: '#C5E4F3', - 200: '#A2D4EC', - 300: '#7AC1E4', - 400: '#47A9DA', - 500: '#0088CC', - 600: '#007AB8', - 700: '#006BA1', - 800: '#005885', - 900: '#003F5E', + 50: "#E3F2F9", + 100: "#C5E4F3", + 200: "#A2D4EC", + 300: "#7AC1E4", + 400: "#47A9DA", + 500: "#0088CC", + 600: "#007AB8", + 700: "#006BA1", + 800: "#005885", + 900: "#003F5E", }, // Redefining only one shade, rest of the color will remain same. amber: { - 400: '#d97706', + 400: "#d97706", }, }, config: { // Changing initialColorMode to 'dark' - initialColorMode: 'dark', + initialColorMode: "dark", }, }); diff --git a/docs/next/dark-mode.md b/docs/next/dark-mode.md index bf78ac170..d6e4a3b2e 100644 --- a/docs/next/dark-mode.md +++ b/docs/next/dark-mode.md @@ -1,9 +1,9 @@ --- id: dark-mode -title: Making components dark mode compatible +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: +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 ways to achieve this: - By updating component's theme - By using useColorModeValue diff --git a/docs/next/default-theme.md b/docs/next/default-theme.md index cfa558329..a76941df2 100644 --- a/docs/next/default-theme.md +++ b/docs/next/default-theme.md @@ -11,11 +11,11 @@ Theming in NativeBase is based on the **[Styled System Theme Specification](htt ## Colors -You can add a `theme.colors` object to provide colors for your project. By default these colors can be referenced by the `color`, `borderColor`, `backgroundColor`, etc.. props. +You can add a `theme.colors` object to provide colors for your project. By default, these colors can be referenced by the `color`, `borderColor`, `backgroundColor`, etc. props. You can also add `.alpha:{number}` to add levels of opacity to a colour. The number can also be added in the theme file. Ex: `red.300:alpha.30`, You can read more about this in [`opacity section`](default-theme#opacity) -We recommend adding a palette that ranges from `50` to `900`. Tools like [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. +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. @@ -91,13 +91,13 @@ const typography = { ## Size -The `size` key allows you to customize the global spacing and sizing scale for your project. By default these spacing value can be referenced by the `padding`, `margin`, and `top`, `left`, `right`, `bottom` props. +The `size` key allows you to customize the global spacing and sizing scale for your project. By default these spacing values can be referenced by the `padding`, `margin`, and `top`, `left`, `right`, `bottom` props. ## Opacity -The `opacity` key is used in opacity style object and to define colors opacity using the red-green-blue-alpha (RGBA) model, RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity of the color. +The `opacity` key is used in opacity style object and to define color opacity, using the red-green-blue-alpha (RGBA) model. RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity of the color. diff --git a/docs/next/design-tokens.md b/docs/next/design-tokens.md index ab3f6c29b..79a3f7c70 100644 --- a/docs/next/design-tokens.md +++ b/docs/next/design-tokens.md @@ -5,7 +5,7 @@ title: Design tokens Design tokens are the values or constants needed to construct a design system. These values can represent spacing, color, typography etc. Design tokens help to achieve consistency in building user interfaces across all platforms. -Let's take an example by defining a space and color design tokens. +Let's take an example by defining a space and color design token. ```jsx title="colors" const colors = { @@ -64,6 +64,6 @@ The above Box will be translated to ``` -With NativeBase, you can create your own design system. NativeBase follows [styled-system's specification](https://styled-system.com/theme-specification/) to construct design system. +With NativeBase, you can create your own design system. NativeBase follows the [styled-system's specification](https://styled-system.com/theme-specification/) to construct design systems. Checkout the **[default NativeBase theme](default-theme)** and how to customize it **[here](customizing-theme)**. diff --git a/docs/next/divider.md b/docs/next/divider.md index 27616bbc3..61c7745aa 100644 --- a/docs/next/divider.md +++ b/docs/next/divider.md @@ -46,7 +46,7 @@ The Divider displays a thin horizontal or vertical line. Pass the `orientation` prop and set it to either `horizontal` or `vertical`. -> **Note:** If the horizontal orientation is used, make sure that the parent element is assigned a width and If the vertical orientation is used, make sure that the parent element is assigned a height. +> **Note:** If the horizontal orientation is used, make sure that the parent element is assigned a width. If the vertical orientation is used, make sure that the parent element is assigned a height. ```ComponentSnackPlayer path=components,composites,Divider,Orientation.tsx diff --git a/docs/next/flex.md b/docs/next/flex.md index 62cb1c544..74e118840 100644 --- a/docs/next/flex.md +++ b/docs/next/flex.md @@ -149,7 +149,7 @@ import { Flex, Spacer } from "native-base"; ## Usage -Flex components comes with some helpful shorthand props: +Flex components come with some helpful shorthand props: - `flexDirection` is `direction` - `flexWrap` is `wrap` diff --git a/docs/next/hidden.md b/docs/next/hidden.md index a9c55e9aa..6dd4906a7 100644 --- a/docs/next/hidden.md +++ b/docs/next/hidden.md @@ -5,7 +5,7 @@ title: Hidden import { ComponentTheme } from '../src/components'; -Hidden is used to toggle the visibility value of child components responsively, based on the colorMode or based on the platform. It doesn't mount the child components in the restricted values of props. +Hidden is used to toggle the visibility value of child components responsively, based on the colorMode or based on the platform. It does not mount the child components in the restricted values of props. ## Import diff --git a/docs/next/icon-button.md b/docs/next/icon-button.md index 6628662f3..e7f5b6d12 100644 --- a/docs/next/icon-button.md +++ b/docs/next/icon-button.md @@ -5,7 +5,7 @@ title: IconButton import { ComponentTheme } from '../src/components'; -`IconButton` composes the `Button` component. It is generally used to make an Icon pressable. +`IconButton` consists of the `Button` component. It is generally used to make an Icon pressable. ```jsx isShowcase import React from 'react'; @@ -78,4 +78,4 @@ export const Example = () => { ## Accessibility - Use accessibilityLabel for labelling icon buttons to make sure it's announced by screen reader devices. -- IconButton has a `role` set to [button](https://www.w3.org/TR/wai-aria-practices-1.2/#button). +- IconButton has a `role` set to [button](https://www.w3.org/WAI/ARIA/apg/#button). diff --git a/docs/next/icon.md b/docs/next/icon.md index 4bd175ce3..780c05065 100644 --- a/docs/next/icon.md +++ b/docs/next/icon.md @@ -3,10 +3,10 @@ id: icon title: Icon --- -NativeBase allows you to use icons in multiples ways. They are listed below: +NativeBase allows you to use icons in multiples ways: -- Create icon by creating an SVG Icon -- Create icon using createIcon function and use it as a component +- Create icon by creating an SVG Icon. +- Create icon using createIcon function and use it as a component. - Use a third-party icon library ( such as [@expo/vector-icons](https://github.com/expo/vector-icons) ), with `as` prop. ```jsx isShowcase @@ -37,7 +37,7 @@ Apart from the icons provided by [@expo/vector-icon](https://github.com/expo/vec ### NativeBase Icons -We provides a set of commonly used interface icons. So you can directly use them in your project. All our icons are create using [`createIcon`](icon#createicon) function from NativeBase. +We provide a set of commonly used interface icons which you can directly use in your project. All our icons are create using [`createIcon`](icon#createicon) function from NativeBase. ```ComponentSnackPlayer path=components,primitives,Icon,AllIcons.tsx diff --git a/docs/next/image.md b/docs/next/image.md index 2a43dd65d..b21a686fc 100644 --- a/docs/next/image.md +++ b/docs/next/image.md @@ -69,7 +69,7 @@ export function Example() { ### With Next's require statement -When using require statement from next for image keep this in mind. +When using require statement from next for image, keep this in mind. ```jsx diff --git a/docs/next/installation.mdx b/docs/next/installation.mdx index 32352fbde..884efcc41 100644 --- a/docs/next/installation.mdx +++ b/docs/next/installation.mdx @@ -5,7 +5,7 @@ title: Installation import { InstallationTiles } from "../src/components"; -**NativeBase** is supported in [Expo](https://docs.expo.io/get-started/installation/) or React Native CLI initiated apps. Web support is made possible by [react-native-web](https://necolas.github.io/react-native-web/). +**NativeBase** is supported in [Expo](https://docs.expo.dev/get-started/installation/) or React Native CLI initiated apps. Web support is made possible by [react-native-web](https://necolas.github.io/react-native-web/). Refer the guides shown below to setup NativeBase in your React app. diff --git a/docs/next/internal-pseudo-props.md b/docs/next/internal-pseudo-props.md index e5afeef53..3b119cbbd 100644 --- a/docs/next/internal-pseudo-props.md +++ b/docs/next/internal-pseudo-props.md @@ -3,7 +3,7 @@ id: internal-pseudo-props title: 'Internal Pseudo Props' --- -NativeBase uses some internal pseudo props to get more customizable components. +NativeBase uses internal pseudo props to get more customizable components. ## Use of internal pseudo props @@ -167,7 +167,7 @@ NativeBase uses following pseudo props in different components. | \_alt | Used to style alt text in Image. | | \_input | Used to style Input. | | \_radio | Used to style radio in RadioGroup. | -| \_item | Used to style SelectItem in select. | +| \_item | Used to style SelectItem in Select. | | \_selectedItem | Used to style selected item in Select. | | \_actionSheetContent | Used to style actionsheet content in Select. | | \_actionsheetBody | Used to style actionsheet content in Select. | diff --git a/docs/next/link.md b/docs/next/link.md index 0e1fcea4e..6133c097d 100644 --- a/docs/next/link.md +++ b/docs/next/link.md @@ -70,4 +70,4 @@ import { Link } from 'native-base'; ## Accessibility -Adheres to the [Link WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#link) +Adheres to the [Link WAI-ARIA design pattern.](https://www.w3.org/WAI/ARIA/apg/#link) diff --git a/docs/next/menu.md b/docs/next/menu.md index 24f7b77e0..029a2d418 100644 --- a/docs/next/menu.md +++ b/docs/next/menu.md @@ -123,4 +123,4 @@ Extends `MenuItem`. ## Accessibility -Adheres to the [Menu WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#menu) +Adheres to the [Menu WAI-ARIA design pattern.](https://www.w3.org/WAI/ARIA/apg/#menu) diff --git a/docs/next/migration/v3.md b/docs/next/migration/v3.md index c3e20cf47..349226570 100644 --- a/docs/next/migration/v3.md +++ b/docs/next/migration/v3.md @@ -3,7 +3,7 @@ id: migration-guide-three title: Upgrading to v3 --- -`v3` comes with a lot of changes in philosophy as well as the API. We have re-imagined how we should code for React Native as well as web. Keeping this in mind, you might face a lot of changes from v2 to v3. This might be a bit of tedious work but we promise you, it will be worth it! +`v3` comes with a lot of changes in philosophy as well as the API. We have re-imagined how we should code for React Native as well as web. Keeping this in mind, you might come across a lot of changes while upgrading from v2 to v3. This might seem to be a bit of tedious work but we promise you, it will be worth it! If you are looking to upgrade NativeBase from `v2` to `v3` in your application, we recommend looking into the following sections first: @@ -14,6 +14,6 @@ If you are looking to upgrade NativeBase from `v2` to `v3` in your application, This will allow you to leverage `v3` to the fullest. We have further divided the migration guide into different components, so that it's easier to search for a specific one. -We hope that `v3` is able to fulfill all the expectations set by it's predecessor and makes the overall UX and DX of your application better. +We hope that `v3` is able to fulfill all the expectations set by its predecessor and makes the overall UX and DX of your application better. Happy Coding! diff --git a/docs/next/migration/v3xtov32.mdx b/docs/next/migration/v3xtov32.mdx index 37f3b3739..ee5be30ed 100644 --- a/docs/next/migration/v3xtov32.mdx +++ b/docs/next/migration/v3xtov32.mdx @@ -3,13 +3,13 @@ id: migration-guide-three-point-two title: Upgrading to 3.2.0 from 3.x --- -As we continue to improve NativeBase v3 we got a lot of feature requests and we also revamped our theme to make it more consistent, easy to understand, optimized and promote good practices while writing code. +As we continued to improve NativeBase v3, we got a lot of feature requests and we also revamped our theme to make it more consistent, easy to understand, and optimized to promote good practices while writing code. -To do that we had to make some changes to our theme in `v3.2.0`. These are breaking changes if you are using some of the tokens in your project. To make it easy for you to upgrade, we are providing three options: +In order to do this, we had to make some changes to our theme in `v3.2.0`. These are breaking changes if you are using some of the tokens in your project. To make it easy for you to upgrade, we are providing three options: -## Extend previous version's theme for backward compatibility +## Extend Previous Version's Theme for Backward Compatibility -You need to add `v3CompatibleTheme` to your `NativeBaseProvider` which preserves all the old token that were changed or removed in v3.2.0. +You need to add `v3CompatibleTheme` to your `NativeBaseProvider` which preserves all the old tokens that were changed or removed in v3.2.0. ```jsx import { @@ -34,8 +34,8 @@ If you are updating from 3.1.x to 3.2.x in a Next.js project, you might need to ### Updating next.config.js/ts -- Now need to include only react-native-web and native-base in transplie-modules -- No need of webpack config just add withFonts(from next-fonts) and withExpo(from @expo/next-adapter) +- Now need to include only react-native-web and native-base in transplie-modules. +- No need of webpack config just add withFonts(from next-fonts) and withExpo(from @expo/next-adapter). ```jsx {5-22,27-40} const withFonts = require('next-fonts'); @@ -212,9 +212,9 @@ Below is a rough account of the breaking API changes as well as the minimal chan We have introduced [strict mode](../strict-mode) in `v3.2.0` which is `off` by default. If you don't want to have strict mode, step 1 is enough. If you want to comply with the strict mode, you also need to do these: -1. All utility props which take theme tokens as values, now take only string values as a valid type +1. All utility props which take theme tokens as values, now take only string values as a valid type. -This means that if you pass a number value which is supposed to be a theme token, into a utility prop, then it will be treated as invalid and based on you strict mode config will show you an error or a warning. +This means that if you pass a number value that is supposed to be a theme token into a utility prop, then it will be treated as invalid and based on your strict mode config will show you an error or a warning. ```js // Incorrect Way to pass theme tokens to utility props diff --git a/docs/next/modal.md b/docs/next/modal.md index 52761ec54..321832e5b 100644 --- a/docs/next/modal.md +++ b/docs/next/modal.md @@ -63,7 +63,7 @@ export const Example = () => { ## Import -NativeBase export a Modal Compound component: +NativeBase exports a Modal Compound component: - `Modal`: The wrapper that provides context for its children. - `Modal.Content`: The container for the modal dialog's content. @@ -132,7 +132,7 @@ If you want a specifically aligned Modal, pass `justifyContent` and `alignItems` ## Accessibility -Uses React Native ARIA [@react-native-aria/focus](https://react-native-aria.geekyants.com/docs/FocusScope) which follows the [Dialog Modal WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#dialog_modal). +Uses React Native ARIA [@react-native-aria/focus](https://react-native-aria.geekyants.com/docs/FocusScope) which follows the [Dialog Modal WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/#dialog_modal). ### Keyboard Interactions diff --git a/docs/next/nativebase-factory.md b/docs/next/nativebase-factory.md index 27d3a26cc..7bbf60990 100644 --- a/docs/next/nativebase-factory.md +++ b/docs/next/nativebase-factory.md @@ -37,5 +37,5 @@ import { Factory } from "native-base"; | Name | Type | Description | Default | | -------------- | --------------- | ----------------------------------------------------------------------------- | ------- | -| component | React component | Original component to be passed on which nativebase props have to be applied. | - | +| component | React component | Original component to be passed on which NativeBase props have to be applied. | - | | componentTheme | Object | This object can include `baseStyle`, `sizes`, `variants`, `defaultProps` | - | diff --git a/docs/next/popover.md b/docs/next/popover.md index a5e1562d8..3aa06cbda 100644 --- a/docs/next/popover.md +++ b/docs/next/popover.md @@ -5,7 +5,7 @@ title: Popover import { ComponentTheme } from '../src/components'; -`Popover` floats around a trigger. It is a non-modal dialog and used to provide contextual information to the user. It should be paired with a pressable trigger element. +`Popover` floats around a trigger. It is a non-modal dialog used to provide contextual information to the user. It should be paired with a pressable trigger element. ```jsx isShowcase import React from 'react'; @@ -124,7 +124,7 @@ You can pass custom backgroundColor using `bg` or `backgroundColor`, `borderColo ## Accessibility -Adheres to the [Dialog WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#dialog_modal) +Adheres to the [Dialog WAI-ARIA design pattern.](https://www.w3.org/WAI/ARIA/apg/#dialog_modal) ### Keyboard Interactions diff --git a/docs/next/progress.md b/docs/next/progress.md index fdb6c4b32..6fa5abec7 100644 --- a/docs/next/progress.md +++ b/docs/next/progress.md @@ -71,5 +71,5 @@ import { Progress } from 'native-base'; ## Accessibility - Adheres to the `progressbar` [role requirements.](https://www.w3.org/TR/wai-aria-1.2/#progressbar) -- On web, `aria-valuenow`, `aria-valuemin` and `aria-valuemax` to ensure the progress percent is visible to screen readers. -- On mobile, [accessibilityValue](https://reactnative.dev/docs/accessibility#accessibilityvalue) is used to ensure it's announced by Talkback and VoiceOver. +- On web, `aria-valuenow`, `aria-valuemin` and `aria-valuemax` is used to ensure the progress percent is visible to screen readers. +- On mobile, [accessibilityValue](https://reactnative.dev/docs/accessibility#accessibilityvalue) is used to ensure it is announced by Talkback and VoiceOver. diff --git a/docs/next/pseudo-props-101.md b/docs/next/pseudo-props-101.md index 322929e17..9b3d197ee 100644 --- a/docs/next/pseudo-props-101.md +++ b/docs/next/pseudo-props-101.md @@ -3,7 +3,7 @@ id: pseudo-props-101 title: 'Pseudo props: Do’s & Dont’s' --- -Before getting into details of all the common Pseudo Props NativeBase has to offer let's check some key points that these pseudo props follow. +Before getting into details of all the common Pseudo Props NativeBase has to offer, let's check some key points that these pseudo props follow. ## Nesting pseudo props: @@ -124,7 +124,7 @@ export function Example() { ### Don'ts -- The below approach is similar to the above one, but this time we have passed inline color in Icon. So, if you pass styling in Icon itself and then also pass it in `_icon` then styling passed in `_icon` will not be applied because the props passed in Icon should have higher specificity than `_icon` and that will prevent Icon to override props from `_icon`. +- The below approach is similar to the above one, but this time we have passed inline color in Icon. So, if you pass styling in Icon itself and then also pass it in `_icon`, then styling passed in `_icon` will not be applied because the props passed in Icon should have higher specificity than `_icon` and that will prevent Icon to override props from `_icon`. - In below case color from `_icon` will not be applied to Icon and you will not be able to change the color of Icon on state changes like hover, pressed and focus. ```jsx isLive=true diff --git a/docs/next/pseudo-props.mdx b/docs/next/pseudo-props.mdx index c1783cfdf..c30579a73 100644 --- a/docs/next/pseudo-props.mdx +++ b/docs/next/pseudo-props.mdx @@ -21,7 +21,7 @@ Using `_hover` pseudo prop, we can customize the style of Pressable component on ```jsx isLive=true import React from "react"; -import { Box, Pressable, Text } from "native-base"; +import { Box, Pressable, Text, useDisclose } from "native-base"; export function Example() { const { isOpen, onOpen, onClose } = useDisclose(); return ( @@ -49,7 +49,7 @@ Using `_pressed` pseudo prop, we can customize the style of Pressable component ```jsx title="Pressed example" isLive=true import React from "react"; -import { Box, Pressable, Text } from "native-base"; +import { Box, Pressable, Text, useDisclose } from "native-base"; export function Example() { const { isOpen, onOpen, onClose } = useDisclose(); return ( @@ -109,7 +109,7 @@ Using `_web`, `_iOS`, `_android` pseudo props, we can customize the style or beh ```jsx title="Platform specific example" isLive=true import React from "react"; -import { Box, HStack, Pressable, Text, VStack } from "native-base"; +import { Box, HStack, Pressable, Text, VStack, useDisclose } from "native-base"; export function Example() { const { isOpen, onOpen, onClose } = useDisclose(); return ( diff --git a/docs/next/radio.md b/docs/next/radio.md index 1a70671a3..55d81c120 100644 --- a/docs/next/radio.md +++ b/docs/next/radio.md @@ -5,7 +5,7 @@ title: Radio import { ComponentTheme } from '../src/components'; -`Radio` limits the selection from a series of option to only one. +`Radio` limits the selection from a series of options to only one. ```jsx isShowcase import React from 'react'; @@ -104,7 +104,7 @@ export const Example = () => { ## Accessibility -Uses React Native ARIA [@react-native-aria/radio](https://react-native-aria.geekyants.com/docs/useRadioGroup) which follows the [Radio Group WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#radiobutton). +Uses React Native ARIA [@react-native-aria/radio](https://react-native-aria.geekyants.com/docs/useRadioGroup) which follows the [Radio Group WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/#radiobutton). ### Keyboard Interactions diff --git a/docs/next/responsive.md b/docs/next/responsive.md index 9a68afd1b..912c63194 100644 --- a/docs/next/responsive.md +++ b/docs/next/responsive.md @@ -23,16 +23,16 @@ To make styles responsive, you can use either the array or object syntax. All style props that arrays as values for responsive styles. -For Example to make a `Box` width or w responsive using the array syntax, here's what you need to do: +For example, to make a `Box` width or w responsive using the array syntax, here's what you need to do: ```jsx isLive=true -import React from 'react'; -import { NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { NativeBaseProvider, Center } from "native-base"; function BreakpointExample() { return (
+ This is responsive text ); @@ -86,42 +86,41 @@ export function Example() { Here's a simple example of a component that uses a stacked layout on small screens, and a side-by-side layout on larger screens. ```jsx isLive=true -import React from 'react'; -import { - useToken, - NativeBaseProvider, - Center, - Text, - Box, - HStack, - Image, - Stack, - Heading, -} from 'native-base'; +import React from "react"; +import { Center, Text, Box, HStack, Image, Stack, Heading } from "native-base"; function App() { return ( - + image
- + The Garden City @@ -150,22 +149,21 @@ function App() { industry. The city is also known for its parks and nightlife. - - - 6 mins ago - - + + 6 mins ago + ); -} +} // Example template which wraps component with NativeBaseProvider -// Example template which wraps component with NativeBaseProvider export function Example() { return (
diff --git a/docs/next/safe-area-view-props.md b/docs/next/safe-area-view-props.md index a45e5d457..2a507d5b9 100644 --- a/docs/next/safe-area-view-props.md +++ b/docs/next/safe-area-view-props.md @@ -3,7 +3,7 @@ id: safe-area-view-props title: SafeAreaView Props --- -To make your components respect the [SafeAreaView](https://reactnative.dev/docs/safeareaview) of the device, we have provided some props that you can use with Box component. They apply a safe padding to your component in the parts decided by the passed props. These props accept either a boolean or a number. If boolean is passed then component takes flexible inset and adjusts its children according to the the device. If a number is passed then it provides a fixed inset in the chosen direction. +To make your components respect the [SafeAreaView](https://reactnative.dev/docs/safeareaview) of the device, we have provided some props that you can use with Box component. They apply a safe padding to your component in the parts decided by the passed props. These props accept either a boolean or a number. If a Boolean is passed, then the component takes a flexible inset and adjusts its children according to the device. If a number is passed, then it provides a fixed inset in the chosen direction. - `safeArea`: Apply safe padding to all edges. - `safeAreaX`: Apply safe padding to x direction. @@ -13,11 +13,11 @@ To make your components respect the [SafeAreaView](https://reactnative.dev/docs/ - `safeAreaLeft`: Apply safe padding to left. - `safeAreaRight`: Apply safe padding to right. -Internally, NativeBase uses [useSafeAreaInsets](https://docs.expo.io/versions/latest/sdk/safe-area-context/#hooks) hook of [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context). +Internally, NativeBase uses [useSafeAreaInsets](https://docs.expo.dev/versions/latest/sdk/safe-area-context/#hooks) hook of [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context). :::info -SafeAreaView props can only be applied on [Box](box.md) as of now. To make your 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. ::: @@ -73,7 +73,7 @@ export function Example() { ### Using Hook -If you want to add the SafeAreaView props to other components, you can use the hook. Since, `SafeAreaView` props add relevant padding to the components, you will need to pass the padding manually that you are applying to the component for it to return the SafeArea adjusted padding. +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"; diff --git a/docs/next/setup-provider.md b/docs/next/setup-provider.md index c1497f317..c5b09bdf2 100644 --- a/docs/next/setup-provider.md +++ b/docs/next/setup-provider.md @@ -56,7 +56,7 @@ function App() { If you want to do something with the color modes in your app, you can use colorModeManager Prop of NativeBaseProvider to achieve it. -In the below example we will show how to store the active ColorMode in an async storage, so it can be consistent all around your app. +In the example below, we 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"; @@ -93,7 +93,7 @@ export default ({ children, theme }: any) => { ## Add external dependencies (Optional) -If you want to use [Gradient feature in Box](box#with-linear-gradient), you need to pass linear gradient dependency as a config object in NativeBaseProvider. This dependency can be either from [expo-linear-gradient](https://docs.expo.io/versions/latest/sdk/linear-gradient/) or [react-native-linear-gradient](https://www.npmjs.com/package/react-native-linear-gradient) +If you want to use the [Gradient feature in Box](box#with-linear-gradient),it has 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"; @@ -142,8 +142,8 @@ export default () => { | Name | Type | Description | Default | | -------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------ | -| isSSR | Boolean | Tells the provider if your app is Server Side Rendered or not? | - | +| isSSR | Boolean | Tells the provider if your app is rendered on the server side or not. | - | | initialWindowMetrics | Object | Mock data for frame and insets. [Refer this](https://github.com/th3rdwave/react-native-safe-area-context#testing) for further information. | - | -| colorModeManager | { get : Function , set : Function } | Manage Color mode in your app | - | -| theme | Object | use custom theme in your app | NativeBase Default Theme | +| colorModeManager | { get : Function , set : Function } | Manages Color mode in your app | - | +| theme | Object | Provides a custom theme for your app. | NativeBase Default Theme | | config | {dependencies: {}} | To include external dependencies. For example - [Linear gradient](box#with-linear-gradient) | - | diff --git a/docs/next/slider.md b/docs/next/slider.md index e420ef51c..4309c3722 100644 --- a/docs/next/slider.md +++ b/docs/next/slider.md @@ -37,7 +37,7 @@ NativeBase exports 4 Slider related components: - `Slider`: The wrapper that provides context and functionality for all children. - `Slider.Track`: The empty part of the slider that shows the track. - `Slider.FilledTrack`: The filled part of the slider. -- `Slider.Thumb`: The handle that's used to change the slider value. +- `Slider.Thumb`: The handle that is used to change the slider value. ```jsx import { Slider } from "native-base"; @@ -97,7 +97,7 @@ import { Slider } from "native-base"; ## Accessibility -Adheres to the [Slider WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#slidertwothumb) +Adheres to the [Slider WAI-ARIA design pattern.](https://www.w3.org/WAI/ARIA/apg/#slidertwothumb) ### Keyboard Interactions diff --git a/docs/next/solito.mdx b/docs/next/solito.mdx index 0ac1fcace..9c0a6eb33 100644 --- a/docs/next/solito.mdx +++ b/docs/next/solito.mdx @@ -1,5 +1,4 @@ -For a long long time, the React Native community has been looking for a way to make Universal Apps a reality with Server Side Rendering support. The major roadblock that was stopping us was Navigation. Solito is most probably the answer. And as we know, NativeBase already works on all three platforms. This makes the NativeBase and Solito combination a match made in heaven. - +For a long time, the React Native community has been looking for a way to make Universal Apps a reality with Server Side Rendering support. The major roadblock that was stopping us was Navigation. Solito is the most probable answer. NativeBase already works on all three platforms, as we know, making the NativeBase and Solito combination a match made in heaven. With it, your next application can run with the same codebase on all three platforms. Here is how to proceed. :::note diff --git a/docs/next/strict-mode.md b/docs/next/strict-mode.md index 4cba756d2..88848f2b3 100644 --- a/docs/next/strict-mode.md +++ b/docs/next/strict-mode.md @@ -3,7 +3,7 @@ id: strict-mode title: Strict Mode --- -NativeBase comes with its very own Strict Mode that lets you control the level of strictness for your App and Dev environment. A really handy tool to maintain best practices through out your codebase. +NativeBase comes with its very own Strict Mode that lets you control the level of strictness for your App and Dev environment. A really handy tool to maintain best practices throughout your codebase. ## What it does? @@ -11,7 +11,7 @@ Strict Mode is a config that you pass into NativeBase config. It takes 3 values ## Levels of Strictness -- **error** - Choosing this mode will throw an error indicating the cause of the error. +- **error** - Choosing this mode will show an error indicating the cause of the error. - **warn** - Choosing this mode will show a warning indicating the issue. - **off** - Choosing this mode simply means you want to go rogue and not follow the design system and best practices. diff --git a/docs/next/theme.md b/docs/next/theme.md index 47cf4931e..16d6ace2b 100644 --- a/docs/next/theme.md +++ b/docs/next/theme.md @@ -3,7 +3,7 @@ id: theme title: Using Theme --- -NativeBase provides multiple tools to use the central theme defined in the app. First tool is [`useTheme`](/use-theme), which you can use to access the values from the current theme. +NativeBase provides multiple tools to use the central theme defined in the app. The first tool is [`useTheme`](/use-theme), which you can use to access the values from the current theme. ## useTheme @@ -79,7 +79,7 @@ export function Example() { ## useContrastText -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). +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"; @@ -122,7 +122,7 @@ export function Example() { ## useColorMode -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). +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"; diff --git a/docs/next/toast.md b/docs/next/toast.md index 8b87ca46b..7502d97d1 100644 --- a/docs/next/toast.md +++ b/docs/next/toast.md @@ -5,7 +5,7 @@ title: Toast import { ComponentTheme } from '../src/components'; -`Toast` display alerts on top of an overlay. The `Toast` terminates itself when the close button is clicked or after a preset timeout — the default is 5 seconds. The component also allows users to give feedback when an action is completed. +`Toast` displays alerts on top of an overlay. The `Toast` terminates itself when the close button is clicked on or after a preset timeout — the default is 5 seconds. The component also allows users to give feedback when an action is completed. Toasts can also be configured to pop up at different areas of the application window—top or bottom. More than one instance of toast can be present onscreen at one time. @@ -61,7 +61,7 @@ Display a custom component instead of the default Toast UI. ### Closing Toasts -Toasts can be closed imperatively, individually (via the close instance method) or all together (via the closeAll instance method). +Toasts can be closed imperatively, individually (via the close instance method), or all together (via the closeAll instance method). ```ComponentSnackPlayer path=components,composites,Toast,CloseToast.tsx @@ -69,7 +69,7 @@ Toasts can be closed imperatively, individually (via the close instance method) ### Status & Variant Recipes -You create custom Toasts that responds to different status and variants, similarly like the `Alert` component. Below is a recipe that you can try out. +You can create custom Toasts that respond to different statuses and variants, similar to the Alert component. Below is a recipe that you can try out. ```ComponentSnackPlayer path=components,composites,Toast,VariantRecipies.tsx @@ -77,7 +77,7 @@ You create custom Toasts that responds to different status and variants, similar ### Preventing Duplicate Toast -In some cases you might need to prevent duplicate of specific toasts. To achieve you need to pass an id and use the toast.isActive method to determine when to call toast.show(...). +In some cases, you might need to prevent duplicates of specific toasts. To achieve this, you need to pass an id and use the toast.isActive method to determine when to call toast.show(...). ```ComponentSnackPlayer path=components,composites,Toast,PreventDuplicate.tsx @@ -85,7 +85,7 @@ In some cases you might need to prevent duplicate of specific toasts. To achieve ### Standalone Toast -You can use standalone toast where you don't have access to `useToast` hook. e.g. in a different file, out of a React component. +You can use standalone toast where you don't have access to `useToast` hook, for example, in a different file, out of a React component. ```ComponentSnackPlayer path=components,composites,Toast,StandaloneToast.tsx diff --git a/docs/next/use-accessible-colors.md b/docs/next/use-accessible-colors.md index e0c971dfe..982d0d456 100644 --- a/docs/next/use-accessible-colors.md +++ b/docs/next/use-accessible-colors.md @@ -3,7 +3,7 @@ id: use-accessible-colors title: useAccessibleColors --- -`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). +`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 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 diff --git a/docs/next/use-color-mode.md b/docs/next/use-color-mode.md index 49c60815d..1dd612d12 100644 --- a/docs/next/use-color-mode.md +++ b/docs/next/use-color-mode.md @@ -8,7 +8,7 @@ title: useColorMode ## Import ```jsx -import { useColorMode } from 'native-base'; +import { useColorMode } from "native-base"; ``` ## Example @@ -21,6 +21,6 @@ import { useColorMode } from 'native-base'; | Name | Type | Description | Default | | --------------- | --------------- | ------------------------------------------ | ------- | -| colorMode | `light`, `dark` | The active color mode | `light` | +| colorMode | `light`, `dark` | The active color mode. | `light` | | setColorMode | function | Use to set color mode. | - | | toggleColorMode | function | Use to toggle between light and dark mode. | - | diff --git a/docs/next/use-contrast-text.md b/docs/next/use-contrast-text.md index 65d425e7c..376cca3fa 100644 --- a/docs/next/use-contrast-text.md +++ b/docs/next/use-contrast-text.md @@ -21,7 +21,7 @@ import { useContrastText } from "native-base"; ### Using Accessible Colors -By default, NativeBase provides contrasting color based on its theme. You can also choose to get color with better [color and contrast accessibility](https://web.dev/color-and-contrast-accessibility/) with the help of [`useAccessibleColors`](use-accessible-colors) hook. +By default, NativeBase provides contrasting colors based on its theme. You can also choose to get colors with better [color and contrast accessibility](https://web.dev/color-and-contrast-accessibility/) with the help of [`useAccessibleColors`](use-accessible-colors) hook. ```ComponentSnackPlayer path=hooks,useAccessibleColors,Basic.tsx diff --git a/docs/next/use-disclose.md b/docs/next/use-disclose.md index 976f04080..768d8c311 100644 --- a/docs/next/use-disclose.md +++ b/docs/next/use-disclose.md @@ -3,7 +3,7 @@ id: use-disclosure title: useDisclose --- -`useDisclose` handles common open, close, or toggle scenarios and can control feedback component such as **Modal**, **AlertDialog**, **Drawer**, etc. +`useDisclose` handles common open, close, or toggle scenarios and can control feedback components such as **Modal**, **AlertDialog**, **Drawer**, etc. ## Import diff --git a/docs/next/use-media-query.md b/docs/next/use-media-query.md index 08086335a..782c52d85 100644 --- a/docs/next/use-media-query.md +++ b/docs/next/use-media-query.md @@ -3,7 +3,7 @@ id: use-media-query title: useMediaQuery --- -`useMediaQuery` is a custom hook that helps detect matches between between a single media query or multiple media queries. React Native does not natively support media queries, so `useMediaQuery` is still limited. +`useMediaQuery` is a custom hook that helps detect matches between a single media query or multiple media queries. React Native does not natively support media queries, so `useMediaQuery` is still limited. ## Import diff --git a/docs/next/utility-first.mdx b/docs/next/utility-first.mdx index dd0d455e4..a54c233bb 100644 --- a/docs/next/utility-first.mdx +++ b/docs/next/utility-first.mdx @@ -14,7 +14,7 @@ To understand utility props, let's take an example. ## With React Native -Let's try the traditional way of building the above card in React Native. +Let's try the traditional way of building the card below in React Native. @@ -175,8 +175,8 @@ export function Example() { The above example demonstrates the usage of [utility props](utility-props) alongwith [VStack](vstack), [HStack](h-stack) components. This approach allows us to style components without using StyleSheet API. -Apart from productivity boost and saving time there are other benefits by styling components using utility props. -No need to name styles anymore, no need to define an object and think about naming them. +Apart from productivity boosts and saving time, there are other benefits to styling components using utility props. +No need to name styles anymore, no need to define an object and think about naming it. Using utility-first props, you can focus on creating reusable components instead of reusable stylesheets. diff --git a/docs/next/utility-props-specificity.md b/docs/next/utility-props-specificity.md index b09639c6e..9215f84c3 100644 --- a/docs/next/utility-props-specificity.md +++ b/docs/next/utility-props-specificity.md @@ -9,7 +9,7 @@ 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. + 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, the 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 diff --git a/package.json b/package.json index b9dfb19d4..c09ffdd47 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ "expo-modules-core": "^0.9.1", "formik": "2.2.9", "gray-matter": "^4.0.3", - "native-base": "3.4.9", + "native-base": "^3.4.19", "next": "12.0.4", "next-fonts": "^1.5.1", "next-mdx-remote": "^3.0.8", diff --git a/pages/_app.tsx b/pages/_app.tsx index 83792fd59..9850d6678 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,10 +1,11 @@ import "../styles/globals.css"; import type { AppProps } from "next/app"; +import colors from "native-base/src/theme/base/colors"; import { ColorMode, NativeBaseProvider, StorageManager } from "native-base"; import { AppContext } from "../src/AppContext"; import { useEffect, useState } from "react"; import React from "react"; -import { theme } from "../src/theme"; +import { getNativeBaseTheme, theme } from "../src/theme"; type MyThemeType = typeof theme; declare module "native-base" { @@ -32,13 +33,23 @@ function MyApp({ Component, pageProps }: AppProps) { const [activeVersion, setActiveVersion] = useState("/"); const [activeSidebarItem, setActiveSidebarItem] = useState(""); const [isNavbarOpen, setIsNavbarOpen] = useState(false); + const [colorMode, setColorMode] = useState(null); + const [mounted, setMounted] = useState(false); - useEffect(() => { - document.getElementsByTagName("html")[0].setAttribute("data-theme", "dark"); + React.useEffect(async () => { + const currColorMode = await colorModeManager.get(); + document + .getElementsByTagName("html")[0] + .setAttribute("data-theme", currColorMode); + setColorMode(currColorMode); + setMounted(true); }, []); + const currTheme = getNativeBaseTheme(colorMode); + const updateActiveVersion = (version: string) => setActiveVersion(version); - return ( + + const body = ( @@ -60,6 +71,12 @@ function MyApp({ Component, pageProps }: AppProps) { ); + + if (!mounted) { + return
{body}
; + } + + return body; } export default MyApp; diff --git a/src/components/ComponentTheme.tsx b/src/components/ComponentTheme.tsx index 534e824c3..9f1bad662 100644 --- a/src/components/ComponentTheme.tsx +++ b/src/components/ComponentTheme.tsx @@ -21,8 +21,8 @@ export function ComponentTheme({ name, fileName }: any) { fontWeight="normal" fontSize="md" > - NativeBase ships with a default theme for each component. Checkout the - default theme of {name} + NativeBase ships with a default theme for each component. Check out the + default theme of the {name} NativeBase is a component library that enables devs to build universal design systems. It is built on top of React Native, - allowing you to develop apps for Android, iOS and the Web. + allowing you to develop apps for Android, iOS, and the Web. + + + + + ); +} + +export default TwitterIcon; diff --git a/src/new-components/SocialMediaStagger.tsx b/src/new-components/SocialMediaStagger.tsx index 21eacad48..e768ae887 100644 --- a/src/new-components/SocialMediaStagger.tsx +++ b/src/new-components/SocialMediaStagger.tsx @@ -11,6 +11,7 @@ import GitHub from "../icons/GithubIcon"; import Discord from "../icons/DiscordIcon"; import { AntDesign, MaterialIcons } from "@expo/vector-icons"; import FigmaIcon from "../icons/FigmaIcon"; +import TwitterIcon from "../icons/TwitterIcon"; export const SocialMediaStagger = (props: any) => { const { isOpen, onClose, onToggle } = useDisclose(); @@ -92,9 +93,8 @@ export const SocialMediaStagger = (props: any) => { variant="unstyled" bg="coolGray.800" borderRadius="full" - _icon={{ color: "#1DA1F2" }} onPress={onClose} - icon={} + icon={} /> diff --git a/src/new-components/Toc.tsx b/src/new-components/Toc.tsx index f41596f5e..6fa67252c 100644 --- a/src/new-components/Toc.tsx +++ b/src/new-components/Toc.tsx @@ -11,6 +11,9 @@ import { ScrollContext } from "./ScrollContext"; import React, { useEffect, useState, useContext } from "react"; export default function Toc(props: any) { const { tocArray } = props; + + if (tocArray.length <= 1) return null; + return ( diff --git a/src/theme/index.tsx b/src/theme/index.tsx index 936098ed9..cbdaf271e 100644 --- a/src/theme/index.tsx +++ b/src/theme/index.tsx @@ -1,5 +1,92 @@ import { extendTheme } from "native-base"; import colors from "native-base/src/theme/base/colors"; + +export const getNativeBaseTheme = (colorMode) => { + return extendTheme({ + colors: { + backgroundLight: colors.coolGray[100], + backgroundDark: colors.blueGray[900], + + primaryTextDark: colors.cyan[200], + primaryTextLight: colors.cyan[700], + + borderColorDark: colors.coolGray[800], + borderColorLight: "#dfe3e6", + + // -------------------------------------------------- TOC ------------------------------------------- + + tocActiveTextLightColor: colors.coolGray[900], + tocActiveTextDarkColor: colors.coolGray[50], + + tocTextLightColor: colors.coolGray[400], + tocTextDarkColor: colors.coolGray[500], + + tocLeftDarkBorder: colors.coolGray[700], + tocLeftLightBorder: colors.coolGray[300], + + tocLeftDarkBorderBall: colors.coolGray[800], + tocLeftLightBorderBall: colors.coolGray[300], + + tocLeftDarkBorderActiveBall: colors.coolGray[400], + tocLeftLightBorderActiveBall: colors.coolGray[600], + + // -------------------------------------------------- SideBar ------------------------------------------- + + sidebarBackgroundLight: colors.coolGray[100], + sidebarBackgroundDark: colors.blueGray[900], + sidebarItemHeadingTextDark: colors.coolGray[50], + sidebarItemHeadingTextLight: colors.blueGray[900], + sidebarItemTextDark: colors.coolGray[200], + sidebarItemTextLight: "#11181c", + + activeSidebarItemBackgroundLight: colors.cyan[200], + activeSidebarItemBackgroundDark: colors.cyan[700], + activeSidebarItemHoverBackgroundLight: colors.cyan[200], + activeSidebarItemHoverBackgroundDark: colors.cyan[600], + + inactiveSidebarItemHoverBackgroundLight: colors.blueGray[200], + inactiveSidebarItemHoverBackgroundDark: colors.blueGray[800], + + // -------------------------------------------------- Link ------------------------------------------- + + inactiveLinkTextColorLight: "#687076", + inactiveLinkTextColorDark: "#9ba1a6", + inactiveHoverBorderBottomLinkColorDark: "#26292b", + inactiveHoverBorderBottomLinkColorLight: "#eceef0", + + activeLinkTextColorLight: "#11181c", + activeLinkTextColorDark: "#ecedee", + activeBorderBottomLinkColorLight: "#eceef0", + activeBorderBottomLinkColorDark: "#eceef0", + activeHoverBorderBottomLinkColorDark: "#26292b", + activeHoverBorderBottomLinkColorLight: "#eceef0", + + // -------------------------------------------------- Page Navs ------------------------------------------- + + pageNavigationHeadingLight: "#687076", + pageNavigationHeadingDark: "#9ba1a6", + pageNavigationMainTitleLight: "#006adc", + pageNavigationMainTitleDark: "#52a9ff", + + // -------------------------------------------------- Tabs ------------------------------------------- + + SelectedTabTextColor: "#52a9ff", + SelectedTabBorderColor: "#52a9ff", + + // -------------------------------------------------- CodeBlock ------------------------------------------- + + codeBlockBackgroundColor: "#171E2E", + + // -------------------------------------------------- Admonitions ------------------------------------------- + tipBackgroundColorDark: colors.coolGray[300], + tipBackgroundColorLight: colors.coolGray[900], + }, + config: { + initialColorMode: colorMode, + }, + }); +}; + export const theme = extendTheme({ colors: { backgroundLight: colors.coolGray[100], diff --git a/styles/globals.css b/styles/globals.css index 9f0c47ec1..7a6605d9a 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -5,7 +5,6 @@ body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; position: relative; - background-color: #0f172a; } #nativebase-body-light ::-moz-selection { /* Code for Firefox */ diff --git a/yarn.lock b/yarn.lock index 0ddfa0196..0083ddb5a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1903,6 +1903,17 @@ "@react-types/combobox" "^3.2.1" "@react-types/shared" "^3.10.1" +"@react-aria/focus@3.2.3": + version "3.2.3" + resolved "https://registry.yarnpkg.com/@react-aria/focus/-/focus-3.2.3.tgz#3e4137498a7fb5235d056c30fd94ab4a82e73aea" + integrity sha512-+OWmJMivrq3f8ApWihH1KJYqYj3rZV34YJORacBohcAsF1Qd1V1/P+w3dMkf24kV0wqAiWePCF1FwgnrL/rYzQ== + dependencies: + "@babel/runtime" "^7.6.2" + "@react-aria/interactions" "^3.3.0" + "@react-aria/utils" "^3.4.0" + "@react-types/shared" "^3.3.0" + clsx "^1.1.1" + "@react-aria/focus@^3.2.3", "@react-aria/focus@^3.4.1", "@react-aria/focus@^3.5.0": version "3.5.0" resolved "https://registry.yarnpkg.com/@react-aria/focus/-/focus-3.5.0.tgz#02b85f97d6114af1eccc0902ce40723b626cb7f9" @@ -1940,6 +1951,15 @@ "@react-aria/utils" "^3.13.1" "@react-types/shared" "^3.13.1" +"@react-aria/interactions@^3.3.0": + version "3.12.0" + resolved "https://registry.yarnpkg.com/@react-aria/interactions/-/interactions-3.12.0.tgz#b16a392c3dc23351c8fd33a16cef0ef93dc4682d" + integrity sha512-KcKurjPZwme9ggvGQjbjqZtZtuyXipTBVMHUah9a3+Dz7vXxhRg5vFaEdM79oQnNsrGFW5xS6SKBehl/JG6BMw== + dependencies: + "@babel/runtime" "^7.6.2" + "@react-aria/utils" "^3.14.0" + "@react-types/shared" "^3.15.0" + "@react-aria/interactions@^3.3.2", "@react-aria/interactions@^3.5.1", "@react-aria/interactions@^3.6.0", "@react-aria/interactions@^3.7.0": version "3.7.0" resolved "https://registry.yarnpkg.com/@react-aria/interactions/-/interactions-3.7.0.tgz#eb19c1068b557a6b6df1e1c4abef07de719e9f25" @@ -2074,6 +2094,13 @@ dependencies: "@babel/runtime" "^7.6.2" +"@react-aria/ssr@^3.3.0": + version "3.3.0" + resolved "https://registry.yarnpkg.com/@react-aria/ssr/-/ssr-3.3.0.tgz#25e81daf0c7a270a4a891159d8d984578e4512d8" + integrity sha512-yNqUDuOVZIUGP81R87BJVi/ZUZp/nYOBXbPsRe7oltJOfErQZD+UezMpw4vM2KRz18cURffvmC8tJ6JTeyDtaQ== + dependencies: + "@babel/runtime" "^7.6.2" + "@react-aria/tabs@3.0.0-alpha.2": version "3.0.0-alpha.2" resolved "https://registry.yarnpkg.com/@react-aria/tabs/-/tabs-3.0.0-alpha.2.tgz#3b931d9c752c2dca4c2a1b975248b0ee751077a2" @@ -2137,6 +2164,17 @@ "@react-types/shared" "^3.13.1" clsx "^1.1.1" +"@react-aria/utils@^3.14.0", "@react-aria/utils@^3.4.0": + version "3.14.0" + resolved "https://registry.yarnpkg.com/@react-aria/utils/-/utils-3.14.0.tgz#87877e89e959c8b6299da953ec3a7167de2192c3" + integrity sha512-DHgmwNBNEhnb6DEYYAfbt99wprBqJJOBBeIpQ2g3+pxwlw4BZ+v4Qr+rDD0ZibWV0mYzt8zOhZ9StpId7iTF0Q== + dependencies: + "@babel/runtime" "^7.6.2" + "@react-aria/ssr" "^3.3.0" + "@react-stately/utils" "^3.5.1" + "@react-types/shared" "^3.15.0" + clsx "^1.1.1" + "@react-aria/visually-hidden@^3.2.1", "@react-aria/visually-hidden@^3.2.3": version "3.2.3" resolved "https://registry.yarnpkg.com/@react-aria/visually-hidden/-/visually-hidden-3.2.3.tgz#4779df0a468873550afb42a7f5fcb2411d82db8d" @@ -2180,10 +2218,10 @@ "@react-native-aria/utils" "^0.2.6" "@react-types/button" "^3.3.1" -"@react-native-aria/focus@^0.2.4": - version "0.2.5" - resolved "https://registry.yarnpkg.com/@react-native-aria/focus/-/focus-0.2.5.tgz#28ff752b28b7dfeb737147856aaf6669de3290f9" - integrity sha512-PUTGNL5JMCWJ2dNAehpQqLuSUUdkXcLlFjl52Dv84XcIUTuXRvDl5+jr4OW0jyUSGUS6ooqDNRW/PSza35P+tw== +"@react-native-aria/focus@^0.2.6": + version "0.2.7" + resolved "https://registry.yarnpkg.com/@react-native-aria/focus/-/focus-0.2.7.tgz#fd339d5ec8384cee6afe0c0115a528f360d04a27" + integrity sha512-7Ol8AoTzEN7qC4t4AzclPzjQZ0oRkNBePmVBm2lAQwOnmkKwa+TdiVGtU7MgvsQxUV3aTTMY2Nu1Z5YwCwhUkA== dependencies: "@react-aria/focus" "^3.2.3" @@ -2793,6 +2831,13 @@ dependencies: "@babel/runtime" "^7.6.2" +"@react-stately/utils@^3.5.1": + version "3.5.1" + resolved "https://registry.yarnpkg.com/@react-stately/utils/-/utils-3.5.1.tgz#502de762e5d33e892347c5f58053674e06d3bc92" + integrity sha512-INeQ5Er2Jm+db8Py4upKBtgfzp3UYgwXYmbU/XJn49Xw27ktuimH9e37qP3bgHaReb5L3g8IrGs38tJUpnGPHA== + dependencies: + "@babel/runtime" "^7.6.2" + "@react-stately/virtualizer@^3.1.5": version "3.1.6" resolved "https://registry.yarnpkg.com/@react-stately/virtualizer/-/virtualizer-3.1.6.tgz#df803dbe032b73244b1d2f5cf09ac0ec9fcd9d04" @@ -2912,6 +2957,11 @@ resolved "https://registry.yarnpkg.com/@react-types/shared/-/shared-3.13.1.tgz#eda5e3744971606f753baf7879136bf8e3f707ab" integrity sha512-EHQqILDJeDvnloy5VV9lnnEjpCMwH1ghptCfa/lz9Ht9nwco3qGCvUABkWyND7yU1Adt3A/1oJxhpRUu3eTlyg== +"@react-types/shared@^3.15.0", "@react-types/shared@^3.3.0": + version "3.15.0" + resolved "https://registry.yarnpkg.com/@react-types/shared/-/shared-3.15.0.tgz#a4a78f36bc8daaefe6e9a9df1f453271639c2233" + integrity sha512-hwuE4BmgswqP+HRDSLMj7DcnYOCCK+ZRuKnc9AVhXS4LBrwRSkdUkNvXhgvqF5tav7IqTpG9pBYMR9wedehuhA== + "@react-types/slider@^3.0.1": version "3.1.1" resolved "https://registry.yarnpkg.com/@react-types/slider/-/slider-3.1.1.tgz#fb3714af526e84b4981951eec9fcb19eab4e1dd8" @@ -3154,6 +3204,11 @@ resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.6.tgz#250a7b16c3b91f672a24552ec64678eeb1d3a08d" integrity sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ== +"@types/use-subscription@^1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@types/use-subscription/-/use-subscription-1.0.0.tgz#d146f8d834f70f50d48bd8246a481d096f11db19" + integrity sha512-0WWZ5GUDKMXUY/1zy4Ur5/zsC0s/B+JjXfHdkvx6JgDNZzZV5eW+KKhDqsTGyqX56uh99gwGwbsKbVwkcVIKQA== + "@types/webpack-sources@*": version "3.2.0" resolved "https://registry.yarnpkg.com/@types/webpack-sources/-/webpack-sources-3.2.0.tgz#16d759ba096c289034b26553d2df1bf45248d38b" @@ -7508,7 +7563,7 @@ inline-style-parser@0.1.1: resolved "https://registry.yarnpkg.com/inline-style-parser/-/inline-style-parser-0.1.1.tgz#ec8a3b429274e9c0a1f1c4ffa9453a7fef72cea1" integrity sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q== -inline-style-prefixer@^6.0.0: +inline-style-prefixer@^6.0.0, inline-style-prefixer@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-6.0.1.tgz#c5c0e43ba8831707afc5f5bbfd97edf45c1fa7ae" integrity sha512-AsqazZ8KcRzJ9YPN1wMH2aNM7lkWQ8tSPrW5uDk1ziYwiAPWSZnUsC7lfZq+BDqLqz0B4Pho5wscWcJzVvRzDQ== @@ -9382,18 +9437,18 @@ nanomatch@^1.2.9: snapdragon "^0.8.1" to-regex "^3.0.1" -native-base@3.4.9: - version "3.4.9" - resolved "https://registry.yarnpkg.com/native-base/-/native-base-3.4.9.tgz#01e6a1a674d46fd04ef34cce8dc221a9cc20c966" - integrity sha512-5Fu2SpVHcgSsvyaiPEeSSwYyymajC34TNqwWmimVEv9+QyrkT2qfiY52t/cmhpnPDECodIq8fyjPTJIqIK3tMw== +native-base@^3.4.19: + version "3.4.19" + resolved "https://registry.yarnpkg.com/native-base/-/native-base-3.4.19.tgz#856bb070d6cc70d14b15ba79545cb5c724adbb8a" + integrity sha512-J5WniznFmeBcCLoqIbJBoPel9ueBi8/MuMeVryw/L42EWbWGUoj/J0KV2+Z0A5Bc1wcxhGWswdF6wRqg10x/uQ== dependencies: - "@react-aria/focus" "^3.2.3" + "@react-aria/focus" "3.2.3" "@react-aria/utils" "^3.6.0" "@react-aria/visually-hidden" "^3.2.1" "@react-native-aria/button" "^0.2.4" "@react-native-aria/checkbox" "^0.2.2" "@react-native-aria/combobox" "^0.2.4-alpha.0" - "@react-native-aria/focus" "^0.2.4" + "@react-native-aria/focus" "^0.2.6" "@react-native-aria/interactions" "^0.2.2" "@react-native-aria/listbox" "^0.2.4-alpha.3" "@react-native-aria/overlays" "0.3.3-rc.0" @@ -9409,6 +9464,8 @@ native-base@3.4.9: "@react-stately/tabs" "3.0.0-alpha.1" "@react-stately/toggle" "3.2.1" "@types/lodash.has" "^4.5.6" + "@types/use-subscription" "^1.0.0" + inline-style-prefixer "^6.0.1" lodash.clonedeep "^4.5.0" lodash.get "^4.4.2" lodash.has "^4.5.2" @@ -9423,6 +9480,7 @@ native-base@3.4.9: react-native-keyboard-aware-scroll-view "^0.9.5" stable-hash "^0.0.2" tinycolor2 "^1.4.2" + use-subscription "^1.8.0" natural-compare@^1.4.0: version "1.4.0" @@ -13238,6 +13296,18 @@ use-subscription@1.5.1, use-subscription@^1.0.0: dependencies: object-assign "^4.1.1" +use-subscription@^1.8.0: + version "1.8.0" + resolved "https://registry.yarnpkg.com/use-subscription/-/use-subscription-1.8.0.tgz#f118938c29d263c2bce12fc5585d3fe694d4dbce" + integrity sha512-LISuG0/TmmoDoCRmV5XAqYkd3UCBNM0ML3gGBndze65WITcsExCD3DTvXXTLyNcOC0heFQZzluW88bN/oC1DQQ== + dependencies: + use-sync-external-store "^1.2.0" + +use-sync-external-store@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a" + integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA== + use@^3.1.0: version "3.1.1" resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"