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
Related
Hi I need help as to how do i get a specific value from an array in a web service i am using fetch method to get the data.It is in XML i am using a dependency to convert xml data to JSON.
import React from "react";
import {StyleSheet,View,ActivityIndicator,FlatList,Text,TouchableOpacity} from "react-native";
export default class Source extends React.Component {
static navigationOptions = ({ navigation }) => {
return {
title: "Source Listing",
headerStyle: {backgroundColor: "#fff"},
headerTitleStyle: {textAlign: "center",flex: 1}
};
};
constructor(props) {
super(props);
this.state = {
loading: false,
items:[]
};
}
FlatListItemSeparator = () => {
return (
<View style={{
height: .5,
width:"100%",
backgroundColor:"rgba(0,0,0,0.5)",
}}
/>
);
}
renderItem=(data)=>
<TouchableOpacity style={styles.list}>
<Text style={styles.lightText}>{data.item.name}</Text>
<Text style={styles.lightText}>{data.item.email}</Text>
<Text style={styles.lightText}>{data.item.company.name}</Text>
</TouchableOpacity>
render(){
{
if(this.state.loading){
return(
<View style={styles.loader}>
<ActivityIndicator size="large" color="#0c9"/>
</View>
)}}
return(
<View style={styles.container}>
<FlatList
data= {this.state.dataSource}
ItemSeparatorComponent = {this.FlatListItemSeparator}
renderItem= {item=> this.renderItem(item)}
keyExtractor= {item=>item.id.toString()}
/>
</View>
)}
}
const parseString = require('react-native-xml2js').parseString;
fetch('http://192.168.200.133/apptak_service/apptak.asmx/Get_Item_Master')
.then(response => response.text())
.then((response) => {
parseString(response, function (err, result) {
console.log(response)
});
}).catch((err) => {
console.log('fetch', err)
this.fetchdata();
})
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff"
},
loader:{
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#fff"
},
list:{
paddingVertical: 4,
margin: 5,
backgroundColor: "#fff"
}
});
I am pretty new to react native and development in general i would highly apprecitate any help .I need to seprate the elements and display specific elements in the app.
As far as I can tell from your code, you are not passing the fetched data into your state. You're only logging it in the console:
parseString(response, function (err, result) {
console.log(response)
});
I think you should add the following pieces to your component:
1 . First of all set up the function to be called in your constructor, so it can access the state:
constructor(props) {
super(props);
this.state = {
loading: false,
items:[]
};
this.fetchRequest = this.fetchRequest.bind(this)
}
Create the actual function inside render:
fetchRequest() {
fetch('http://192.168.200.133/apptak_service/apptak.asmx/Get_Item_Master')
.then(response => response.text())
.then((response) => {
parseString(response, function (err, result) {
this.setState({ items: response });
});
}).catch((err) => {
console.log('fetch', err)
})
}
You need to call the fetchRequest function. You can do that in a lifecycle method of your component:
componentDidMount() {
fetchRequest();
}
Last thing is to create your Flatlist correctly:
<FlatList
data= {this.state.items}
renderItem={({ item }) => <Item title={item.title} />}
keyExtractor= {item=>item.id.toString()}
/>
Your data source is this.state.items, and not this.state.dataSource.
Unfortunately I have no idea what your data looks like, so I don't know how the keyExtractor and <Item> should be written. What I can tell you is that you will need unique IDs for your items.
You can read more about Flatlist in the React Native docs.
I'm trying to view all the data in the "swiper" coming from state but for some reason I can't see.
I'd love some help because i dont undrstand whats wrong there .
I go through the data with the map function and it doesn't work.
The goal is to display a table with the data
this is the link picture for how it should display :
export default class InfoTable extends Component {
constructor(props) {
super(props);
this.state = {
tableHead0: [`${this.props.headerInfo.SHORT_TEXT} (${(this.props.headerInfo.ORDERID).replace(/^0+/, '')})`],
tableHead3: ['BANANA'],
tableData3: [
['APPLE', `${this.props.headerInfo.COSTCENTER_TXT} (${(this.props.headerInfo.COSTCENTER)})`],
['MONKEY', `${this.props.headerInfo.LOC_WBS_ELEM_TXT} (${this.props.headerInfo.LOC_WBS_ELEM})`],
['FRIZ', `${this.props.headerInfo.SETTLORDER_TXT} (${this.props.headerInfo.SETTLORDER})`],
]
}
}
componentWillReceiveProps(nextProps) {
if (nextProps.headerInfo != null) {
this.setState({ tableHead0: [nextProps.headerInfo] })
}
alert(JSON.stringify(nextProps))
}
render() {
const state = this.state;
return (
<Swiper style={styles.wrapper} showsButtons={true}>
<ScrollView>
<View style={styles.container}>
<Table borderStyle={{ borderWidth: 2, borderColor: '#d83dff' }}>
<Row data={state.tableHead0} style={styles.head0} textStyle={styles.headText} />
<Row data={state.tableHead1} style={styles.head} textStyle={styles.headText} />
<Rows data={state.tableData1} textStyle={styles.text} />
<Row data={state.tableHead2} style={styles.head} textStyle={styles.headText} />
<Rows data={state.tableData2} textStyle={styles.text} />
<Row data={state.tableHead3} style={styles.head} textStyle={styles.headText} />
<Rows data={state.tableData3} textStyle={styles.text} />
</Table>
</View>
</ScrollView>
</Swiper>
)
}
}
const styles = StyleSheet.create({
container: { flex: 1, backgroundColor: '#fff' },
head0: { height: 80, backgroundColor: '#54beff' },
head: { height: 40, backgroundColor: '#9febf5' },
headText: { fontWeight: 'bold', fontSize: 20 },
text: { margin: 10 },
});
Hey there you can use Flatlist, in which all the data will be passed as an array and it will show all your data it will help you.
import {Flatlist} from react-native;
export default class InfoTable extends Component {
constructor(props) {
super(props);
this.state = {
tableHead0: [`${this.props.headerInfo.SHORT_TEXT} (${(this.props.headerInfo.ORDERID).replace(/^0+/, '')})`],
tableHead3: ['BANANA'],
tableData3: [
['APPLE', `${this.props.headerInfo.COSTCENTER_TXT} (${(this.props.headerInfo.COSTCENTER)})`],
['MONKEY', `${this.props.headerInfo.LOC_WBS_ELEM_TXT} (${this.props.headerInfo.LOC_WBS_ELEM})`],
['FRIZ', `${this.props.headerInfo.SETTLORDER_TXT} (${this.props.headerInfo.SETTLORDER})`],
]
}
}
componentWillReceiveProps(nextProps) {
if (nextProps.headerInfo != null) {
this.setState({ tableHead0: [nextProps.headerInfo] })
}
alert(JSON.stringify(nextProps))
}
render() {
const state = this.state;
return (
<View style={styles.container}>
<FlatList
//pass your state in data
data={this.state.tableData3}
renderItem={({ item }) =>
<View>
<Text>{item}</Text>
//this render item render the data so you can show data as you
want to.
</View>
}
keyExtractor={item => item.id}
/>
</View>
)
}
}
const styles = StyleSheet.create({
container: { flex: 1, backgroundColor: '#fff' },
head0: { height: 80, backgroundColor: '#54beff' },
head: { height: 40, backgroundColor: '#9febf5' },
headText: { fontWeight: 'bold', fontSize: 20 },
text: { margin: 10 },
});
the item in render item contain all the data and print it, weather it contain 100 of item it will print it in a list and you can scroll it , Flatlist is used with array data only.
Hope it helps, feel free for Doubts.
Home.js
I am using my own search Icon not,from react native elements..I dont know how to do search through items I m getting from the backend...
this.state = {
data: [],
isLoading: true
}
componentDidMount(){
API.get_products()
.then((products) => {
this.setState({
data: products.data,
isLoading: false
});
})
.catch(err => alert(err.message));
}
Search.js
render() {
if (this.state.showSearchBar) {
return <TextInput
style={{width: width, backgroundColor: 'white', fontSize: 18, paddingLeft: 10}}
placeholder={'Search'}
/>
}
return(
<View>
<TouchableOpacity
onPress={() => {
this.setState({showSearchBar: true})
}}
>
<Image
source={require('../images/tabs/search.png')}
style={{height: 40, width: 60}}
resizeMode={'contain'}
/>
</TouchableOpacity>
</View>
)
App.js
Here's the home page.which gives the ability to navigate
const Inside = TabNavigator(
{
Home: {
screen: Home,
navigationOptions: {
headerLeft: null,
headerTitle: "Blue Rocker",
headerRight: <Search/>,
}})
Your question is unclear and it misses informations... If you want to read all your data information, please give us the structure of your data at least.
Since it will certainly be json, you can use the method filter() as so:
var filteredItems = data.filter(function(yourElement) {
return yourElement.aCertainValue == yourInputTextString;
})
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
}} />;
}
}
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.