Skip to content

Commit 6b8d053

Browse files
dheeraj1429dheeraj1429
committed
Added next js docs
1 parent d26609f commit 6b8d053

File tree

16 files changed

+3379
-1
lines changed

16 files changed

+3379
-1
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ local.properties
4040
node_modules/
4141
npm-debug.log
4242
yarn-error.log
43+
.next
4344

4445
# fastlane
4546
#

‎docs/docs/next.config.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
const withNextra = require('nextra')({
2+
theme: 'nextra-theme-docs',
3+
themeConfig: './theme.config.jsx',
4+
whiteListTagsStyling: ['table', 'thead', 'tbody', 'tr', 'th', 'td'],
5+
});
6+
7+
module.exports = withNextra();

‎docs/docs/package.json‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"name": "docs",
3+
"version": "1.0.0",
4+
"main": "index.js",
5+
"license": "MIT",
6+
"dependencies": {
7+
"next": "^13.0.7",
8+
"nextra": "^2.0.1",
9+
"nextra-theme-docs": "^2.0.1",
10+
"react": "^18.2.0",
11+
"react-dom": "^18.2.0"
12+
}
13+
}

‎docs/docs/pages/components/avatar.md‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# Avatar
2+
3+
The `Avatar` component is a versatile component that displays an image with various styling options. It extends the properties of the React Native `Image` component and includes additional styling options for variations and size.
4+
5+
![Avatar Component](https://docs-assets.developer.apple.com/published/b38ef3054b1d61b2a8f936cd81814d10/components-image-view-intro~dark@2x.png)
6+
7+
Within an image view, you can stretch, scale, size to fit, or pin the image to a specific location. Image views are typically not interactive.
8+
9+
## Props
10+
11+
The `Avatar` component accepts all props from the React Native `Image` component, in addition to the following props:
12+
13+
| Property | type | Description | Usage |
14+
| ------------ | ---------------------------- | --------------------------------------------------- | -------------------------------------------------------------------------------------------- |
15+
| `variation?` | String | Defines the shape of the image (default: `square`). | Options include `square`, `rounded`, `rounded-sm`, `rounded-md`, `rounded-lg`, `rounded-xl`. |
16+
| `size?` | Number | Size of the image. | Specifies the dimensions of the image. |
17+
| `sx?` | [Styles](/utils/base-styles) | Custom styles for the image. | Allows for additional styling of the image. |
18+
19+
## Example
20+
21+
```tsx
22+
import React from 'react';
23+
import {Avatar} from 'react-native-material-elements';
24+
25+
export const Ex1: React.FC = () => {
26+
return (
27+
<Avatar
28+
source={{uri: 'your-image-source'}}
29+
sx={{w: 100, h: 100, o: 0.9, bg: 'red', d: 'flex'}}
30+
/>
31+
);
32+
};
33+
```

‎docs/docs/pages/components/badge.md‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
# Badge
2+
3+
The `Badge` component is a flexible component for displaying badges with various styles, variants, and positioning options. It extends the properties of the React Native `View` component and includes additional options for customization.
4+
5+
![Badge Component preview](https://docs-assets.developer.apple.com/published/96bbd9cca40c156991117a5222d7c5a1/components-label-intro~dark@2x.png)
6+
7+
Labels display text throughout the interface, in buttons, menu items, and views, helping people understand the current context and what they can do next.
8+
9+
The term label refers to uneditable text that can appear in various places. For example:
10+
11+
- Within a button, a label generally conveys what the button does, such as Edit, Cancel, or Send.
12+
- Within many lists, a label can describe each item, often accompanied by a symbol or an image.
13+
- Within a view, a label might provide additional context by introducing a control or describing a common action or task that people can perform in the view.
14+
15+
## Props
16+
17+
The `Badge` component accepts all props from the React Native `View` component, in addition to the following props:
18+
19+
| Property | type | Description |
20+
| ------------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
21+
| `badgeContent?` | Number or String | Content to be displayed inside the badge. Can be a string or a Number. |
22+
| `max?` | Number | Maximum value for the badge content. |
23+
| `variation?` | String | Style variation of the badge. Options include `primary`, `secondary`, `error`, `info`, `success`, or `warning`. |
24+
| `variant?` | String | Style variant of the badge. Currently supports `dot` and `badge`. |
25+
| `invisible?` | Boolean | Indicates whether the badge should be invisible. |
26+
| `badgeAnimationDuration?` | Number | Duration of badge animation in milliseconds. |
27+
| `badgeContentProps?` | Object | Props for customizing the content displayed inside the badge, excluding 'children'. |
28+
| `anchorOrigin?` | Object | Anchor origin configuration to position the badge. Includes `vertical` and `horizontal` options (`top`, `bottom`, `left` `right`). |
29+
| `badgeContainerProps?` | Object | Badge container props for customizing the badge wrapper element. |
30+
| `overlap?` | Boolean | Wrapped shape the badge should overlap. Options include `circular` or `rectangular`. |
31+
32+
## Examples
33+
34+
```tsx
35+
import React from 'react';
36+
import {Badge, Box, useTheme} from 'react-native-material-elements';
37+
38+
export const Ex1: React.FC = () => {
39+
const {theme} = useTheme();
40+
41+
return (
42+
<Box sx={{f: 1, d: 'flex', items: 'center', content: 'center'}}>
43+
<Badge badgeContent={100}>
44+
<Box sx={{w: 200, h: 50, bg: theme.colors.grey[400], r: 10}} />
45+
</Badge>
46+
</Box>
47+
);
48+
};
49+
```

‎docs/docs/pages/components/box.md‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# Box
2+
3+
The `Box` component is a versatile container element that allows for easy layout and styling in React Native applications.
4+
5+
![Box component](https://docs-assets.developer.apple.com/published/5bb27442fab3a3bddc6f5949f1f343d9/components-box-intro~dark@2x.png)
6+
7+
## Best practices
8+
9+
**Prefer keeping a box relatively small in comparison with its containing view**. As a box’s size gets close to the size of the containing window or screen, it becomes less effective at communicating the separation of grouped content, and it can crowd other content.
10+
11+
**Consider using padding and alignment to communicate additional grouping within a box**. A box’s border is a distinct visual element — adding nested boxes to define subgroups can make your interface feel busy and constrained.
12+
13+
## Props
14+
15+
| Property | Type | Description |
16+
| ---------- | ---------------------------- | -------------------------------------------------------------------------------- |
17+
| `sx` | [Styles](/utils/base-styles) | Object containing style properties for the Box (uses BaseStyles from styleTypes) |
18+
| `children` | ReactNode | React node(s) to be rendered inside the Box. |
19+
20+
## Examples
21+
22+
```tsx
23+
<Box sx={{f: 1, d: 'flex', items: 'center', content: 'center'}}>
24+
<Box
25+
sx={{
26+
w: 50,
27+
h: 50,
28+
bg: 'white',
29+
r: 10,
30+
sColor: 'red',
31+
sOffset: {width: 0, height: 1},
32+
sOpacity: 0.8,
33+
sRadius: 1,
34+
}}
35+
/>
36+
</Box>
37+
```

‎docs/docs/pages/components/button.md‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
# Button
2+
3+
The `Button` component provides an interactive element that users can tap to trigger an action in your React Native application.
4+
5+
![Button Component](https://docs-assets.developer.apple.com/published/aff6e888243b2f283363a44a8b71513c/components-buttons-intro~dark@2x.png)
6+
7+
Versatile and highly customizable, buttons give people simple, familiar ways to do tasks in your app. In general, a button combines three attributes to clearly communicate its function:
8+
9+
- **Style**. A visual style based on size, color, and shape.
10+
- **Content**. The symbol (or interface icon), text label, or both that a button displays to convey its purpose.
11+
- **Role**. A system-defined role that identifies a button’s semantic meaning and can affect its appearance.
12+
13+
## Best practices
14+
15+
When buttons are instantly recognizable and easy to understand, an app tends to feel intuitive and well designed.
16+
17+
Make buttons easy for people to use. It’s essential to include enough space around a button so that people can visually distinguish it from surrounding components and content. Giving a button enough space is also critical for helping people select or activate it, regardless of the method of input they use. As a general rule, a button needs a hit region of at least 44x44 pt — in visionOS, 60x60 pt — to ensure that people can select it easily, whether they use a fingertip, a pointer, their eyes, or a remote.
18+
19+
Ensure that each button clearly communicates its purpose. A button always includes a text label or a symbol (or interface icon) — and sometimes a combination of both — to help people predict what it does.
20+
21+
![Button Component](https://docs-assets.developer.apple.com/published/238e255a125e6800e8c70e0f2f20e9d9/button-activity-indicator-hidden~dark@2x.png)
22+
23+
## Props
24+
25+
| Property | Type | Description |
26+
| ------------------ | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
27+
| `disabled` | `boolean` | Determines whether the button is disabled. When `true`, the button becomes non-interactive. |
28+
| `children` | `ReactNode` | The content to be displayed inside the button, such as text, icons, or other components. |
29+
| `disableRipple` | `boolean` | Determines whether the ripple effect is disabled. If `true`, the button will not display a ripple effect on press. |
30+
| `rippleProps` | `RippleProps` | Props for configuring the ripple effect, such as ripple color, duration, and radius. |
31+
| `rippleEdge` | `RipplePosition` | Determines the position of the ripple effect relative to the button. Options include `center`, `topLeft`, `topRight`, `bottomLeft`, and `bottomRight`. |
32+
| `sx` | [Styles](/utils/base-styles) | Additional styles for the button container using the BaseStyles type from styleTypes. |
33+
| `variation` | `ButtonVariations` | Specifies the visual style variation of the button. Can be `contained`, `outlined`, or `text`. |
34+
| `fullWidth` | `boolean` | Specifies whether the button should take up the full width available. |
35+
| `disableElevation` | `boolean` | Specifies whether to disable elevation for the button. Elevation adds a shadow effect to the button. |
36+
| `buttonColor` | `ButtonColorTypes` | Specifies the color variation of the button. Can be `primary`, `secondary`, `success`, `error`, `info`, or `warning`. |
37+
| `square` | `boolean` | props for flexible shape styling. |
38+
39+
## Examples
40+
41+
```tsx
42+
<Button onPress={() => console.log('pressed')}>
43+
<Text>Click here</Text>
44+
</Button>
45+
```

‎docs/docs/pages/components/switch.md‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# Switch
2+
3+
The `Switch` component is a customizable toggle switch for React Native applications. It allows users to toggle between `on` and `off` states with smooth animations and customizable styles.
4+
5+
![Switch Component](https://docs-assets.developer.apple.com/published/cc66d1a475f346d564730f7487ab960c/components-toggles-intro~dark@2x.png)
6+
7+
**Use the switch toggle style only in a list row**. You don’t need to supply a label in this situation because the content in the row provides the context for the state the switch controls.
8+
9+
**Change the default color of a switch only if necessary**. The default green color tends to work well in most cases, but you might want to use your app’s accent color instead. Be sure to use a color that provides enough contrast with the uncolored appearance to be perceptible.
10+
11+
<p align="center">
12+
<img src="https://docs-assets.developer.apple.com/published/8ce57307653c7f4c45bd658c804617df/switches-default~dark@2x.png" />
13+
</p>
14+
15+
## Props
16+
17+
| Property | Type | Description |
18+
| --------------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
19+
| `initialToggleState?` | `Boolean` | Indicates the initial toggle state of the switch. If `true`, the switch will be in the `on` position initially. |
20+
| `onToggle?` | `Function` | Callback function that is called when the switch is toggled. The function receives the new toggle state as a boolean. |
21+
| `toggleDuration?` | `Number` | Duration of the toggle animation in milliseconds. Controls how long the animation takes to transition from one state to another. |
22+
| `thumbStyles?` | `Object` | Custom styles for the thumb (the movable part) of the switch. Accepts a style object to customize the appearance of the thumb. |
23+
| `style?` | `Object` | Custom styles for the switch container. Accepts a style object to customize the appearance of the switch container. |
24+
| `sx?` | [Styles](/utils/base-styles) | Additional styles that can be applied to the switch component. This property allows for the inclusion of any base styles, making the component more flexible. |
25+
26+
## Example
27+
28+
```jsx
29+
<Switch
30+
initialToggleState={isOn}
31+
onToggle={handleToggle}
32+
toggleDuration={300}
33+
thumbStyles={styles.thumb}
34+
style={styles.switch}
35+
sx={styles.additionalStyles}
36+
/>
37+
```

‎docs/docs/pages/components/text.md‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
# Text
2+
3+
The `Text` component is used to display text content with various typographic styles and options.
4+
5+
![Text component](https://docs-assets.developer.apple.com/published/96bbd9cca40c156991117a5222d7c5a1/components-label-intro~dark@2x.png)
6+
7+
Labels display text throughout the interface, in buttons, menu items, and views, helping people understand the current context and what they can do next.
8+
9+
The term label refers to uneditable text that can appear in various places. For example:
10+
11+
- Within a button, a label generally conveys what the button does, such as Edit, Cancel, or Send.
12+
- Within many lists, a label can describe each item, often accompanied by a symbol or an image.
13+
- Within a view, a label might provide additional context by introducing a control or describing a common action or task that people can perform in the view.
14+
15+
## Best practices
16+
17+
Use a label to display a small amount of text that people don’t need to edit. If you need to let people edit a small amount of text, use a text field. If you need to display a large amount of text, and optionally let people edit it, use a **text view**.
18+
19+
Prefer system fonts. A label can display plain or styled text, and it supports Dynamic Type (where available) by default. If you adjust the style of a label or use custom fonts, make sure the text remains legible.
20+
21+
Use system-provided label colors to communicate relative importance. The system defines four label colors that vary in appearance to help you give text different levels of visual importance. For additional guidance, see **Color**.
22+
23+
## Theming
24+
25+
- Inherits `variation`, `gutterBottomSpace`, and `maxLength` from your theme via `useThemeTextConfigSelector`.
26+
- Uses font families and weights from your font theme via `useThemeFontSelector`.
27+
- Supports dark/light mode detection using `useColorScheme`.
28+
29+
## Internal Logic
30+
31+
- **Max Length Handling**: If `maxLength` is passed and `children` isn't a string, throws an error to prevent unintended truncation.
32+
- **Memoized Children**: Prevents unnecessary re-renders if `children` or `maxLength` haven't changed.
33+
- **Restyle Support**: Dynamically extracts props via `useRestyle()` and merges those styles into the final text style array.
34+
35+
## Error Handling
36+
37+
- If `maxLength` is passed and children is not a `string`:
38+
39+
```tsx
40+
throw new Error('maxLength props must be used with string');
41+
```
42+
43+
## Props
44+
45+
| Property | type | Description |
46+
| --------------- | ---------------------------- | -------------------------------------------------------------------------------- |
47+
| `children` | ReactNode | The content to be displayed within the text component. |
48+
| `sx?` | [Styles](/utils/base-styles) | Custom styles to be applied to the text. |
49+
| `variation?` | String | Variation of the text, such as `body1`, `caption`, `h1`, etc. |
50+
| `gutterBottom?` | Boolean | Specifies whether to add a bottom margin to the text component. |
51+
| `maxLength?` | Number | Maximum length of the text content. Used for truncating or limiting text length. |
52+
| `error?` | Boolean | Specifies if the text component is in an error state. |
53+
| `errorColor?` | ColorValue | Color value for the text when in an error state. |
54+
| `isActive?` | Boolean | Specifies if the text component is in an active state. |
55+
| `activeColor?` | ColorValue | Color value for the text when in an active state. |
56+
| `disabled?` | Boolean | Specifies if the text component is disabled. |
57+
| `mode?` | String | `dark` and `light` Mode used for text light and dark variation color. |
58+
| `color` | ColorValue | prop allows dynamic text color changes |
59+
60+
## Example
61+
62+
```tsx
63+
<Text variation="body1">Lorem ipsum dolor sit</Text>
64+
```
65+
66+
## Related Utilities
67+
68+
- `generateTextStyles` - Generates theme-based styles for the text component.
69+
- `maxLength` - Utility to truncate string with ellipsis (...) if needed.
70+
- `useRestyle` - Hook to map style props (margin, padding, etc.) into style.

0 commit comments

Comments
 (0)