Remove shadow overlay on drawer navigation.

[vishu-daffodil]

Hi, I have created a side menu using drawer navigation. i am getting shadow overlay on the back view. I want to remove the shadow overlay.

But i want some thing like this.

// Drawer.js
import React, { Component } from 'react';
import { View } from 'react-native';
import { DrawerNavigator } from 'react-navigation';
import Home from './AppNavigation';
import { SideMenu } from "./../Common/UIComponents";
import { widthScale } from "./../Common/Utils/Scaling";

export default DrawerStack = DrawerNavigator({
    Home: { screen: Home },
    MyAccount: { screen: () => <View /> },
    MessageToBigFm: { screen: () => <View /> },
    MeetTheMJs: { screen: () => <View /> },
    Videos: { screen: () => <View /> },
    AboutUs: { screen: () => <View /> },
    ContactUs: { screen: () => <View /> },
    TermsAndConditions: { screen: () => <View /> }
}, {
        contentComponent: SideMenu,
        drawerWidth: widthScale(320),
        drawerBackgroundColor: "transparent",
        style: { backgroundColor: "transparent", opacity: 0, shadowOpacity: 0, shadowColor: "transparent" }
    });

// SideMenu.js
import React, { Component } from "react";
import { View, Text, ScrollView, Platform } from "react-native";
import { NavigationActions } from "react-navigation";
import style from "./style";
import SideMenuHeader from "./SideMenuHeader";
import { ListFlat } from "./../../UIComponents";
import SideMenuData from "./SideMenuData";
import SideMenuCell from "./SideMenuCell";
import NavigationUtil from "./../../Utils/NavigationUtil";

class SideMenu extends Component {

    constructor(props) {
        super(props);
        this.navigateToScreenWithIndex = this.navigateToScreenWithIndex.bind(this);
        this.renderItemSeperator = this.renderItemSeperator.bind(this)
    }

    navigateToScreenWithIndex(index) {
        const routeData = SideMenuData[index];
        if (!routeData) {
            return null;
        }
        const routeKey = routeData.navigationKey;
        if (routeKey === null) {
            return;
        }
        const navigateAction = NavigationActions.reset({
            index: 0,
            actions: [
                NavigationActions.navigate({ routeName: routeKey })
            ]
        });
        this.props.navigation.dispatch(navigateAction);
    }

    renderItemSeperator({ leadingItem }) {
        if (leadingItem.key === 4) {
            return <View style={style.seperator} />
        } else {
            return null;
        }
    }

    render() {
        return (
            <View style={style.container}>
                {Platform.OS === "ios" && <View style={style.statusBar} />}
                <View style={style.listContainer}>
                    <ListFlat
                        horizontal={false}
                        renderHeader={() => <SideMenuHeader />}
                        data={SideMenuData}
                        CellComponent={SideMenuCell}
                        otherProps={{ onCellPress: this.navigateToScreenWithIndex }}
                        renderSeparator={this.renderItemSeperator}
                    />
                </View>
            </View>
        );
    }
}

export default SideMenu;

[andreyelpaev]

+1, same problem

[brentvatne]

hi there! if you'd like to see this feature in react navigation, please create a feature request for it. alternatively, a pull request would be welcome too. thanks!

[yanush]

I was able to achieve this behaviour by editing DrawerLayout.js (inside react-native-drawer-layout/dist) and changing styles of:
overlay: {
-backgroundColor: '#000',
+backgroundColor: 'transparent',
}

[bacarybruno]

For this to work on android, you have to copy node_modules/react-native-drawer-layout-polyfill/dist/index.js into index.android.js in the same folder.

[brentvatne]

you folks who want this could also just open a PR here: http://github.com/react-navigation/react-navigation-drawer