Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
146
rated 0 times [  150] [ 4]  / answers: 1 / hits: 21233  / 8 Years ago, mon, february 15, 2016, 12:00:00

For example, I have a list of towns. I need to create something like
this



How to create it (for Android and IOS)? And where I should to store it?


More From » reactjs

 Answers
3

OK, so based on the little information you've given us, I tried to make a quick example (no design at all) that you can find here



I'll let you do the styling.



Reading your data from the JSON file : check this



The code is the following :



'use strict';

var React = require('react-native');
var {
AppRegistry,
Component,
StyleSheet,
Text,
TextInput,
ListView,
View,
} = React;

var adresses = [
{
street: 1 Martin Place,
city: Sydney,
country: Australia
},{
street: 1 Martin Street,
city: Sydney,
country: Australia
}
];

var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

class SampleApp extends Component {
constructor(props) {
super(props);

this.state = {
searchedAdresses: []
};
};

searchedAdresses = (searchedText) => {
var searchedAdresses = adresses.filter(function(adress) {
return adress.street.toLowerCase().indexOf(searchedText.toLowerCase()) > -1;
});
this.setState({searchedAdresses: searchedAdresses});
};

renderAdress = (adress) => {
return (
<View>
<Text>{adress.street}, {adress.city}, {adress.country}</Text>
</View>
);
};
render() {
return (
<View style={styles.container}>
<TextInput
style={styles.textinput}
onChangeText={this.searchedAdresses}
placeholder=Type your adress here />
<ListView
dataSource={ds.cloneWithRows(this.state.searchedAdresses)}
renderRow={this.renderAdress} />
</View>
);
};
}

var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFFFFF',
},
textinput: {
marginTop: 30,
backgroundColor: '#DDDDDD',
height: 40,
width: 200
}
});

AppRegistry.registerComponent('SampleApp', () => SampleApp);

[#63312] Friday, February 12, 2016, 8 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
braeden

Total Points: 231
Total Questions: 96
Total Answers: 86

Location: Somalia
Member since Mon, Dec 28, 2020
3 Years ago
;