For my react-native application I implement navigations with react-native-router-flux
. I have a Drawer menu which is accessible through several different pages. On IOS everything is fine. Whereas, not all but on some android devices redirecting links on the drawer menu does not work. Is there someone faced this problem before? And how did you solve it? I used react-native-router-flux
on all pages of my application. So, I do not want to use another navigation component in Drawer
menu.
Here is my drawer menu code.
import React, {Component} from 'react';
import {Actions} from 'react-native-router-flux';
import {Text,View,Container} from 'react-native';
import {Button,Icon} from 'native-base';
export default class SideBarContent extends Component{
constructor() {
super();
}
render()
{
const css = {
"Button": {color: '#E5DDCB',fontFamily: 'SourceSansPro-Regular'}
}
return(
<View style={{top: 80}} >
<Button transparent onPress={()=>Actions.ordersMain()}><Icon style={{color: "#FFF",margin: 10}} name="md-card"/><Text style={css.Button}>Order History</Text></Button>
<Button transparent onPress={()=>Actions.account()}><Icon style={{color: "#FFF",margin: 10}} name="md-person-add"/><Text style={css.Button}>Profile</Text></Button>
<Button transparent onPress={()=>Actions.addresses()}><Icon style={{color: "#FFF",margin: 10}} name="md-navigate"/><Text style={css.Button}>Addresses</Text></Button>
<Button transparent><Icon style={{color: "#FFF",margin: 10}} name="md-information-circle"/><Text style={css.Button}>Account</Text></Button>
<Button transparent onPress={()=>Actions.category()}><Icon style={{color: "#FFF",margin: 10}} name="md-archive"/><Text style={css.Button}>Categories</Text></Button>
</View>
);
}
}
Here is how I implement menu on pages.
return (
<Drawer
tapToClose={true}
open={false}
type="displace"
content={<SideBarContent />}
ref = {(ref) => this._drawer = ref}
openDrawerOffset={width/3}
closedDrawerOffset={0}
styles={drawerStyles}
tweenHandler={Drawer.tweenPresets.parallax}
elevation={0}
onClose={()=>this.onClose()}
>
<Container style={{backgroundColor: '#FFF'}}>
//....Page Code...
</Container>
</Drawer>
);
Here is image of my drawer.