Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
6 changes: 3 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -73,18 +73,18 @@ import { Image } from '@idimma/rn-widget';
| \`bw\` | \`number\` | Border width |
| \`bc\` | \`string\` | Border color |

#### [Other View Props](./docs/View.md)
#### [Other View Props](./docs/view)

### Text Component

| Prop | Type | Description |
|-----------|---------------------|---------------------------------------------------|
| \`color\` | \`string\` | Text color [See list of colors](./docs/Colors.md) |
| \`color\` | \`string\` | Text color [See list of colors](./docs/colors) |
| \`fs\` | \`number\` | Font size |
| \`fw\` | \`'normal'\` \| \`'bold'\` \| \`number\` | Font weight |
| \`align\` | \`'auto'\` \| \`'left'\` \| \`'right'\` \| \`'center'\` | Text alignment |

#### [Other Text Props](./docs/Text.md)
#### [Other Text Props](./docs/text)


### Image Component
Expand Down
Empty file added docs/.nojekyll
Empty file.
109 changes: 109 additions & 0 deletions docs/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
# Idimma React Native Widgets

react native components

## Installation

```sh
npm install @idimma/rn-widget
```
[![NPM Total Downloads](https://img.shields.io/npm/dt/@idimma/rn-widget.svg?style=flat-square&label=Total+Downloads)](https://www.npmjs.com/package/@idimma/rn-widget)
[![npm Latest Package](https://img.shields.io/npm/v/@idimma/rn-widget/latest.svg)](https://www.npmjs.com/package/@idimma/rn-widget)
[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/idimma/rn-widgets/blob/main/LICENSE)
[![Follow on Twitter](https://img.shields.io/twitter/follow/idimmanuel.svg?label=follow+idimmanuel)](https://x.com/idimmanuel)
[![Github Stars](https://img.shields.io/github/stars/idimma/rn-widgets)](https://github.com/idimma/rn-widgets/stargazers)

[//]: # ([![npm downloads](https://img.shields.io/npm/dm/@idimma/rn-widget.svg)](https://npm-stat.com/charts.html?package=@idimma/rn-widgets))

## Usage

```js
import { View } from '@idimma/rn-widget';

<View
flex={1}
bg="#F2F5F7"
p={10}
m={5}
br={8}
bw={1}
bc="#CCCCCC"
>
{/* Your content here */}
</View>
```

```js
import { Text } from '@idimma/rn-widget';

<Text
color="#2BAEDF"
//You can use any color as prop black, red, pink ...etc
fs={16}
fw="bold"
center //Align Text to center
>
Hello, World!
</Text>
```

```js
import { Image } from '@idimma/rn-widget';

<Image
source={require('./path/to/image.png')}
resizeMode="cover" //or
w={200}
h={200}
radius={10}
/>;
```

## Components and Props

### View Component

| Prop | Type | Description |
|------------|---------------------|----------------------------------------------------------|
| \`flex\` | \`boolean\` \| \`number\`| Flex grow factor |
| \`bg\` | \`string\` | Background color |
| \`p\` | \`number\` | Padding for all sides |
| \`m\` | \`number\` | Margin for all sides |
| \`radius\` | \`number\` | Border radius |
| \`bw\` | \`number\` | Border width |
| \`bc\` | \`string\` | Border color |

#### [Other View Props](./docs/View.md)

### Text Component

| Prop | Type | Description |
|-----------|---------------------|---------------------------------------------------|
| \`color\` | \`string\` | Text color [See list of colors](./docs/Colors.md) |
| \`fs\` | \`number\` | Font size |
| \`fw\` | \`'normal'\` \| \`'bold'\` \| \`number\` | Font weight |
| \`align\` | \`'auto'\` \| \`'left'\` \| \`'right'\` \| \`'center'\` | Text alignment |

#### [Other Text Props](./docs/Text.md)


### Image Component

| Prop | Type | Description |
|----------------|---------------------|----------------------------------------------------------|
| \`source\` | \`ImageSourcePropType\`| Source of the image (usually requires a path or URL) |
| \`resizeMode\` | \`'cover'\` \| \`'contain'\` \| \`'stretch'\` | Resize mode for the image |
| \`style\` | \`ImageStyle\` | Custom styles for the image (e.g., width, height) |
#### [Other Image Props](./docs/Image.md)

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT

---

Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
10 changes: 10 additions & 0 deletions docs/_sidebar.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
- Introduction/Installation

- [Quick Start](/)

- Components

- [Colors](colors.md)
- [Image](image.md)
- [Text](text.md)
- [View](view.md)
File renamed without changes.
23 changes: 23 additions & 0 deletions docs/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Idimma React Native Widgets</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="description" content="Description">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css">
</head>
<body>
<div id="app"></div>
<script>
window.$docsify = {
loadSidebar: true,
name: '',
repo: ''
}
</script>
<!-- Docsify v4 -->
<script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
</body>
</html>
File renamed without changes.
File renamed without changes.
Loading