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.