Change backdrop's absolute positioning

[ustincameron]

Issue Description

I'm using the Sliding panel inside of a DrawerNavigator for my Menu and am able to make the Panel full width using window.width, however the backdrop is stuck at the width of the DrawerNavigator.

How do I change the style props of the backdrop?

Trying to change the width or the absolute positioning.

Steps to Reproduce / Code Snippets / Screenshots

const MyDrawerNavigator = createDrawerNavigator({
    Home: {
        screen: HomePage,
    }
}, {
    contentComponent: Menu,
    drawerBackgroundColor:'transparent',
    drawerWidth: (window.width/1.25)
});

---

Environment

• Version: 2.0.2
• React Native version: 0.58.6
• Platform(s) (iOS, Android, or both?): iOS

[octopitus]

Can you record a .gif describe the problem? I'm not quite clear.

[ustincameron]

@octopitus I've attached a gif above. The backdrop takes the width of it's parent view, but I'm able to override the panel's width to use device.width, but not sure how to access the backdrop's style props?

[octopitus]

I suggest to put the panel outside of your navigator and use any state management tools (redux, mobx, etc...) or React's Context to show/hide the panel. Below is an example using React's Context:

// panel-context.js
import {createRef} from 'react'

export const PanelContext = createRef({
  showPanel: () => {}
})

// PanelContent.js
import React from 'react'
import {View, Text} from 'react-native'

const PanelContent = (props) => (
  <View>
    <Text>Content of the sliding up panel</Text>
  </View>
)

export default PanelContent

// DrawerNavigator.js
import React from "react";
import {DrawerItems, createAppContainer} from "react-navigation";

import {PanelContext} from "./panel-context";

class DrawerContent extends React.Component {
  onItemPress = item => {
    if (item.route.key === "Panel") {
      this.props.showPanel();
    } else {
      this.props.onItemPress(item);
    }
  };

  render() {
    return <DrawerItems {...this.props} onItemPress={this.onItemPress} />;
  }
}

const DrawerNavigator = createDrawerNavigator(
  {
    Panel: {
      screen: () => null
    },
    // Your other screens
  },
  {
    contentComponent: props => (
        <PanelContext.Consumer>
          {({ showPanel }) => <DrawerContent {...props} showPanel={showPanel} />}
        </PanelContext.Consumer>
      );
  }
);

export default createAppContainer(DrawerNavigator);

// App.js
import React, { createRef } from "react";
import SlidingUpPanel from "rn-sliding-up-panel";

import { PanelContext } from "./panel-context";
import DrawerNavigator from "./DrawerNavigator";
import PanelContent from "./PanelContent";

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this._panel = createRef();
  }

  showPanel = value => {
    this._panel.current.show(value);
  };

  render() {
    return (
      <PanelContext.Provider value={{ showPanel: this.showPanel }}>
        <DrawerNavigator />
        <SlidingUpPanel ref={this._panel}>
          <PanelContent />
        </SlidingUpPanel>
      </PanelContext.Provider>
    );
  }
}