Need 'left' and 'right' in entry props!

[KinanKazmi]

Anyway to use this as a Side Menu? Like i could use 'left' or 'right' in 'entry' prop and bring it from the side?

[holyxiaoxin]

with abit of math, you could achieve 'left or right position'.

Try setting below to achieve 'right position'

position='top'
styles= {{
    height: 50,
    width: x,
    marginLeft: (width - x) / 2,
}}

This will simulate a top right modal.

[KinanKazmi]

I changed his render() to this.

  render: function() {
    var visible     = this.state.isOpen || this.state.isAnimateOpen || this.state.isAnimateClose;
    var size        = {height: this.state.containerHeight, width: this.state.containerWidth};
    var offsetX     = (this.state.containerWidth - this.state.width) / 2;
    var offsetY     = (this.state.containerWidth - this.state.width) / 2;
    var backdrop    = this.renderBackdrop(size);

    if (!visible) return <View/>

      var Tr;
      if (this.props.entry === 'left')
        Tr = [{translateX: this.state.position}, {translateY: offsetY}]
      else if (this.props.entry === 'right')
        Tr = [{translateX: this.state.position}, {translateY: offsetY}];
      else if (this.props.entry === 'top')
        Tr = [{translateY: this.state.position}, {translateX: offsetX}];
      else
        Tr = [{translateY: this.state.position}, {translateX: offsetX}];

    return (
      <View style={[styles.transparent, styles.absolute]} pointerEvents={'box-none'} onLayout={this.onContainerLayout}>
        {backdrop}
        <Animated.View
         onLayout={this.onViewLayout}
         style={[styles.wrapper, size, this.props.style, {transform: Tr} ]}
         {...this.state.pan.panHandlers}>
          {this.props.children}
        </Animated.View>
      </View>
    );
  },

Similarly, added 'x' related stuff to link with props of 'left' and 'right'

[maxs15]

This component hasn't been developed to be used as a side menu though... Maybe you could use one of the many side-menu components available

[KinanKazmi]

Nah man, it works perfectly like one, with my modifications. It would be better if you did it though.

[KinanKazmi]

Plus, people could want the left/right entry for the modalbox too.

[KinanKazmi]

And modalbox's flexibility and animation is why i prefer it over other side menus.

[KinanKazmi]

So, would you formally do it? Or should i just keep using it with my own modifications?

[peacechen]

The community side menu and drawer components are designed to act as routers which rules them out for my project. They also have trouble integrating with NavigationExperimental. I'm looking for a component that is fully independent of the router, so thanks to @KinanKazmi for sharing his solution.

@maxs15 Would you be interested in a PR that implements left/right positions?

[maxs15]

Sure @peacechen, with an example in the Example project it would be perfect 👍

[macrozone]

would also love to have this improvement. Is there a fork available with this functionality?

[AugustusCosta]

I used the prop entry with the value 'left'.

https://github.com/AugustusCosta/react-native-modalbox