react-nativereact-native-navigationreact-native-drawer

React-native Drawer Navigator opens but clicking on items doesn't change the view

I'm trying to navigate between some logged pages in my app using DrawerNavigator. It opens when I swipe right, but it doesn't change the view when I select an item.

I'm running the app on a Android device.

App.js

import React, { Component } from 'react';
import RootNavigator from './navigation/AppNavigator';


class App extends Component {

  render() {
    return <RootNavigator />
  }
}


export default App;

AppNavigator.js

import { createSwitchNavigator, createAppContainer, createDrawerNavigator } from "react-navigation";

import SplashScreen from '../features/SplashScreen/SplashScreen';
import HomePage from '../features/HomePage/HomePage';
import LoginPage from '../features/LoginPage/LoginPage';
import ProfilePage from '../features/ProfilePage/ProfilePage';
import SchedulePage from '../features/SchedulePage/SchedulePage';


export const LoggedIn = createDrawerNavigator(
    {
        HomePage: {
            screen: HomePage,
        },
        ProfilePage: {
            screen: ProfilePage
        },
        SchedulePage: {
            screen: SchedulePage
        },
    },
    {
        initialRouteName: 'HomePage'
    }
);

const rootNavigator = createSwitchNavigator(
    {
        SplashScreen: SplashScreen,
        LoggedIn: LoggedIn,
        LoginPage: {
            screen: LoginPage,
            navigationOptions: {
                header: null
            }
        }
    },
    {
        headerMode: 'none',
        initialRouteName: "SplashScreen"
    }
);



export default createAppContainer(rootNavigator);

Navigating to HomePage When login is finished, it redirects to HomePage using:

this.props.navigation.navigate('HomePage');

After logging in, I'm redirected to the HomePage and that's what I see when I swipe right but clicking them do not change anything.

DrawerNavigator

This is my first react native project, so I'm not quite sure what I'm doing.

Solution

  • You can follow this process. This is somehow working for me. Hope this helps.

    class customDrawerContentComponent extends Component {
  render() {
    return (
      <Container>
        <View style={{height: 250, backgroundColor: '#fff'}}>
          <Body style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
              <Image 
              style={styles.drawerImage}  
              source={require('./assets/img/logo.png')} />
          </Body>
        </View>

        <Content>

          <TouchableOpacity>
            <View style={{marginVertical: 20, borderBottomWidth: 1, borderTopWidth: 1, borderBottomColor: '#ECE8EA', borderTopColor: '#ECE8EA', marginHorizontal: 20, flex: 1, justifyContent:'space-between', flexDirection: 'row'}}>
              <View style={{marginVertical: 10, position:'relative'}} >
                <Image source={require('./assets/img/avatar.png')}/>
              </View>
              <View style={{marginVertical: 10}}>
                <Text style={{ fontSize: 16, color: '#D5D2D3' }}> Name</Text>
                <Text style={{ fontSize: 18, color: '#959394' }}>Mobile </Text>
                <Text style={{ fontSize: 18, color: '#959394' }}> Email </Text>
              </View>
            </View>
          </TouchableOpacity>

          <DrawerItems {...this.props} />
        </Content>
      </Container>
    )
  }
}

const AppDrawerNavigator = createDrawerNavigator({
  Home: {
    screen : HomeScreen,
    navigationOptions: () => ({
      title: `Vendor Show`,
      drawerIcon: ({tintColor}) => (
        <Image source={require('./assets/logo.png')} style={{height: 24, width: 24}}/>
      )
    })
  },
  Search: {
    screen: SearchScreen,
    navigationOptions: () => ({
      title: `Search by`
    })
  },
  Vendor: {
    screen: HomeScreen,
    navigationOptions: () => ({
      title: `Vendor List`,
    })
  },
  Notifications: {
    screen: NotificationScreen
  },
  Events: EventsScreen,
  Venue : {
    screen: VenueAvailabilityScreen,
    navigationOptions: () => ({
      title: `Venue Availability`,
    })
  },
  Settings: {
    screen: SettingsScreen
  }
}, {
  drawerPosition: 'left',
  contentComponent: customDrawerContentComponent,
  drawerOpenRoute: 'DrawerOpen',
  drawerCloseRoure: 'DrawerClose',
  drawerToggleRoute: 'DrawerToggle',
  drawerWidth: 320,
  contentOptions: {
    activeTintColor: '#fff',
    inactiveTintColor: '#030303',
    activeBackgroundColor: '#B90066',
    inactiveBackgroundColor: '#fff',
    itemsContainerStyle: {
      marginHorizontal: 10
    },
    itemStyle: {
      height: 40,
      borderRadius: 60,
    },
    activeLabelStyle: {
      fontSize: 20, 
      fontWeight: 'normal'
    }
  }
  })

  const AuthStackNavigator = createStackNavigator({
    SplashScreen: { screen: SplashScreen },
    ModalScreen:{
      screen: ModalScreen
    },
    LocationNotification: {
      screen: LocationNotificationScreen,
      navigationOptions: () => ({
        header: null
      })
    },
    LoginScreen: { 
      screen : LoginScreen,
      navigationOptions: () => ({
        header: null
      })
    },
    SignUpScreen: {
      screen : SignUpScreen,
      navigationOptions: () => ({
        header: null
      })
    },
    SignUpStepTwo: {
      screen : SignUpStepTwo,
      navigationOptions: () => ({
        header: null
      })
    },
    ForgotPassword: {
      screen: ForgotPassword,
      navigationOptions: () => ({
        header: null
      })
    }
   
  })



const AppSwitchNavigator = createSwitchNavigator({
  AuthLoadingScreen: AuthLoadingScreen,
  Auth: AuthStackNavigator,
  App: {
    screen: AppDrawerNavigator
  }
})

const MyAppDrawer = createAppContainer(AppSwitchNavigator)

class App extends Component {
  render() {
    return <MyAppDrawer />
  }
}

export default App