Left and Right Drawers with React Navigation

App.js

import React, { Component } from 'react';
import { Text } from 'react-native';
import { DrawerNavigator } from 'react-navigation';

const ContentScreen = ({ navigation }) => (
  <Text>Content Hello World</Text>
);

const LeftDrawerScreen = ({ navigation }) => (
  <Text>Left Drawer</Text>
);

const RightDrawerScreen = ({ navigation }) => (
  <Text>Right Drawer</Text>
);

const ContentNavigator = DrawerNavigator({
  Content: {
    screen: ContentScreen,
  }
}, {
  contentComponent: RightDrawerScreen,
  drawerPosition: 'right'
});

const RootNavigator = DrawerNavigator({
  Child: {
    screen: ContentNavigator,
  }
}, {
  contentComponent: LeftDrawerScreen
});

export default class App extends Component {
  render() {
    return (<RootNavigator />);
  }
}

code snippet below is my implementation for two side drawer, when I set the drawerPosition to right it goes to a transparent screen like thing and doesn't show the drawerContent component,
do you have any idea, any suggestion is appreciated.

const HomeDrawer = createDrawerNavigator();
const MainDrawer = createDrawerNavigator();

const SettingsScreen = () => (
  <AppLayout>
    <Text>Settings Screen</Text>
  </AppLayout>
);

const FilterScreen = () => {
  return (
    <AppLayout>
      <Text>Filter Screen</Text>
    </AppLayout>
  );
};

export const _HomeScreenNavigation = () => {
  const { Screen, Navigator } = HomeDrawer;
  return (
    <Navigator screenOptions={{ headerShown: false }} drawerContent={() => <SettingsScreen />}>
      <Screen name={SharedHomeScreenNavigationTypes.SharedHomeScreen} component={HomeScreen} />
      <Screen name={SharedHomeScreenNavigationTypes.PostScreen} component={PostScreen} />
      <Screen name={SharedHomeScreenNavigationTypes.UserProfileScreen} component={UserProfileScreen} />
      <Screen name={SharedHomeScreenNavigationTypes.CreatePostScreen} component={CreatePostScreen} />
    </Navigator>
  );
};

export const HomeScreenNavigation = () => {
  const { Navigator, Screen } = MainDrawer;
  return (
    <Navigator screenOptions={{ headerShown: false, drawerPosition: "right" }} drawerContent={() => <FilterScreen />}>
      <Screen name={"homeDrawer"} component={_HomeScreenNavigation} />
    </Navigator>
  );
};

code snippet below is my implementation for two side drawer, when I set the drawerPosition to right it goes to a transparent screen like thing and doesn't show the drawerContent component, do you have any idea, any suggestion is appreciated.

const HomeDrawer = createDrawerNavigator();
const MainDrawer = createDrawerNavigator();

const SettingsScreen = () => (
  <AppLayout>
    <Text>Settings Screen</Text>
  </AppLayout>
);

const FilterScreen = () => {
  return (
    <AppLayout>
      <Text>Filter Screen</Text>
    </AppLayout>
  );
};

export const _HomeScreenNavigation = () => {
  const { Screen, Navigator } = HomeDrawer;
  return (
    <Navigator screenOptions={{ headerShown: false }} drawerContent={() => <SettingsScreen />}>
      <Screen name={SharedHomeScreenNavigationTypes.SharedHomeScreen} component={HomeScreen} />
      <Screen name={SharedHomeScreenNavigationTypes.PostScreen} component={PostScreen} />
      <Screen name={SharedHomeScreenNavigationTypes.UserProfileScreen} component={UserProfileScreen} />
      <Screen name={SharedHomeScreenNavigationTypes.CreatePostScreen} component={CreatePostScreen} />
    </Navigator>
  );
};

export const HomeScreenNavigation = () => {
  const { Navigator, Screen } = MainDrawer;
  return (
    <Navigator screenOptions={{ headerShown: false, drawerPosition: "right" }} drawerContent={() => <FilterScreen />}>
      <Screen name={"homeDrawer"} component={_HomeScreenNavigation} />
    </Navigator>
  );
};

this is the question that I also have asked at StackOverflow.

I have solved the problem by using react-native-reanimated and an overlay View on the top of other components :). I thought this is going to put me in trouble while I'm going to have a deep nested navigation