Searching through ListView
1
I've read through the react native docs and through react native express.
I'm trying to learn react native trough experience and building apps.
My current issue happens after I created an static ListView and try to filter through it. I've found an example of how another was able to achieve it, but I get the error:
undefined is not an object (evaluating 'this.state.rows.length')
I though rows was defined in:
state = {
dataSource: ds.cloneWithRows(rows)
}
So I'm confused to where the error comes from.
app file
import React, { Component } from 'react';
import {
AppRegistry,
ListView,
View,
Text,
StyleSheet,
Image,
Button,
TouchableOpacity,
TextInput,
ScrollView,
Icon,
} from 'react-native';
import { createStackNavigator, } from 'react-navigation';
const image1 = require('./assets/card-0.png')
const image2 = require('./assets/card-2.png')
const image3 = require('./assets/card-3.png')
const image4 = require('./assets/card-4.png')
const image5 = require('./assets/card-5.png')
// Row data (hard-coded)
const rows = [
{id: 0, club: 'Club Air', genre: 'Hip Hop / R&B', image: image1},
{id: 1, club: 'Abe', genre: 'Hip Hop / R&B', image: image2},
{id: 2, club: 'John Doe', genre: 'Hip Hop / R&B', image: image3},
{id: 3, club: 'Encore', genre: 'Hip Hop / R&B', image: image4},
{id: 4, club: 'Jimmy Whoo', genre: 'Hip Hop / R&B', image: image5},
]
// Row comparison function
const rowHasChanged = (r1, r2) => r1.id !== r2.id
// DataSource template object
const ds = new ListView.DataSource({rowHasChanged})
export class HomeScreen extends Component {
static navigationOptions = {
// title: ' Alpha',
header: null,
};
state = {
dataSource: ds.cloneWithRows(rows)
}
setSearchText(event){
const searchText = event.nativeEvent.text;
clubsLength = this.state.rows.length;
aClub= this.state.rows;
const filteredClubs = this.state.rows.filter(checkTitle);
console.log("clubs: " + JSON.stringify(filteredClubs));
function checkClub() {
for(i=0;i<clubsLength;i++){
if(aClub[i].club === searchText){
console.log("found: " + aClub[i].club);
return aClub[i];
}
}
}
this.setState({
searchText,
dataSource: this.state.dataSource.cloneWithRows(filteredClubs),
});
}
renderRow = (rowData) => {
return (
<View style={styles.card}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Details')}>
<View style={styles.innerCard}>
<Image
style={styles.imageCard}
source={rowData.image}
/>
<Text style={styles.innerText}>
{rowData.club}
</Text>
</View>
<View style={styles.outerCard}>
<Text style={styles.outerText}>
{rowData.genre}
</Text>
<Text style = {styles.outerTexts}>
View
</Text>
</View>
</TouchableOpacity>
</View>
)
}
render() {
return (
<ScrollView style={styles.container}>
<View style={styles.SearchBarContainer}>
<TextInput
placeholder="Search"
value={this.state.searchText}
onChange={this.setSearchText.bind(this)}
style={styles.searchBar}
underlineColorAndroid="#DD016B"
selectionColor="#DD016B"
/>
</View>
<ListView
style={styles.listContainer}
dataSource={this.state.dataSource}
renderRow={this.renderRow}
/>
</ScrollView>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'black',
width:'100%',
// height: 299,
},
SearchBarContainer: {
justifyContent: 'center',
alignItems: 'center'
},
listContainer: {
flex: 1,
backgroundColor: 'black',
width:'100%',
// height: 299,
},
button: {
backgroundColor: 'transparent',
width: '50%',
},
textInput: {
height: 30,
borderWidth: 1,
borderColor: '#DD016B',
marginBottom: 10,
marginHorizontal: 10,
},
searchBar: {
textAlign: 'center',
height: 40,
width:200,
color: '#DD016B',
borderColor: '#DD016B',
// selectionColor: '#DD016B',
// borderWidth: 1,
// borderRadius: 5,
marginBottom:20,
marginTop: 20,
justifyContent: 'center',
},
card: {
marginBottom: 15,
},
innerCard: {
height:110,
},
imageCard: {
width: 500,
height: 150,
paddingTop: 0,
paddingBottom: 0,
marginBottom:0,
marginTop: 0,
},
innerText: {
color: 'white',
marginBottom: 0,
fontSize: 35,
position: 'absolute',
top: 100,
},
outerText: {
color: '#DD016B',
marginBottom: 0,
marginTop: 50,
width: 100,
},
})
AppRegistry.registerComponent('App', () => App)
export default createStackNavigator({
Home: {
screen: HomeScreen,
},
}, {
initialRouteName: 'Home',
});
reactjs react-native
edited Nov 12 at 5:04
Cœur
17.4k9102144
asked Nov 11 at 21:17
Salman
1919
add a comment |
1
I've read through the react native docs and through react native express.
I'm trying to learn react native trough experience and building apps.
My current issue happens after I created an static ListView and try to filter through it. I've found an example of how another was able to achieve it, but I get the error:
undefined is not an object (evaluating 'this.state.rows.length')
I though rows was defined in:
state = {
dataSource: ds.cloneWithRows(rows)
}
So I'm confused to where the error comes from.
app file
import React, { Component } from 'react';
import {
AppRegistry,
ListView,
View,
Text,
StyleSheet,
Image,
Button,
TouchableOpacity,
TextInput,
ScrollView,
Icon,
} from 'react-native';
import { createStackNavigator, } from 'react-navigation';
const image1 = require('./assets/card-0.png')
const image2 = require('./assets/card-2.png')
const image3 = require('./assets/card-3.png')
const image4 = require('./assets/card-4.png')
const image5 = require('./assets/card-5.png')
// Row data (hard-coded)
const rows = [
{id: 0, club: 'Club Air', genre: 'Hip Hop / R&B', image: image1},
{id: 1, club: 'Abe', genre: 'Hip Hop / R&B', image: image2},
{id: 2, club: 'John Doe', genre: 'Hip Hop / R&B', image: image3},
{id: 3, club: 'Encore', genre: 'Hip Hop / R&B', image: image4},
{id: 4, club: 'Jimmy Whoo', genre: 'Hip Hop / R&B', image: image5},
]
// Row comparison function
const rowHasChanged = (r1, r2) => r1.id !== r2.id
// DataSource template object
const ds = new ListView.DataSource({rowHasChanged})
export class HomeScreen extends Component {
static navigationOptions = {
// title: ' Alpha',
header: null,
};
state = {
dataSource: ds.cloneWithRows(rows)
}
setSearchText(event){
const searchText = event.nativeEvent.text;
clubsLength = this.state.rows.length;
aClub= this.state.rows;
const filteredClubs = this.state.rows.filter(checkTitle);
console.log("clubs: " + JSON.stringify(filteredClubs));
function checkClub() {
for(i=0;i<clubsLength;i++){
if(aClub[i].club === searchText){
console.log("found: " + aClub[i].club);
return aClub[i];
}
}
}
this.setState({
searchText,
dataSource: this.state.dataSource.cloneWithRows(filteredClubs),
});
}
renderRow = (rowData) => {
return (
<View style={styles.card}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Details')}>
<View style={styles.innerCard}>
<Image
style={styles.imageCard}
source={rowData.image}
/>
<Text style={styles.innerText}>
{rowData.club}
</Text>
</View>
<View style={styles.outerCard}>
<Text style={styles.outerText}>
{rowData.genre}
</Text>
<Text style = {styles.outerTexts}>
View
</Text>
</View>
</TouchableOpacity>
</View>
)
}
render() {
return (
<ScrollView style={styles.container}>
<View style={styles.SearchBarContainer}>
<TextInput
placeholder="Search"
value={this.state.searchText}
onChange={this.setSearchText.bind(this)}
style={styles.searchBar}
underlineColorAndroid="#DD016B"
selectionColor="#DD016B"
/>
</View>
<ListView
style={styles.listContainer}
dataSource={this.state.dataSource}
renderRow={this.renderRow}
/>
</ScrollView>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'black',
width:'100%',
// height: 299,
},
SearchBarContainer: {
justifyContent: 'center',
alignItems: 'center'
},
listContainer: {
flex: 1,
backgroundColor: 'black',
width:'100%',
// height: 299,
},
button: {
backgroundColor: 'transparent',
width: '50%',
},
textInput: {
height: 30,
borderWidth: 1,
borderColor: '#DD016B',
marginBottom: 10,
marginHorizontal: 10,
},
searchBar: {
textAlign: 'center',
height: 40,
width:200,
color: '#DD016B',
borderColor: '#DD016B',
// selectionColor: '#DD016B',
// borderWidth: 1,
// borderRadius: 5,
marginBottom:20,
marginTop: 20,
justifyContent: 'center',
},
card: {
marginBottom: 15,
},
innerCard: {
height:110,
},
imageCard: {
width: 500,
height: 150,
paddingTop: 0,
paddingBottom: 0,
marginBottom:0,
marginTop: 0,
},
innerText: {
color: 'white',
marginBottom: 0,
fontSize: 35,
position: 'absolute',
top: 100,
},
outerText: {
color: '#DD016B',
marginBottom: 0,
marginTop: 50,
width: 100,
},
})
AppRegistry.registerComponent('App', () => App)
export default createStackNavigator({
Home: {
screen: HomeScreen,
},
}, {
initialRouteName: 'Home',
});
reactjs react-native
edited Nov 12 at 5:04
Cœur
17.4k9102144
asked Nov 11 at 21:17
Salman
1919
YourHomeScreencomponent doesn't haverowsin its state.
– Tholle
Nov 11 at 21:23
@Tholle Could you care to explain to me, or where I can find it explained how to do this?
– Salman
Nov 11 at 22:13
You have yourrowsarray as a variable outside of your component. If you want it in your state you can write e.g.state = { dataSource: ds.cloneWithRows(rows), rows }or referencerowsinstead ofthis.state.rows.
– Tholle
Nov 11 at 22:16
@Tholle , that seemed to have helped. It seems the app searches but can't find the title, but i'll keep troubleshooting and looking trough the docs. You can post it as an answer so I can close this question. Thank you! :)
– Salman
Nov 12 at 9:52
add a comment |
1
1
1
I've read through the react native docs and through react native express.
I'm trying to learn react native trough experience and building apps.
My current issue happens after I created an static ListView and try to filter through it. I've found an example of how another was able to achieve it, but I get the error:
undefined is not an object (evaluating 'this.state.rows.length')
I though rows was defined in:
state = {
dataSource: ds.cloneWithRows(rows)
}
So I'm confused to where the error comes from.
app file
import React, { Component } from 'react';
import {
AppRegistry,
ListView,
View,
Text,
StyleSheet,
Image,
Button,
TouchableOpacity,
TextInput,
ScrollView,
Icon,
} from 'react-native';
import { createStackNavigator, } from 'react-navigation';
const image1 = require('./assets/card-0.png')
const image2 = require('./assets/card-2.png')
const image3 = require('./assets/card-3.png')
const image4 = require('./assets/card-4.png')
const image5 = require('./assets/card-5.png')
// Row data (hard-coded)
const rows = [
{id: 0, club: 'Club Air', genre: 'Hip Hop / R&B', image: image1},
{id: 1, club: 'Abe', genre: 'Hip Hop / R&B', image: image2},
{id: 2, club: 'John Doe', genre: 'Hip Hop / R&B', image: image3},
{id: 3, club: 'Encore', genre: 'Hip Hop / R&B', image: image4},
{id: 4, club: 'Jimmy Whoo', genre: 'Hip Hop / R&B', image: image5},
]
// Row comparison function
const rowHasChanged = (r1, r2) => r1.id !== r2.id
// DataSource template object
const ds = new ListView.DataSource({rowHasChanged})
export class HomeScreen extends Component {
static navigationOptions = {
// title: ' Alpha',
header: null,
};
state = {
dataSource: ds.cloneWithRows(rows)
}
setSearchText(event){
const searchText = event.nativeEvent.text;
clubsLength = this.state.rows.length;
aClub= this.state.rows;
const filteredClubs = this.state.rows.filter(checkTitle);
console.log("clubs: " + JSON.stringify(filteredClubs));
function checkClub() {
for(i=0;i<clubsLength;i++){
if(aClub[i].club === searchText){
console.log("found: " + aClub[i].club);
return aClub[i];
}
}
}
this.setState({
searchText,
dataSource: this.state.dataSource.cloneWithRows(filteredClubs),
});
}
renderRow = (rowData) => {
return (
<View style={styles.card}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Details')}>
<View style={styles.innerCard}>
<Image
style={styles.imageCard}
source={rowData.image}
/>
<Text style={styles.innerText}>
{rowData.club}
</Text>
</View>
<View style={styles.outerCard}>
<Text style={styles.outerText}>
{rowData.genre}
</Text>
<Text style = {styles.outerTexts}>
View
</Text>
</View>
</TouchableOpacity>
</View>
)
}
render() {
return (
<ScrollView style={styles.container}>
<View style={styles.SearchBarContainer}>
<TextInput
placeholder="Search"
value={this.state.searchText}
onChange={this.setSearchText.bind(this)}
style={styles.searchBar}
underlineColorAndroid="#DD016B"
selectionColor="#DD016B"
/>
</View>
<ListView
style={styles.listContainer}
dataSource={this.state.dataSource}
renderRow={this.renderRow}
/>
</ScrollView>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'black',
width:'100%',
// height: 299,
},
SearchBarContainer: {
justifyContent: 'center',
alignItems: 'center'
},
listContainer: {
flex: 1,
backgroundColor: 'black',
width:'100%',
// height: 299,
},
button: {
backgroundColor: 'transparent',
width: '50%',
},
textInput: {
height: 30,
borderWidth: 1,
borderColor: '#DD016B',
marginBottom: 10,
marginHorizontal: 10,
},
searchBar: {
textAlign: 'center',
height: 40,
width:200,
color: '#DD016B',
borderColor: '#DD016B',
// selectionColor: '#DD016B',
// borderWidth: 1,
// borderRadius: 5,
marginBottom:20,
marginTop: 20,
justifyContent: 'center',
},
card: {
marginBottom: 15,
},
innerCard: {
height:110,
},
imageCard: {
width: 500,
height: 150,
paddingTop: 0,
paddingBottom: 0,
marginBottom:0,
marginTop: 0,
},
innerText: {
color: 'white',
marginBottom: 0,
fontSize: 35,
position: 'absolute',
top: 100,
},
outerText: {
color: '#DD016B',
marginBottom: 0,
marginTop: 50,
width: 100,
},
})
AppRegistry.registerComponent('App', () => App)
export default createStackNavigator({
Home: {
screen: HomeScreen,
},
}, {
initialRouteName: 'Home',
});
reactjs react-native
edited Nov 12 at 5:04
Cœur
17.4k9102144
asked Nov 11 at 21:17
Salman
1919
I've read through the react native docs and through react native express.
I'm trying to learn react native trough experience and building apps.
My current issue happens after I created an static ListView and try to filter through it. I've found an example of how another was able to achieve it, but I get the error:
undefined is not an object (evaluating 'this.state.rows.length')
I though rows was defined in:
state = {
dataSource: ds.cloneWithRows(rows)
}
So I'm confused to where the error comes from.
app file
import React, { Component } from 'react';
import {
AppRegistry,
ListView,
View,
Text,
StyleSheet,
Image,
Button,
TouchableOpacity,
TextInput,
ScrollView,
Icon,
} from 'react-native';
import { createStackNavigator, } from 'react-navigation';
const image1 = require('./assets/card-0.png')
const image2 = require('./assets/card-2.png')
const image3 = require('./assets/card-3.png')
const image4 = require('./assets/card-4.png')
const image5 = require('./assets/card-5.png')
// Row data (hard-coded)
const rows = [
{id: 0, club: 'Club Air', genre: 'Hip Hop / R&B', image: image1},
{id: 1, club: 'Abe', genre: 'Hip Hop / R&B', image: image2},
{id: 2, club: 'John Doe', genre: 'Hip Hop / R&B', image: image3},
{id: 3, club: 'Encore', genre: 'Hip Hop / R&B', image: image4},
{id: 4, club: 'Jimmy Whoo', genre: 'Hip Hop / R&B', image: image5},
]
// Row comparison function
const rowHasChanged = (r1, r2) => r1.id !== r2.id
// DataSource template object
const ds = new ListView.DataSource({rowHasChanged})
export class HomeScreen extends Component {
static navigationOptions = {
// title: ' Alpha',
header: null,
};
state = {
dataSource: ds.cloneWithRows(rows)
}
setSearchText(event){
const searchText = event.nativeEvent.text;
clubsLength = this.state.rows.length;
aClub= this.state.rows;
const filteredClubs = this.state.rows.filter(checkTitle);
console.log("clubs: " + JSON.stringify(filteredClubs));
function checkClub() {
for(i=0;i<clubsLength;i++){
if(aClub[i].club === searchText){
console.log("found: " + aClub[i].club);
return aClub[i];
}
}
}
this.setState({
searchText,
dataSource: this.state.dataSource.cloneWithRows(filteredClubs),
});
}
renderRow = (rowData) => {
return (
<View style={styles.card}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Details')}>
<View style={styles.innerCard}>
<Image
style={styles.imageCard}
source={rowData.image}
/>
<Text style={styles.innerText}>
{rowData.club}
</Text>
</View>
<View style={styles.outerCard}>
<Text style={styles.outerText}>
{rowData.genre}
</Text>
<Text style = {styles.outerTexts}>
View
</Text>
</View>
</TouchableOpacity>
</View>
)
}
render() {
return (
<ScrollView style={styles.container}>
<View style={styles.SearchBarContainer}>
<TextInput
placeholder="Search"
value={this.state.searchText}
onChange={this.setSearchText.bind(this)}
style={styles.searchBar}
underlineColorAndroid="#DD016B"
selectionColor="#DD016B"
/>
</View>
<ListView
style={styles.listContainer}
dataSource={this.state.dataSource}
renderRow={this.renderRow}
/>
</ScrollView>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'black',
width:'100%',
// height: 299,
},
SearchBarContainer: {
justifyContent: 'center',
alignItems: 'center'
},
listContainer: {
flex: 1,
backgroundColor: 'black',
width:'100%',
// height: 299,
},
button: {
backgroundColor: 'transparent',
width: '50%',
},
textInput: {
height: 30,
borderWidth: 1,
borderColor: '#DD016B',
marginBottom: 10,
marginHorizontal: 10,
},
searchBar: {
textAlign: 'center',
height: 40,
width:200,
color: '#DD016B',
borderColor: '#DD016B',
// selectionColor: '#DD016B',
// borderWidth: 1,
// borderRadius: 5,
marginBottom:20,
marginTop: 20,
justifyContent: 'center',
},
card: {
marginBottom: 15,
},
innerCard: {
height:110,
},
imageCard: {
width: 500,
height: 150,
paddingTop: 0,
paddingBottom: 0,
marginBottom:0,
marginTop: 0,
},
innerText: {
color: 'white',
marginBottom: 0,
fontSize: 35,
position: 'absolute',
top: 100,
},
outerText: {
color: '#DD016B',
marginBottom: 0,
marginTop: 50,
width: 100,
},
})
AppRegistry.registerComponent('App', () => App)
export default createStackNavigator({
Home: {
screen: HomeScreen,
},
}, {
initialRouteName: 'Home',
});
reactjs react-native
reactjs react-native
edited Nov 12 at 5:04
Cœur
17.4k9102144
asked Nov 11 at 21:17
Salman
1919
edited Nov 12 at 5:04
Cœur
17.4k9102144
asked Nov 11 at 21:17
Salman
1919
edited Nov 12 at 5:04
Cœur
17.4k9102144
edited Nov 12 at 5:04
Cœur
17.4k9102144
edited Nov 12 at 5:04
Cœur
17.4k9102144
17.4k9102144
asked Nov 11 at 21:17
Salman
1919
asked Nov 11 at 21:17
Salman
1919
asked Nov 11 at 21:17
Salman
1919
1919
YourHomeScreencomponent doesn't haverowsin its state.
– Tholle
Nov 11 at 21:23
@Tholle Could you care to explain to me, or where I can find it explained how to do this?
– Salman
Nov 11 at 22:13
You have yourrowsarray as a variable outside of your component. If you want it in your state you can write e.g.state = { dataSource: ds.cloneWithRows(rows), rows }or referencerowsinstead ofthis.state.rows.
– Tholle
Nov 11 at 22:16
@Tholle , that seemed to have helped. It seems the app searches but can't find the title, but i'll keep troubleshooting and looking trough the docs. You can post it as an answer so I can close this question. Thank you! :)
– Salman
Nov 12 at 9:52
add a comment |
YourHomeScreencomponent doesn't haverowsin its state.
– Tholle
Nov 11 at 21:23
@Tholle Could you care to explain to me, or where I can find it explained how to do this?
– Salman
Nov 11 at 22:13
You have yourrowsarray as a variable outside of your component. If you want it in your state you can write e.g.state = { dataSource: ds.cloneWithRows(rows), rows }or referencerowsinstead ofthis.state.rows.
– Tholle
Nov 11 at 22:16
@Tholle , that seemed to have helped. It seems the app searches but can't find the title, but i'll keep troubleshooting and looking trough the docs. You can post it as an answer so I can close this question. Thank you! :)
– Salman
Nov 12 at 9:52
Your
HomeScreen component doesn't have rows in its state.– Tholle
Nov 11 at 21:23
Your
HomeScreen component doesn't have rows in its state.– Tholle
Nov 11 at 21:23
@Tholle Could you care to explain to me, or where I can find it explained how to do this?
– Salman
Nov 11 at 22:13
@Tholle Could you care to explain to me, or where I can find it explained how to do this?
– Salman
Nov 11 at 22:13
You have your
rows array as a variable outside of your component. If you want it in your state you can write e.g. state = { dataSource: ds.cloneWithRows(rows), rows } or reference rows instead of this.state.rows.– Tholle
Nov 11 at 22:16
You have your
rows array as a variable outside of your component. If you want it in your state you can write e.g. state = { dataSource: ds.cloneWithRows(rows), rows } or reference rows instead of this.state.rows.– Tholle
Nov 11 at 22:16
@Tholle , that seemed to have helped. It seems the app searches but can't find the title, but i'll keep troubleshooting and looking trough the docs. You can post it as an answer so I can close this question. Thank you! :)
– Salman
Nov 12 at 9:52
@Tholle , that seemed to have helped. It seems the app searches but can't find the title, but i'll keep troubleshooting and looking trough the docs. You can post it as an answer so I can close this question. Thank you! :)
– Salman
Nov 12 at 9:52
add a comment |
1 Answer
1
active
oldest
votes
1
The reason why you get your error is because you are trying to read rows from your state, but rows is an array outside of your component.
You could either reference the rows array that is outside of your state, or put the array in state when you create it.
Example
export class HomeScreen extends Component {
static navigationOptions = {
header: null
};
state = {
dataSource: ds.cloneWithRows(rows),
rows
};
// ...
}
answered Nov 12 at 9:52
Tholle
33.7k53760
Do you happen to know why I dont get any results when I search? Example : club air. I just get an empty screen.
– Salman
Nov 12 at 9:54
@Salman I'm not quite sure. It might be worth creating a Minimal, Complete, and Verifiable example in e.g. CodeSandbox and create a new question with that.
– Tholle
Nov 12 at 9:55
1
Thanks CodeSandbox seems very useful! I'll see if i can trouble shoot it
– Salman
Nov 12 at 9:56
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53253325%2fsearching-through-listview%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
The reason why you get your error is because you are trying to read rows from your state, but rows is an array outside of your component.
You could either reference the rows array that is outside of your state, or put the array in state when you create it.
Example
export class HomeScreen extends Component {
static navigationOptions = {
header: null
};
state = {
dataSource: ds.cloneWithRows(rows),
rows
};
// ...
}
answered Nov 12 at 9:52
Tholle
33.7k53760
Do you happen to know why I dont get any results when I search? Example : club air. I just get an empty screen.
– Salman
Nov 12 at 9:54
@Salman I'm not quite sure. It might be worth creating a Minimal, Complete, and Verifiable example in e.g. CodeSandbox and create a new question with that.
– Tholle
Nov 12 at 9:55
1
Thanks CodeSandbox seems very useful! I'll see if i can trouble shoot it
– Salman
Nov 12 at 9:56
add a comment |
1
The reason why you get your error is because you are trying to read rows from your state, but rows is an array outside of your component.
You could either reference the rows array that is outside of your state, or put the array in state when you create it.
Example
export class HomeScreen extends Component {
static navigationOptions = {
header: null
};
state = {
dataSource: ds.cloneWithRows(rows),
rows
};
// ...
}
answered Nov 12 at 9:52
Tholle
33.7k53760
Do you happen to know why I dont get any results when I search? Example : club air. I just get an empty screen.
– Salman
Nov 12 at 9:54
@Salman I'm not quite sure. It might be worth creating a Minimal, Complete, and Verifiable example in e.g. CodeSandbox and create a new question with that.
– Tholle
Nov 12 at 9:55
1
Thanks CodeSandbox seems very useful! I'll see if i can trouble shoot it
– Salman
Nov 12 at 9:56
add a comment |
1
1
1
The reason why you get your error is because you are trying to read rows from your state, but rows is an array outside of your component.
You could either reference the rows array that is outside of your state, or put the array in state when you create it.
Example
export class HomeScreen extends Component {
static navigationOptions = {
header: null
};
state = {
dataSource: ds.cloneWithRows(rows),
rows
};
// ...
}
answered Nov 12 at 9:52
Tholle
33.7k53760
The reason why you get your error is because you are trying to read rows from your state, but rows is an array outside of your component.
You could either reference the rows array that is outside of your state, or put the array in state when you create it.
Example
export class HomeScreen extends Component {
static navigationOptions = {
header: null
};
state = {
dataSource: ds.cloneWithRows(rows),
rows
};
// ...
}
answered Nov 12 at 9:52
Tholle
33.7k53760
edited Nov 12 at 9:54
answered Nov 12 at 9:52
Tholle
33.7k53760
answered Nov 12 at 9:52
Tholle
33.7k53760
answered Nov 12 at 9:52
Tholle
33.7k53760
33.7k53760
Do you happen to know why I dont get any results when I search? Example : club air. I just get an empty screen.
– Salman
Nov 12 at 9:54
@Salman I'm not quite sure. It might be worth creating a Minimal, Complete, and Verifiable example in e.g. CodeSandbox and create a new question with that.
– Tholle
Nov 12 at 9:55
1
Thanks CodeSandbox seems very useful! I'll see if i can trouble shoot it
– Salman
Nov 12 at 9:56
add a comment |
Do you happen to know why I dont get any results when I search? Example : club air. I just get an empty screen.
– Salman
Nov 12 at 9:54
@Salman I'm not quite sure. It might be worth creating a Minimal, Complete, and Verifiable example in e.g. CodeSandbox and create a new question with that.
– Tholle
Nov 12 at 9:55
1
Thanks CodeSandbox seems very useful! I'll see if i can trouble shoot it
– Salman
Nov 12 at 9:56
Do you happen to know why I dont get any results when I search? Example : club air. I just get an empty screen.
– Salman
Nov 12 at 9:54
Do you happen to know why I dont get any results when I search? Example : club air. I just get an empty screen.
– Salman
Nov 12 at 9:54
@Salman I'm not quite sure. It might be worth creating a Minimal, Complete, and Verifiable example in e.g. CodeSandbox and create a new question with that.
– Tholle
Nov 12 at 9:55
@Salman I'm not quite sure. It might be worth creating a Minimal, Complete, and Verifiable example in e.g. CodeSandbox and create a new question with that.
– Tholle
Nov 12 at 9:55
1
1
Thanks CodeSandbox seems very useful! I'll see if i can trouble shoot it
– Salman
Nov 12 at 9:56
Thanks CodeSandbox seems very useful! I'll see if i can trouble shoot it
– Salman
Nov 12 at 9:56
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53253325%2fsearching-through-listview%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Your
HomeScreencomponent doesn't haverowsin its state.– Tholle
Nov 11 at 21:23
@Tholle Could you care to explain to me, or where I can find it explained how to do this?
– Salman
Nov 11 at 22:13
You have your
rowsarray as a variable outside of your component. If you want it in your state you can write e.g.state = { dataSource: ds.cloneWithRows(rows), rows }or referencerowsinstead ofthis.state.rows.– Tholle
Nov 11 at 22:16
@Tholle , that seemed to have helped. It seems the app searches but can't find the title, but i'll keep troubleshooting and looking trough the docs. You can post it as an answer so I can close this question. Thank you! :)
– Salman
Nov 12 at 9:52