fix: correct changing Dialog backdrop color

src/components/Dialog/Dialog.tsx

@@ -103,6 +103,7 @@ const Dialog = ({
       styles.container,
       style,
     ]}
+    theme={theme}
   >
     {React.Children.toArray(children)
       .filter((child) => child != null && typeof child !== 'boolean')

src/components/FAB/FABGroup.tsx

@@ -54,6 +54,10 @@ type Props = {
    * Custom color for the `FAB`.
    */
   color?: string;
+  /**
+   * Custom backdrop color for opened speed dial background.
+   */
+  backdropColor?: string;
   /**
    * Function to execute on pressing the `FAB`.
    */
@@ -163,6 +167,7 @@ const FABGroup = ({
   testID,
   onStateChange,
   color: colorProp,
+  backdropColor,
 }: Props) => {
   const { current: backdrop } = React.useRef<Animated.Value>(
     new Animated.Value(0)
@@ -267,7 +272,7 @@ const FABGroup = ({
             styles.backdrop,
             {
               opacity: backdropOpacity,
-              backgroundColor: colors.backdrop,
+              backgroundColor: backdropColor || colors.backdrop,
             },
           ]}
         />

src/components/Modal.tsx

@@ -15,7 +15,7 @@ import {
   getBottomSpace,
 } from 'react-native-iphone-x-helper';
 import Surface from './Surface';
-import { useTheme } from '../core/theming';
+import { withTheme } from '../core/theming';
 import useAnimatedValue from '../utils/useAnimatedValue';
 import { addEventListener } from '../utils/addEventListener';
 
@@ -49,6 +49,11 @@ type Props = {
    * Use this prop to change the default wrapper style or to override safe area insets with marginTop and marginBottom.
    */
   style?: StyleProp<ViewStyle>;
+  /**
+   * @optional
+   */
+  theme: ReactNativePaper.Theme;
+  testID?: string;
 };
 
 const DEFAULT_DURATION = 220;
@@ -94,22 +99,24 @@ const BOTTOM_INSET = getBottomSpace();
  * export default MyComponent;
  * ```
  */
-export default function Modal({
+function Modal({
   dismissable = true,
   visible = false,
   overlayAccessibilityLabel = 'Close modal',
   onDismiss,
   children,
   contentContainerStyle,
   style,
+  theme,
+  testID,
 }: Props) {
   const visibleRef = React.useRef(visible);
 
   React.useEffect(() => {
     visibleRef.current = visible;
   });
 
-  const { colors, animation } = useTheme();
+  const { colors, animation } = theme;
 
   const opacity = useAnimatedValue(visible ? 1 : 0);
 
@@ -208,6 +215,7 @@ export default function Modal({
       accessibilityLiveRegion="polite"
       style={StyleSheet.absoluteFill}
       onAccessibilityEscape={hideModal}
+      testID={testID}
     >
       <TouchableWithoutFeedback
         accessibilityLabel={overlayAccessibilityLabel}
@@ -217,6 +225,7 @@ export default function Modal({
         importantForAccessibility="no"
       >
         <Animated.View
+          testID={`${testID}-backdrop`}
           style={[
             styles.backdrop,
             { backgroundColor: colors.backdrop, opacity },
@@ -247,6 +256,8 @@ export default function Modal({
   );
 }
 
+export default withTheme(Modal);
+
 const styles = StyleSheet.create({
   backdrop: {
     flex: 1,

src/components/__tests__/Modal.test.js

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { render } from 'react-native-testing-library';
+import Modal from '../Modal';
+
+describe('Modal', () => {
+  it('should render custom backdrop color', () => {
+    const { getByTestId } = render(
+      <Modal
+        visible={true}
+        testID="modal"
+        theme={{
+          colors: {
+            backdrop: 'transparent',
+          },
+        }}
+      />
+    );
+
+    expect(getByTestId('modal-backdrop').props.style).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ backgroundColor: 'transparent' }),
+      ])
+    );
+  });
+});