InterviewSolution
Saved Bookmarks
InterviewSolution
| 1. |
Explain FlatList components, what are its key features along with a code sample ? |
|
Answer» The FlatList component displays similarly structured data in a scrollable list. It works well for LARGE lists of data where the number of list items might change over time. Key Feature: The FlatList shows only those rendered elements which are currently displaying on the screen, not all the elements of the list at once. import REACT, { Component } from 'react'; import { AppRegistry, FlatList, StyleSheet, Text, View,ALERT } from 'react-native'; export default class FlatListBasics extends Component { renderSeparator = () => { return ( <View style={{ height: 1, width: "100%", backgroundColor: "#000", }} /> ); }; //HANDLING onPress action getListViewItem = (item) => { Alert.alert(item.key); } render() { return ( <View style={styles.container}> <FlatList data={[ {key: 'Android'},{key: 'iOS'}, {key: 'Java'},{key: 'Swift'}, {key: 'Php'},{key: 'Hadoop'},{key: 'Sap'}, ]} renderItem={({item}) => <Text style={styles.item} onPress={this.getListViewItem.bind(this, item)}>{item.key}</Text>} ItemSeparatorComponent={this.renderSeparator} /> </View> ); } } AppRegistry.registerComponent('AwesomeProject', () => FlatListBasics); |
|