1

Problem:

I've implemented drawer using react-native-side-menu.

On the iOS simulator, it works ok. But on a physical device, after drawer is open, everything disappears.

Changing drawer module to react-native-drawer does not help, app content still disappears after drawer opening.

Demonstration: video

Stack:

react-native: 0.53. react-navigation: 1.0.0 mobx, mobx-react.

Drawer:

import React, { Component } from 'react';
import { Dimensions } from 'react-native';
import { inject, observer } from 'mobx-react';
import Drawer from 'react-native-side-menu';
import SideMenu from './SideMenu';

const deviceWidth = Dimensions.get('window').width;

@inject('ui')
@observer
export default class DrawerWrapper extends Component {
  onMenuChanges = (open) => {
    if (open) {
      this.props.ui.openDrawer();
    } else {
      this.props.ui.closeDrawer();
    }
  }

  render() {
    const { isDrawerOpen } = this.props.ui;
    return (
      <Drawer
        menu={<SideMenu {...this.props} />}
        menuPosition="right"
        onChange={this.onMenuChanges}
        side="right"
        openMenuOffset={deviceWidth - 90}
        isOpen={isDrawerOpen}
      >
        {this.props.child}
      </Drawer>
    );
  }
}

index.js:

import React from 'react';
import { Provider } from 'mobx-react';
import { StyleProvider, Root } from 'native-base';
import { StackNavigator } from 'react-navigation';

import stores from './stores';
import screens from './screens';
import getTheme from './theme/components';
import DrawerWrapper from './components/Drawer';

const Navigator = StackNavigator(screens, {
  headerMode: 'none',
  initialRouteName: 'AuthBridge',
});

const App = () => (
  <StyleProvider style={getTheme()}>
    <Provider {...stores}>
      <Root>
        <DrawerWrapper
          child={<Navigator />}
        />
      </Root>
    </Provider>
  </StyleProvider>
);

export default App;

P.S Works ok on Android simulator/real device.

Yarik Genza
  • 401
  • 1
  • 4
  • 7

0 Answers0