From 73634f2c620b1a48619f0aa984193797deefacb6 Mon Sep 17 00:00:00 2001
From: Ryan Bruels <rbruels@gmail.com>
Date: Mon, 8 Jun 2020 21:42:25 -0700
Subject: [PATCH] Support for custom backgroundColor in the backdrop config

---
 src/modal-controller.tsx | 30 +++++++++++++++++++-----------
 src/types.ts             |  1 +
 2 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/modal-controller.tsx b/src/modal-controller.tsx
index a0882be..8fe1a02 100644
--- a/src/modal-controller.tsx
+++ b/src/modal-controller.tsx
@@ -30,6 +30,7 @@ import {
 
 const defaultBackdrop: Required<BackdropConfig> = {
   activeOpacity: 0.5,
+  backgroundColor: 'black',
   transitionInTiming: 500,
   transitionOutTiming: 500
 };
@@ -103,23 +104,20 @@ const ModalAnimator = (props: ModalAnimatorProps) => {
   );
 };
 
-const modalControllerProviderStyles = StyleSheet.create({
-  backdrop: {
-    ...StyleSheet.absoluteFillObject,
-    backgroundColor: "black"
-  }
-});
-
 const ModalControllerProvider = (props: ModalControllerProviderProps) => {
   const [modals, setModals] = useState<ModalType[]>([]);
   const backdropOpacity = useRef(new Animated.Value(0));
 
-  const handleBackdropFade = useCallback(() => {
-    const visibleModals = modals.filter(({ isVisible }) => isVisible);
-    const backdrop = {
+  const backdropConfig = () => {
+    return  {
       ...defaultBackdrop,
       ...(props.backdrop || {})
     };
+  };
+
+  const handleBackdropFade = useCallback(() => {
+    const visibleModals = modals.filter(({ isVisible }) => isVisible);
+    const backdrop = backdropConfig()
     // hide backdrop if the is no modals to display
     if (!visibleModals.length) {
       Animated.timing(backdropOpacity.current, {
@@ -195,6 +193,16 @@ const ModalControllerProvider = (props: ModalControllerProviderProps) => {
     onShowModal: handleShowModal
   };
 
+  const modalControllerProviderStyles = () => { 
+    const backdrop = backdropConfig()
+    return StyleSheet.create({
+      backdrop: {
+        ...StyleSheet.absoluteFillObject,
+        backgroundColor: backdrop.backgroundColor
+      }
+    });
+  };
+
   return (
     <Context.Provider value={modalConsumerProps}>
       {props.children}
@@ -223,7 +231,7 @@ const ModalControllerProvider = (props: ModalControllerProviderProps) => {
         >
           <Animated.View
             style={[
-              modalControllerProviderStyles.backdrop,
+              modalControllerProviderStyles().backdrop,
               { opacity: backdropOpacity.current }
             ]}
           />
diff --git a/src/types.ts b/src/types.ts
index 724b76a..c36006a 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -25,6 +25,7 @@ export interface BackdropConfig {
   activeOpacity?: number;
   transitionInTiming?: number;
   transitionOutTiming?: number;
+  backgroundColor?: string;
 }
 
 export interface ModalType {