CODEWITHSUNDEEP
react-nativereact-navigationnative-base
Real Moise
Real Moise

Reputation: 27

StackNavigator menu not aligning on the left

I am trying to implement the react stack navigator in my expo app. The app is working perfectly fine except the drawer menu icon which is not being displayed on the left as it was supposedly to be. Can anyone tell me where I messed up?

Here is the screenshot of the app enter image description here

Here is my App.js

import React from 'react';
import { StyleSheet, Text, View, SafeAreaView, ScrollView, Dimensions, Image } from 'react-native';

import {createDrawerNavigator,DrawerItems} from 'react-navigation'

import SplashScreen from './src/components/splash';
import LibraryScreen from './src/screens/LibraryScreen';
import ReminderScreen from './src/screens/ReminderScreen';
import ReportScreen from './src/screens/ReportScreen';
import SettingsScreen from './src/screens/SettingsScreen';
import TrainingScreen from './src/screens/TrainingScreen';

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

const CustomDrawerComponent = (props) =>(
  <SafeAreaView style={{ flex:1 }}>
    <View style={{ height:150, backgroundColor: 'white',alignItems:'center', justifyContent:'center' }}>
      <Image source={require('./assets/icon.png')} style={{ height:120, width: 120, borderRadius:60 }} />
    </View>
    <ScrollView>
      <DrawerItems {...props} />
    </ScrollView>
  </SafeAreaView>
)

const AppDrawerNavigator = createDrawerNavigator({
  Training:TrainingScreen,
  Library:LibraryScreen,
  Report:ReportScreen,
  Reminder:ReminderScreen,
  Settings:SettingsScreen
},{
  contentComponent:CustomDrawerComponent
})

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

And this is the Training.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

import {header,Left,Right,Icon, Header} from 'native-base'

class TrainingScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Header>
          <Left>
            <Icon name="menu" onPress={()=>this.props.navigation.openDrawer()}/>
          </Left>
        </Header>
        <View style={{flex:1, alignItems:'center', justifyContent:'center'}}>
          <Text>Training Screen</Text>
        </View>
      </View>
    );
  }
}
export default TrainingScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});

Upvotes: 1

Views: 346

Answers (2)

Paras Korat
Paras Korat

Reputation: 2065

Just add below style in your code it works. Add this style <Left style={{justifyContent:"flex-start",flex:1}}> in your code

Training.js

  class TrainingScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Header >
          <Left style={{justifyContent:"flex-start",flex:1}}><---Update---
            <Icon
              name="menu"
              onPress={() => this.props.navigation.openDrawer()}
            />
          </Left>
        </Header>
        <View
          style={{ flex: 1, alignItems: "center", justifyContent: "center" }}
        >
          <Text>Training Screen</Text>
        </View>
      </View>
    );
  }
}
export default TrainingScreen;

Upvotes: 1

wicky
wicky

Reputation: 978

You might need to include all Left, Body, and Right in your NativeBase Header

<Header>
  <Left>
    <Icon name="menu" onPress={()=>this.props.navigation.openDrawer()}/>
  </Left>
  <Body/>
  <Right/>
</Header>

Upvotes: 1

Related Questions