react-native-boxes 1.4.76 → 1.4.78
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 +567 -542
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,542 +1,567 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
-
|
|
11
|
-
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
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
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
![image](https://github.com/user-attachments/assets/
|
|
161
|
-
|
|
162
|
-
<details>
|
|
163
|
-
<summary>Code sample</summary>
|
|
164
|
-
|
|
165
|
-
<
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
<
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
<
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
</
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
<details>
|
|
256
|
-
<summary>
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
<
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
<
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
</details>
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
</
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
<
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
</
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
</
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
</
|
|
1
|
+
<h1 align="center">React Native Boxes</h1>
|
|
2
|
+
|
|
3
|
+
<p align="center">
|
|
4
|
+
A simple-to-use React Native UI SDK that does all the UI heavy lifting for you —
|
|
5
|
+
so you can focus on value, not boilerplate code! Built using barebone react-native and Expo components with almost no third-party dependencies.
|
|
6
|
+
</p>
|
|
7
|
+
|
|
8
|
+
<p align="center">
|
|
9
|
+
<img src="https://img.shields.io/badge/Android-3DDC84?style=for-the-badge&logo=android&logoColor=white" alt="Android">
|
|
10
|
+
<img src="https://img.shields.io/badge/Web-4285F4?style=for-the-badge&logo=google-chrome&logoColor=white" alt="Web">
|
|
11
|
+
<img src="https://img.shields.io/badge/iOS-000000?style=for-the-badge&logo=apple&logoColor=white" alt="iOS">
|
|
12
|
+
</p>
|
|
13
|
+
|
|
14
|
+
<p align="center">
|
|
15
|
+
<img src="https://github.com/user-attachments/assets/9174e501-eb08-46ec-8a38-90e8ec8931c5"
|
|
16
|
+
alt="collage" width="512px">
|
|
17
|
+
</p>
|
|
18
|
+
|
|
19
|
+
<br>
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
Out-of-the box comes with:
|
|
25
|
+
- Themes
|
|
26
|
+
- Layouts (Cards, Vertical, Horizontal, Centered etc.)
|
|
27
|
+
- Texts (Title, Subtitle, Text, Caption etc.)
|
|
28
|
+
- Buttons (Simple, Transparent, Loading etc.)
|
|
29
|
+
- Images and Icons (Icons, Avatars, Images etc.)
|
|
30
|
+
- Font (Specify Regular, Styled and Bold fonts)
|
|
31
|
+
- Bars (Toolbars, Bottom nav bars etc.)
|
|
32
|
+
- Modals (Dialogboxes, Selection bottomsheet, Horizontal selection etc.)
|
|
33
|
+
- Expand box (Animated)
|
|
34
|
+
- Lists (Simple data list)
|
|
35
|
+
- Webview (In app web browser)
|
|
36
|
+
- Internationalization (I18n)
|
|
37
|
+
- Analytics (Clicks, Impression tracking)
|
|
38
|
+
|
|
39
|
+
## Install
|
|
40
|
+
|
|
41
|
+
```
|
|
42
|
+
npm install react-native-boxes
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## Dependencies
|
|
46
|
+
|
|
47
|
+
Make sure you have following dependencies installed. The versions can be any satisfying version but must not have any breaking changes.
|
|
48
|
+
|
|
49
|
+
```
|
|
50
|
+
"@expo/vector-icons": "^13.0.0",
|
|
51
|
+
"react": "^18.2.0",
|
|
52
|
+
"@react-native-async-storage/async-storage": "1.23.1",
|
|
53
|
+
"react-native": "^0.73.6",
|
|
54
|
+
"react-native-safe-area-context": "^4.9.0",
|
|
55
|
+
"react-native-gesture-handler":"~2.14.0"
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
## Usage
|
|
59
|
+
At the root of your app you must add a theme context and thats it! You are good to go.
|
|
60
|
+
```
|
|
61
|
+
import { Colors, DarkColors, Theme } from 'react-native-boxes';
|
|
62
|
+
import { GestureHandlerRootView } from 'react-native-gesture-handler';
|
|
63
|
+
|
|
64
|
+
export default function App(){
|
|
65
|
+
const colorScheme = 'dark'
|
|
66
|
+
const theme = new Theme('my-app', colorScheme === 'dark' ? DarkColors : Colors);
|
|
67
|
+
return (
|
|
68
|
+
<ThemeContext.Provider value={theme} >
|
|
69
|
+
<GestureHandlerRootView>
|
|
70
|
+
<WatchlistPage />
|
|
71
|
+
</GestureHandlerRootView>
|
|
72
|
+
</ThemeContext.Provider>
|
|
73
|
+
)
|
|
74
|
+
}
|
|
75
|
+
```
|
|
76
|
+
Optional: If you are also gonna use bottomsheets, Add `GestureHandlerRootView`
|
|
77
|
+
|
|
78
|
+
## Components
|
|
79
|
+
|
|
80
|
+
### Themes
|
|
81
|
+
Dark colors and Light colors come out of the box.
|
|
82
|
+
|
|
83
|
+
Dark Colors
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
Light Colors
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
|
|
93
|
+
<details>
|
|
94
|
+
<summary>Customizing theme</summary>
|
|
95
|
+
|
|
96
|
+
import { Colors, Theme } from 'react-native-boxes';
|
|
97
|
+
...
|
|
98
|
+
|
|
99
|
+
const MyColors = Object.assign(Colors, {
|
|
100
|
+
accent: '#086CFE',
|
|
101
|
+
accentLight: '#337DFF',
|
|
102
|
+
text: '#444444',
|
|
103
|
+
caption: '#A9A9A9',
|
|
104
|
+
heading: '#222222',
|
|
105
|
+
background: '#E6E6E6',
|
|
106
|
+
forground: '#fff',
|
|
107
|
+
transparent: 'transparent',
|
|
108
|
+
semitransparent: '#111a1a1c',
|
|
109
|
+
info: '#2196F3',
|
|
110
|
+
success: '#4CAF50',
|
|
111
|
+
successBackground: '#388E3C',
|
|
112
|
+
warning: '#FFA726',
|
|
113
|
+
critical: '#F44336',
|
|
114
|
+
invert: {
|
|
115
|
+
text: '#fff',
|
|
116
|
+
caption: '#fff',
|
|
117
|
+
heading: '#fff',
|
|
118
|
+
background: '#1a1a1c'
|
|
119
|
+
}
|
|
120
|
+
})
|
|
121
|
+
const theme = new Theme('my-app', MyColors);
|
|
122
|
+
return (
|
|
123
|
+
<ThemeContext.Provider value={theme} >
|
|
124
|
+
<WatchlistPage />
|
|
125
|
+
</ThemeContext.Provider>
|
|
126
|
+
)
|
|
127
|
+
|
|
128
|
+
</details>
|
|
129
|
+
|
|
130
|
+
You can also customize sizes, dimensions etc, but it is not recommended.
|
|
131
|
+
<details>
|
|
132
|
+
<summary>Customizing other theme options</summary>
|
|
133
|
+
|
|
134
|
+
const theme = new Theme(
|
|
135
|
+
appname = '',
|
|
136
|
+
colors ,
|
|
137
|
+
dimens ,
|
|
138
|
+
fonts ,
|
|
139
|
+
styles ,
|
|
140
|
+
)
|
|
141
|
+
|
|
142
|
+
</details>
|
|
143
|
+
|
|
144
|
+
### Fonts
|
|
145
|
+
|
|
146
|
+
Load the below font names. Different components use different font families.
|
|
147
|
+
```
|
|
148
|
+
loadAsync({
|
|
149
|
+
'Regular': require('./assets/fonts/Regular.ttf'), // Used in all general texts
|
|
150
|
+
'Bold': require('./assets/fonts/Bold.ttf'), // Used in Buttons and Headings
|
|
151
|
+
'Styled': require('./assets/fonts/Styled.ttf'), // Used in special places
|
|
152
|
+
})
|
|
153
|
+
```
|
|
154
|
+
|
|
155
|
+
### Layouts
|
|
156
|
+
|
|
157
|
+
### VPage
|
|
158
|
+
Your root tag for pages. Consists of vertical alignment and some basic padding.
|
|
159
|
+
|
|
160
|
+
|
|
161
|
+
|
|
162
|
+
<details>
|
|
163
|
+
<summary>Code sample</summary>
|
|
164
|
+
|
|
165
|
+
<VPage>
|
|
166
|
+
<Title>Watchlist1</Title>
|
|
167
|
+
</VPage>
|
|
168
|
+
|
|
169
|
+
</details>
|
|
170
|
+
|
|
171
|
+
#### Center
|
|
172
|
+
|
|
173
|
+
|
|
174
|
+
<details>
|
|
175
|
+
<summary>Code sample</summary>
|
|
176
|
+
|
|
177
|
+
<Center>
|
|
178
|
+
<Title>Watchlist</Title>
|
|
179
|
+
<Caption>Coming soon </Caption>
|
|
180
|
+
</Center>
|
|
181
|
+
|
|
182
|
+
</details>
|
|
183
|
+
|
|
184
|
+
#### VBox
|
|
185
|
+
|
|
186
|
+
|
|
187
|
+
<details>
|
|
188
|
+
<summary>Code sample</summary>
|
|
189
|
+
|
|
190
|
+
<VBox>
|
|
191
|
+
<Title>Watchlist</Title>
|
|
192
|
+
<Caption>Coming soon </Caption>
|
|
193
|
+
</VBox>
|
|
194
|
+
|
|
195
|
+
</details>
|
|
196
|
+
|
|
197
|
+
|
|
198
|
+
#### HBox
|
|
199
|
+
|
|
200
|
+
|
|
201
|
+
<details>
|
|
202
|
+
<summary>Code sample</summary>
|
|
203
|
+
|
|
204
|
+
<HBox>
|
|
205
|
+
<Title>Watchlist1</Title>
|
|
206
|
+
<Title>Watchlist2</Title>
|
|
207
|
+
</HBox>
|
|
208
|
+
|
|
209
|
+
</details>
|
|
210
|
+
|
|
211
|
+
|
|
212
|
+
### Texts
|
|
213
|
+
|
|
214
|
+
|
|
215
|
+
<details>
|
|
216
|
+
<summary>Code sample</summary>
|
|
217
|
+
Icons are from Fontawesome
|
|
218
|
+
https://icons.expo.fyi/Index
|
|
219
|
+
|
|
220
|
+
<Title>Watchlist Title</Title>
|
|
221
|
+
<TextView>
|
|
222
|
+
This is a text with a simple example from a watchlist screen. You can add stocks to your watchlist and see their performance. You can also add alerts to get notified when a stock reaches a certain price.
|
|
223
|
+
</TextView>
|
|
224
|
+
<Subtitle>This is a subtitle for watchlist</Subtitle>
|
|
225
|
+
<TitleText>
|
|
226
|
+
This is a title text that explains what a watchlist is.
|
|
227
|
+
</TitleText>
|
|
228
|
+
<TextView>
|
|
229
|
+
A watchlist is a list of stocks that you are interested in.
|
|
230
|
+
</TextView>
|
|
231
|
+
<TitleText>
|
|
232
|
+
This is a another title text that explains what a watchlist is.
|
|
233
|
+
</TitleText>
|
|
234
|
+
<TextView>
|
|
235
|
+
A watchlist is a list of stocks that you are interested in.
|
|
236
|
+
</TextView>
|
|
237
|
+
<Caption>
|
|
238
|
+
This is a caption. All investments are subject to market risk. Please do your own research before investing in any stock. This app is for educational purposes only.
|
|
239
|
+
</Caption>
|
|
240
|
+
|
|
241
|
+
</details>
|
|
242
|
+
|
|
243
|
+
|
|
244
|
+
### Images
|
|
245
|
+
|
|
246
|
+
#### Avatars
|
|
247
|
+
|
|
248
|
+
|
|
249
|
+
|
|
250
|
+
|
|
251
|
+
- With icon
|
|
252
|
+
- With image url
|
|
253
|
+
- With text
|
|
254
|
+
|
|
255
|
+
<details>
|
|
256
|
+
<summary>Code sample</summary>
|
|
257
|
+
|
|
258
|
+
|
|
259
|
+
<Avatar iconName='user' />
|
|
260
|
+
<Avatar iconUrl='https://avatars.githubusercontent.com/u/16799797?v=4' />
|
|
261
|
+
<Avatar iconText='SN' />
|
|
262
|
+
|
|
263
|
+
</details>
|
|
264
|
+
|
|
265
|
+
#### Icons
|
|
266
|
+
Support for Fontawesome icon names from https://icons.expo.fyi/
|
|
267
|
+
|
|
268
|
+
|
|
269
|
+
|
|
270
|
+
<details>
|
|
271
|
+
<summary>Code sample</summary>
|
|
272
|
+
|
|
273
|
+
<Icon name='home' size={50} />
|
|
274
|
+
<Title>Light Theme Watchlist</Title>
|
|
275
|
+
|
|
276
|
+
</details>
|
|
277
|
+
|
|
278
|
+
### Buttons
|
|
279
|
+
|
|
280
|
+
<details>
|
|
281
|
+
<summary>Simple button code sample</summary>
|
|
282
|
+
|
|
283
|
+
<ButtonView text='Simple Button' />
|
|
284
|
+
|
|
285
|
+
</details>
|
|
286
|
+
|
|
287
|
+
|
|
288
|
+
|
|
289
|
+
|
|
290
|
+
<details>
|
|
291
|
+
<summary>Transparent button code sample</summary>
|
|
292
|
+
|
|
293
|
+
<TransparentButton text='Transparent Button' />
|
|
294
|
+
|
|
295
|
+
</details>
|
|
296
|
+
|
|
297
|
+
|
|
298
|
+
|
|
299
|
+
|
|
300
|
+
<details>
|
|
301
|
+
<summary>Loading button code sample</summary>
|
|
302
|
+
|
|
303
|
+
const [loading, setLoading] = useState(false)
|
|
304
|
+
|
|
305
|
+
<LoadingButton loading={loading} text='Loading Button' onPress={() => {
|
|
306
|
+
setLoading((prev) => !prev)
|
|
307
|
+
}} />
|
|
308
|
+
|
|
309
|
+
</details>
|
|
310
|
+
|
|
311
|
+
|
|
312
|
+
|
|
313
|
+
### Bottombar
|
|
314
|
+
|
|
315
|
+
|
|
316
|
+
<details>
|
|
317
|
+
<summary>Code sample</summary>
|
|
318
|
+
Icons are from Fontawesome
|
|
319
|
+
https://icons.expo.fyi/Index
|
|
320
|
+
|
|
321
|
+
export default function AppBottomBar() {
|
|
322
|
+
const theme = useContext(ThemeContext)
|
|
323
|
+
const router = useRouter()
|
|
324
|
+
const [selectedId, setSelectedId] = React.useState('watchlist')
|
|
325
|
+
return (
|
|
326
|
+
<BottomNavBar
|
|
327
|
+
selectedId={selectedId}
|
|
328
|
+
options={[
|
|
329
|
+
{
|
|
330
|
+
id: 'watchlist',
|
|
331
|
+
icon: 'bookmark',
|
|
332
|
+
title: 'Watchlist'
|
|
333
|
+
},
|
|
334
|
+
{
|
|
335
|
+
id: 'orders',
|
|
336
|
+
icon: 'file-text',
|
|
337
|
+
title: 'Orders'
|
|
338
|
+
},
|
|
339
|
+
{
|
|
340
|
+
id: 'positions',
|
|
341
|
+
icon: 'briefcase',
|
|
342
|
+
title: 'Positions'
|
|
343
|
+
},
|
|
344
|
+
{
|
|
345
|
+
id: 'settings',
|
|
346
|
+
icon: 'gears',
|
|
347
|
+
title: 'Settings'
|
|
348
|
+
}
|
|
349
|
+
]}
|
|
350
|
+
onSelect={(selectedId) => {
|
|
351
|
+
console.log('selected', selectedId)
|
|
352
|
+
setSelectedId(selectedId)
|
|
353
|
+
router.push('/explore')
|
|
354
|
+
}} />
|
|
355
|
+
)
|
|
356
|
+
}
|
|
357
|
+
|
|
358
|
+
</details>
|
|
359
|
+
|
|
360
|
+
|
|
361
|
+
### Expand
|
|
362
|
+
|
|
363
|
+
|
|
364
|
+
<details>
|
|
365
|
+
<summary>Code sample</summary>
|
|
366
|
+
|
|
367
|
+
<Expand title='Expand Watchlist' >
|
|
368
|
+
<TextView>INFY</TextView>
|
|
369
|
+
<TextView>TCS</TextView>
|
|
370
|
+
</Expand>
|
|
371
|
+
|
|
372
|
+
</details>
|
|
373
|
+
|
|
374
|
+
|
|
375
|
+
### Toolbars
|
|
376
|
+
|
|
377
|
+
### Simple Toolbar
|
|
378
|
+
|
|
379
|
+
|
|
380
|
+
|
|
381
|
+
<details>
|
|
382
|
+
<summary>Code sample</summary>
|
|
383
|
+
|
|
384
|
+
<SimpleToolbar title="Watchlist" />
|
|
385
|
+
|
|
386
|
+
</details>
|
|
387
|
+
|
|
388
|
+
### Transparent Center Toolbar
|
|
389
|
+
|
|
390
|
+
|
|
391
|
+
|
|
392
|
+
<details>
|
|
393
|
+
<summary>Code sample</summary>
|
|
394
|
+
|
|
395
|
+
<SimpleToolbar title="Watchlist" />
|
|
396
|
+
|
|
397
|
+
</details>
|
|
398
|
+
|
|
399
|
+
### Toolbar with buttons
|
|
400
|
+
|
|
401
|
+
|
|
402
|
+
|
|
403
|
+
<details>
|
|
404
|
+
<summary>Code sample</summary>
|
|
405
|
+
|
|
406
|
+
<TransparentCenterToolbar
|
|
407
|
+
homeIcon={"arrow-left"}
|
|
408
|
+
title="Watchlist"
|
|
409
|
+
options={[{
|
|
410
|
+
id: 'search',
|
|
411
|
+
icon: 'search',
|
|
412
|
+
onClick: () => {
|
|
413
|
+
console.log('Search clicked')
|
|
414
|
+
}
|
|
415
|
+
}]}
|
|
416
|
+
/>
|
|
417
|
+
|
|
418
|
+
</details>
|
|
419
|
+
|
|
420
|
+
|
|
421
|
+
|
|
422
|
+
### Divider
|
|
423
|
+
|
|
424
|
+
|
|
425
|
+
|
|
426
|
+
<details>
|
|
427
|
+
<summary>Code sample</summary>
|
|
428
|
+
|
|
429
|
+
<Expand title='Expand Watchlist' >
|
|
430
|
+
<TextView>INFY</TextView>
|
|
431
|
+
<TextView>TCS</TextView>
|
|
432
|
+
</Expand>
|
|
433
|
+
|
|
434
|
+
</details>
|
|
435
|
+
|
|
436
|
+
### Modals
|
|
437
|
+
|
|
438
|
+
#### Bottomsheet on mobile
|
|
439
|
+
|
|
440
|
+
|
|
441
|
+
|
|
442
|
+
<details>
|
|
443
|
+
<summary>Code sample</summary>
|
|
444
|
+
|
|
445
|
+
|
|
446
|
+
<BottomSheet title="Bottomsheet About Watchlists" visible={showDialog} onDismiss={() => setShowDialog(false)}>
|
|
447
|
+
<TextView>
|
|
448
|
+
This is a simple dialog that can be used to show more information to the user. It is a bottom sheet that can host any content.
|
|
449
|
+
</TextView>
|
|
450
|
+
<HBox />
|
|
451
|
+
<TextView>
|
|
452
|
+
Watchlists are a great way to keep track of your favorite stocks. You can add stocks to your watchlist and see their performance. You can also add alerts to get notified when a stock reaches a certain price.
|
|
453
|
+
</TextView>
|
|
454
|
+
<TertiaryButtonView text='Goto Watchlist' onPress={() => setShowDialog(false)} />
|
|
455
|
+
</BottomSheet>
|
|
456
|
+
|
|
457
|
+
</details>
|
|
458
|
+
|
|
459
|
+
#### Bottomsheet on Desktop (web)
|
|
460
|
+
|
|
461
|
+
|
|
462
|
+
|
|
463
|
+
### Web view
|
|
464
|
+
Opens a webview on native and a `iframe` on Web
|
|
465
|
+
|
|
466
|
+
<details>
|
|
467
|
+
<summary>Code sample</summary>
|
|
468
|
+
|
|
469
|
+
<WebBrowserView url='https://www.google.com' title='Google'/>
|
|
470
|
+
|
|
471
|
+
</details>
|
|
472
|
+
|
|
473
|
+
### Internationalization
|
|
474
|
+
|
|
475
|
+
Install your favorite js library.
|
|
476
|
+
|
|
477
|
+
|
|
478
|
+
|
|
479
|
+
|
|
480
|
+
|
|
481
|
+
<details>
|
|
482
|
+
<summary>Code sample</summary>
|
|
483
|
+
|
|
484
|
+
import { I18n } from 'i18n-js';
|
|
485
|
+
|
|
486
|
+
const I18nProvider = new I18n({
|
|
487
|
+
en: {
|
|
488
|
+
watchlist: {
|
|
489
|
+
hello: 'Hello!'
|
|
490
|
+
}
|
|
491
|
+
},
|
|
492
|
+
hi: {
|
|
493
|
+
watchlist: {
|
|
494
|
+
hello: 'नमस्ते !'
|
|
495
|
+
}
|
|
496
|
+
},
|
|
497
|
+
hinglish: {
|
|
498
|
+
watchlist: {
|
|
499
|
+
hello: 'Namaste !'
|
|
500
|
+
}
|
|
501
|
+
},
|
|
502
|
+
es: {
|
|
503
|
+
watchlist: {
|
|
504
|
+
hello: 'Hola!'
|
|
505
|
+
}
|
|
506
|
+
}
|
|
507
|
+
});
|
|
508
|
+
I18nProvider.missingBehavior = "guess";
|
|
509
|
+
|
|
510
|
+
|
|
511
|
+
export default function App(){
|
|
512
|
+
const [locale, setLocale] = useState('en')
|
|
513
|
+
I18nProvider.locale = locale
|
|
514
|
+
const theme = new Theme('appname', colorScheme === 'dark' ? DarkColors : Colors);
|
|
515
|
+
theme.i18n = I18nProvider
|
|
516
|
+
|
|
517
|
+
|
|
518
|
+
return (
|
|
519
|
+
<ThemeContext.Provider value={theme} >
|
|
520
|
+
<Center>
|
|
521
|
+
<Title>watchlist.hello</Title>
|
|
522
|
+
</Center>
|
|
523
|
+
<Center>
|
|
524
|
+
<HBox>
|
|
525
|
+
<TransparentButton text='English' onPress={() => {
|
|
526
|
+
setLocale('en')
|
|
527
|
+
}} />
|
|
528
|
+
<TransparentButton text='Hindi' onPress={() => {
|
|
529
|
+
setLocale('hi')
|
|
530
|
+
|
|
531
|
+
}} />
|
|
532
|
+
</HBox>
|
|
533
|
+
<HBox>
|
|
534
|
+
<TransparentButton text='Hinglish' onPress={() => {
|
|
535
|
+
setLocale('hinglish')
|
|
536
|
+
|
|
537
|
+
}} />
|
|
538
|
+
<TransparentButton text='Spanish' onPress={() => {
|
|
539
|
+
setLocale('es')
|
|
540
|
+
|
|
541
|
+
}} />
|
|
542
|
+
</HBox>
|
|
543
|
+
</Center>
|
|
544
|
+
</ThemeContext.Provider>
|
|
545
|
+
)
|
|
546
|
+
}
|
|
547
|
+
</details>
|
|
548
|
+
|
|
549
|
+
|
|
550
|
+
|
|
551
|
+
### Analytics
|
|
552
|
+
If you wanna track the users clicks and impressions on each component, just add a `onTrack` hook to your theme.
|
|
553
|
+
|
|
554
|
+
```
|
|
555
|
+
action : TrackingActionType = click | view | navigate
|
|
556
|
+
view : TrackingViewType = button | dropdown...
|
|
557
|
+
text : The text related to the component if present
|
|
558
|
+
extra : Depending on component, some contextual info. For e.g. the WebView impression gives {url, title} extra
|
|
559
|
+
```
|
|
560
|
+
|
|
561
|
+
<details>
|
|
562
|
+
|
|
563
|
+
const theme = new Theme('appname', DarkColors);
|
|
564
|
+
theme.onTrack = (action, view, text, extras) => {
|
|
565
|
+
myTracker.track(`${action}-${text}-${text}`, extras)
|
|
566
|
+
}
|
|
567
|
+
</details>
|