Menu Position Right RTL

[yogevlahyani]

Hi, I have a RTL app and when I use menu position = right the menu has margin from the right and doesn't work like it works when its on the left position

[iddan]

This should be changed to:

get boundryStyle() {
    const { menuPosition } = this.props
    if (I18nManager.isRTL && menuPosition === 'right') {
      return { right: this.state.width - this.state.openMenuOffset }
    }
    if (menuPosition === 'right' || I18nManager.isRTL && menuPosition === 'left') {
      return { left: this.state.width - this.state.openMenuOffset }
    }
    return { right: this.state.width - this.state.openMenuOffset }
  }

[gentlee]

any solution?

[gentlee]

Ok, this is my solution that has no offset at all (menu width === container width):

import SideMenu from 'react-native-side-menu';
import sideMenuStyles from 'react-native-side-menu/build/styles';

SideMenu.prototype.render = function render() {
    const menu = (
        <View style={sideMenuStyles.menu}>
            {this.props.menu}
        </View>
    );

    return (
        <View
            style={sideMenuStyles.container}
            onLayout={this.onLayoutChange}>
            {menu}
            {this.getContentView()}
        </View>
    );
}

[colmbrady]

The issue with @Gentlee solution is that is will make the menu container grow to 100% of the width of page, and it will be partly covered by the drawer when opened. This means that some UI elements, e.g. buttons etc could be covered by the drawer.

The thing that confused me initially, is that 'left' and 'right' in this component have not real relation to RTL in React Native, so when you are in RTL mode, styles are flipped and things kind of go bad. If you are in RTL mode.

@iddan method of fixing this is probably closer to what is needed (Ive not tested that). Ive fixed it by doing:

const boundryStyle = { start: 0, end: (this.state.width - this.state.openMenuOffset) };

But note, that I only position the menu on the right when using RTL mode, so this seems to work for me. It probably wont work when you in LTR mode, and set drawer to 'right;

[colmbrady]

There is a fork of this library with the RTL issues addressed. https://github.com/orionhealth/react-native-side-menu

[azizghuloum]

Another proposed fix for the issue is here:

https://github.com/azizghuloum/react-native-side-menu

[iddan]

You should probably open a PR

[azizghuloum]

https://github.com/react-native-community/react-native-side-menu/pull/373

[crcommons]

@colmbrady Any idea when #373 will be merged?

[colmbrady]

@crcommons Im not sure. I think this project is dead as no P.Rs have been merged for a longtime. Best find an alternative fork that is willing to maintain this and support RTL.

The fork I am using has deviated considerably from this project and I would not advise trying to use it.

[danleveille]

Anyone have an update fork that fixes this issue?

[colmb]

You can get this library to behave the same: https://software-mansion.github.io/react-native-gesture-handler/docs/component-drawer-layout.html, and on Android there is also the native drawer, https://reactnative.dev/docs/drawerlayoutandroid

This library is probably not the best choice.

There is a fork of it here that I made, https://github.com/orionhealth/react-native-side-menu. It changes the implementation to support a double drawer (by nesting the component inside itself) without triggering a re-render of the entire react tree, which was more apparent on web then native, because it was triggering a reload of my entire app. There is also probably some other customisation that may be specific to the usecases we had.

I dont recommend using this ahead of the other implementations though, but if you wanted to fork it yourself and maintain your own fork, be my guest.