Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, { Component } from 'react';
- import {
- TouchableHighlight,
- View,
- ScrollView,
- Image,
- Platform,
- StyleSheet,
- } from 'react-native';
- import {
- RkStyleSheet,
- RkText,
- RkTheme,
- } from 'react-native-ui-kitten';
- import Icon from 'react-native-vector-icons/Ionicons';
- import Routes from '../../config/navigation/routes';
- import logo from '../../assets/smallLogo.png';
- export default function SideNavigation(props) {
- const onMenuItemPressed = item => {
- props.navigation.navigate(item.id);
- };
- const renderIcon = () => (<Image style={styles.image} source={logo}/>);
- const renderMenuItem = item => (
- <TouchableHighlight style={styles.container} key={item.id} underlayColor={RkTheme.current.colors.button.underlay} activeOpacity={1} onPress={() => onMenuItemPressed(item)}>
- <View style={styles.content}>
- <View style={styles.content}>
- <RkText style={styles.icon} rkType='moon primary xlarge'><Icon name={item.icon} size={25}/></RkText>
- <RkText rkType='regular'>{item.title}</RkText>
- </View>
- {/*<RkText rkType='awesome secondaryColor small'>{FontAwesome.chevronRight}</RkText>*/}
- </View>
- </TouchableHighlight>
- );
- const renderMenu = () => Routes.map(renderMenuItem);
- return (
- <View style={styles.root}>
- <ScrollView showsVerticalScrollIndicator={false}>
- <View style={[styles.container, styles.content]}>
- {renderIcon()}
- </View>
- {renderMenu()}
- </ScrollView>
- </View>
- )
- }
- const styles = RkStyleSheet.create(theme => ({
- container: {
- height: 60,
- paddingHorizontal: 16,
- borderTopWidth: StyleSheet.hairlineWidth,
- borderColor: theme.colors.border.base,
- },
- root: {
- paddingTop: Platform.OS === 'ios' ? 20 : 0,
- backgroundColor: theme.colors.screen.base
- },
- content: {
- flex: 1,
- flexDirection: 'row',
- alignItems: 'center',
- },
- icon: {
- marginRight: 13,
- },
- image:{
- resizeMode: 'contain',
- maxWidth: 125
- }
- }));
- import React, {Component} from 'react';
- import { View, Text} from 'react-native';
- import Login from './screens/login';
- import PasswordRecovery from './screens/passwordRecovery';
- import Home from './screens/home';
- import SideNavigator from './components/sideMenu';
- import { bootstrap } from './config/bootstrap';
- import {
- createDrawerNavigator,
- createStackNavigator,
- createAppContainer
- } from 'react-navigation';
- import { withRkTheme } from 'react-native-ui-kitten';
- import NavBar from './components/navBar';
- import AppRoutes from './config/navigation/routesBuilder';
- import Splash from './screens/splash';
- bootstrap();
- const renderHeader = (navigation, props) => {
- const ThemedNavigationBar = withRkTheme(NavBar);
- return (
- <ThemedNavigationBar navigation={navigation} headerProps={props} />
- );
- };
- const App = createStackNavigator({
- Splash: Splash,
- Login: Login,
- PasswordRecovery: PasswordRecovery,
- Main: createDrawerNavigator({
- ...AppRoutes
- },{
- contentComponent: props => {
- const SideNav = withRkTheme(SideNavigator);
- return <SideNav {...props}/>
- }
- }),
- },
- {
- headerMode: 'none',
- })
- export default createAppContainer(App);
- import React from 'react';
- import _ from 'lodash';
- import { createStackNavigator } from 'react-navigation';
- import { withRkTheme } from 'react-native-ui-kitten';
- import transition from './transitions';
- import Routes from './routes';
- import NavBar from '../../components/navBar';
- const main = {};
- const flatRoutes = {};
- const routeMapping = (route) => ({
- screen: withRkTheme(route.screen),
- title: route.title,
- });
- (Routes).forEach(route => {
- flatRoutes[route.id] = routeMapping(route);
- main[route.id] = routeMapping(route);
- route.children.forEach(nestedRoute => {
- flatRoutes[nestedRoute.id] = routeMapping(nestedRoute);
- });
- });
- const renderHeader = (navigation, props) => {
- const ThemedNavigationBar = withRkTheme(NavBar);
- return (
- <ThemedNavigationBar navigation={navigation} headerProps={props} />
- );
- };
- const DrawerRoutes = Object.keys(main).reduce((routes, name) => {
- const rawRoutes = routes;
- rawRoutes[name] = {
- name,
- screen: createStackNavigator(flatRoutes, {
- initialRouteName: name,
- headerMode: 'screen',
- cardStyle: { backgroundColor: 'transparent' },
- transitionConfig: transition,
- defaultNavigationOptions: ({ navigation }) => ({
- gesturesEnabled: false,
- header: (props) => renderHeader(navigation, props),
- }),
- }),
- };
- return rawRoutes;
- }, {});
- const AppRoutes = DrawerRoutes;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement