CODEWITHSUNDEEP
androidreact-native
Ishaq Ashraf
Ishaq Ashraf

Reputation: 169

RTL react native drawer issue android

i am using react native router flux drawer and also using RTL , all is working fine but only issue on android side , drawer opens from left but in ios drawer opens from right . all settings are same .

this is my index.js component

**//index.js**
import {AppRegistry,I18nManager} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

I18nManager.forceRTL(true);`
AppRegistry.registerComponent(appName, () => App);

this is my app.js component

//app.js
import React, { Component } from 'react';
import Routes from './routes';

export default class App extends Component {
  render() {
    return (
      <Routes />
    );
  }
}

this is my routes.js component

//routes.js
import React, { Component } from 'react';
import { Text, View, TouchableOpacity, Image, ScrollView, Dimensions, Platform } from 'react-native';
import Dashboard from './dashboard';
import SideMenu from './sidemenu';

import { Router, Scene, Actions } from 'react-native-router-flux';


const dr = <Image source={require('./img/menu.png')} style={{ height: 20, width: 25, marginBottom: 10 }} />


const menuButton = () => {
    return (
        <TouchableOpacity style={{ justifyContent: 'center', alignItems: 'center', alignContent: 'center' }}>
            <Image source={require('./img/navLogo.png')} style={{ height: 40, width: 90, marginBottom: 10 }} />
        </TouchableOpacity>
    )
}

class Routes extends Component {
    render() {
        return (
            <Router>
                <Scene key="root" hideNavBar>
                    <Scene key="drawer" drawer
                        renderTitle={menuButton}
                        contentComponent={SideMenu}
                        drawerIcon={dr}
                        drawerWidth={300}
                        navigationBarStyle={{ backgroundColor: '#34871f' }}
                        titleStyle={{ color: '#fff', alignSelf: 'center', textAlign: 'center' }}
                    >
                        <Scene key="main">
                            <Scene key="dashboard" component={Dashboard} title="Dashboard" />
                        </Scene>
                    </Scene>
                </Scene>
            </Router>
        );
    }
}


const styles = {
    navLogo: {
        height: 10,
        width: 10
    },
    menu: {
        height: 10,
        width: 10
    }
}

export default Routes;

any expert here who can help me

here are the screenshots

enter image description here

Upvotes: 1

Views: 470

Answers (1)

Mahdi Bashirpour
Mahdi Bashirpour

Reputation: 18803

Make it a test

<Scene key="drawer" 
     drawer
     drawerPosition='right'   // <=  Add this line
     ...
>

Upvotes: 1

Related Questions