How to use navigator with react native side menu ? about react-native-side-menu HOT 7 CLOSED

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

var React = require('react-native');
var SideMenu = require('react-native-side-menu');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Navigator,
} = React;

var ContentView = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
});

var TestView = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to another page.
        </Text>
        <Text style={styles.instructions}>
          Testing react native side menu with navigator.
        </Text>
      </View>
    );
  }
});

var Menu = React.createClass({
  about: function() {
    this.props.menuActions.close();
    this.props.parentRef.setState({fragmentId: 'testview'});
  },

  render: function() {
    return (
      <View style={styles.sidemenu}>
        <Text style={styles.paddingMenuItem}>Menu</Text>
        <Text onPress={this.about} style={styles.paddingMenuItem}>About</Text>
      </View>
    );
  }
});

var SideMenuTest = React.createClass({
  getInitialState: function() {
    return {
      fragmentId: 'contentview',
    };
  },
  render: function() {
    var menu = <Menu parentRef={this} />;
    var fragment;
    if(this.state.fragmentId === 'testview') {
      fragment = <TestView/>;
    } else {
      fragment = <ContentView/>;
    }
    return (
      <SideMenu menu={menu}>
        {fragment}
      </SideMenu>
    );
  }
});

var Something = React.createClass({
  render: function() {
    var menu = <Menu navigator={this.props.navigator}/>;
    return (
      <SideMenu menu={menu}>
        <ContentView/>
      </SideMenu>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  sidemenu: {
    paddingTop: 50,
  },
  paddingMenuItem: {
    padding: 10,
  },
});

AppRegistry.registerComponent('SideMenuTest', () => SideMenuTest);

import React from 'react';
import {connect} from 'react-redux';
import Icon from 'react-native-vector-icons/Octicons';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  ScrollView,
  RefreshControl,
  Navigator,
  Alert,
  Button,
  Picker,
  Image
} from 'react-native';

import {unauthUser, getTodos, deleteTodo, setTodos, PgetTodos, NgetTodos} from '../actions';
import NewTodo from './NewTodo';
import Navbar from './shared/Navbar';
import EditTodo from './EditTodo';
import TodoItem from './TodoItem';
import SideMenu from 'react-native-side-menu';
import Menu from '../components/Menu.js';


class TodoList extends React.Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);

    this.state = {
      isOpen: false,
      selectedItem: 'TodoList',
      refreshing: false
    };
  }

  toggle() {
    this.setState({
      isOpen: !this.state.isOpen,
    });
  }

  updateMenuState(isOpen) {
    this.setState({ isOpen });
  }

  onMenuItemSelected = item =>
    this.setState({
      isOpen: false,
      selectedItem: item,
    });


  componentWillMount() {
    this.onRefresh();
  }

  onLogout = () => {
    this.props.dispatch(setTodos([]));
    this.props.dispatch(unauthUser);
  };

  addNewTodo = () => {
    this.props.navigator.push({
      component: NewTodo,
      title: 'New Todo',
      navigationBarHidden: true
    })
  };

  editTodo = (title, description, category_route, building, related_entity, location, contact, contact_no, your_ref, attachment, created_by, ticket_id) => {
    this.props.navigator.push({
      component: EditTodo,
      title: 'Edit Todo',
      navigationBarHidden: true,
      passProps: { title: title, description: description, category_route: category_route, building: building, related_entity: related_entity, location:location, contact:contact, contact_no:contact_no, your_ref:your_ref, attachment:attachment, created_by:created_by, ticket_id:ticket_id }
    })
  };

  onRefresh = () => {
    this.setState({refreshing: true});
    this.props.dispatch(getTodos).then(() => {
      this.setState({refreshing: false});
    })
  };

  prevPage = () => {
    this.setState({refreshing: true});
    this.props.dispatch(PgetTodos).then(() => {
      this.setState({refreshing: false});
    })
  };

  nextPage = () => {
    this.setState({refreshing: true});
    this.props.dispatch(NgetTodos).then(() => {
      this.setState({refreshing: false});
    })
  };

  render() {
    //console.log("todos", this.props.todos);
    /*
        <View style={styles.bottomBar}>
        <TouchableOpacity onPress={this.prevPage}>
            <Icon name="arrow-left" size={20} color="white"/>
        </TouchableOpacity>
        <Picker 
          style={styles.centreBar}
          selectedValue={this.state.page}
          onValueChange={(cli) => this.setState({page: cli})}>
          {this.props.todos.map((l, i) => {return <Picker.Item value={l} label={"" + (i+1)} key={i}  /> })}
        </Picker>
        <TouchableOpacity onPress={this.onRefresh}>
            <Icon name="arrow-right" size={20} color="white"/>
        </TouchableOpacity>
        </View>
        */

    var renderTodos = () => {
      return this.props.todos.map((todo) => {
        return (
          <TouchableOpacity onPress={ () => this.editTodo(todo.title, todo.description, todo.category_route, todo.building, todo.related_entity, todo.location, todo.contact, todo.contact_no, todo.your_ref, todo.attachment, todo.created_by, todo.id)} key={todo.id} text={todo.title} id={todo.id}>
            <TodoItem key={todo.id} text={todo.title} id={todo.id}/>
          </TouchableOpacity>
        )
      })
    }

    const menu = <Menu onItemSelected={this.onMenuItemSelected} />;
    return (
      <SideMenu menu={menu}
      isOpen={this.state.isOpen}
      onChange={isOpen => this.updateMenuState(isOpen)}>
      <View style={styles.container}>
        <View style={styles.topBar}>
          <TouchableOpacity onPress={this.onLogout}>
            
          </TouchableOpacity>
          <Text style={styles.title}>
            Work Request List
          </Text>
          <TouchableOpacity onPress={this.onLogout}>
            <Icon name="chevron-left" size={20} color="white"/> 
          </TouchableOpacity>
          <TouchableOpacity onPress={this.addNewTodo}>
            <Icon name="plus" size={20} color="white"/>
          </TouchableOpacity>
        </View>
        <ScrollView
          onScroll={this.handleScroll}
          refreshControl={
            <RefreshControl
              refreshing={this.state.refreshing}
              onRefresh={this.onRefresh}/>
          }
          automaticallyAdjustContentInsets={false}
          contentContainerStyle={styles.scrollViewContainer}>
          {renderTodos()}
        </ScrollView>
        <Text style={[styles.instructions, { color: 'red' }]}>
          Current selected menu item is: {this.state.selectedItem}
        </Text>
      </View>
      <TouchableOpacity
        onPress={this.toggle.bind(this)}
        style={styles.button}
      >
      <Icon name="three-bars" size={20} color="white"/>
      </TouchableOpacity>
      </SideMenu>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'stretch',
  },
  topBar: {
    padding: 16,
    paddingTop: 40,
    paddingBottom: 8,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor: '#2ecc71'
  },
  bottomBar: {
    padding: 16,
    paddingTop: 10,
    paddingBottom: 8,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor: '#2ecc71'
  },
  centreBar: {
    padding: 100,
    paddingTop: 10,
    paddingBottom: 8,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF'
  },
  title: {
    color: 'white',
    fontSize: 20,
    justifyContent: 'center', 
    alignItems: 'center'
  },
  todoContainer: {
    padding: 16,
    borderTopWidth: 1,
    borderBottomWidth: 1,
    marginTop: -1,
    borderColor: '#ccc',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  button: {
    position: 'absolute',
    top: 20,
    padding: 10,
  },
});

var mapStateToProps = (state) => {
  return {
    todos: state.todos
  }
}

module.exports = connect(mapStateToProps)(TodoList);

import React from 'react';
import {connect} from 'react-redux';
import Icon from 'react-native-vector-icons/Octicons';
import {
  Dimensions,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  ScrollView,
  RefreshControl,
  Navigator,
  Alert,
  Button,
  Picker,
  Image
} from 'react-native';
import PropTypes from 'prop-types';

import {unauthUser, getTodos, deleteTodo, setTodos, PgetTodos, NgetTodos} from '../actions';
import NewTodo from './NewTodo';
import Navbar from './shared/Navbar';
import EditTodo from './EditTodo';
import TodoItem from './TodoItem';
import TodoList from './TodoList';
import Login from './Login';

const window = Dimensions.get('window');
const uri = 'https://pickaface.net/gallery/avatar/Opi51c74d0125fd4.png';

const styles = StyleSheet.create({
  menu: {
    flex: 1,
    width: window.width,
    height: window.height,
    padding: 0,
  },
  avatarContainer: {
    marginBottom: 20,
    marginTop: 20,
  },
  avatar: {
    width: 48,
    height: 48,
    borderRadius: 24,
    flex: 1,
  },
  name: {
    position: 'absolute',
    left: 70,
    top: 20,
  },
  item: {
    fontSize: 14,
    fontWeight: '300',
    paddingTop: 5,
  },
});

addNewTodo = () => {
  this.props.navigator.push({
    component: NewTodo,
    title: 'New Todo',
    navigationBarHidden: true
  })
};

export default function Menu({ onItemSelected, Create, LogOut }) {
  return (
    <ScrollView scrollsToTop={false} style={styles.menu}>
      <Text
        onPress={this.addNewTodo}
        style={styles.item}
      >
        NewTodo 
      </Text>

      <Text
        onPress={() => onItemSelected('TodoList')}
        style={styles.item}
      >
        TodoList 
      </Text>

      <Text
        onPress={() => onItemSelected('Logout')}
        style={styles.item}
      >
        Login 
      </Text>
    </ScrollView>
  );
}

Menu.propTypes = {
  onItemSelected: PropTypes.func.isRequired,
};