Merge pull request #258 from GeekyAnts/staging

Staging

docs/3.3.x/install-cra.mdx

@@ -19,15 +19,15 @@ The easiest way to get started with NativeBase in create react app is using Nati
 ### JavaScript
 
 ```bash
-npx create-react-app my-app --template nativebase
+npx create-react-app my-app --template @native-base
 cd my-app/
 yarn start
 ```
 
 ### TypeScript
 
 ```bash
-npx create-react-app my-app --template nativebase-typescript
+npx create-react-app my-app --template @native-base/typescript
 cd my-app/
 yarn start
 ```

docs/3.3.x/install-expo.mdx

@@ -21,7 +21,7 @@ Expo helps you to create universal (iOS, Android and Web) React Native apps with
 <Box maxWidth="750px">
 
 ```bash
-expo init my-app --template expo-template-native-base
+expo init my-app --template @native-base/expo-template
 ```
 
 </Box>
@@ -30,7 +30,7 @@ expo init my-app --template expo-template-native-base
 <Box maxWidth="750px">
 
 ```bash
-expo init my-app --template expo-template-native-base-typescript
+expo init my-app --template @native-base/expo-template-typescript
 ```
 
 </Box>

docs/3.3.x/install-rn.mdx

@@ -22,7 +22,7 @@ import { TileLink } from "../src/components";
 <Box maxWidth="750px">
 
 ```bash
-npx react-native init MyApp --template react-native-template-native-base
+npx react-native init MyApp --template @native-base/react-native-template
 ```
 
 </Box>
@@ -31,7 +31,7 @@ npx react-native init MyApp --template react-native-template-native-base
 <Box maxWidth="750px">
 
 ```bash
-npx react-native init MyApp --template react-native-template-native-base-typescript
+npx react-native init MyApp --template @native-base/react-native-template-typescript
 ```
 
 </Box>

docs/3.3.x/use-accessible-colors.md

@@ -3,12 +3,12 @@ id: use-accessible-colors
 title: useAccessibleColors
 ---
 
-`useAccessibleColors` is a custom hook used to get the setting for using color with better [color and contrast accessibility](https://web.dev/color-and-contrast-accessibility/) in the app. By default, accessible colors are turned off to get better color matching the theme of the app. You can use this hook if you always want to use 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 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).
 
 ## Import
 
 ```jsx
-import { useAccessibleColors } from 'native-base';
+import { useAccessibleColors } from "native-base";
 ```
 
 ## Example

docs/3.3.x/use-breakpoint-value.md

@@ -3,12 +3,12 @@ id: use-breakPoint-value
 title: useBreakpointValue
 ---
 
-`useBreakpointValue` is a custom hook which returns the value for the current breakpoint from the provided responsive values object. This hook also responds to the window resizing and returning the appropriate value for the new window size.
+`useBreakpointValue` returns the value for the current breakpoint based on the provided responsive values object. It is also responsive to window resizing and returning the appropriate value according to the new window size.
 
 ## Import
 
 ```jsx
-import { useBreakpointValue } from 'native-base';
+import { useBreakpointValue } from "native-base";
 ```
 
 ## Return value

docs/3.3.x/use-clipboard.md

@@ -3,7 +3,7 @@ id: use-clipboard
 title: useClipboard
 ---
 
-`useClipboard` is a custom hook that handles copying content to clipboard.
+`useClipboard` controls and regulates the copying of content to the clipboard.
 
 ## Return Value
 
@@ -16,7 +16,7 @@ The `useClipboard` hook returns an object with the following fields:
 ## Import
 
 ```jsx
-import { useClipboard } from 'native-base';
+import { useClipboard } from "native-base";
 ```
 
 ## Usage

docs/3.3.x/use-color-mode-value.md

@@ -3,12 +3,12 @@ id: use-color-mode-value
 title: useColorModeValue
 ---
 
-`useColorModeValue` is a custom hook used to get a value from either of the parameters passed based on active color mode value.
+`useColorModeValue` is a custom hook that can retrieve a value from parameters passed based on active color mode value.
 
 ## Import
 
 ```jsx
-import { useColorModeValue } from 'native-base';
+import { useColorModeValue } from "native-base";
 ```
 
 ## Example

docs/3.3.x/use-color-mode.md

@@ -3,12 +3,12 @@ id: use-color-mode
 title: useColorMode
 ---
 
-`useColorMode` is a custom hook used to get and set the color mode.
+`useColorMode` is a custom hook that can set the color mode or retrieve it.
 
 ## Import
 
 ```jsx
-import { useColorMode } from 'native-base';
+import { useColorMode } from "native-base";
 ```
 
 ## Example

docs/3.3.x/use-contrast-text.md

@@ -3,12 +3,12 @@ id: use-contrast-text
 title: useContrastText
 ---
 
-`useContrastText` is a custom hook used to get a contrasting color (either `lightText` or `darkText`) to the color passed as a parameter.
+`useContrastText` is a custom hook that provides color contrast (either `lightText` or `darkText`) to the color being used as a parameter.
 
 ## Import
 
 ```jsx
-import { useContrastText } from 'native-base';
+import { useContrastText } from "native-base";
 ```
 
 ## Examples

docs/3.3.x/use-disclose.md

@@ -3,12 +3,12 @@ id: use-disclosure
 title: useDisclose
 ---
 
-`useDisclose` is a custom hook used to help handle common `open`, `close`, or `toggle` scenarios. It can be used to control feedback component such as **Modal**, **AlertDialog**, **Drawer**, etc.
+`useDisclose` handles common open, close, or toggle scenarios and can control feedback component such as **Modal**, **AlertDialog**, **Drawer**, etc.
 
 ## Import
 
 ```jsx
-import { useDisclose } from 'native-base';
+import { useDisclose } from "native-base";
 ```
 
 ## Example

docs/3.3.x/use-media-query.md

@@ -3,12 +3,12 @@ id: use-media-query
 title: useMediaQuery
 ---
 
-`useMediaQuery` is a custom hook used to help detect whether a single media query or multiple media queries individually match. React Native does not natively support media queries, so `useMediaQuery` is still limited.
+`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.
 
 ## Import
 
 ```jsx
-import { useMediaQuery } from 'native-base';
+import { useMediaQuery } from "native-base";
 ```
 
 ## Example

docs/3.3.x/use-theme.md

@@ -3,7 +3,7 @@ id: use-theme
 title: useTheme
 ---
 
-`useTheme` is a custom hook used to get the theme object from context.
+`useTheme` is a custom hook to call theme object from the context.
 
 ## Import
 

docs/3.3.x/use-token.md

@@ -3,7 +3,7 @@ id: use-token
 title: useToken
 ---
 
-`useToken` is a custom hook used to resolve design tokens from the theme.
+`useToken` resolves design tokens from the theme.
 
 ## Import
 
@@ -48,8 +48,10 @@ function UseTokenHookExample() {
   );
 }
 export function Example() {
-  return (<Center flex={1}>
-        <UseTokenHookExample />
-      </Center>);
+  return (
+    <Center flex={1}>
+      <UseTokenHookExample />
+    </Center>
+  );
 }
 ```

docs/next/install-cra.mdx

@@ -19,15 +19,15 @@ The easiest way to get started with NativeBase in create react app is using Nati
 ### JavaScript
 
 ```bash
-npx create-react-app my-app --template nativebase
+npx create-react-app my-app --template @native-base
 cd my-app/
 yarn start
 ```
 
 ### TypeScript
 
 ```bash
-npx create-react-app my-app --template nativebase-typescript
+npx create-react-app my-app --template @native-base/typescript
 cd my-app/
 yarn start
 ```

docs/next/install-expo.mdx

@@ -21,7 +21,7 @@ Expo helps you to create universal (iOS, Android and Web) React Native apps with
 <Box maxWidth="750px">
 
 ```bash
-expo init my-app --template expo-template-native-base
+expo init my-app --template @native-base/expo-template
 ```
 
 </Box>
@@ -30,7 +30,7 @@ expo init my-app --template expo-template-native-base
 <Box maxWidth="750px">
 
 ```bash
-expo init my-app --template expo-template-native-base-typescript
+expo init my-app --template @native-base/expo-template-typescript
 ```
 
 </Box>

docs/next/install-rn.mdx

@@ -22,7 +22,7 @@ import { TileLink } from "../src/components";
 <Box maxWidth="750px">
 
 ```bash
-npx react-native init MyApp --template react-native-template-native-base
+npx react-native init MyApp --template @native-base/react-native-template
 ```
 
 </Box>
@@ -31,7 +31,7 @@ npx react-native init MyApp --template react-native-template-native-base
 <Box maxWidth="750px">
 
 ```bash
-npx react-native init MyApp --template react-native-template-native-base-typescript
+npx react-native init MyApp --template @native-base/react-native-template-typescript
 ```
 
 </Box>

docs/next/use-accessible-colors.md

@@ -3,12 +3,12 @@ id: use-accessible-colors
 title: useAccessibleColors
 ---
 
-`useAccessibleColors` is a custom hook used to get the setting for using color with better [color and contrast accessibility](https://web.dev/color-and-contrast-accessibility/) in the app. By default, accessible colors are turned off to get better color matching the theme of the app. You can use this hook if you always want to use 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 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).
 
 ## Import
 
 ```jsx
-import { useAccessibleColors } from 'native-base';
+import { useAccessibleColors } from "native-base";
 ```
 
 ## Example

docs/next/use-breakpoint-value.md

@@ -3,12 +3,12 @@ id: use-breakPoint-value
 title: useBreakpointValue
 ---
 
-`useBreakpointValue` is a custom hook which returns the value for the current breakpoint from the provided responsive values object. This hook also responds to the window resizing and returning the appropriate value for the new window size.
+`useBreakpointValue` returns the value for the current breakpoint based on the provided responsive values object. It is also responsive to window resizing and returning the appropriate value according to the new window size.
 
 ## Import
 
 ```jsx
-import { useBreakpointValue } from 'native-base';
+import { useBreakpointValue } from "native-base";
 ```
 
 ## Return value

docs/next/use-clipboard.md

@@ -3,7 +3,7 @@ id: use-clipboard
 title: useClipboard
 ---
 
-`useClipboard` is a custom hook that handles copying content to clipboard.
+`useClipboard` controls and regulates the copying of content to the clipboard.
 
 ## Return Value
 
@@ -16,7 +16,7 @@ The `useClipboard` hook returns an object with the following fields:
 ## Import
 
 ```jsx
-import { useClipboard } from 'native-base';
+import { useClipboard } from "native-base";
 ```
 
 ## Usage

docs/next/use-color-mode-value.md

@@ -3,12 +3,12 @@ id: use-color-mode-value
 title: useColorModeValue
 ---
 
-`useColorModeValue` is a custom hook used to get a value from either of the parameters passed based on active color mode value.
+`useColorModeValue` is a custom hook that can retrieve a value from parameters passed based on active color mode value.
 
 ## Import
 
 ```jsx
-import { useColorModeValue } from 'native-base';
+import { useColorModeValue } from "native-base";
 ```
 
 ## Example

docs/next/use-color-mode.md

@@ -3,12 +3,12 @@ id: use-color-mode
 title: useColorMode
 ---
 
-`useColorMode` is a custom hook used to get and set the color mode.
+`useColorMode` is a custom hook that can set the color mode or retrieve it.
 
 ## Import
 
 ```jsx
-import { useColorMode } from 'native-base';
+import { useColorMode } from "native-base";
 ```
 
 ## Example

docs/next/use-contrast-text.md

@@ -3,12 +3,12 @@ id: use-contrast-text
 title: useContrastText
 ---
 
-`useContrastText` is a custom hook used to get a contrasting color (either `lightText` or `darkText`) to the color passed as a parameter.
+`useContrastText` is a custom hook that provides color contrast (either `lightText` or `darkText`) to the color being used as a parameter.
 
 ## Import
 
 ```jsx
-import { useContrastText } from 'native-base';
+import { useContrastText } from "native-base";
 ```
 
 ## Examples

docs/next/use-disclose.md

@@ -3,12 +3,12 @@ id: use-disclosure
 title: useDisclose
 ---
 
-`useDisclose` is a custom hook used to help handle common `open`, `close`, or `toggle` scenarios. It can be used to control feedback component such as **Modal**, **AlertDialog**, **Drawer**, etc.
+`useDisclose` handles common open, close, or toggle scenarios and can control feedback component such as **Modal**, **AlertDialog**, **Drawer**, etc.
 
 ## Import
 
 ```jsx
-import { useDisclose } from 'native-base';
+import { useDisclose } from "native-base";
 ```
 
 ## Example

docs/next/use-media-query.md

@@ -3,12 +3,12 @@ id: use-media-query
 title: useMediaQuery
 ---
 
-`useMediaQuery` is a custom hook used to help detect whether a single media query or multiple media queries individually match. React Native does not natively support media queries, so `useMediaQuery` is still limited.
+`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.
 
 ## Import
 
 ```jsx
-import { useMediaQuery } from 'native-base';
+import { useMediaQuery } from "native-base";
 ```
 
 ## Example

docs/next/use-theme.md

@@ -3,7 +3,7 @@ id: use-theme
 title: useTheme
 ---
 
-`useTheme` is a custom hook used to get the theme object from context.
+`useTheme` is a custom hook to call theme object from the context.
 
 ## Import