I have a feed and a bottom menu which can filter the feed.
When the filter is activated the feed reloads data from the API.
However the root will always render causing the menu to collapse every time.
How can I make it so that the Feed only reloads?
var Main = React.createClass({
getInitialState: function() {
return {
reloadFeedData: false,
};
},
reloadFeedData: function(){
console.log('setting root state')
this.setState({reloadFeedData:true});
},
renderScene: function(route, nav) {
var reload = this.state.reloadFeedData
switch (route.name) {
case 'Feed':
return (
<Feed navigator={nav} reloadFeedData={reload} />
);
default:
return (
<Feed navigator={nav} reloadFeedData={reload} />
);
}
},
render: function() {
console.log('root render');
return (
<View style={styles.container}>
<Navigator
style={styles.navigator}
renderScene={this.renderScene}
initialRoute={{
component: Feed,
}}
/>
<BottomMenu reloadFeedData={this.reloadFeedData} />
</View>
);
}
});
To answer my own question,
the issue was a bad componentWillReceiveProps which triggered on things it shouldnt.
Related
I've got the following (simplified) setup for my PersonScreen, which navigate to AppointmentScreen:
class PersonScreen {
state = {
refreshing: false,
};
_onRefresh = () => {
this.setState({ refreshing: true });
this._fetchStuff()
.then(() => {
this.setState({ refreshing: false });
};
};
render() {
return (
<View style={CONTAINER}>
<ScrollView
keyboardShouldPersistTaps="handled"
refreshControl={<RefreshControl refreshing={refreshing} onRefresh={this._onRefresh} />}
<ListItem
key={ITEM.id}
title={moment(DATETIME).format(FORMAT))}
onPress={() => {
navigation.navigate('AppointmentScreen', {
appointment: ITEM,
refreshParent: this._onRefresh,
});
}
/>
</ScrollView>
</View>
);
}
}
On the AppointmentScreen you make some choices and then to go back the following is performed:
const { refreshParent } = navigation.state.params;
refreshParent();
navigation.goBack();
The only scenario where this does not work is on iOS. It works as long as I go to PersonScreen and refresh. However, if I go from PersonScreen to AppointmentScreen and back it does trigger the refreshParent (which is essentially _onRefresh), but then any attempts to pull down to trigger the RefreshControls onRefresh function fails. I've also added some console.log in the _onRefresh, but it doesn't even output anything.
If my AppointmentScreen instead looks like this:
const { refreshParent } = navigation.state.params;
//refreshParent();
navigation.goBack();
Everything works. So I'm experiencing that somehow calling refreshParent and then going back makes the following _onRefresh from the RefreshControl in PersonScreen not work.
Does anyone have any ideas why this is the case? As mentioned, I only experience this on iOS, but consistently so on iOS simulator and devices.
Can you create an expo version?
also, your refreshing is refreshing={refreshing} it should be refreshing={this.state.refreshing}
In react-native, I want to disable drawer on Login and enable drawer
on Dashboard Screen. I have implemented 'react-native-drawer' with
Navigator to navigate between routes.
render method as follows:
render() {
<Drawer
ref={(ref) => this._drawer = ref}
disabled={!this.state.drawerEnabled}
type="overlay"
content={<Menu navigate={(route) => {
this._navigator.push(navigationHelper(route));
this._drawer.close()
}}/>}
tapToClose={true}
openDrawerOffset={0.2}
panCloseMask={0.2}
closedDrawerOffset={-3}
styles={{
drawer: {shadowColor: '#000000', shadowOpacity: 0.8, shadowRadius: 3},
main: {paddingLeft: 3}
}}
tweenHandler={(ratio) => ({
main: { opacity:(2-ratio)/2 }
})}>
<Navigator
ref={(ref) => this._navigator = ref}
configureScene={(route) => Navigator.SceneConfigs.FloatFromLeft}
initialRoute={{
id: 'Login',
title: 'Login',
index: 0
}}
renderScene={(route, navigator) => this._renderScene(route, navigator)}
navigationBar={
<Navigator.NavigationBar
style={styles.navBar}
routeMapper={NavigationBarRouteMapper} />
}
/>
</Drawer>
);
}
renderScene as follows to navigate the routes:
_renderScene(route, navigator) {
navigator.navigate = self.navigate;
switch (route.id) {
case 'Login':
return ( <Login navigator={navigator}/> );
case 'Dashboard':
return ( <Dashboard navigator={navigator}/> );
}
}
I have written one method to enable and disable drawer in react-native:
navigate(route, method){
if(route)
switch (route.id) {
case 'Login':
this.state = {drawerEnabled: false, navigationBarEnabled: false};
break;
case 'Dashboard':
this.state = {drawerEnabled: true, navigationBarEnabled: true};
break;
}
this.forceUpdate();
this.refs.navigator[method](route);
}
}
Initially I have set property in class and in constructor, navigate method was called.
state = {drawerEnabled:true, navigationBarEnabled: true};
constructor(){
super();
this.navigate = this.navigate.bind(this);
}
Then which would be possible way to disable drawer on Login menu and enable it on Dashboard Screen.
You have to change your _renderScene() method as follows:
_renderScene(route, navigator) {
navigator.navigate = this.navigate;
switch (route.id) {
case 'Login':
return ( <Login navigator={navigator} {...route.passProps} /> );
case 'Dashboard':
return ( <Dashboard navigator={navigator} {...route.passProps} />);
}
}
There is no need of navigate() method, so remove that method. All cases you have to write as your need and for default case you have set it as null. If you are setting null means left and right are disabled on Dashboard page but only title is enable on Dashboard.
You need to write code for left, right and title on toolbar as follows:
const NavigationBarRouteMapper = {
LeftButton(route, navigator, index, navState) {
switch (route.id) {
case 'Dashboard':
return (
<TouchableOpacity
style={styles.navBarLeftButton}
onPress={() => {_emitter.emit('openMenu')}}>
<Icon name='menu' size={25} color={'white'} />
</TouchableOpacity>
)
default:
return null //For setting Dashboard left button null
}
},
RightButton(route, navigator, index, navState) {
switch (route.id) {
case 'Dashboard':
return (
<TouchableOpacity
style={styles.navBarRightButton} onPress={() => {route.onPress()}}>
<Icon name={'map'} size={25} color={'white'} />
</TouchableOpacity>
)
default:
return null //For setting Dashboard right button null
}
},
Title(route, navigator, index, navState) {
return (
<Text style={[styles.navBarText, styles.navBarTitleText]}>
{route.title}
</Text>
)
}
}
You can set panOpenMask and panCloseMask properties of drawer to 0 on login scene.
Something like this
<Drawer>
panOpenMask={isItLoginPage? 0 : 0.2}
panCloseMask={isItLoginPage? 0 : 0.2}
...
</Drawer>
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
Currently following facebook tutorial on React (react_tuto).
I don't understand how 2 components can communicate so that on "submit a comment button" it appends dynamically the "comment list".
currently, comment are created on server but appears on page only when page refreshed
how can the comment appear on submit button?
This i my AddComment component
var AddComment = React.createClass({
getInitialState: function(){
return {
content: this.props.content,
adrien: "before"
}
},
handleKeyUp: function(e) {
this.setState({
content: this.refs.addComment.getDOMNode().value,
})
},
handleValidation: function() {
var that = this
$.ajax({
type: "POST",
data: {comment: { content: that.state.content } },
url: Routes.create_comment_path({format: 'json'}),
success: function(data) {
that.setState({
content: "",
adrien: "after"
})
}
})
},
render: function(){
return (
<div>
<textarea onKeyUp={this.handleKeyUp} value={this.state.value} ref="addComment"></textarea>
<button onClick={this.handleValidation}>submit</button>
</div>
)
}
})
This is my CommentList component:
var CommentList = React.createClass({
render: function() {
return (
<div>
{this.props.comments.map(function(comment){
return <CommentListElement key={comment.id} comment={comment} />;
})}
</div>
);
}
});
You need a common parent component for communication between different components.
I have updated you example a bit to include common parent component CommentSystem
Note: I have removed ajax call to just show the communication between component.
Check below link.
https://jsfiddle.net/j4yk3pzc/15/
Extra Info:
In react we store states on parent component and pass them down to children. Along with state we also pass actions to manipulate data down to the children. When child component want's to update data passed to it from parent, then it fires the action passed from the parent. This is called Data down action up approach. Data is passed from parent to child to grandchild. While actions are propagated from grandchild to child to parent.
If you don't want to create the parent component then you can use some Publish / Subscribe or EventEmitter based system to communicate between children having no common parent.
Reference:
http://ctheu.com/2015/02/12/how-to-communicate-between-react-components/
Code:
var CommentSystem = React.createClass({
getInitialState: function() {
return {
comments: []
}
},
addComments: function(comment) {
var comments = this.state.comments;
comments.push(comment);
this.setState({comments: comments})
},
render: function() {
return (
<div>
<AddComment addComments={this.addComments}/>
<CommentList comments={this.state.comments}/>
</div>
)
}
})
var AddComment = React.createClass({
getInitialState: function(){
return {
content: this.props.content,
adrien: "before"
}
},
handleKeyUp: function(e) {
this.setState({
content: this.refs.addComment.getDOMNode().value,
})
},
handleValidation: function() {
var that = this;
this.props.addComments(this.state.content);
},
render: function(){
return (
<div>
<textarea onKeyUp={this.handleKeyUp} value={this.state.value} ref="addComment"></textarea>
<button onClick={this.handleValidation}>submit</button>
</div>
)
}
})
var CommentList = React.createClass({
render: function() {
return (
<div>
{this.props.comments.map(function(comment){
return <CommentListElement key={comment.id} comment={comment} />;
})}
</div>
);
}
});
var CommentListElement = React.createClass({
render: function() {
return (
<div>{this.props.comment}</div>
)
}
})
React.render(<CommentSystem/>, document.getElementById('container'));
Hope this helps.
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?