Skip to content

Commit 935e460

Browse files
surajahmedsurajahmed
authored
Merge pull request #258 from GeekyAnts/staging
Staging
2 parents 0dd8811 + 69874c0 commit 935e460

26 files changed

+58
-54
lines changed

‎docs/3.3.x/install-cra.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,15 +19,15 @@ The easiest way to get started with NativeBase in create react app is using Nati
1919
### JavaScript
2020

2121
```bash
22-
npx create-react-app my-app --template nativebase
22+
npx create-react-app my-app --template @native-base
2323
cd my-app/
2424
yarn start
2525
```
2626

2727
### TypeScript
2828

2929
```bash
30-
npx create-react-app my-app --template nativebase-typescript
30+
npx create-react-app my-app --template @native-base/typescript
3131
cd my-app/
3232
yarn start
3333
```

‎docs/3.3.x/install-expo.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ Expo helps you to create universal (iOS, Android and Web) React Native apps with
2121
<Box maxWidth="750px">
2222

2323
```bash
24-
expo init my-app --template expo-template-native-base
24+
expo init my-app --template @native-base/expo-template
2525
```
2626

2727
</Box>
@@ -30,7 +30,7 @@ expo init my-app --template expo-template-native-base
3030
<Box maxWidth="750px">
3131

3232
```bash
33-
expo init my-app --template expo-template-native-base-typescript
33+
expo init my-app --template @native-base/expo-template-typescript
3434
```
3535

3636
</Box>

‎docs/3.3.x/install-rn.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import { TileLink } from "../src/components";
2222
<Box maxWidth="750px">
2323

2424
```bash
25-
npx react-native init MyApp --template react-native-template-native-base
25+
npx react-native init MyApp --template @native-base/react-native-template
2626
```
2727

2828
</Box>
@@ -31,7 +31,7 @@ npx react-native init MyApp --template react-native-template-native-base
3131
<Box maxWidth="750px">
3232

3333
```bash
34-
npx react-native init MyApp --template react-native-template-native-base-typescript
34+
npx react-native init MyApp --template @native-base/react-native-template-typescript
3535
```
3636

3737
</Box>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@ id: use-accessible-colors
33
title: useAccessibleColors
44
---
55

6-
`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).
6+
`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).
77

88
## Import
99

1010
```jsx
11-
import { useAccessibleColors } from 'native-base';
11+
import { useAccessibleColors } from "native-base";
1212
```
1313

1414
## Example

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@ id: use-breakPoint-value
33
title: useBreakpointValue
44
---
55

6-
`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.
6+
`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.
77

88
## Import
99

1010
```jsx
11-
import { useBreakpointValue } from 'native-base';
11+
import { useBreakpointValue } from "native-base";
1212
```
1313

1414
## Return value

‎docs/3.3.x/use-clipboard.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ id: use-clipboard
33
title: useClipboard
44
---
55

6-
`useClipboard` is a custom hook that handles copying content to clipboard.
6+
`useClipboard` controls and regulates the copying of content to the clipboard.
77

88
## Return Value
99

@@ -16,7 +16,7 @@ The `useClipboard` hook returns an object with the following fields:
1616
## Import
1717

1818
```jsx
19-
import { useClipboard } from 'native-base';
19+
import { useClipboard } from "native-base";
2020
```
2121

2222
## Usage

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@ id: use-color-mode-value
33
title: useColorModeValue
44
---
55

6-
`useColorModeValue` is a custom hook used to get a value from either of the parameters passed based on active color mode value.
6+
`useColorModeValue` is a custom hook that can retrieve a value from parameters passed based on active color mode value.
77

88
## Import
99

1010
```jsx
11-
import { useColorModeValue } from 'native-base';
11+
import { useColorModeValue } from "native-base";
1212
```
1313

1414
## Example

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@ id: use-color-mode
33
title: useColorMode
44
---
55

6-
`useColorMode` is a custom hook used to get and set the color mode.
6+
`useColorMode` is a custom hook that can set the color mode or retrieve it.
77

88
## Import
99

1010
```jsx
11-
import { useColorMode } from 'native-base';
11+
import { useColorMode } from "native-base";
1212
```
1313

1414
## Example

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@ id: use-contrast-text
33
title: useContrastText
44
---
55

6-
`useContrastText` is a custom hook used to get a contrasting color (either `lightText` or `darkText`) to the color passed as a parameter.
6+
`useContrastText` is a custom hook that provides color contrast (either `lightText` or `darkText`) to the color being used as a parameter.
77

88
## Import
99

1010
```jsx
11-
import { useContrastText } from 'native-base';
11+
import { useContrastText } from "native-base";
1212
```
1313

1414
## Examples

‎docs/3.3.x/use-disclose.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@ id: use-disclosure
33
title: useDisclose
44
---
55

6-
`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.
6+
`useDisclose` handles common open, close, or toggle scenarios and can control feedback component such as **Modal**, **AlertDialog**, **Drawer**, etc.
77

88
## Import
99

1010
```jsx
11-
import { useDisclose } from 'native-base';
11+
import { useDisclose } from "native-base";
1212
```
1313

1414
## Example

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@ id: use-media-query
33
title: useMediaQuery
44
---
55

6-
`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.
6+
`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.
77

88
## Import
99

1010
```jsx
11-
import { useMediaQuery } from 'native-base';
11+
import { useMediaQuery } from "native-base";
1212
```
1313

1414
## Example

‎docs/3.3.x/use-theme.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ id: use-theme
33
title: useTheme
44
---
55

6-
`useTheme` is a custom hook used to get the theme object from context.
6+
`useTheme` is a custom hook to call theme object from the context.
77

88
## Import
99

‎docs/3.3.x/use-token.md

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ id: use-token
33
title: useToken
44
---
55

6-
`useToken` is a custom hook used to resolve design tokens from the theme.
6+
`useToken` resolves design tokens from the theme.
77

88
## Import
99

@@ -48,8 +48,10 @@ function UseTokenHookExample() {
4848
);
4949
}
5050
export function Example() {
51-
return (<Center flex={1}>
52-
<UseTokenHookExample />
53-
</Center>);
51+
return (
52+
<Center flex={1}>
53+
<UseTokenHookExample />
54+
</Center>
55+
);
5456
}
5557
```

‎docs/next/install-cra.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,15 +19,15 @@ The easiest way to get started with NativeBase in create react app is using Nati
1919
### JavaScript
2020

2121
```bash
22-
npx create-react-app my-app --template nativebase
22+
npx create-react-app my-app --template @native-base
2323
cd my-app/
2424
yarn start
2525
```
2626

2727
### TypeScript
2828

2929
```bash
30-
npx create-react-app my-app --template nativebase-typescript
30+
npx create-react-app my-app --template @native-base/typescript
3131
cd my-app/
3232
yarn start
3333
```

‎docs/next/install-expo.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ Expo helps you to create universal (iOS, Android and Web) React Native apps with
2121
<Box maxWidth="750px">
2222

2323
```bash
24-
expo init my-app --template expo-template-native-base
24+
expo init my-app --template @native-base/expo-template
2525
```
2626

2727
</Box>
@@ -30,7 +30,7 @@ expo init my-app --template expo-template-native-base
3030
<Box maxWidth="750px">
3131

3232
```bash
33-
expo init my-app --template expo-template-native-base-typescript
33+
expo init my-app --template @native-base/expo-template-typescript
3434
```
3535

3636
</Box>

‎docs/next/install-rn.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import { TileLink } from "../src/components";
2222
<Box maxWidth="750px">
2323

2424
```bash
25-
npx react-native init MyApp --template react-native-template-native-base
25+
npx react-native init MyApp --template @native-base/react-native-template
2626
```
2727

2828
</Box>
@@ -31,7 +31,7 @@ npx react-native init MyApp --template react-native-template-native-base
3131
<Box maxWidth="750px">
3232

3333
```bash
34-
npx react-native init MyApp --template react-native-template-native-base-typescript
34+
npx react-native init MyApp --template @native-base/react-native-template-typescript
3535
```
3636

3737
</Box>

‎docs/next/use-accessible-colors.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@ id: use-accessible-colors
33
title: useAccessibleColors
44
---
55

6-
`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).
6+
`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).
77

88
## Import
99

1010
```jsx
11-
import { useAccessibleColors } from 'native-base';
11+
import { useAccessibleColors } from "native-base";
1212
```
1313

1414
## Example

‎docs/next/use-breakpoint-value.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@ id: use-breakPoint-value
33
title: useBreakpointValue
44
---
55

6-
`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.
6+
`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.
77

88
## Import
99

1010
```jsx
11-
import { useBreakpointValue } from 'native-base';
11+
import { useBreakpointValue } from "native-base";
1212
```
1313

1414
## Return value

‎docs/next/use-clipboard.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ id: use-clipboard
33
title: useClipboard
44
---
55

6-
`useClipboard` is a custom hook that handles copying content to clipboard.
6+
`useClipboard` controls and regulates the copying of content to the clipboard.
77

88
## Return Value
99

@@ -16,7 +16,7 @@ The `useClipboard` hook returns an object with the following fields:
1616
## Import
1717

1818
```jsx
19-
import { useClipboard } from 'native-base';
19+
import { useClipboard } from "native-base";
2020
```
2121

2222
## Usage

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@ id: use-color-mode-value
33
title: useColorModeValue
44
---
55

6-
`useColorModeValue` is a custom hook used to get a value from either of the parameters passed based on active color mode value.
6+
`useColorModeValue` is a custom hook that can retrieve a value from parameters passed based on active color mode value.
77

88
## Import
99

1010
```jsx
11-
import { useColorModeValue } from 'native-base';
11+
import { useColorModeValue } from "native-base";
1212
```
1313

1414
## Example

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@ id: use-color-mode
33
title: useColorMode
44
---
55

6-
`useColorMode` is a custom hook used to get and set the color mode.
6+
`useColorMode` is a custom hook that can set the color mode or retrieve it.
77

88
## Import
99

1010
```jsx
11-
import { useColorMode } from 'native-base';
11+
import { useColorMode } from "native-base";
1212
```
1313

1414
## Example

‎docs/next/use-contrast-text.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@ id: use-contrast-text
33
title: useContrastText
44
---
55

6-
`useContrastText` is a custom hook used to get a contrasting color (either `lightText` or `darkText`) to the color passed as a parameter.
6+
`useContrastText` is a custom hook that provides color contrast (either `lightText` or `darkText`) to the color being used as a parameter.
77

88
## Import
99

1010
```jsx
11-
import { useContrastText } from 'native-base';
11+
import { useContrastText } from "native-base";
1212
```
1313

1414
## Examples

‎docs/next/use-disclose.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@ id: use-disclosure
33
title: useDisclose
44
---
55

6-
`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.
6+
`useDisclose` handles common open, close, or toggle scenarios and can control feedback component such as **Modal**, **AlertDialog**, **Drawer**, etc.
77

88
## Import
99

1010
```jsx
11-
import { useDisclose } from 'native-base';
11+
import { useDisclose } from "native-base";
1212
```
1313

1414
## Example

‎docs/next/use-media-query.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@ id: use-media-query
33
title: useMediaQuery
44
---
55

6-
`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.
6+
`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.
77

88
## Import
99

1010
```jsx
11-
import { useMediaQuery } from 'native-base';
11+
import { useMediaQuery } from "native-base";
1212
```
1313

1414
## Example

‎docs/next/use-theme.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ id: use-theme
33
title: useTheme
44
---
55

6-
`useTheme` is a custom hook used to get the theme object from context.
6+
`useTheme` is a custom hook to call theme object from the context.
77

88
## Import
99

0 commit comments

Comments
 (0)