Skip to content

Commit d9b1060

Browse files
computools-anastasiia-nahaiskacomputools-anastasiia-nahaiska
committed
Merge branch 'main' into buttons
2 parents f857f34 + 1b605fe commit d9b1060

File tree

19 files changed

+581
-25
lines changed

19 files changed

+581
-25
lines changed

‎README.md‎

Lines changed: 112 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ Computools react native material components package
1111
yarn add react-native-reanimated
1212
yarn add react-native-gesture-handler
1313
yarn add react-native-safe-area-context
14+
yarn add react-native-svg
1415
```
1516

1617
3. Add ```react-native-reanimated/plugin``` plugin to your babel.config.js.
@@ -171,6 +172,9 @@ export const AppBodyLargeText: React.FC<PropsWithChildren> = ({children}) => {
171172
}
172173
```
173174
</deatils>
175+
</details>
176+
<details><summary>Components</summary>
177+
<br />
174178
<details><summary>Activity Indicators</summary>
175179
<br />
176180
<details><summary>Circular Activity Indicator</summary>
@@ -333,6 +337,111 @@ Outlined card is touchable.
333337
</details>
334338
</details>
335339

340+
<details><summary>Dialogs</summary>
341+
<br />
342+
<details><summary>Dialog</summary>
343+
<br />
344+
345+
Wrapper component used in ```BasicDialog```. This library proides the opportunity to use ```Dialog``` to implement custom components.
346+
347+
**Methods**
348+
349+
| name | parameters | returns |
350+
| ------ | ------ | ------ |
351+
| show | none | void |
352+
| close | none | void |
353+
| isShowed | none | boolean |
354+
355+
_See the example how to use:_
356+
```
357+
import {Dialog, type DialogRef} from '@computools/react-native-material-components';
358+
359+
export const YourComponent = () => {
360+
const dialogRef = useRef<DialogRef>(null);
361+
362+
return (
363+
{/* Rest of your app code */}
364+
<Button onPress={() => dialogRef.current.show()} />
365+
<Dialog ref={dialogRef}>
366+
<YourDialogContent />
367+
</Dialog>
368+
{/* Rest of your app code */}
369+
);
370+
}
371+
```
372+
373+
**Properties**
374+
375+
| name | description | type | default |
376+
| ------ | ------ | ------ | ----|
377+
| animationDuration | appearance/disappearance animation duration | number | 220 |
378+
379+
</details>
380+
<details><summary>Basic Dialog</summary>
381+
<br />
382+
383+
**Properties**
384+
385+
| name | description | type | default |
386+
| ------ | ------ | ------ | ----|
387+
| title | - | string | - |
388+
| subtitle | - | string | - |
389+
| firstActionTitle | - | string | - |
390+
| secondActionTitle | - | string | - |
391+
| onFirstActionPress | - | () | () => void |
392+
| onSecondActionPress | - | () => void | - |
393+
| titleStyle | - | TextStyle | - |
394+
| subtitleStyle | - | TextStyle | - |
395+
| prepend | - | ReactNde | - |
396+
| append | - | ReactNde | - |
397+
398+
![basic dialog gif](https://ik.imagekit.io/Computools/rn-material-components/basic-dialog.gif?updatedAt=1729261989459)
399+
</details>
400+
<details><summary>Full screen Dialog</summary>
401+
<br />
402+
403+
**Properties**
404+
animationDuration?: number;
405+
animationType?: AnimationType;
406+
407+
| name | description | type | default |
408+
| ------ | ------ | ------ | ----|
409+
| animationType | - | AnimationType | AnimationType.SLIDE |
410+
| animationDuration | - | number | 330 |
411+
412+
![full screen dialog gif](https://ik.imagekit.io/Computools/rn-material-components/full-screen-dialog.gif?updatedAt=1729261989519)
413+
</details>
414+
415+
<details><summary>Troubleshooting</summary>
416+
<br />
417+
418+
## Modal unexpectedly reappear
419+
420+
In some cases, a modal may unexpectedly reappear after being closed, especially when certain actions like navigation functions are triggered during or immediately after the modal's closure. This happens because the UI thread can be busy handling other interactions (e.g., button presses, transitions), leading to a race condition where the modal is shown again.
421+
422+
To prevent this, you can use ```InteractionManager.runAfterInteractions```. This ensures that your actions (like navigation) are executed only after all ongoing interactions are finished, providing a smoother and more predictable user experience.
423+
424+
425+
_See the example how to use:_
426+
```
427+
const onSubmitPress = async () => {
428+
const isSuccessfullySignedOut = await signOut();
429+
430+
if (isSuccessfullySignedOut) {
431+
InteractionManager.runAfterInteractions(() => {
432+
navigation.dispatch(
433+
CommonActions.reset({
434+
index: 0,
435+
routes: [{name: MainStackRoutes.Welcome}],
436+
}),
437+
);
438+
});
439+
}
440+
441+
}
442+
```
443+
</details>
444+
</details>
336445
<details><summary>Divider</summary>
337446
<br />
338447

@@ -357,7 +466,7 @@ Outlined card is touchable.
357466
| modalHeightCoeff | - | number | 0.4 |
358467
| animationDuration | - | number | 300 |
359468
| headerStyle | - | ViewStyle | - |
360-
| overlayStyle | - | ViewStyle | - |
469+
| backdropStyle | - | ViewStyle | - |
361470
| dragHandleStyle | - | ViewStyle | - |
362471

363472
### Usage
@@ -403,7 +512,7 @@ export const MyScreen = () => {
403512
| stickySide | - | 'right' or 'left | 'right' |
404513
| modalWidthCoeff | up to 1 | number | 0.85 |
405514
| animationDuration | - | number | 300 |
406-
| overlayStyle | - | ViewStyle | - |
515+
| backdropStyle | - | ViewStyle | - |
407516

408517
### Usage
409518

@@ -463,6 +572,7 @@ export const MyScreen = () => {
463572
![snackbar with icon](https://ik.imagekit.io/Computools/rn-material-components/snackbar-with-icon.png?updatedAt=1704887400512)
464573
![snackbar gif](https://ik.imagekit.io/Computools/rn-material-components/snackbar-gif.gif?updatedAt=1704887530020)
465574
</details>
575+
</deatils>
466576

467577
## Contributing
468578

‎example/ios/ReactNativeMaterialComponentsExample.xcodeproj/project.pbxproj‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -485,7 +485,10 @@
485485
buildSettings = {
486486
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
487487
CLANG_ENABLE_MODULES = YES;
488+
CODE_SIGN_IDENTITY = "Apple Development";
489+
CODE_SIGN_STYLE = Automatic;
488490
CURRENT_PROJECT_VERSION = 1;
491+
DEVELOPMENT_TEAM = F3FM75P33H;
489492
ENABLE_BITCODE = NO;
490493
INFOPLIST_FILE = ReactNativeMaterialComponentsExample/Info.plist;
491494
LD_RUNPATH_SEARCH_PATHS = (
@@ -500,6 +503,7 @@
500503
);
501504
PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)";
502505
PRODUCT_NAME = ReactNativeMaterialComponentsExample;
506+
PROVISIONING_PROFILE_SPECIFIER = "";
503507
SWIFT_OPTIMIZATION_LEVEL = "-Onone";
504508
SWIFT_VERSION = 5.0;
505509
VERSIONING_SYSTEM = "apple-generic";
@@ -512,7 +516,10 @@
512516
buildSettings = {
513517
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
514518
CLANG_ENABLE_MODULES = YES;
519+
CODE_SIGN_IDENTITY = "Apple Development";
520+
CODE_SIGN_STYLE = Automatic;
515521
CURRENT_PROJECT_VERSION = 1;
522+
DEVELOPMENT_TEAM = F3FM75P33H;
516523
INFOPLIST_FILE = ReactNativeMaterialComponentsExample/Info.plist;
517524
LD_RUNPATH_SEARCH_PATHS = (
518525
"$(inherited)",
@@ -526,6 +533,7 @@
526533
);
527534
PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)";
528535
PRODUCT_NAME = ReactNativeMaterialComponentsExample;
536+
PROVISIONING_PROFILE_SPECIFIER = "";
529537
SWIFT_VERSION = 5.0;
530538
VERSIONING_SYSTEM = "apple-generic";
531539
};

‎example/ios/ReactNativeMaterialComponentsExample.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
3+
<plist version="1.0">
4+
<dict>
5+
<key>IDEDidComputeMac32BitWarning</key>
6+
<true/>
7+
</dict>
8+
</plist>

‎example/metro.config.js‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
1+
const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
22
const path = require('path');
33
const escape = require('escape-string-regexp');
44
const exclusionList = require('metro-config/src/defaults/exclusionList');
55
const pak = require('../package.json');
66

77
const root = path.resolve(__dirname, '..');
8-
const modules = Object.keys({ ...pak.peerDependencies });
8+
const modules = Object.keys({...pak.peerDependencies});
99

1010
/**
1111
* Metro configuration
@@ -19,12 +19,7 @@ const config = {
1919
// We need to make sure that only one version is loaded for peerDependencies
2020
// So we block them at the root, and alias them to the versions in example's node_modules
2121
resolver: {
22-
blacklistRE: exclusionList(
23-
modules.map(
24-
(m) =>
25-
new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`)
26-
)
27-
),
22+
blacklistRE: exclusionList(modules.map((m) => new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`))),
2823

2924
extraNodeModules: modules.reduce((acc, name) => {
3025
acc[name] = path.join(__dirname, 'node_modules', name);

‎example/yarn.lock‎

Lines changed: 85 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2050,6 +2050,11 @@ bl@^4.1.0:
20502050
inherits "^2.0.4"
20512051
readable-stream "^3.4.0"
20522052

2053+
boolbase@^1.0.0:
2054+
version "1.0.0"
2055+
resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
2056+
integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
2057+
20532058
brace-expansion@^1.1.7:
20542059
version "1.1.11"
20552060
resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -2346,6 +2351,30 @@ cross-spawn@^7.0.3:
23462351
shebang-command "^2.0.0"
23472352
which "^2.0.1"
23482353

2354+
css-select@^5.1.0:
2355+
version "5.1.0"
2356+
resolved "https://registry.yarnpkg.com/css-select/-/css-select-5.1.0.tgz#b8ebd6554c3637ccc76688804ad3f6a6fdaea8a6"
2357+
integrity sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==
2358+
dependencies:
2359+
boolbase "^1.0.0"
2360+
css-what "^6.1.0"
2361+
domhandler "^5.0.2"
2362+
domutils "^3.0.1"
2363+
nth-check "^2.0.1"
2364+
2365+
css-tree@^1.1.3:
2366+
version "1.1.3"
2367+
resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
2368+
integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==
2369+
dependencies:
2370+
mdn-data "2.0.14"
2371+
source-map "^0.6.1"
2372+
2373+
css-what@^6.1.0:
2374+
version "6.1.0"
2375+
resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
2376+
integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
2377+
23492378
dayjs@^1.8.15:
23502379
version "1.11.10"
23512380
resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.10.tgz#68acea85317a6e164457d6d6947564029a6a16a0"
@@ -2438,6 +2467,36 @@ doctrine@^2.1.0:
24382467
dependencies:
24392468
esutils "^2.0.2"
24402469

2470+
dom-serializer@^2.0.0:
2471+
version "2.0.0"
2472+
resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-2.0.0.tgz#e41b802e1eedf9f6cae183ce5e622d789d7d8e53"
2473+
integrity sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==
2474+
dependencies:
2475+
domelementtype "^2.3.0"
2476+
domhandler "^5.0.2"
2477+
entities "^4.2.0"
2478+
2479+
domelementtype@^2.3.0:
2480+
version "2.3.0"
2481+
resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
2482+
integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
2483+
2484+
domhandler@^5.0.2, domhandler@^5.0.3:
2485+
version "5.0.3"
2486+
resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-5.0.3.tgz#cc385f7f751f1d1fc650c21374804254538c7d31"
2487+
integrity sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==
2488+
dependencies:
2489+
domelementtype "^2.3.0"
2490+
2491+
domutils@^3.0.1:
2492+
version "3.1.0"
2493+
resolved "https://registry.yarnpkg.com/domutils/-/domutils-3.1.0.tgz#c47f551278d3dc4b0b1ab8cbb42d751a6f0d824e"
2494+
integrity sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==
2495+
dependencies:
2496+
dom-serializer "^2.0.0"
2497+
domelementtype "^2.3.0"
2498+
domhandler "^5.0.3"
2499+
24412500
ee-first@1.1.1:
24422501
version "1.1.1"
24432502
resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -2458,6 +2517,11 @@ encodeurl@~1.0.2:
24582517
resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
24592518
integrity sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==
24602519

2520+
entities@^4.2.0:
2521+
version "4.5.0"
2522+
resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
2523+
integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
2524+
24612525
envinfo@^7.7.2:
24622526
version "7.11.0"
24632527
resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-7.11.0.tgz#c3793f44284a55ff8c82faf1ffd91bc6478ea01f"
@@ -3687,6 +3751,11 @@ makeerror@1.0.12:
36873751
dependencies:
36883752
tmpl "1.0.5"
36893753

3754+
mdn-data@2.0.14:
3755+
version "2.0.14"
3756+
resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
3757+
integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
3758+
36903759
memoize-one@^5.0.0:
36913760
version "5.2.1"
36923761
resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
@@ -4376,6 +4445,13 @@ npm-run-path@^4.0.1:
43764445
dependencies:
43774446
path-key "^3.0.0"
43784447

4448+
nth-check@^2.0.1:
4449+
version "2.1.1"
4450+
resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-2.1.1.tgz#c9eab428effce36cd6b92c924bdb000ef1f1ed1d"
4451+
integrity sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==
4452+
dependencies:
4453+
boolbase "^1.0.0"
4454+
43794455
nullthrows@^1.1.1:
43804456
version "1.1.1"
43814457
resolved "https://registry.yarnpkg.com/nullthrows/-/nullthrows-1.1.1.tgz#7818258843856ae971eae4208ad7d7eb19a431b1"
@@ -4743,6 +4819,14 @@ react-native-safe-area-context@4.10.7:
47434819
resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-4.10.7.tgz#91d04e510bf96e3c38bec2beb7ae37347522a503"
47444820
integrity sha512-Lq+gtuIF28mMtBacFchGpO1KHMTvzeb3ji1HAVnMTPe3qWR46Tb4AlztZTvTwUnpZ8JVaC9sKXnJHKmuaIQwXA==
47454821

4822+
react-native-svg@15.3.0:
4823+
version "15.3.0"
4824+
resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-15.3.0.tgz#e24b833fe330714c99f1dd894bb0da52ad859a4c"
4825+
integrity sha512-mBHu/fdlzUbpGX8SZFxgbKvK/sgqLfDLP8uh8G7Us+zJgdjO8OSEeqHQs+kPRdQmdLJQiqPJX2WXgCl7ToTWqw==
4826+
dependencies:
4827+
css-select "^5.1.0"
4828+
css-tree "^1.1.3"
4829+
47464830
react-native@0.72.4:
47474831
version "0.72.4"
47484832
resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.72.4.tgz#97b57e22e4d7657eaf4d1f62a678511fcf9bdda7"
@@ -5169,7 +5253,7 @@ source-map@^0.5.6:
51695253
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
51705254
integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==
51715255

5172-
source-map@^0.6.0, source-map@~0.6.1:
5256+
source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
51735257
version "0.6.1"
51745258
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
51755259
integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==

‎ios/ReactNativeMaterialComponents.xcodeproj/project.pbxproj‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -168,7 +168,7 @@
168168
GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
169169
GCC_WARN_UNUSED_FUNCTION = YES;
170170
GCC_WARN_UNUSED_VARIABLE = YES;
171-
IPHONEOS_DEPLOYMENT_TARGET = 8.0;
171+
IPHONEOS_DEPLOYMENT_TARGET = 12.0;
172172
MTL_ENABLE_DEBUG_INFO = YES;
173173
ONLY_ACTIVE_ARCH = YES;
174174
SDKROOT = iphoneos;
@@ -212,7 +212,7 @@
212212
GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
213213
GCC_WARN_UNUSED_FUNCTION = YES;
214214
GCC_WARN_UNUSED_VARIABLE = YES;
215-
IPHONEOS_DEPLOYMENT_TARGET = 8.0;
215+
IPHONEOS_DEPLOYMENT_TARGET = 12.0;
216216
MTL_ENABLE_DEBUG_INFO = NO;
217217
SDKROOT = iphoneos;
218218
VALIDATE_PRODUCT = YES;

0 commit comments

Comments
 (0)