Skip to content

Update content for core concepts and components #320

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Aug 22, 2022
Merged

Update content for core concepts and components #320

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
0f08f3e
Merge pull request #317 from GeekyAnts/staging
rayan1810 Aug 2, 2022
6a50969
redirects added
Aug 2, 2022
3faa2e4
added redirects
Aug 3, 2022
69efed4
removed unwanted redirects
Aug 3, 2022
a671b15
minor fixes
Aug 3, 2022
d2fa647
Merge pull request #318 from GeekyAnts/fix/redirect
rayan1810 Aug 5, 2022
6b8712e
fix: source dst broken links
rayan1810 Aug 9, 2022
2640552
fix: canonical urls in sitemap
rayan1810 Aug 19, 2022
7759c9d
fix: doc content and bugs
rayan1810 Aug 19, 2022
bba6b4a
fix: doc content and bugs
rayan1810 Aug 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .prettierignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
/docs/3.4.x/color-mode.md
/docs/next/color-mode.md
/docs/3.4.x/dark-mode.md
/docs/next/dark-mode.md
2 changes: 1 addition & 1 deletion docs.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ module.exports = {
"3.1.x": "3.1.0",
"3.2.x": "3.2.2",
"3.3.x": "3.3.10",
"3.4.x": "3.4.0-rc.1",
"3.4.x": "3.4.11",
},
componentOfTheWeek: {
switch: "https://www.youtube.com/embed/VGUhi8IQHDw",
Expand Down
4 changes: 2 additions & 2 deletions docs/3.0.x/action-sheet.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ NativeBase exports 3 modal-related components:
- **Actionsheet.Item**: A button to wrap the options of the Actionsheet.

```jsx
import { Actionsheet } from 'native-base';
import { Actionsheet } from "native-base";
```

## Examples
Expand Down Expand Up @@ -61,7 +61,7 @@ import { Actionsheet } from 'native-base';

### Actionsheet.Item

ActionsheetItem implements [Button](button#props)
ActionsheetItem implements [Button](button#h2-props)

## Styling

Expand Down
14 changes: 7 additions & 7 deletions docs/3.0.x/alert-dialog.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,16 @@ import { ComponentTheme } from '../../src/components';
- `AlertDialog.CloseButton`: The button that closes the dialog.

```jsx
import { AlertDialog } from 'native-base';
import { AlertDialog } from "native-base";
```

## Examples

### Basic

```jsx isLive=true
import React from 'react';
import { AlertDialog, Button, Center, NativeBaseProvider } from 'native-base';
import React from "react";
import { AlertDialog, Button, Center, NativeBaseProvider } from "native-base";

function AlertDialogComponent() {
const [isOpen, setIsOpen] = React.useState(false);
Expand All @@ -38,7 +38,7 @@ function AlertDialogComponent() {
leastDestructiveRef={cancelRef}
isOpen={isOpen}
onClose={onClose}
motionPreset={'fade'}
motionPreset={"fade"}
>
<AlertDialog.Content>
<AlertDialog.Header fontSize="lg" fontWeight="bold">
Expand Down Expand Up @@ -75,8 +75,8 @@ export function Example() {
### Transition

```jsx isLive=true
import React from 'react';
import { AlertDialog, Button, Center, NativeBaseProvider } from 'native-base';
import React from "react";
import { AlertDialog, Button, Center, NativeBaseProvider } from "native-base";

function AlertDialogComponent() {
const [isOpen, setIsOpen] = React.useState(false);
Expand Down Expand Up @@ -127,7 +127,7 @@ export function Example() {

## Props

AlertDialog and its components compose the **[Modal](/modal)** component, so all the [`Modal props`](/modal#props) can be passed to it. The only exception is that it requires `leastDestructiveRef` which is similar to `initialFocusRef` of `Modal`.
AlertDialog and its components compose the **[Modal](/modal)** component, so all the [`Modal props`](/modal#h2-props) can be passed to it. The only exception is that it requires `leastDestructiveRef` which is similar to `initialFocusRef` of `Modal`.

| Name | Type | Description | Default |
| ------------------- | --------- | -------------------------------------------------------------- | ------- |
Expand Down
10 changes: 5 additions & 5 deletions docs/3.0.x/select.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ Select creates a dropdown list of items with the selected item in closed view.
## Import

```jsx
import { Select } from 'native-base';
import { Select } from "native-base";
```

## Examples
Expand Down Expand Up @@ -50,19 +50,19 @@ import { Select } from 'native-base';
| -------------------------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ---------- |
| variant | `native`, `styled` | The variant of the select style to use. | `native` |
| placeholder | string | The placeholder attribute specifies a short hint that describes the expected value of a selected field (only for styled variant). | - |
| \_placeholder | [`TextProps`](text.md#props) | Text props to be applied to placeholder (only for styled variant). | - |
| \_placeholder | [`TextProps`](text.md#h2-props) | Text props to be applied to placeholder (only for styled variant). | - |
| selectedValue | string | The default value which is selected. | - |
| onValueChange | function | Callback for on change on the input value. | - |
| selectedItemBg | string | Background color for the selected item (only for styled variant). | `blue.500` |
| \_selectedItem | [`TextProps`](text.md#props) | Text prop for selected item (only for styled variant). | - |
| \_selectedItem | [`TextProps`](text.md#h2-props) | Text prop for selected item (only for styled variant). | - |
| isDisabled | boolean | If true, the button will be disabled (not supported on ios for native variant). | - |
| dropdownIcon | JSX.Element | If given, updates the dropdown Icon (only for styled variant). | - |
| dropdownOpenIcon | JSX.Element | If given, updates the dropdown Icon when opened (only for styled variant). | - |
| dropdownCloseIcon | JSX.Element | If given, updates the dropdown Icon when closed (only for styled variant). | - |
| \_ios | _StyleProps_ | Props which you only want to pass to ios device. | - |
| \_android | _StyleProps_ | Props which you only want to pass to android device. | - |
| \_web | _StyleProps_ | Props which you only want to pass to web device. | - |
| \_item | [`TextProps`](text.md#props) | TextProps to be applied to the label (only for styled variant). | - |
| \_item | [`TextProps`](text.md#h2-props) | TextProps to be applied to the label (only for styled variant). | - |
| androidMode <AndroidBadge/> | `dialog`, `dropdown` | On Android, specifies how to display the selection items when the user taps on the picker (only for native variant). | `dialog` |
| androidIconColor <AndroidBadge/> | string | On Android, specifies color of dropdown triangle. Input value can any color from theme like `default.300` (only for native variant). | - |
| androidPrompt <AndroidBadge/> | string | On Android, prompt string for this picker, used on Android in dialog mode as the title of the dialog (only for native variant). | - |
Expand All @@ -76,7 +76,7 @@ import { Select } from 'native-base';
| label | string | The label which will be displayed. | - |
| value | string | The value to be used for the item. This is the value that will be returned on form submission. | - |
| isDisabled | boolean | If true, the item will be disabled (only for `styled` variant). | - |
| \_label | [`TextProps`](text.md#props) | TextProps to be applied to label (only for `styled` variant). | - | -->
| \_label | [`TextProps`](text.md#h2-props) | TextProps to be applied to label (only for `styled` variant). | - | -->

## Styling

Expand Down
4 changes: 2 additions & 2 deletions docs/3.0.x/tooltip.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ A tooltip is a brief, informative message that appears when a user interacts wit
## Import

```jsx
import { Tooltip } from 'native-base';
import { Tooltip } from "native-base";
```

## Examples
Expand All @@ -29,7 +29,7 @@ import { Tooltip } from 'native-base';

### Customizing tooltip

Tooltip is a wrapper around [Box](box.md). So, it also accepts all the [Box](box.md#props) props.
Tooltip is a wrapper around [Box](box.md). So, it also accepts all the [Box](box.md#h2-props) props.

```ComponentSnackPlayer path=composites,Tooltip,CustomTooltip.tsx

Expand Down
80 changes: 40 additions & 40 deletions docs/3.0.x/utility-props.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ The following table shows a list of every style prop and the properties within e
### Margin and padding

```jsx isLive=true
import React from 'react';
import { Box, NativeBaseProvider, Center } from 'native-base';
import React from "react";
import { Box, NativeBaseProvider, Center } from "native-base";

const NBBox = (props) => {
return <Box borderRadius="md" bg="primary.200" {...props} />;
Expand Down Expand Up @@ -64,8 +64,8 @@ export function Example() {
### Color and background color

```jsx isLive=true
import React from 'react';
import { Box, NativeBaseProvider, Center, Text } from 'native-base';
import React from "react";
import { Box, NativeBaseProvider, Center, Text } from "native-base";

const NBBox = (props) => {
return <Box p={5} m={2} borderRadius="md" bg="primary.200" {...props} />;
Expand All @@ -81,7 +81,7 @@ function Component() {
<NBBox bgColor="lightBlue.200" py={3}>
{/* using theme colors to set text color */}
<Text color="red.500" fontWeight="bold">
{' '}
{" "}
I ❤️ NativeBase
</Text>
</NBBox>
Expand Down Expand Up @@ -113,8 +113,8 @@ export function Example() {
### Typography

```jsx isLive=true
import React from 'react';
import { Text, NativeBaseProvider, Center } from 'native-base';
import React from "react";
import { Text, NativeBaseProvider, Center } from "native-base";

const NBText = (props) => {
return <Text m={2} {...props} />;
Expand All @@ -127,15 +127,15 @@ function Component() {
<NBText fontSize="md">Sample Text </NBText>
{/* font-size `32px` */}
<NBText fontSize={32} textDecoration="underline">
Sample Text{' '}
Sample Text{" "}
</NBText>
{/* font-size `'2em'` */}
{/* font-size of `theme.fontWeights.bold` */}
<NBText fontSize="2em" fontWeight="bold">
Sample Text{' '}
Sample Text{" "}
</NBText>
{/* text-align `left` on all viewports and `center` from the first breakpoint and up */}
<NBText textAlign={['left', 'center']}>Sample Text </NBText>
<NBText textAlign={["left", "center"]}>Sample Text </NBText>
</>
);
}
Expand Down Expand Up @@ -165,8 +165,8 @@ export function Example() {
### Layout, width and height

```jsx isLive=true
import React from 'react';
import { Box, NativeBaseProvider, Center } from 'native-base';
import React from "react";
import { Box, NativeBaseProvider, Center } from "native-base";

const NBBox = (props) => {
return <Box m={2} borderRadius="md" bg="primary.200" {...props} />;
Expand Down Expand Up @@ -221,8 +221,8 @@ export function Example() {
### Flexbox

```jsx isLive=true
import React from 'react';
import { Box, Flex, NativeBaseProvider, Center } from 'native-base';
import React from "react";
import { Box, Flex, NativeBaseProvider, Center } from "native-base";

const NBBox = (props) => {
return <Box p={5} m={2} borderRadius="md" bg="primary.200" {...props} />;
Expand Down Expand Up @@ -277,8 +277,8 @@ export function Example() {
### Borders

```jsx isLive=true
import React from 'react';
import { Box, NativeBaseProvider, Center } from 'native-base';
import React from "react";
import { Box, NativeBaseProvider, Center } from "native-base";

const NBBox = (props) => {
return <Box p={5} m={2} borderRadius="md" bg="primary.200" {...props} />;
Expand Down Expand Up @@ -332,8 +332,8 @@ export function Example() {
### Borders Radius

```jsx isLive=true
import React from 'react';
import { Box, NativeBaseProvider, Center } from 'native-base';
import React from "react";
import { Box, NativeBaseProvider, Center } from "native-base";

const NBBox = (props) => {
return <Box p={5} m={2} bg="primary.200" {...props} />;
Expand Down Expand Up @@ -381,8 +381,8 @@ export function Example() {
### Position

```jsx isLive=true
import React from 'react';
import { Box, NativeBaseProvider, Center } from 'native-base';
import React from "react";
import { Box, NativeBaseProvider, Center } from "native-base";

const NBBox = (props) => {
return <Box p={5} m={2} borderRadius="md" bg="primary.200" {...props} />;
Expand Down Expand Up @@ -427,8 +427,8 @@ export function Example() {
### Shadow

```jsx isLive=true
import React from 'react';
import { Box, NativeBaseProvider, Center } from 'native-base';
import React from "react";
import { Box, NativeBaseProvider, Center } from "native-base";

const NBBox = (props) => {
return <Box p={5} m={2} borderRadius="md" bg="primary.200" {...props} />;
Expand Down Expand Up @@ -470,17 +470,17 @@ export function Example() {
Provides a way to pass props to child components inside Composite componets.

```jsx isLive=true
import React from 'react';
import { Button, NativeBaseProvider, Center } from 'native-base';
import React from "react";
import { Button, NativeBaseProvider, Center } from "native-base";

function App() {
return (
<Button
_text={{
// below props will will let you style the text of the button
color: 'secondary.400',
fontSize: 'xs',
fontWeight: 'bolder',
color: "secondary.400",
fontSize: "xs",
fontWeight: "bolder",
}}
>
Sample Text
Expand All @@ -501,27 +501,27 @@ export function Example() {

<br />

| Prop | Type | Description |
| ------- | -------------------------- | -------------------------------------------------------- |
| \_stack | [IStackProps](stack#props) | Passed props will be provided to [`Stack`](stack) child. |
| \_text | [ITextProps](text#props) | Passed props will be provided to [`Text`](text) child. |
| Prop | Type | Description |
| ------- | ----------------------------- | -------------------------------------------------------- |
| \_stack | [IStackProps](stack#h2-props) | Passed props will be provided to [`Stack`](stack) child. |
| \_text | [ITextProps](text#h2-props) | Passed props will be provided to [`Text`](text) child. |

### Interaction Props

Provides a way to pass props on certain interaction.

```jsx isLive=true
import React from 'react';
import { Button, NativeBaseProvider, Center } from 'native-base';
import React from "react";
import { Button, NativeBaseProvider, Center } from "native-base";

function App() {
return (
<Button
_pressed={{
// below props will only be applied on button is pressed
bg: 'primary.300',
bg: "primary.300",
_text: {
color: 'secondary.400',
color: "secondary.400",
},
}}
>
Expand Down Expand Up @@ -556,18 +556,18 @@ export function Example() {
Provides a way to pass props bassed on Platform (_android, ios or web_).

```jsx isLive=true
import React from 'react';
import { Button, NativeBaseProvider, Center } from 'native-base';
import React from "react";
import { Button, NativeBaseProvider, Center } from "native-base";

function App() {
return (
<Button
_web={{
// below props will only be applied on 'web' platform
bg: 'primary.300',
bg: "primary.300",
_text: {
color: 'secondary.400',
fontWeight: 'bold',
color: "secondary.400",
fontWeight: "bold",
},
}}
>
Expand Down
4 changes: 2 additions & 2 deletions docs/3.1.x/action-sheet.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ NativeBase exports 3 modal-related components:
- **Actionsheet.Item**: A button to wrap the options of the Actionsheet.

```jsx
import { Actionsheet } from 'native-base';
import { Actionsheet } from "native-base";
```

## Examples
Expand Down Expand Up @@ -61,7 +61,7 @@ import { Actionsheet } from 'native-base';

### Actionsheet.Item

ActionsheetItem implements [Button](button#props)
ActionsheetItem implements [Button](button#h2-props)

## Styling

Expand Down
Loading