import React, { Component } from "react";
import { Text, View, StyleSheet, ListView } from "react-native";
import { Icon } from "react-native-elements";
const ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2
});
class App extends Component {
state = {
dataSource: ds.cloneWithRows([
"Data Structures",
"STL",
"C++",
"Java",
"Python",
"ReactJS",
"Angular",
"NodeJs",
"PHP",
"MongoDb",
"MySql",
"Android",
"iOS",
"Hadoop",
"Ajax",
"Ruby",
"Rails",
".Net",
"Perl",
]),
};
render() {
return (
<View style={styles.screen}>
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData) => (
<View style={styles.row}>
<Text style={styles.rowText}>{rowData}</Text>
<Icon name="ios-eye" type="ionicon" color="#C2185B" />
</View>
)}
/>
</View>
);
}
}
// Screen styles
const styles = StyleSheet.create({
screen: {
marginTop: 30,
},
row: {
margin: 15,
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
paddingHorizontal: 2,
},
rowText: {
fontSize: 18,
},
});
export default App;