Merge branch 'dialogs' into 'main'

Dialogs

See merge request react-native/react-native-material-components!13

Author: computools-anastasiia-nahaiska

README.md

@@ -11,6 +11,7 @@ Computools react native material components package
 yarn add react-native-reanimated
 yarn add react-native-gesture-handler
 yarn add react-native-safe-area-context
+yarn add react-native-svg
 ```
 
 3. Add ```react-native-reanimated/plugin``` plugin to your babel.config.js.
@@ -171,6 +172,9 @@ export const AppBodyLargeText: React.FC<PropsWithChildren> = ({children}) => {
 }
 ```
 </deatils>
+</details>
+<details><summary>Components</summary>
+<br />
 <details><summary>Activity Indicators</summary>
 <br />
 <details><summary>Circular Activity Indicator</summary>
@@ -333,6 +337,111 @@ Outlined card is touchable.
 </details>
 </details>
 
+<details><summary>Dialogs</summary>
+<br />
+<details><summary>Dialog</summary>
+<br />
+
+Wrapper component used in ```BasicDialog```. This library proides the opportunity to use ```Dialog``` to implement custom components.
+
+**Methods**
+
+| name | parameters | returns |
+| ------ | ------ | ------ |
+| show | none | void |
+| close | none | void |
+| isShowed | none | boolean |
+
+_See the example how to use:_
+```
+import {Dialog, type DialogRef} from '@computools/react-native-material-components';
+
+export const YourComponent = () => {
+  const dialogRef = useRef<DialogRef>(null);
+
+  return (
+    {/* Rest of your app code */}
+    <Button onPress={() => dialogRef.current.show()} />
+    <Dialog ref={dialogRef}>
+      <YourDialogContent />
+    </Dialog>
+     {/* Rest of your app code */}
+  );
+}
+```
+
+**Properties**
+
+| name | description | type | default |
+| ------ | ------ | ------ | ----|
+| animationDuration | appearance/disappearance animation duration | number | 220 |
+
+</details>
+<details><summary>Basic Dialog</summary>
+<br />
+
+**Properties**
+
+| name | description | type | default |
+| ------ | ------ | ------ | ----|
+| title | - | string | - |
+| subtitle | - | string | - |
+| firstActionTitle | - | string | - |
+| secondActionTitle | - | string | - |
+| onFirstActionPress | - | () | () => void |
+| onSecondActionPress | - | () => void | - |
+| titleStyle | - | TextStyle | - |
+| subtitleStyle | - | TextStyle | - |
+| prepend | - | ReactNde | - |
+| append | - | ReactNde | - |
+
+![basic dialog gif](https://ik.imagekit.io/Computools/rn-material-components/basic-dialog.gif?updatedAt=1729261989459)
+</details>
+<details><summary>Full screen Dialog</summary>
+<br />
+
+**Properties**
+  animationDuration?: number;
+  animationType?: AnimationType;
+
+| name | description | type | default |
+| ------ | ------ | ------ | ----|
+| animationType | - | AnimationType | AnimationType.SLIDE |
+| animationDuration | - | number | 330 |
+
+![full screen dialog gif](https://ik.imagekit.io/Computools/rn-material-components/full-screen-dialog.gif?updatedAt=1729261989519)
+</details>
+
+<details><summary>Troubleshooting</summary>
+<br />
+
+## Modal unexpectedly reappear
+
+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.
+
+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.
+
+
+_See the example how to use:_
+```
+const onSubmitPress = async () => {
+  const isSuccessfullySignedOut = await signOut();
+
+  if (isSuccessfullySignedOut) {
+    InteractionManager.runAfterInteractions(() => {
+      navigation.dispatch(
+        CommonActions.reset({
+          index: 0,
+          routes: [{name: MainStackRoutes.Welcome}],
+        }),
+      );
+  });
+}
+
+}
+```
+</details>
+</details>
 <details><summary>Divider</summary>
 <br />
 
@@ -357,7 +466,7 @@ Outlined card is touchable.
 | modalHeightCoeff | - | number | 0.4 |
 | animationDuration | - | number | 300 |
 | headerStyle | - | ViewStyle | - |
-| overlayStyle | - | ViewStyle | - |
+| backdropStyle | - | ViewStyle | - |
 | dragHandleStyle | - | ViewStyle | - |
 
 ### Usage
@@ -403,7 +512,7 @@ export const MyScreen = () => {
 | stickySide | - | 'right' or 'left | 'right' |
 | modalWidthCoeff | up to 1 | number | 0.85 |
 | animationDuration | - | number | 300 |
-| overlayStyle | - | ViewStyle | - |
+| backdropStyle | - | ViewStyle | - |
 
 ### Usage
 
@@ -463,6 +572,7 @@ export const MyScreen = () => {
 ![snackbar with icon](https://ik.imagekit.io/Computools/rn-material-components/snackbar-with-icon.png?updatedAt=1704887400512)
 ![snackbar gif](https://ik.imagekit.io/Computools/rn-material-components/snackbar-gif.gif?updatedAt=1704887530020)
 </details>
+</deatils>
 
 ## Contributing
 

example/ios/Podfile.lock

@@ -462,6 +462,8 @@ PODS:
     - React-RCTText
     - ReactCommon/turbomodule/core
     - Yoga
+  - RNSVG (15.3.0):
+    - React-Core
   - SocketRocket (0.6.1)
   - Yoga (1.14.0)
 
@@ -510,6 +512,7 @@ DEPENDENCIES:
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNReanimated (from `../node_modules/react-native-reanimated`)
+  - RNSVG (from `../node_modules/react-native-svg`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -604,6 +607,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-gesture-handler"
   RNReanimated:
     :path: "../node_modules/react-native-reanimated"
+  RNSVG:
+    :path: "../node_modules/react-native-svg"
   Yoga:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
@@ -652,6 +657,7 @@ SPEC CHECKSUMS:
   ReactCommon: 4b2bdcb50a3543e1c2b2849ad44533686610826d
   RNGestureHandler: bbb8e17b10afdafc5cc5746e8f60772236e7e2ca
   RNReanimated: 99aa8c96151abbc2d7e737a56ec62aca709f0c92
+  RNSVG: 7c3f3fac9de6d67eee5525a8bafffafaaf022991
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
   Yoga: 3efc43e0d48686ce2e8c60f99d4e6bd349aff981
 

example/ios/ReactNativeMaterialComponentsExample.xcodeproj/project.pbxproj

@@ -485,7 +485,10 @@
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
+				CODE_SIGN_IDENTITY = "Apple Development";
+				CODE_SIGN_STYLE = Automatic;
 				CURRENT_PROJECT_VERSION = 1;
+				DEVELOPMENT_TEAM = F3FM75P33H;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = ReactNativeMaterialComponentsExample/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = (
@@ -500,6 +503,7 @@
 				);
 				PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)";
 				PRODUCT_NAME = ReactNativeMaterialComponentsExample;
+				PROVISIONING_PROFILE_SPECIFIER = "";
 				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
 				SWIFT_VERSION = 5.0;
 				VERSIONING_SYSTEM = "apple-generic";
@@ -512,7 +516,10 @@
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
+				CODE_SIGN_IDENTITY = "Apple Development";
+				CODE_SIGN_STYLE = Automatic;
 				CURRENT_PROJECT_VERSION = 1;
+				DEVELOPMENT_TEAM = F3FM75P33H;
 				INFOPLIST_FILE = ReactNativeMaterialComponentsExample/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
@@ -526,6 +533,7 @@
 				);
 				PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)";
 				PRODUCT_NAME = ReactNativeMaterialComponentsExample;
+				PROVISIONING_PROFILE_SPECIFIER = "";
 				SWIFT_VERSION = 5.0;
 				VERSIONING_SYSTEM = "apple-generic";
 			};

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

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>IDEDidComputeMac32BitWarning</key>
+	<true/>
+</dict>
+</plist>

example/metro.config.js

@@ -1,11 +1,11 @@
-const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
+const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
 const path = require('path');
 const escape = require('escape-string-regexp');
 const exclusionList = require('metro-config/src/defaults/exclusionList');
 const pak = require('../package.json');
 
 const root = path.resolve(__dirname, '..');
-const modules = Object.keys({ ...pak.peerDependencies });
+const modules = Object.keys({...pak.peerDependencies});
 
 /**
  * Metro configuration
@@ -19,12 +19,7 @@ const config = {
   // We need to make sure that only one version is loaded for peerDependencies
   // So we block them at the root, and alias them to the versions in example's node_modules
   resolver: {
-    blacklistRE: exclusionList(
-      modules.map(
-        (m) =>
-          new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`)
-      )
-    ),
+    blacklistRE: exclusionList(modules.map((m) => new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`))),
 
     extraNodeModules: modules.reduce((acc, name) => {
       acc[name] = path.join(__dirname, 'node_modules', name);

example/package.json

@@ -13,7 +13,8 @@
     "react-native": "0.72.4",
     "react-native-gesture-handler": "2.17.1",
     "react-native-reanimated": "3.5.1",
-    "react-native-safe-area-context": "4.10.7"
+    "react-native-safe-area-context": "4.10.7",
+    "react-native-svg": "15.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",