ui-rn 1.0.14 → 1.0.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -1,29 +1,60 @@
|
|
|
1
|
-
|
|
1
|
+
# <div align="center">UI-RN</div>
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
<div align="center">
|
|
4
|
+
<img src="https://img.shields.io/npm/v/ui-rn.svg?version=1.0.16" alt="npm version" />
|
|
5
|
+
<img src="https://img.shields.io/npm/dm/ui-rn.svg" alt="npm downloads" />
|
|
6
|
+
<img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="license" />
|
|
7
|
+
</div>
|
|
8
|
+
|
|
9
|
+
<div align="center">
|
|
10
|
+
<h3>A powerful and flexible React Native UI component library</h3>
|
|
11
|
+
<p>Build beautiful mobile applications quickly and efficiently</p>
|
|
12
|
+
</div>
|
|
13
|
+
|
|
14
|
+
<details>
|
|
15
|
+
<summary><h2>📑 Table of Contents</h2></summary>
|
|
16
|
+
|
|
17
|
+
- [Installation](#installation)
|
|
18
|
+
- [Quick Start](#quick-start)
|
|
19
|
+
- [Components](#components)
|
|
20
|
+
- [Block](#block)
|
|
21
|
+
- [Text](#text)
|
|
22
|
+
- [Icon](#icon)
|
|
23
|
+
- [Layout](#layout)
|
|
24
|
+
- [LoadingView](#loadingview)
|
|
25
|
+
- [Component Props](#component-props)
|
|
26
|
+
</details>
|
|
27
|
+
|
|
28
|
+
## 🚀 Installation
|
|
29
|
+
|
|
30
|
+
```bash
|
|
4
31
|
npm install ui-rn
|
|
5
32
|
```
|
|
6
33
|
|
|
7
|
-
|
|
34
|
+
## ⚡ Quick Start
|
|
35
|
+
|
|
36
|
+
Here's a simple example to get you started:
|
|
8
37
|
|
|
9
38
|
```tsx
|
|
10
|
-
import {Block, Text, Icon, Touch, Layout, LoadingView} from
|
|
11
|
-
import React from
|
|
12
|
-
|
|
39
|
+
import { Block, Text, Icon, Touch, Layout, LoadingView } from "ui-rn";
|
|
40
|
+
import React from "react";
|
|
41
|
+
|
|
42
|
+
export default function Example() {
|
|
13
43
|
return (
|
|
14
44
|
<Layout>
|
|
15
45
|
<Block
|
|
16
46
|
mar-5
|
|
17
47
|
pad-5
|
|
18
48
|
red
|
|
19
|
-
background={[
|
|
20
|
-
positionOption={{top: 10, left: 5}}
|
|
49
|
+
background={["red", "blue"]}
|
|
50
|
+
positionOption={{ top: 10, left: 5 }}
|
|
21
51
|
alignCenter
|
|
22
52
|
borderCircle
|
|
23
53
|
mid
|
|
24
54
|
row
|
|
25
55
|
width-150
|
|
26
|
-
height-300
|
|
56
|
+
height-300
|
|
57
|
+
>
|
|
27
58
|
<Text size-14 red toUpperCase italic bold>
|
|
28
59
|
Hello
|
|
29
60
|
</Text>
|
|
@@ -34,124 +65,203 @@ export default function test() {
|
|
|
34
65
|
}
|
|
35
66
|
```
|
|
36
67
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
|
47
|
-
|
|
|
48
|
-
|
|
|
49
|
-
|
|
|
50
|
-
|
|
|
51
|
-
|
|
|
52
|
-
|
|
|
53
|
-
|
|
|
54
|
-
|
|
|
55
|
-
|
|
|
56
|
-
|
|
|
57
|
-
|
|
|
58
|
-
|
|
|
59
|
-
|
|
|
60
|
-
|
|
|
61
|
-
|
|
|
62
|
-
|
|
|
63
|
-
|
|
|
64
|
-
|
|
|
65
|
-
|
|
|
66
|
-
|
|
|
67
|
-
|
|
|
68
|
-
|
|
|
69
|
-
|
|
|
70
|
-
|
|
|
71
|
-
|
|
|
72
|
-
|
|
|
73
|
-
|
|
|
74
|
-
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
|
79
|
-
|
|
|
80
|
-
|
|
|
81
|
-
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
|
86
|
-
|
|
|
87
|
-
|
|
|
88
|
-
|
|
|
89
|
-
|
|
|
90
|
-
|
|
|
91
|
-
|
|
|
92
|
-
|
|
|
93
|
-
|
|
|
94
|
-
|
|
|
95
|
-
|
|
|
96
|
-
|
|
|
97
|
-
|
|
|
98
|
-
|
|
|
99
|
-
|
|
|
100
|
-
|
|
|
101
|
-
|
|
|
102
|
-
|
|
|
103
|
-
|
|
|
104
|
-
|
|
|
105
|
-
|
|
|
106
|
-
|
|
|
107
|
-
|
|
|
108
|
-
|
|
|
109
|
-
|
|
|
110
|
-
|
|
|
111
|
-
|
|
|
112
|
-
|
|
|
113
|
-
|
|
|
114
|
-
|
|
|
115
|
-
|
|
|
116
|
-
|
|
|
117
|
-
|
|
|
118
|
-
|
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
|
123
|
-
|
|
|
124
|
-
|
|
|
125
|
-
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
|
137
|
-
|
|
|
138
|
-
|
|
|
139
|
-
|
|
|
140
|
-
|
|
|
141
|
-
|
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
|
145
|
-
|
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
|
157
|
-
|
|
|
68
|
+
## 🎨 Components
|
|
69
|
+
|
|
70
|
+
### Block
|
|
71
|
+
|
|
72
|
+
<details>
|
|
73
|
+
<summary>The <code>Block</code> component is a versatile container that supports various styling options and layouts.</summary>
|
|
74
|
+
|
|
75
|
+
#### Block Props
|
|
76
|
+
|
|
77
|
+
| Prop | Type | Description |
|
|
78
|
+
| ---------------- | ---------------------------------------------------------------------------------------------------------- | -------------------------------- |
|
|
79
|
+
| borderUpRadius | number | Border radius for top corners |
|
|
80
|
+
| borderDownRadius | number | Border radius for bottom corners |
|
|
81
|
+
| alignItems | FlexStyle['alignItems'] | Flex alignment for items |
|
|
82
|
+
| alignSelf | FlexStyle['alignSelf'] | Self alignment in flex container |
|
|
83
|
+
| justifyContent | FlexStyle['justifyContent'] | Flex justification |
|
|
84
|
+
| borderStyle | ViewStyle['borderStyle'] | Border style |
|
|
85
|
+
| opacity | ViewStyle['opacity'] | Opacity level |
|
|
86
|
+
| overflow | ViewStyle['overflow'] | Overflow behavior |
|
|
87
|
+
| w100 | boolean | Set width to 100% |
|
|
88
|
+
| h100 | boolean | Set height to 100% |
|
|
89
|
+
| mid | boolean | Center content vertically |
|
|
90
|
+
| row | boolean | Display as row |
|
|
91
|
+
| alignCenter | boolean | Center align items |
|
|
92
|
+
| justifyCenter | boolean | Center justify content |
|
|
93
|
+
| borderCircle | boolean | Make border circular |
|
|
94
|
+
| centerBetween | boolean | Center content between items |
|
|
95
|
+
| justifyBetween | boolean | Justify content between items |
|
|
96
|
+
| overHidden | boolean | Hide overflow |
|
|
97
|
+
| square | number | Set equal width and height |
|
|
98
|
+
| width100 | boolean | Set width to 100% |
|
|
99
|
+
| height100 | boolean | Set height to 100% |
|
|
100
|
+
| background | Array<string> \| string | Background color or gradient |
|
|
101
|
+
| gradient | 'vertical' \| 'horizontal' | Gradient direction |
|
|
102
|
+
| flexOne | boolean | Set flex to 1 |
|
|
103
|
+
| shadowColor | string \| boolean | Shadow color |
|
|
104
|
+
| borderOption | { top?: number, left?: number, right?: number, bottom?: number, color?: string } | Border options |
|
|
105
|
+
| positionOption | { top?: number, left?: number, right?: number, bottom?: number } | Position options |
|
|
106
|
+
| paddingOption | { all?: number, top?: number, left?: number, right?: number, bottom?: number } | Padding options |
|
|
107
|
+
| paddingFlex | { vertical?: number, horizontal?: number } | Flexible padding |
|
|
108
|
+
| marginFlex | { vertical?: number, horizontal?: number } | Flexible margin |
|
|
109
|
+
| marginOption | { all?: number, top?: number, left?: number, right?: number, bottom?: number } | Margin options |
|
|
110
|
+
| shadowOption | { color?: string, width?: number, height?: number, opacity?: number, radius?: number, elevation?: number } | Shadow options |
|
|
111
|
+
| widthScreen | boolean | Set width to screen width |
|
|
112
|
+
| heightScreen | boolean | Set height to screen height |
|
|
113
|
+
|
|
114
|
+
#### Block Style Props
|
|
115
|
+
|
|
116
|
+
| Prop Style | ViewStyle | Description |
|
|
117
|
+
| ---------- | ----------------- | ------------------- |
|
|
118
|
+
| bg | backgroundColor | Background color |
|
|
119
|
+
| background | backgroundColor | Background color |
|
|
120
|
+
| w | width | Width |
|
|
121
|
+
| width | width | Width |
|
|
122
|
+
| minW | minWidth | Minimum width |
|
|
123
|
+
| maxW | maxWidth | Maximum width |
|
|
124
|
+
| h | height | Height |
|
|
125
|
+
| height | height | Height |
|
|
126
|
+
| minH | minHeight | Minimum height |
|
|
127
|
+
| maxH | maxHeight | Maximum height |
|
|
128
|
+
| pad | padding | Padding |
|
|
129
|
+
| padH | paddingHorizontal | Horizontal padding |
|
|
130
|
+
| padV | paddingVertical | Vertical padding |
|
|
131
|
+
| padL | paddingLeft | Left padding |
|
|
132
|
+
| padT | paddingTop | Top padding |
|
|
133
|
+
| padR | paddingRight | Right padding |
|
|
134
|
+
| padB | paddingBottom | Bottom padding |
|
|
135
|
+
| mar | margin | Margin |
|
|
136
|
+
| marH | marginHorizontal | Horizontal margin |
|
|
137
|
+
| marV | marginVertical | Vertical margin |
|
|
138
|
+
| marL | marginLeft | Left margin |
|
|
139
|
+
| marT | marginTop | Top margin |
|
|
140
|
+
| marR | marginRight | Right margin |
|
|
141
|
+
| marB | marginBottom | Bottom margin |
|
|
142
|
+
| border | borderWidth | Border width |
|
|
143
|
+
| borderW | borderWidth | Border width |
|
|
144
|
+
| borderR | borderRadius | Border radius |
|
|
145
|
+
| borderC | borderColor | Border color |
|
|
146
|
+
| borderLW | borderLeftWidth | Left border width |
|
|
147
|
+
| borderTW | borderTopWidth | Top border width |
|
|
148
|
+
| borderRW | borderRightWidth | Right border width |
|
|
149
|
+
| borderBW | borderBottomWidth | Bottom border width |
|
|
150
|
+
| flex | flex | Flex value |
|
|
151
|
+
| zIndex | zIndex | Z-index |
|
|
152
|
+
| left | left | Left position |
|
|
153
|
+
| top | top | Top position |
|
|
154
|
+
| bottom | bottom | Bottom position |
|
|
155
|
+
| right | right | Right position |
|
|
156
|
+
| opacity | opacity | Opacity |
|
|
157
|
+
|
|
158
|
+
</details>
|
|
159
|
+
|
|
160
|
+
### Text
|
|
161
|
+
|
|
162
|
+
<details>
|
|
163
|
+
<summary>The <code>Text</code> component provides various text styling options.</summary>
|
|
164
|
+
|
|
165
|
+
#### Text Props
|
|
166
|
+
|
|
167
|
+
| Prop Style | Type | Description |
|
|
168
|
+
| ----------- | ---------------------------------- | --------------------- |
|
|
169
|
+
| bold | boolean \| TextStyle['fontWeight'] | Bold text |
|
|
170
|
+
| center | boolean | Center align text |
|
|
171
|
+
| italic | boolean | Italic text |
|
|
172
|
+
| underline | boolean | Underlined text |
|
|
173
|
+
| color | string | Text color |
|
|
174
|
+
| toUpperCase | boolean | Convert to uppercase |
|
|
175
|
+
| toLowerCase | boolean | Convert to lowercase |
|
|
176
|
+
| background | string | Text background color |
|
|
177
|
+
|
|
178
|
+
</details>
|
|
179
|
+
|
|
180
|
+
### Icon
|
|
181
|
+
|
|
182
|
+
<details>
|
|
183
|
+
<summary>The <code>Icon</code> component supports various icon libraries.</summary>
|
|
184
|
+
|
|
185
|
+
#### Icon Props
|
|
186
|
+
|
|
187
|
+
| Prop Style | Type | Description |
|
|
188
|
+
| ---------- | ------- | ----------------- |
|
|
189
|
+
| center | boolean | Center align icon |
|
|
190
|
+
| size | number | Icon size |
|
|
191
|
+
| color | string | Icon color |
|
|
192
|
+
| name | string | Icon name |
|
|
193
|
+
| type | string | Icon type |
|
|
194
|
+
|
|
195
|
+
#### Supported Icon Types
|
|
196
|
+
|
|
197
|
+
- Ionicons
|
|
198
|
+
- AntDesign
|
|
199
|
+
- Entypo
|
|
200
|
+
- EvilIcons
|
|
201
|
+
- MaterialIcons
|
|
202
|
+
- MaterialCommunityIcons
|
|
203
|
+
- FontAwesome
|
|
204
|
+
- FontAwesome5
|
|
205
|
+
- SimpleLineIcons
|
|
206
|
+
- Feather
|
|
207
|
+
- Octicons
|
|
208
|
+
- Fontisto
|
|
209
|
+
</details>
|
|
210
|
+
|
|
211
|
+
### Touch
|
|
212
|
+
|
|
213
|
+
<details>
|
|
214
|
+
<summary>The <code>Touch</code> component is a touchable wrapper with feedback effects.</summary>
|
|
215
|
+
|
|
216
|
+
#### Touch Props
|
|
217
|
+
|
|
218
|
+
| Prop Style | Type | Description |
|
|
219
|
+
| -------------- | ---------- | ------------------------------- |
|
|
220
|
+
| onPress | () => void | Function called when pressed |
|
|
221
|
+
| disabled | boolean | Disable touch events |
|
|
222
|
+
| activeOpacity | number | Opacity when pressed (0-1) |
|
|
223
|
+
| rippleColor | string | Color of ripple effect |
|
|
224
|
+
| rippleDuration | number | Duration of ripple effect in ms |
|
|
225
|
+
|
|
226
|
+
</details>
|
|
227
|
+
|
|
228
|
+
### Layout
|
|
229
|
+
|
|
230
|
+
<details>
|
|
231
|
+
<summary>The <code>Layout</code> component provides a base layout structure with safe area handling.</summary>
|
|
232
|
+
|
|
233
|
+
#### Layout Props
|
|
234
|
+
|
|
235
|
+
| Prop Style | Type | Description |
|
|
236
|
+
| --------------- | ----------------- | ----------------------- |
|
|
237
|
+
| statusBarStyle | 'dark' \| 'light' | Status bar style |
|
|
238
|
+
| statusBarHidden | boolean | Hide status bar |
|
|
239
|
+
| safeAreaTop | boolean | Enable top safe area |
|
|
240
|
+
| safeAreaBottom | boolean | Enable bottom safe area |
|
|
241
|
+
| safeAreaLeft | boolean | Enable left safe area |
|
|
242
|
+
| safeAreaRight | boolean | Enable right safe area |
|
|
243
|
+
|
|
244
|
+
</details>
|
|
245
|
+
|
|
246
|
+
### LoadingView
|
|
247
|
+
|
|
248
|
+
<details>
|
|
249
|
+
<summary>The <code>LoadingView</code> component displays a loading indicator with optional overlay.</summary>
|
|
250
|
+
|
|
251
|
+
#### LoadingView Props
|
|
252
|
+
|
|
253
|
+
| Prop Style | Type | Description |
|
|
254
|
+
| ---------- | ------------------------------ | --------------------------- |
|
|
255
|
+
| visible | boolean | Show/hide loading view |
|
|
256
|
+
| loading | boolean | Show/hide loading indicator |
|
|
257
|
+
| color | string | Color of loading indicator |
|
|
258
|
+
| type | 'spinner' \| 'dots' \| 'pulse' | Type of loading indicator |
|
|
259
|
+
| text | string | Loading text |
|
|
260
|
+
| textColor | string | Color of loading text |
|
|
261
|
+
| textSize | number | Size of loading text |
|
|
262
|
+
|
|
263
|
+
</details>
|
|
264
|
+
|
|
265
|
+
<div align="center">
|
|
266
|
+
<h3>Made with ❤️ by UI-RN Team</h3>
|
|
267
|
+
</div>
|
package/package.json
CHANGED
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|