styles: main: background color not working?

[camnicklaus]

I can see the opacity in react-native-debugger dev tools but the background color seems to remain set to the default: #ccc when I change it in the dev tools it seems to work The commented out tweenHandler code was just me trying to see if there was some other way to set background color with the drawer closed. I set the Opacity to 0.5 just to trouble shoot. All I want to do is set the background color when the drawer is closed.

        return (
            <View style={offersNearMe.container}>
                <Drawer
                    styles={drawerStyles}
                    type={"overlay"}
                    onClose={() => toggleDrawer(layout.categoriesDrawerRef, false)} //false to tell the reducer this action is triggered programmatically
                    open={isOpen} //tells the drawer to open or close
                    openDrawerOffset={0.15}
                    ref={ref => (this._drawer = ref)}
                    tapToClose={true}
                    // tweenHandler={ratio => {
                    //     return (
                    //         { main: { opacity: 1 } },
                    //         {
                    //             mainOverlay: { opacity: ratio / 1.5, backgroundColor: "black" },
                    //         }
                    //     );
                    // }}
                    content={
                        <CategoriesMenu
                            {...this.props}
                            toggleDrawer={() => toggleDrawer(layout.categoriesDrawerRef)}
                        />
                    }
                >
                    <View style={[offersNearMe.header, offerCard.bottomBoxShadow]}>{header}</View>
                    {/* <View style={offersNearMe.container}> */}
                    {offers.length > 0 ? offersToRender : noOffers}
                    {/* </View> */}
                </Drawer>
                <Route path={"/consumer/offers/detail/:id"} component={DetailOfferView} />
            </View>
        );
    }
}

const drawerStyles = {
    drawer: {
        backgroundColor: colors.BACKGROUND_COLOR_WHITE,
        paddingBottom: 0,
    },
    main: { backgroundColor: "#E6007E", opacity: 0.5 },
};

[robinv8]

try this.

 const drawerStyles = {
      mainOverlay: {
        backgroundColor: 'black',
        opacity: 0,
      },
    }
 tweenHandler={(ratio) => ({
              mainOverlay: {
                opacity: ratio / 2,
              }
            })
            }

[mgolkardev]

@robinv8 Thanks.