The way component should evolve

[Kureev]

Dear community,

I want to make a big refactoring of this component to reduce a crazy complexity we have now. This component has been started as a small proof-of-concept for RN side menu and nowadays it's a solid building block of many RN applications. I want to evolve this component, but I feel I can't do it without asking community about it. So, there are some topics I'd discuss with you:

Draggable behavior

My proposal is to separate side menu itself from draggable behavior.

const SideMenu = require('react-native-side-menu');
...
render() {
  return <SideMenu/>;
}
// ^ SideMenu is draggable by default

I propose to use it like this

const SideMenu = require('react-native-side-menu');
const makeDraggable = require('react-native-side-menu/makeDraggable');
const DraggableSideMenu = makeDraggable(SideMenu); // or using ES2015 decorator

render() {
  return <DraggableSideMenu>;
}

if you want to have a draggable menu. If you want a menu without draggable behavior, you can just use standard SideMenu as in the example above.

Deprecate menuActions

Action object menuActions is the other thing I'd like to discuss. I like how it works, but it also introduce some unnecessary complications in the code (component and user code as well). So what I propose is to make component as stateless as possible and control it from parent (unfortunately, I can't make this component 100% stateless, because it need to track current left offset for the content view). So, state of the component is going to be controlled from the parent:

render() {
  return <SideMenu open={someIsOpenFlagHere} />
}

Every time you'll change this flag, open/close animation will work.

Deprecate disableGestures

This prop doesn't make any sense if we make draggable behavior pluggable.

[grabbou]

Why you did unassign me? :< Anyways, will get back on that tomorrow!

[Kureev]

I wanted to assign us both, but it doesn't work like this 😊

[alinz]

It would be nice to have multiple draggable components which can be coordinated by sideMenu Component. What I want to say is, let say I want 2 side menus or even more but I want to describe them explicit.

<SideMenu>
    <Draggable type="LeftToRight">
        <View>...</View>
    </Draggable>
    <Draggable type="RightToLeft">
        <View>...</View>
    </Draggable>
    <Draggable type="TopToButton">
        <View>...</View>
    </Draggable>
</SideMenu>

it this way we can dynamically changing the configuration of menus. For example in one page we have one side menu but in another page we have 2 more side menus.

[Kureev]

@alinz If we're talking about multiple menus at the same time, it does make sense to think how you compose your menu views. I'd say you need to swap your underlying views based on gesture you make. Kind of gestures hub for application. Let me explain myself: you put GesturesHub component and like with a router and url you detect a view by gesture. Move from down to top - bottom side view, from left to right - left side view etc. Based on this approach it's very easy to make any side menu stuff

[Kureev]

@alinz I'm also thinking about making a draggable decorator as I've described it here. What do you think about it?

[olitomas]

+1 for draggable separation :)

[alinz]

@Kureev, I like the idea. The only thing that concerns me is multiple decorators on top of each other. I'm a big fan of redux and I'm using connect decorator in my current app. Also I have 2 more internal decorators from scene_router which I wrote and I need them to be there. Now with the new decorator for react-native-side-menu I end up having 2 or more layers of decorators. 😈 I wrote too much decorators 😈 So based on my use case, do you think it is ok to have multi decorators on each component?

[Kureev]

Yeah, seems so. Anyway, you can always use decorators as a functions. I mean in case of draggable menu, this code will do the trick:

import SideMenu form 'react-native-side-menu';
import draggable from 'react-native-draggable'; // not sure about naming yet

const config = {
  // config for draggable decorator
};

export default draggable(SideMenu, config);

and plug it as usual:

import DraggableSideMenu from './some/file/with/code/above';

😉

[dzannotti]

+1 for removing menuActions

[Kureev]

Ok, menuActions has been deprecated in 0.17, draggable behavior is coming in 1.0