How to implement slider menu in react Native - ios

I'm new to react.
I need to develop slider menu in React-native.
I follow below link but that is not I want
http://www.reactnative.com/a-slide-menu-inspired-from-android-for-react-native/
Actually I need image which I attached here.
Please help me..

This react native package is pretty extensive, and really nice to use:
https://github.com/root-two/react-native-drawer
This is just a snippet of my code, you could create a menu bar with a button that calls the openDrawer method, and using this drawer you can set the animation to be however you like, and include a scrollview inside the drawer itself. Hope this helps!
var React = require('react-native');
var {
StyleSheet,
Component,
View,
Text,
Navigator,
TouchableHighlight,
TouchableOpacity,
} = React;
var styles = require('./styles');
var Drawer = require('react-native-drawer')
var drawerStyles = {
drawer: {
shadowColor: "#000000",
shadowOpacity: 0.8,
shadowRadius: 0,
}
}
var MainPage = React.createClass({
getInitialState: function(){
return {
drawerType: 'overlay',
openDrawerOffset:.3,
closedDrawerOffset:0,
panOpenMask: .1,
panCloseMask: .9,
relativeDrag: false,
panStartCompensation: true,
openDrawerThreshold: .25,
tweenHandlerOn: false,
tweenDuration: 550,
tweenEasing: 'easeInOutQuad',
disabled: false,
tweenHandlerPreset: null,
acceptDoubleTap: true,
acceptTap: true,
acceptPan: true,
rightSide: false,
showView: true,
}
},
setDrawerType: function(type){
this.setState({
drawerType: type
});
},
openDrawer: function(){
this.refs.drawer.open();
},
closeDrawer: function(){
this.refs.drawer.close();
},
setStateFrag: function(frag){
this.setState(frag);
},
render: function() {
var menu = <Menu
closeDrawer={this.closeDrawer}
navigator={this.props.navigator} />;
return (
<Drawer
ref="drawer"
onClose={this.onClose}
type={this.state.drawerType}
animation={this.state.animation}
openDrawerOffset={this.state.openDrawerOffset}
closedDrawerOffset={this.state.closedDrawerOffset}
panOpenMask={this.state.panOpenMask}
panCloseMask={this.state.panCloseMask}
relativeDrag={this.state.relativeDrag}
panStartCompensation={this.state.panStartCompensation}
openDrawerThreshold={this.state.openDrawerThreshold}
content={**YOURCUSTOMENU**}
styles={drawerStyles}
disabled={this.state.disabled}
tweenHandler={this.tweenHandler}
tweenDuration={this.state.tweenDuration}
tweenEasing={this.state.tweenEasing}
acceptDoubleTap={this.state.acceptDoubleTap}
acceptTap={this.state.acceptTap}
acceptPan={this.state.acceptPan}
changeVal={this.state.changeVal}
negotiatePan={false}
side={this.state.rightSide ? 'right' : 'left'}
>
<View>
<**YOURTOOLBAR** onPress={this.openDrawer}/>
<**YOURCONTENT_VIEW**/>
</View>
</Drawer>
);
},
});
module.exports = MainPage;

I've added an example that implements react-native-router-flux component to react-native-drawer. In this way it presents an easy scaffolding as cross-platform.

From what I understand, you want to toogle the slider menu with the hamburger button.
Although react-native-navigation-drawer
That can be achieved with the toogleSlideMenu function of the SliderMenu.
A simple example might be:
import React, {
View,
Text,
ScrollView,
} from 'react-native';
import SlideMenu from 'react-native-navigation-drawer';
var BasicExample = React.createClass({
render() {
return (
<View style={styles.container}>
<View>
<Text onPress={() => this._slideMenu.toogleSlideMenu()}> Your status bar </Text>
</View>
<SlideMenu
ref={(c) => this._slideMenu = c}
menu={<Menu />}
>
<View>
<Text>Your content</Text>
</View>
</SlideMenu>
</View>
);
}
});
var Menu = React.createClass({
render() {
return (
<View style={styles.container}>
<ScrollView
contentContainerStyle={styles.contentContainer}
style={styles.scrollView}>
<Text>Gallery</Text>
<Text>Latest</Text>
<Text>Events</Text>
<Text>Update</Text>
</ScrollView>
</View>
);
}
});

You can check this complete sidemenu project on github. This project contains ToolbarAndroid, routes, DrawerLayoutAndroid, overflow menu and other components.
https://github.com/darde/react-native-sidemenu

Related

React native listview add item not working

I am new to react native and I was implemented a simple idea in my head. Basically, I am doing a 'todo list' like component which theres a add button below and items can be added. The problem arises after clicking on the add button and the list gets updated and the following xcode warning message appears. And I have realised, after implementing the ListView, that the app in the simulator slows down so much i couldn't even inspect. The alert popup would freeze the UI after some text are entered too, and the entire app needs to be built again since I couldn't do anything. Thanks for all the help!
Main component: SurveyQn
'use strict'
import React, {
Component,
StyleSheet,
Text,
TouchableHighlight,
TextInput,
View,
ListView,
AlertIOS
} from 'react-native';
var LongButton = require('./LongButton.js');
class SurveyQn extends Component {
constructor(props) {
super(props);
this.state = {
options: [{option: 'Pizza'}],
};
}
componentWillMount() {
this.dataSource = new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2
})
}
_renderItem(item) {
return (
<LongButton
text={item.option}
onPress={() => {}}
//btnViewStyle={styles.buttonView}
//btnTextStyle={styles.buttonText}
/>
);
}
_addItem() {
AlertIOS.alert(
'Add new option',
null,
[
{
text: 'Add',
onPress: (text) => {
var options = this.state.options;
options.push({option: text})
this.setState({ options: options})
}
},
],
'plain-text'
);
}
render(){
var dataSource = this.dataSource.cloneWithRows(this.state.options);
return (
<View style={styles.container}>
<TextInput
style={styles.question}
placeholder="Question title"
placeholderTextColor="#4B667B"
selectionColor="#4B667B"
onChangeText={(text) => this.setState({text})}/>
<View style={styles.listView}>
<ListView
dataSource={dataSource}
renderRow={this._renderItem.bind(this)}/>
</View>
<TouchableHighlight
onPress={this._addItem.bind(this)}
style={styles.buttonView}
underlayColor='rgba(0,0,0,0)'>
<Text style={styles.buttonText}>
Add option
</Text>
</TouchableHighlight>
</View>
);
}
}
var styles = StyleSheet.create({
container: {
width: 300,
flex :1,
},
listView: {
flex: 1,
},
question: {
height: 30,
fontSize: 20,
fontWeight: "100",
color: '#4B667B',
marginTop: 10,
marginBottom: 10,
},
buttonView: {
width: 300,
paddingVertical: 9,
borderWidth: 1,
borderColor: '#F868AF',
marginBottom: 13,
},
buttonText: {
textAlign: 'center',
fontSize: 25,
color: '#F868AF',
fontWeight: '500'
},
});
ListView item: LongButton
'use strict'
import React, {
Component,
StyleSheet,
Text,
TouchableHighlight,
View,
} from 'react-native';
class LongButton extends Component {
render(){
return (
<TouchableHighlight
onPress={this.props.onPress}
style={this.props.btnViewStyle}
underlayColor='rgba(0,0,0,0)'>
<Text style={this.props.btnTextStyle}>
{this.props.text}
</Text>
</TouchableHighlight>
);
}
}
module.exports = LongButton;
Xcode warning message upon adding item on alert
app[27881:11151280] the behavior of the UICollectionViewFlowLayout is not defined because:
app[27881:11151280] the item height must be less than the height of the UICollectionView minus the section insets top and bottom values, minus the content insets top and bottom values.
app[27881:11151280] The relevant UICollectionViewFlowLayout instance is <_UIAlertControllerCollectionViewFlowLayout: 0x7ff0685b1770>, and it is attached to ; layer = ; contentOffset: {0, 0}; contentSize: {0, 0}> collection view layout: <_UIAlertControllerCollectionViewFlowLayout: 0x7ff0685b1770>.
2016-04-06 07:50:01.545 decisionapp[27881:11151280] Make a symbolic breakpoint at UICollectionViewFlowLayoutBreakForInvalidSizes to catch this in the debugger.
Updates:
I tried this but its not working either. Could it be the alert causing these problems? Its just taking forever to render the alert after clicking on the btn.
class SurveyQn extends Component {
constructor(props) {
super(props);
this.state = {
options: [{option: 'Pizza'}],
dataSource : new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2
})
};
}
componentWillMount() {
var data = this.state.options;
this.state.dataSource.cloneWithRows(data);
}
_renderItem(item) {
return (
{item.option}
);
}
_addItem() {
AlertIOS.alert(
'Add new option',
null,
[
{
text: 'Add',
onPress: (text) => {
var options = this.state.options;
options.push({option: text})
this.setState({ options: options})
}
},
],
'plain-text'
);
}
render(){
return (
<View style={styles.listView}>
<ListView
dataSource={this.state.dataSource}
renderRow={this._renderItem.bind(this)}/>
</View>
<TouchableHighlight
onPress={this._addItem.bind(this)}
style={styles.buttonView}
underlayColor='rgba(0,0,0,0)'>
<Text style={styles.buttonText}>
Add option
</Text>
</TouchableHighlight>
</View>
);
}
}
Before diving into complex EcmaScript notation, you can use simple notation. Here is a simple example of ListView. Please go through it and understand how it works.
var API = require('./API');
module.exports = React.createClass({
getInitialState: function(){
return {
rawData: [],
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2
}),
loaded: false,
}
},
componentWillMount: function(){
this.loadData();
},
loadData: function(){
API.getItems()
.then((data) => {
this.setState({
rawData: this.state.rawData.concat(data),
dataSource: this.state.dataSource.cloneWithRows(data),
loaded: true,
});
});
},
render: function(){
return(
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderItem}
style={styles.listView}>
</ListView>
);
},
renderItem: function(item){
return (
<View>
<Text>Custom Item</Text>
</View>
);
},
}
In API.js, I am fetching data from an API.
getItems: function(){
var REQUEST_URL = 'http://api.example.org/item/get?api_key=xxxx;
return fetch(REQUEST_URL)
.then((response) => response.json())
.then((responseData) => {
return responseData.results.sort(sortByDate);
});
}
The code may not work, since I have not tested. But you can refer my sample project on github. Repo

React native button click move to another screen

I'm new to react native.I need simple scenario in here by click button go to new screen.
React native button click move to another screen
I tried this
<TouchableHighlight
onPress={this.register}
style={styles.button1}>
<Text style={styles.buttontext1}>
Registration
</Text>
</TouchableHighlight>
register(){
//What should I write in here to go to a new layout.
}
Example:
write next code to index.ios.js
'use strict';
import React, {
AppRegistry,
Component,
StyleSheet,
View,
NavigatorIOS
} from 'react-native';
var rootPage = require('./root.IOS')
var client = React.createClass({
render() {
return (
<NavigatorIOS
style = {styles.container}
initialRoute={{
title: "Root",
navigationBarHidden: true,
component:rootPage
}}/>
);
}
});
const styles = StyleSheet.create({
container: {
flex: 1,
}
});
AppRegistry.registerComponent('client', () => client);
in file "root.IOS.js"
'use strict';
import React, {
StyleSheet,
View,
TouchableHighlight,
Text,
Dimensions,
} from 'react-native';
var NextPage = require('./nextPage.IOS.js');
var rootPage = React.createClass({
goDerper: function() {
this.props.navigator.push({
title: 'nextPage',
component: NextPage,
navigationBarHidden: true,
passProps: {myElement: 'text'}
});
},
render: function(){
return(
<View style={styles.container}>
<TouchableHighlight
onPress={() => this.goDerper()}>
<Text>We must go derper</Text>
</TouchableHighlight>
</View>
);
}
})
var styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 20
}
});
module.exports = rootPage;
this code in file "nextPage.IOS.js"
'use strict';
var React = require('react-native');
var {
StyleSheet,
View,
Text,
} = React;
var Register = React.createClass({
render: function() {
return (
<View style={styles.container}>
<Text style={styles.text}>My value: {this.props.myElement}</Text>
<Text>any text</Text>
</View>
);
}
})
var styles = StyleSheet.create({
container: {
flex: 1
}
});
module.exports = nextPage;
You need to set up a navigator component, and use the navigator.push function. This answer should walk you through it.
If you want it simple, you can use this package : https://github.com/react-native-simple-router-community/react-native-simple-router

Component won't render within NavigatorIOS - React Native

I can't get this simple NavigatorIOS test to work. The console log in My View triggeres, and I can get it to render if I skip the NavigatorIOS component, and render MyView directly. However, when MyView is triggered from a component within the NavigatorIOS component, it won't render anything else than 'My NavigatorIOS test'.
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
NavigatorIOS,
Text,
View,
} = React;
var navigation = React.createClass ({
render: function() {
return (
<NavigatorIOS
initialRoute={{
component: MyView,
title: 'My NavigatorIOS test',
passProps: { myProp: 'foo' },
}}/>
);
},
});
var MyView = React.createClass({
render: function(){
console.log('My View render triggered');
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Hello there, welcome to My View
</Text>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
}
});
AppRegistry.registerComponent('navigation', () => navigation);
I had a similar problem. I added the following to my Stylesheet:
...
wrapper: {
flex: 1,
}...
and then gave the NavigatorIOS component the wrapper style. That fixed the issue.
Add the container style to NavigatorIOS, it needs to be flex:1 to show the child component properly ( I had the same issue).
I ran into the same issue, my mistake was in the styles :
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
});
I had to remove justifyContent and alignItems from there. Problem solved for me.
I had the same issue. Turned out I had to add some margin to the top of the view inside the MyView component.
Try this:
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
NavigatorIOS,
Text,
View,
} = React;
var navigation = React.createClass ({
render: function() {
return (
<NavigatorIOS
style={styles.container}
initialRoute={{
component: MyView,
title: 'My NavigatorIOS test',
passProps: { myProp: 'foo' },
}}/>
);
},
});
var MyView = React.createClass({
render: function(){
console.log('My View render triggered');
return (
<View style={styles.wrapper}>
<Text style={styles.welcome}>
Hello there, welcome to My View
</Text>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
},
wrapper: {
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
marginTop: 80
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
}
});
AppRegistry.registerComponent('navigation', () => navigation);
I meet the same problem. For me, that is the style problem. I create and use a new style property containerNV for NavigatorIOS. That solved my problem.
var styles = StyleSheet.create({
containerNV: {
flex: 1,
backgroundColor: '#05FCFF',
}
});
I had a similar issue too (stupidly) as I'd given the NavigatorIOS a background colour, which meant it covered up the actual component inside it for some reason.
I had a similar issue when I use Navigator , and nothing help of up answers.
So I use this.forceUpdate(); to force Update in button press function
Had the same issue. Nothing was rendering inside my main screen. After 2 hours I decided to remove the <View> element I was wrapping my navigator with, and suddenly everything worked.
In a nutshell, I went from this:
<View>
<NavigatorIOS
style={styles.container}
initialRoute={{
component: MainPage,
title: 'MainPage',
}}/>
</View>
to this
<NavigatorIOS
style={styles.container}
initialRoute={{
component: MainPage,
title: 'MainPage',
}}/>

How to add Right Button in NavigatorIOS in Tabs for React Native

I am trying to add a right button to the Navigation Bar to PUSH a View. I want to do this in a Tab Class. I am using code form the Navigation example but I can't get the Right Button to work. The tab pages are loaded fine but when I click on the Right Button I get the following message:
message: undefined is not an object (evaluating 'this.props.navigator.push')"
Main app.js
'use strict';
var React = require('react-native');
var Tabs = require("./Tabs");
var {AppRegistry} = React;
var App = React.createClass({
render: function () {
return (
<Tabs/>
)
}
});
AppRegistry.registerComponent('App', () => App);
Here is the tabs.js
'use strict';
var React = require('react-native');
var {
NavigatorIOS,
StyleSheet,
TabBarIOS,
Text,
View
} = React;
var TabBarItemIOS = TabBarIOS.Item;
var Search = require("./Search");
var Invites = require("./Invites");
var EmptyPage = React.createClass({
render: function() {
return (
<View style={styles.emptyPage}>
<Text style={styles.emptyPageText}>
{this.props.text}
</Text>
</View>
);
},
});
var TabBarExample = React.createClass({
statics: {
title: '<TabBarIOS>',
description: 'Tab-based navigation.'
},
getInitialState: function() {
return {
selectedTab: 'redTab',
notifCount: 0,
presses: 0,
};
},
render: function() {
return (
<TabBarIOS
selectedTab={this.state.selectedTab}>
<TabBarItemIOS
name="blueTab"
icon={_ix_DEPRECATED('favorites')}
accessibilityLabel="Blue Tab"
selected={this.state.selectedTab === 'blueTab'}
onPress={() => {
this.setState({
selectedTab: 'blueTab',
});
}}>
<NavigatorIOS
style={styles.natigator}
initialRoute={{
component: Search,
title: Search.title,
}}
/>
</TabBarItemIOS>
<TabBarItemIOS
accessibilityLabel="Red Tab"
name="redTab"
icon={_ix_DEPRECATED('history')}
badgeValue={this.state.notifCount ? String(this.state.notifCount) : null}
selected={this.state.selectedTab === 'redTab'}
onPress={() => {
this.setState({
selectedTab: 'redTab',
notifCount: this.state.notifCount + 1,
});
}}>
<NavigatorIOS
style={styles.natigator}
initialRoute={{
component: Invites,
title: Invites.title,
rightButtonTitle: 'New Invite',
onRightButtonPress: () => {
this.props.navigator.push({
title: "test",
component: EmptyPage,
rightButtonTitle: 'Cancel',
onRightButtonPress: () => {this.props.navigator.pop();}
});}
}}
/>
</TabBarItemIOS>
</TabBarIOS>
);
},
});
var styles = StyleSheet.create({
natigator: {
flex: 1,
},
tabContent: {
flex: 1,
alignItems: 'center',
},
tabText: {
color: 'white',
margin: 50,
},
});
// This is needed because the actual image may not exist as a file and
// is used by the native code to load a system image.
// TODO(nicklockwood): How can this fit our require system?
function _ix_DEPRECATED(imageUri) {
return {
uri: imageUri,
isStatic: true,
};
}
module.exports = TabBarExample;
Something is not right about the Navigation and I do not understand how to load a View and NavigationIOS; It seems that I can only render a class with a View or a Class with a Navigation, but not both.
Any help is appreciated.
The crash is occurring because the this object has no navigator property.
The navigator is passed as a property down to every component inside a NavigatorIOS (in the code you posted that component is Invites), if you need to access it from the current component you can use a ref to point to the NavigatorIOS that you are rendering.
The following piece of code solves this issue by creating a ref to the rendered component (ref="nav") and using it inside both callback functions.
Here you can find out more about it.
<NavigatorIOS
ref="nav"
style={styles.natigator}
initialRoute={{
component: Invites,
title: Invites.title,
rightButtonTitle: 'New Invite',
onRightButtonPress: () => {
this.refs.nav.navigator.push({
title: "test",
component: EmptyPage,
rightButtonTitle: 'Cancel',
onRightButtonPress: () => { this.refs.nav.navigator.pop(); }
});}
}}
/>
I do not understand the second part of the question, could you maybe point out a specific issue?

How to styles view to a ratio like 16:9 in React Native?

I want to let the red view keep ratio 16:9. I try but failed. I know React Native use Flexbox (Reimplement in Javascript), but I don't know how to do this. Thanks.
Here is my Javascript:
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
View,
} = React;
var AwesomeProject = React.createClass({
render: function() {
return (
<View style={styles.container}>
<View style={styles.banner}>
</View>
<View style={styles.items}>
</View>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
},
banner: {
backgroundColor: 'red',
flex: 1,
},
items: {
backgroundColor: 'blue',
flex: 3,
},
});
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
Here is document about Flexbox in React Native:
http://facebook.github.io/react-native/docs/flexbox.html#content
Here is valid style props:
Valid style props: [
"width",
"height",
"top",
"left",
"right",
"bottom",
"margin",
"marginVertical",
"marginHorizontal",
"marginTop",
"marginBottom",
"marginLeft",
"marginRight",
"borderWidth",
"borderTopWidth",
"borderRightWidth",
"borderBottomWidth",
"borderLeftWidth",
"position",
"flexDirection",
"flexWrap",
"justifyContent",
"alignItems",
"alignSelf",
"flex",
"resizeMode",
"backgroundColor",
"borderColor",
"borderRadius",
"tintColor",
"opacity",
"fontFamily",
"fontSize",
"fontWeight",
"fontStyle",
"lineHeight",
"color",
"containerBackgroundColor",
"textAlign",
"writingDirection",
"padding",
"paddingVertical",
"paddingHorizontal",
"paddingTop",
"paddingBottom",
"paddingLeft",
"paddingRight",
"borderTopColor",
"borderRightColor",
"borderBottomColor",
"borderLeftColor",
"overflow",
"shadowColor",
"shadowOffset",
"shadowOpacity",
"shadowRadius",
"transformMatrix",
"rotation",
"scaleX",
"scaleY",
"translateX",
"translateY"
]"
React Native (since 0.40) supports the aspectRatio prop.
You can do:
style={{ aspectRatio: 16/9 }}
See Maintain aspect ratio of image with full width in React Native
You can use on layout function.
class AwesomeProject = extends React.Component<{}> {
constructor(props) {
super(props)
this.state = {width: 0,height:0}
}
onPageLayout = (event) => {
const {width, height} = event.nativeEvent.layout;
this.setState({
width,
height
})
};
render(){
return (
<View style={styles.container}>
<View style={[
styles.banner,
{
height:this.state.width*9/16
}
]}>
</View>
<View style={styles.items}>
</View>
</View>
);
}
});

Resources