Skip to content

Instantly share code, notes, and snippets.

@csorlandi csorlandi/BurguerMenu.js
Last active Jun 27, 2019

Embed
What would you like to do?
import React, { PureComponent, Fragment } from 'react';
import { ScrollView, TouchableOpacity, Text } from 'react-native';
import { DrawerItems, SafeAreaView, withNavigation } from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons';
import styles from './styles';
class BurguerMenu extends PureComponent {
render() {
const { navigation } = this.props;
return (
<SafeAreaView style={styles.container} forceInset={{ top: 'always', horizontal: 'never' }}>
<ScrollView style={styles.container}>
<DrawerItems {...this.props} />
</ScrollView>
<TouchableOpacity
style={styles.buttonContainer}
onPress={() => navigation.navigate('SignIn')}
>
<Fragment>
<Icon name="md-log-out" style={styles.buttonIcon} />
<Text style={styles.buttonText}>Logout</Text>
</Fragment>
</TouchableOpacity>
</SafeAreaView>
);
}
}
export default withNavigation(BurguerMenu);
import React from 'react';
import { Platform } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import {
createStackNavigator,
createBottomTabNavigator,
createSwitchNavigator,
createDrawerNavigator,
StackViewTransitionConfigs,
} from 'react-navigation';
import SignIn from 'pages/signIn';
import SignUp from 'pages/signUp';
import PasswordReset from 'pages/passwordReset';
import Detail from 'pages/detail';
import Home from 'pages/home';
import Loading from 'pages/loading';
import Options from 'pages/options';
import Settings from 'pages/settings';
import BurguerMenu from 'components/BurguerMenu';
const IOS_MODAL_ROUTES = ['Options'];
const dynamicModalTransition = (
transitionProps, prevTransitionProps,
) => StackViewTransitionConfigs.defaultTransitionConfig(
transitionProps,
prevTransitionProps,
IOS_MODAL_ROUTES.some(
screenName => screenName === transitionProps.scene.route.routeName
|| (prevTransitionProps && screenName === prevTransitionProps.scene.route.routeName),
),
);
const HomeStack = createStackNavigator(
{ Detail, Home, Options },
{
initialRouteName: 'Home',
transitionConfig: dynamicModalTransition,
},
);
HomeStack.navigationOptions = ({ navigation }) => {
let tabBarVisible = true;
if (navigation.state.index > 0) {
tabBarVisible = false;
}
let drawerLockMode = 'unlocked';
if (navigation.state.index > 0) drawerLockMode = 'locked-closed';
return {
tabBarLabel: 'Home',
tabBarIcon: ({ tintColor }) => <Icon name="ios-home" color={tintColor} />,
tabBarVisible,
drawerLockMode,
drawerLabel: 'Home',
drawerIcon: ({ tintColor }) => <Icon name="md-home" color={tintColor} />,
};
};
const SettingsStack = createStackNavigator({ Settings });
SettingsStack.navigationOptions = {
tabBarLabel: 'Settings',
tabBarIcon: ({ tintColor }) => <Icon name="ios-cog" color={tintColor} />,
drawerLabel: 'Settings',
drawerIcon: ({ tintColor }) => <Icon name="md-cog" color={tintColor} />,
};
const MainNavigator = Platform.select({
ios: createBottomTabNavigator({ HomeStack, SettingsStack }),
android: createDrawerNavigator({ HomeStack, SettingsStack }, { contentComponent: BurguerMenu }),
});
const LoginStack = createStackNavigator({ SignIn, PasswordReset });
LoginStack.navigationOptions = ({ navigation }) => {
let tabBarVisible = true;
if (navigation.state.index > 0) {
tabBarVisible = false;
}
return {
tabBarLabel: 'SignIn',
tabBarIcon: ({ tintColor }) => {
const iconName = Platform.select({ ios: 'ios-log-in', android: 'md-log-in' });
return <Icon name={iconName} color={tintColor} />;
},
tabBarVisible,
};
};
const SignUpStack = createStackNavigator({ SignUp });
SignUpStack.navigationOptions = {
tabBarLabel: 'SignUp',
tabBarIcon: ({ tintColor }) => {
const iconName = Platform.select({ ios: 'ios-log-out', android: 'md-log-out' });
return <Icon name={iconName} color={tintColor} />;
},
};
const AuthTabs = createBottomTabNavigator({ LoginStack, SignUpStack });
const Routes = createSwitchNavigator(
{ Loading, AuthTabs, MainNavigator },
{ initialRouteName: 'AuthTabs' },
);
export default Routes;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.