Comments (2)
I tried it and now working correctly 👍 with new code.
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
Navigator,
ScrollView,
} = React;
var { Icon, } = require('react-native-icons');
var SideMenu = require('react-native-side-menu');
var NavigationBar = require('react-native-navbar');
// require the module
var KeyboardEvents = require('react-native-keyboardevents');
// Now get a handle on the event emitter and add your callbacks
// to the desired events.
var KeyboardEventEmitter = KeyboardEvents.Emitter;
// Each event will receive a `frames` object, which contains three keys -
// `begin`, `end`, and `duration` . The `begin` and `end` keys each
// contain an object describing the bounds of the keyboard (x, y, width
// and height). The `duration` key contains the length of the keyboard
// animation in seconds.
// The frame in `begin` describes the bounds of the keyboard before the
// animation occurred and the frame in `end` describes the bounds the keyboard
// will have, after the animation has completed.
KeyboardEventEmitter.on(KeyboardEvents.KeyboardWillShowEvent, (frames) => {
console.log('will show', frames);
});
KeyboardEventEmitter.on(KeyboardEvents.KeyboardDidShowEvent, (frames) => {
console.log('did show', frames);
});
KeyboardEventEmitter.on(KeyboardEvents.KeyboardWillHideEvent, (frames) => {
console.log('will hide', frames);
});
KeyboardEventEmitter.on(KeyboardEvents.KeyboardDidHideEvent, (frames) => {
console.log('did hide', frames);
});
KeyboardEventEmitter.on(KeyboardEvents.KeyboardWillChangeFrameEvent, (frames) => {
console.log('will change', frames);
});
KeyboardEventEmitter.on(KeyboardEvents.KeyboardDidChangeFrameEvent, (frames) => {
console.log('did change', frames);
});
// Start of the Layout
var Menu = React.createClass({
about: function() {
this.props.menuActions.close();
// this.props.navigator.push({...});
},
render: function() {
return (
<View>
<Text>Menu</Text>
<Text onPress={this.about}>About</Text>
</View>
);
}
});
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>
<Icon
name='fontawesome|facebook-square'
size={70}
color='#3b5998'
style={styles.facebook}
/>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
);
}
});
// App Initialization with the Sidebar
var Docit = React.createClass({
render: function() {
var menu = <Menu navigator={navigator}/>;
return (
<SideMenu menu={menu}>
<NavigationBarView/>
</SideMenu>
);
}
});
// Navigation with Content View
var NavigationBarView = React.createClass({
renderScene: function(route, navigator) {
var Component = route.component;
var navBar = route.navigationBar;
if (navBar) {
navBar = React.addons.cloneWithProps(navBar, {
navigator: navigator,
route: route
});
}
return (
<View style={styles.navigator}>
{navBar}
<Component navigator={navigator} route={route} />
</View>
);
},
render: function() {
return (
<Navigator
style={styles.navigator}
renderScene={this.renderScene}
initialRoute={{
component: ContentView,
navigationBar: <NavigationBar title="Initial View"/>
}}
/>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FC33',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
facebook: {
width: 70,
height: 70,
margin: 10
},
navigator: {
flex: 1,
},
});
AppRegistry.registerComponent('Docit', () => Docit);
from react-native-side-menu.
@piyushchauhan2011 Did you get the this.props.navigator.push({}) to work for you? I used your code and can't get it to work.
from react-native-side-menu.
Related Issues (20)
- OpenMenuOffset not working in production.
- Where did the Menu tags come from? HOT 2
- Hardware Back closes App on every scene in side menu
- Sample code does not work HOT 1
- Shadow/Elevation possibility feature request HOT 1
- undefined is not a function (near '..._react2.default.createClass...') Why am i getting this error ?
- TypeError Undefined is not a function (evaluating _firebase.default.initialize app) HOT 1
- SideMenu is visible below the component it is rendered on HOT 6
- 1 to 2 second delay when toggling menu HOT 3
- Crash on iOS when app built in release, works in debug HOT 3
- Is react-native-web supported? HOT 2
- All API props are not available in v1.1.3
- autoClosing prop does not work
- Use native driver for the animation HOT 4
- Side Menu stuck on android device, i can not click any where. it always appear at the left side of the screen and ovellaping the main screen content HOT 1
- Change style overlay
- componentWillMount has been renamed, and is not recommended for use HOT 1
- align problem when phone language is Arabic HOT 3
- Can we get a new release please? HOT 15
- Warnings HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-side-menu.