We Keep Coding

React native flat list not rendering items

I hope you're doing okay
I'm experiencing something weird with my react-native project, The FlatList items in some of the pages aren't displayed, even though I can see them when I console.log(json.items).
Earlier today, everything worked fine. all the pages displayed their lists as they should on my device. then I started working on a new search page on snack & I added status bar, I tested and it worked on snack before adding the new code and creating the new files in my app.
The issue I'm having now is, the list on the first page is displayed, subsequent pages after that do not show list items. including the new search page that works on snack
I'll go ahead and post my code now, the first set is for the page whose listitems are displayed correctly:
App.js
class ProfileActivity extends Component
{
// Setting up profile activity title.
static navigationOptions = ({ navigation }) =>
{
return {
title: 'Home',
headerStyle : {
backgroundColor: '#00b47a',
elevation: 0
},
headerTitleStyle: {
color: 'white'
},
cardStyle: { backgroundColor: '#fff' },
headerLeft: null,
headerRight: (
<View style={{ alignSelf: 'center', alignItems: 'center', display: 'flex', flexDirection: 'row', justifyContent: 'space-evenly'}}>
<Icon containerStyle={{ paddingRight: 10 }}
color='#fff' onPress={()=> navigation.getParam('openBottomSheet')()}
name="menu" />
<Icon containerStyle={{ paddingRight: 15 }}
color='#fff' onPress={()=> navigation.getParam('openSearchPage')()}
name="search" /></View>
)
}
};
constructor () {
super()
this.state = { toggled: false }
}
componentDidMount() {
this.props.navigation.setParams({ openBottomSheet: this.onOpenBottomSheet });
this.props.navigation.setParams({ openSearchPage: this.onOpenSearchPage });
}
onOpenBottomSheet = () => {
this.Standard.open();
}
onOpenSearchPage = () => {
this.props.navigation.navigate('sixth');
}
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<StatusBar
animated={true}
backgroundColor="#00b47a"
barStyle={'light-content'}
showHideTransition={'slide'}
hidden={false} />
<MarketList navigation={this.props.navigation} />
<RBSheet
ref={ref => {
this.Standard = ref;
}}
>
...
</RBSheet>
</View>
);
}
}
Market.js
export default class MarketList extends React.Component {
constructor(props) {
super(props)
this.state = {
items: '',
};
this.animateList = new Animated.Value(0);
}
componentDidMount() {
Animated.timing(this.animateList, {
toValue: 1,
duration: 500,
}).start();
}
render() {
const rowStyles = [
styles.itemList,
{ opacity: this.animateList },
{
transform: [
{ scale: this.animateList },
],
},
];
fetch('https://mvmarket.xyz/nativeuserapp/home.php')
.then((response) => response.json())
.then((json) => {
this.setState({
items: json.items,
})
})
.catch((error) => {
console.error(error);
});
return (
<View style={styles.container}>
<FlatList
data={this.state.items}
renderItem={({item}) => <TouchableOpacity onPress={()=>this.props.navigation.navigate("fourth",{market:item.name})}><Animated.View style={rowStyles}><View style={styles.item}><Text style={styles.market}>{item.name}</Text><Text style={styles.location}>{item.Location}</Text></View><View style={styles.go}><Icon name="arrow-right" color="#00b47a" /></View></Animated.View></TouchableOpacity>}
/>
</View>
);
}
}
This next set is for one of the pages that don't show list items
App.js
class ProductsActivity extends Component {
static navigationOptions =
{
title: 'Products',
headerStyle : {
backgroundColor: '#00b47a',
elevation: 0
},
cardStyle: { backgroundColor: '#fff' },
headerTitleStyle: {
color: 'white'
},
};
render() {
return(
<View>
<StatusBar
animated={true}
backgroundColor="#00b47a"
barStyle={'light-content'}
showHideTransition={'slide'}
hidden={false} />
<ProductsList navigation={this.props.navigation} />
</View>
);
}
}
Products.js
export default class ProductsList extends React.Component {
constructor(props) {
super(props)
this.state = {
items: '',
};
}
render() {
fetch('https://mvmarket.xyz/nativeuserapp/products.php')
.then((response) => response.json())
.then((json) => {
this.setState({
items: json.items,
})
}).catch((error) => {
console.error(error);
console.log(error);
});
return (
<View style={styles.container}>
<FlatList
data={this.state.items}
renderItem={({item}) => <TouchableOpacity onPress={()=>this.props.navigation.navigate("fifth",{market: this.props.navigation.state.params.market, type:item.type})} style={styles.itemList}><View style={styles.item}><Text style={styles.market}>{item.type}</Text></View><View style={styles.go}><Icon name="arrow-right" color="#00b47a" /></View></TouchableOpacity>}
/>
</View>
);
}
}
I'm leaving the URL there so you can confirm yourself that the data is actually fetched. Its driving me crazy, been on it for like 4 hrs.
Thank you

I think you don't really understand lifecycle methods of a React Component. It's important to understand those concepts before jumping into code. You can check here
When you put your fetch call in render, and on then you do a setState() you are making this infinitely. This happens because you are always providing new values to items.
The ideal is to have a model layer to handle those type of calls, but this is an architecture thing, to be less complex, you can use Container/Presentation pattern.
In the Container/Presentation pattern, you have a ContainerComponent which is responsible to do requests, handle callbacks, and provide data to the Presentation component, which would be responsible to just render things.
If you don't want to use this pattern, at least put this fetch call in componentDidMount method.

Thank you all for your suggestions, duly noted and appreciated.
#Witalo-Benicio #Andris-laduzans #Drew-reese
I've fixed it, by changing
class SearchMarketActivity extends Component {
static navigationOptions = {
headerShown: false,
cardStyle: {
backgroundColor: 'white'
}
}
render() {
return(
<View>
<StatusBar
animated={true}
backgroundColor="#585858"
barStyle={'light-content'}
showHideTransition={'slide'}
hidden={false} />
<SearchMarket navigation={this.props.navigation} />
</View>
)
}
}
to
class SearchMarketActivity extends Component {
static navigationOptions = {
headerShown: false,
cardStyle: {
backgroundColor: 'white'
}
}
render() {
return(
<SearchMarket navigation={this.props.navigation} />
)
}
}
After, I added the StatusBar to the <SearchMarket /> component being imported

React Native Component doesn't re-render on state change

No matter what I try I can't seem to get my component to update. Below is my code:
import React, { Component } from "react";
import { StyleSheet, View, TouchableOpacity, Image, Text } from "react-native";
import PropTypes from "prop-types";
import { toggleSound } from "logic/Music.js";
import soundOn from "assets/img/swipe.png";
import soundOff from "assets/img/illum-triangle.png";
export default class GlobalSoundButton extends Component {
constructor(props) {
super(props);
this.state = {
audioOff: this.props.audioOff
};
}
componentDidUpdate = prevProps => {
if (prevProps.audioOff !== this.props.audioOff) {
this.setState({ audioOff: this.props.audioOff }, () => {
console.log("SWITCHING STATE", this.state);
};
this.forceUpdate();
}
};
render() {
return (
<View style={styles.soundButtonWrapper} key={this.props.name}>
<TouchableOpacity
style={styles.soundButtonPress}
activeOpacity={0.8}
onPress={() => {
toggleSound(this.props.sounds);
}}
>
<Image
style={styles.soundButton}
source={this.state.audioOff ? soundOff : soundOn}
></Image>
<Text style={styles.text}>
Audio {this.state.audioOff ? "off" : "on"}
</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
soundButtonWrapper: {
width: "100%",
height: 40,
position: "absolute",
top: 20
},
soundButtonPress: {
width: 40,
height: 40,
position: "absolute",
right: 20
},
soundButton: {
width: 40,
height: 40,
tintColor: "#59BC92"
},
text: {
width: 120,
height: 40,
position: "absolute",
right: 80,
color: "white"
}
});
GlobalSoundButton.propTypes = {
sounds: PropTypes.array
};
The weird part is that I'm using this component in two different screens and in one case it works absolutely fine but in the other screen it doesn't re-render when the audio is changed.
Every time I press it the props get updated so I KNOW that the state updates. The console log always writes out different state so I know the state is updated. I also tried forceUpdate() and adding a key (you can see the key in the code) but it doesn't help.
I'm at a loss here. Has anyone bumped into the same issue or can help? I also know there are several questions quite like this one but no one answered my questions so I had to write my own.
I removed a lot of unrelated code here but basically I pass the props down the following way in my HomeScreen (it's the GlobalSoundButton, and in this case it works):
import GLOBAL from "logic/GlobalState.js";
export default class HomeScreen extends Component {
constructor(props) {
super(props);
this.state = {
audioOff: false,
};
}
async componentDidMount() {
let audioOff;
try {
audioOff = await retrieveData("audioOff");
} catch (err) {
console.error(err);
}
this.setState(
{
audioOff: audioOff === "true"
});
render() {
GLOBAL.homeScreen = this;
return (
<View style={styles.container}>
<View style={styles.bg}>
<ImageBackground
source={pattern}
style={styles.img}
resizeMode="repeat"
imageStyle={styles.innerImg}
/>
</View>
<View style={styles.container}>
<GlobalSoundButton
sounds={this.state.allSounds}
audioOff={this.state.audioOff}
name="HomeScreenKey"
></GlobalSoundButton>
<Text
style={[styles.smallText, styles.ppText]}
onPress={() =>
Linking.openURL(
"https://privacy-illuminati-flip.netlify.com"
).catch(err => console.error("An error occurred", err))
}
>
Privacy Policy
</Text>
<Text style={styles.welcome}>Illuminati Flip</Text>
<TouchableWithoutFeedback
onPressIn={evt => this.grabFinger(evt)}
onPressOut={evt => this.swipe(evt)}
pressRetentionOffset={{ top: 100, left: 0, bottom: 100, right: 0 }}
>
<View style={styles.swipeArea}>
<View style={styles.gridSelection}>
<Animated.View
pointerEvents={"none"}
style={{
...styles.innerGridSelection,
transform: [{ translateX: this.springValue }]
}}
>
{difficulties}
</Animated.View>
</View>
<View style={styles.margin}>
<Animated.Image
source={swipeFinger}
style={{
...styles.hand,
transform: [
{
translateX: this.fingerValue.interpolate({
inputRange: [-1, 1],
outputRange: [-15, 15]
})
}
]
}}
/>
<Text style={styles.smallText}>Swipe to change difficulty</Text>
</View>
</View>
</TouchableWithoutFeedback>
<TouchableOpacity
activeOpacity={0.8}
onPress={() => {
this.checkTutorial();
}}
>
<Text style={styles.button}>Begin Ceremony</Text>
</TouchableOpacity>
<Text
style={[styles.smallText, styles.musicText]}
onPress={() =>
Linking.openURL("https://fanlink.to/triobgame").catch(err =>
console.error("An error occurred", err)
)
}
>
Music by #triobelisk
</Text>
<Text
style={[styles.smallText, styles.devText]}
onPress={() =>
Linking.openURL("https://twitter.com/iamjohnhult").catch(err =>
console.error("An error occurred", err)
)
}
>
Developed by #iamjohnhult
</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
...
});
The difference in my other component where it doesn't work I render it like this:
import GLOBAL from "logic/GlobalState.js";
<GlobalSoundButton
sounds={this.state.allSounds}
audioOff={GLOBAL.homeScreen.state.audioOff}
name="GameScreenKey"
></GlobalSoundButton>
And the GlobalState.js is as follows:
module.exports = {
homeScreen: null
};

Fixed Header horizontal ListView react-native

I have created a table view using react-native list view.
I want to fix the header and first column in this table.
Here is what I created:
This list view is scrollable horizontally as well as vertically and all the data is dynamic.
I want to freeze the header and first column of this table if possible
Here is my code:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
ListView,
ScrollView,
Image,
TouchableOpacity,
Platform,
View
} from 'react-native';
import PMR from "../utilities/PMR";
import Spinner from 'react-native-loading-spinner-overlay';
import NavigationBar from 'react-native-navbar';
let bg = require('image!bg'),
back = require('image!back'),
Dimensions = require('Dimensions'),
windowSize = Dimensions.get('window'),
Screen = require('Dimensions').get('window');
class StationData extends Component {
constructor(props) {
super(props)
this.state = {
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
}),
isVisible: true,
}
}
componentDidMount() {
let {username, password} = this.props.navigator.cerdentials;
let obj = {
'stXid':this.props.data.stationId,
'startTime':this.props.data.from,
'endTime':this.props.data.to
};
PMR.rawData(username, password, obj).then((rslt) => {
var RawData = [];
rslt.forEach(function(dataItem) {
if (dataItem.pointValue.length > 0)
RawData.push(dataItem);
});
RawData.unshift({name: 'Time', pointValue: rslt[0].pointValue})
// console.log(rslt)
this.setState({
dataSource: this.state.dataSource.cloneWithRows(RawData),
isVisible: false,
});
});
}
renderData(rowData) {
// console.log(rowData.pointValue);
if(rowData.name === 'Time'){
return (
<View>
<View style={{borderColor:'rgba(214, 214, 214,1)',borderWidth:1}}>
<View style={styles.names}>
<Text style={{marginHorizontal: 12, marginVertical:(Platform.OS === 'ios') ? 15 : 16}}>{rowData.name}</Text>
</View>
{rowData.pointValue.map((data) => <View style={{borderBottomWidth:1,borderColor:'rgba(214, 214, 214,1)',padding:8}}><Text>{data.time.split(" ")[1]}</Text></View>)}
</View>
</View>
);
} else {
return (
<View>
<View style={{borderColor:'rgba(214, 214, 214,1)',borderWidth:1}}>
<View style={styles.names}>
<Text style={{marginHorizontal: 12, marginVertical: 6.5}}>{rowData.name}</Text>
<Text>({rowData.engineeringUnit})</Text>
</View>
{rowData.pointValue.map((data) => <View style={{borderBottomWidth:1,borderColor:'rgba(214, 214, 214,1)',padding:8}}><Text>{isNaN(data.value) ? (data.value) : +(Math.round(data.value + "e+1") + "e-1")}</Text></View>)}
</View>
</View>
);
}
}
render() {
var titleConfig = {
title: `Station Data: ${this.props.data.stationName}`,
}
return (
<View style={styles.container}>
<Image style={styles.bg} source={bg} />
<Spinner visible={this.state.isVisible} />
<NavigationBar
title = {titleConfig}
leftButton={<TouchableOpacity onPress={() => this.props.navigator.pop()}>
<Image style={styles.back} source={back} />
</TouchableOpacity>}
style = {{backgroundColor:'rgba(244, 244, 244,1)'}} />
<ScrollView>
<View style={{position:'absolute', right:16, marginVertical:12}}>
<Text>{this.props.data.showDate}</Text>
</View>
<ListView
horizontal={true}
automaticallyAdjustContentInsets={false}
removeClippedSubviews={false}
enableEmptySections={true}
dataSource={this.state.dataSource}
renderRow={this.renderData}
style={styles.listView}
/>
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
bg: {
position: 'absolute',
left: 0,
top: 0,
width: windowSize.width,
height: windowSize.height
},
names: {
backgroundColor:'rgba(219, 243, 207,1)',
borderBottomWidth:1,
borderColor:'rgba(214, 214, 214,1)',
alignItems:'center',
},
back:
{ marginTop:10,
marginLeft:10,
width:20,
height:20,
},
listView: {
marginVertical:(Screen.width/100)*10,
marginHorizontal:(Screen.width/100)*5
},
});
module.exports =StationData;

React Native how to pass this.setState change to parent

I am new to React Native I am making a sample app where the user can login and register for a new account.
I have two React classes,
One is the main class index.ios.js and another class called register.js. In the index class I am saying if the variable register is true render the register screen.
In the class register.js I am trying to set the variable register to false using this.setState({register:false}) but it is not causing the re render of the parent (index.ios.js). Is the a super(state) method or something similar that I am missing ? I believe the parent state is not getting the values of the updated register variable.
Here are my classes:
Render inside index.ios.js:
render: function() {
if(this.state.register) {
return this.renderRegisterScreen();
}
else if (this.state.loggedIn) {
return this.userLoggedIn();
}
else {
return this.renderLoginScreen();
}
}
Register.js:
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
Image,
TouchableHighlight,
TextInput,
} = React;
var Register = React.createClass({
render: function() {
return (
<View style={styles.container}>
<View style={styles.rafitoImage}>
<Image source={require('./logo.png')}></Image>
<Text style={styles.slogan}>Eliminate the need to wait!</Text>
</View>
<View style={styles.bottomSection}>
<View style={styles.username}>
<View style={styles.inputBorder}>
<TextInput placeholder="Username..." style={styles.usernameInput} onChangeText={(text) => this.setState({username: text})}/>
</View>
<View style={styles.inputBorder}>
<TextInput password={true} placeholder="Password..." style={styles.usernameInput} onChangeText={(text) => this.setState({password: text})}/>
</View>
<View style={styles.inputBorder}>
<TextInput password={true} placeholder="Verify Password..." style={styles.usernameInput} onChangeText={(text) => this.setState({verifyPassword: text})}/>
</View>
<View style={styles.inputBorder}>
<TextInput placeholder="Phone.." style={styles.usernameInput} onChangeText={(text) => this.setState({phone: text})}/>
</View>
<View style={styles.inputBorder}>
<TextInput placeholder="Email.." style={styles.usernameInput} onChangeText={(text) => this.setState({email: text})}/>
</View>
<TouchableHighlight style={styles.button}
underlayColor='#f1c40f' onPress={this.register}>
<Text style={styles.buttonText}>Register</Text>
</TouchableHighlight>
<TouchableHighlight style={styles.signUp} onPress={this.resetToLogin}
underlayColor='#ffffff'>
<Text style={styles.signUpText}>Already A Member </Text>
</TouchableHighlight>
</View>
</View>
<View style={styles.copyright}>
</View>
</View>
);
},
resetToLogin: function() {
this.setState({
register: false //I want this to re render the home screen with the variable register as false
});
}
});
var styles = StyleSheet.create({
container: {
flex : 1
},
bottomSection: {
flex: 5,
flexDirection: 'row'
},
button: {
height: 36,
backgroundColor: '#32c5d2',
justifyContent: 'center',
marginTop: 20
},
buttonText: {
fontSize: 18,
color: 'white',
alignSelf: 'center'
},
signUpText: {
color: '#3598dc'
},
signUp: {
alignItems: 'flex-end',
marginTop: 10,
},
username: {
flex: 1,
padding: 5
},
rafitoImage: {
flex: 3,
justifyContent: 'center',
alignItems: 'center',
},
copyright: {
alignItems: 'center'
},
usernameInput: {
height: 36,
marginTop: 10,
marginBottom: 10,
fontSize: 18,
padding: 5
},
copyrightText: {
color: '#cccccc',
fontSize: 12
},
inputBorder: {
borderBottomWidth: 1,
borderBottomColor: '#ececec'
},
slogan: {
color: '#3598dc'
}
});
module.exports = Register;
Attempt 1
As per the answer I added this to my index.ios.js
renderRegisterScreen: function() {
return (
<Register login={this.login}/>
)
}
And I added this to my register.js
<TouchableHighlight style={styles.signUp} onPress={this.props.login}
underlayColor='#ffffff'>
<Text style={styles.signUpText}>Already A Member </Text>
</TouchableHighlight>
But for some reason it does not even go to the register screen anymore, it executes the login function as soon as the register screen renders. What am I missing now ? Please advise.
Thanks
Update
It works when I pass down registered as a property but not when I do not. I would like to understand why if someone could post that.
Thanks

You can pass the function down to the child as props, then set the state of the parent from within the child that way.
Parent Component:
var Parent = React.createClass({
getInitialState() {
return {
registered: false
}
},
register(){
console.log("logging in... ");
this.setState({
registered: true
});
},
render: function() {
return (
<View style={styles.container}>
<Child register={this.register.bind(this)} registered={this.state.registered} />
{this.state.registered && <View style={{padding:10, backgroundColor:'white', marginTop:10}}>
<Text style={{fontSize:20}}>Congratulations, you are now registered!</Text>
</View>}
</View>
);
}
});
Child Component:
var Child = React.createClass({
render: function() {
return(
<View style={{backgroundColor: 'red', paddingBottom:20, paddingTop:20 }}>
<TouchableHighlight style={{padding:20, color: 'white', backgroundColor: 'black'}} onPress={() => this.props.register() }>
{this.props.registered ? <Text style={{color: 'white'}}>registered</Text> : <Text style={{color: 'white'}}>register</Text>}
</TouchableHighlight>
</View>
)
}
})

Here is a more powerful solution. This will let the child component change any state variable in the parent.
Parent component:
render: function() {
return (
...
<Child setParentState={newState=>this.setState(newState)} />
...
);
}
// Take note of the setState()
Child component:
this.props.setParentState({registered: true})

Why my attempt was failing was because I was using
onPress={this.props.login}
It should be
onPress={()=>this.props.login}
because of that mistake my onPress function would execute as soon as the button would render. I am not sure why that happens but I know what my mistake was.

Using StackNavigator I found a soultion leveraging screenProps. Here you can pass down functions and values to your routes. App global state is managed in App. App then passes in functions and/or state to NavComponent screenProps. Each child route in StackNavigator will then have access via this.props.screenProps
This solution is working well for now. Would love some feedback, or suggestions for improving this method
class HomeScreen extends React.Component {
render() {
return (
<View>
<Text>{JSON.stringify(this.props.screenProps.awesome)}</Text>
<Button
onPress={() => this.props.screenProps.updateGlobalState("data")}
title="Update parent State"
/>
</View>
);
}
}
const NavComponent = StackNavigator({
Home: { screen: HomeScreen },
// AllOthers: { screen: AllComponentsHereMayAccessScreenProps },
});
export default class App extends React.Component {
constructor() {
super();
this.state = {
everythingIsAwesome: false,
}
}
_updateGlobalState(payload) {
console.log('updating global state: ', payload);
this.setState({everythingIsAwesome: payload});
}
render() {
return <NavComponent screenProps={{
updateGlobalState: this._updateGlobalState.bind(this),
awesome: this.state.everythingIsAwesome
}} />;
}
}

Error: Cannot read property 'push' of undefined React Native

I'm currently trying to learn React Native based on this Tutorial: http://www.appcoda.com/react-native-introduction/
While copying most of the Code (small changes in text) I got this error:
Error: Cannot read property 'push' of undefined
This error occurs if I try to push a new Navigator View. Here is the striped down code (full code at the end but thought it's more readable to have just a short version here):
<TouchableHighlight onPress={() => this._rowPressed(eve)} >
_rowPressed(eve) {
this.props.navigator.push({
title: "Property",
component: SingleEvent,
passProps: {eve}
});
}
Maybe somebody can explain me why the this.props.navigator is undefined and how I can use it. I'm sorry for this basic question but I searched a lot and couldn't find a answer to this problem yet. I tryed to .bind(this) to the _rowPressed function and also rewrote everything to a NavigatorIOS View but nothing worked yet.
Would be nice if somebody could explain it to me.
All the best
Daniel
Full Error report:
Error: Cannot read property 'push' of undefined
stack:
Dates._rowPressed index.ios.bundle:52051
Object._createClass.value.React.createElement.onPress index.ios.bundle:52033
React.createClass.touchableHandlePress index.ios.bundle:41620
TouchableMixin._performSideEffectsForTransition index.ios.bundle:39722
TouchableMixin._receiveSignal index.ios.bundle:39640
TouchableMixin.touchableHandleResponderRelease index.ios.bundle:39443
executeDispatch index.ios.bundle:15431
forEachEventDispatch index.ios.bundle:15419
Object.executeDispatchesInOrder index.ios.bundle:15440
executeDispatchesAndRelease index.ios.bundle:14793
URL: undefined
line: undefined
message: Cannot read property 'push' of undefined
Code Of the Parent View which gets included into the main View via TabBarIOS:
'use strict';
var React = require('react-native');
var singleEvent = require('./singleEvent');
var REQUEST_URL = 'http://***/dates/24-09-2015.json';
var {
Image,
StyleSheet,
Text,
View,
Component,
ListView,
NavigatorIOS,
TouchableHighlight,
TabBarIOS,
ActivityIndicatorIOS
} = React;
var styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
padding: 10
},
thumbnail: {
width: 53,
height: 81,
marginRight: 10
},
rightContainer: {
flex: 1
},
title: {
fontSize: 16,
marginBottom: 8
},
author: {
color: '#656565',
fontSize: 12
},
separator: {
height: 1,
backgroundColor: '#dddddd'
},
listView: {
backgroundColor: '#F5FCFF'
},
loading: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}
});
class Dates extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2
})
};
}
componentDidMount() {
this.fetchData();
}
fetchData() {
fetch(REQUEST_URL)
.then((response) => response.json())
.then((responseData) => {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(responseData),
isLoading: false
});
})
.done();
}
render() {
if (this.state.isLoading) {
return this.renderLoadingView();
}
return (
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderEvent.bind(this)}
style={styles.listView}
/>
);
}
renderLoadingView() {
return (
<View style={styles.loading}>
<ActivityIndicatorIOS size='large'/>
<Text>Loading Events...</Text>
</View>
);
}
renderEvent(eve) {
return (
<TouchableHighlight onPress={() => this._rowPressed(eve).bind(this)} underlayColor='#dddddd'>
<View>
<View style={styles.container}>
<View style={styles.rightContainer}>
<Text style={styles.title}>{eve.value.name}</Text>
<Text style={styles.author}>{eve.value.location}</Text>
</View>
</View>
<View style={styles.separator} />
</View>
</TouchableHighlight>
);
}
_rowPressed(eve) {
console.log(eve, this.props);
this.props.navigator.push({
title: "Property",
component: SingleEvent,
passProps: {eve}
});
}
}
module.exports = Dates;
Single View which should be included if the ListView was clicked:
'use strict';
var React = require('react-native');
var {
StyleSheet,
Text,
TextInput,
View,
TouchableHighlight,
ActivityIndicatorIOS,
Image,
Component
} = React;
var styles = StyleSheet.create({
description: {
fontSize: 16,
backgroundColor: 'white'
},
title : {
fontSize : 22
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
});
class SingleEvent extends Component {
render() {
var eve = this.props.eve;
var description = (typeof eve.value.description !== 'undefined') ? eve.value.description : '';
return (
<View style={styles.container}>
<Text style={styles.title}>{eve.value.name}</Text>
<Text style={styles.description}>{description}</Text>
</View>
);
}
}
module.exports = SingleEvent;
index.ios.js where all the views get combined:
'use strict';
var React = require('react-native');
var Dates = require('./Dates');
//var Eventlist = require('./eventlist');
var NearYou = require('./NearYou');
var icons = [];
icons['place'] = require('image!ic_place_18pt');
icons['reorder'] = require('image!ic_reorder_18pt');
icons['grade'] = require('image!ic_grade_18pt');
icons['people'] = require('image!ic_group_18pt');
var {
Image,
AppRegistry,
StyleSheet,
Text,
View,
ListView,
TouchableHighlight,
TabBarIOS,
Component
} = React;
class allNightClub extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'dates'
};
}
render() {
return (
<TabBarIOS selectedTab={this.state.selectedTab}>
<TabBarIOS.Item
selected={this.state.selectedTab === 'dates'}
icon={icons['reorder']}
title= 'Events'
onPress={() => {
this.setState({
selectedTab: 'dates'
});
}}>
<Dates navigator={navigator} />
</TabBarIOS.Item>
<TabBarIOS.Item
selected={this.state.selectedTab === 'nearyou'}
title= 'Favorites'
icon={icons['grade']}
onPress={() => {
this.setState({
selectedTab: 'nearyou'
});
}}>
<NearYou navigator={navigator} />
</TabBarIOS.Item>
<TabBarIOS.Item
selected={this.state.selectedTab === 'nearyou'}
title= 'Near You'
icon={icons['place']}
onPress={() => {
this.setState({
selectedTab: 'nearyou'
});
}}>
<NearYou navigator={navigator} />
</TabBarIOS.Item>
<TabBarIOS.Item
selected={this.state.selectedTab === 'nearyou'}
title= 'People'
icon={icons['people']}
onPress={() => {
this.setState({
selectedTab: 'nearyou'
});
}}>
<NearYou navigator={navigator} />
</TabBarIOS.Item>
</TabBarIOS>
);
}
}
AppRegistry.registerComponent('allNightClub', () => allNightClub);

in your index.ios.js you're referencing a navigator here which isn't set at that moment.
<Dates navigator={navigator} />
So, as I've understood you have to options to work with NavigatorIOS:
1. NavigatorIOS as a child of your Tab
You need to define a navigator as a child of your TabViewItems which itself loads the appropriate view:
var styles = StyleSheet.create({
container: {
flex: 1,
}
});
<TabBarIOS.Item>
<NavigatorIOS
style={styles.container}
initialRoute={{
title: 'Dates',
component: Dates,
}}
/>
</TabBarIOS.Item>
2. NavigatorIOS as the root Element
class allNightClub extends Component {
render() {
return (
<NavigatorIOS
style={styles.container}
initialRoute={{
title: 'Index',
component: Index
}}
/>
);
}
}
That's the way it's worked for me. I put the original code of index.ios.js into Index.js and also did the following changes:
Index.js
<Dates
navigator={this.props.navigator}
/>
Dates.js
<TouchableHighlight onPress={() => this._rowPressed(eve)} underlayColor='#dddddd'>

From what I can deduct, your call to this.props.navigator should work, even without the bind-statements.
My first thoughts would be: is the navigator item passed to your Dates component from its parent?
return (
<Dates
navigator={navigator}
... />
Probably inside a renderscene function where you render your navigator..
What does your output look like from your console statement?
console.log(eve, this.props)

I ran into this issue today, the reason is that you need to call the screen where you're using this.props.navigator.push with the NavigatorIOS component. That will set the navigator prop. E.g.
<NavigatorIOS
style={styles.container}
initialRoute={{
title: '',
component: DemoScreen
}}
/>
Now in your DemoScreen you can use this.props.navigator.