React Native Lists 1 Overview React Native provides a suite of - PowerPoint PPT Presentation

React Native Lists 1

Overview React Native provides a suite of components for presenting lists of • data. – Generally use either FlatList or SectionList . The FlatList component displays a scrolling list of changing, but • similarly structured, data. – works well for long lists of data, where the number of items might change over time. – Unlike ScrollView , the FlatList only renders elements that are currently showing on the screen, not all the elements at once. The FlatList component requires two props: • – Data: . the source of information for the list – renderItem. Function that takes one item from the source and returns a formatted component to render. 2

Example • creates a simple FlatList of hardcoded data. • Each item in the data props is rendered as a Text component. • The FlatListBasics component then renders the FlatList and all Text components. 3

import React from 'react'; import { StyleSheet, Text, View, FlatList } from 'react-native’; export default class FlatListBasics extends React.Component { constructor(props){ super(props); this.state = { data: [ { key: "a" }, { key: "b" }, { key: "c" }, { key: "d" }, { key: "a longer example" }, { key: "e" }, { key: "f" }, { key: "g" }, { key: "h" }, { key: "i" }, { key: "j" }, { key: "k" }, Each item in this list must have a variable named “key”. { key: "l" }, May also have other variables. { key: "m" }, { key: "n" }, { key: "o" }, { key: "p" } ] }; } 4

_renderItem = data => { return <Text style={styles.row}>{data.item.key}</Text>; }; render() { return ( Array or list of data <View style={styles.container}> Two arguments <FlatList data={this.state.data} renderItem={this._renderItem} /> </View> Function that takes an item and renders it ); } } 5

const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#F5FCFF', alignItems: 'center', justifyContent: 'center', marginTop: 100, }, row: { fontSize: 24, padding: 42, borderWidth: 1, borderColor: "#DDDDDD", } }); 6

Can use “objects” in the list _renderItem = data => { constructor(props){ return <Text style={styles.row}>{data.item.key}: super(props); this.state = { {data.item.name}</Text>; data: [ }; { key: "a", name:"John"}, Must access each variable in each object { key: "b", name: "Jesse" }, { key: "c", name: "Julie" }, { key: "d", name: "Jim" }, { key: "a longer example", name: "Joe" }, { key: "e", name: "Josephine" }, { key: "f", name: "Jerry" }, Each item in this list must have a variable { key: "g", name: "Julianna" }, named “key”. { key: "h", name: "Jessica" }, { key: "i", name: "Jennifer" }, May also have other variables. { key: "j", name: "Jasmine" }, { key: "k", name: "Julia" }, { key: "l", name: "John" }, { key: "m", name: "Jay" }, { key: "n", name: "Jayden" }, { key: "o", name: "Jeret" }, { key: "p", name: "Judah" } ] }; 7 }

Adding data to a list • Same code as before – Add textInput and button – Add updateState function 8

import React from 'react'; import { StyleSheet, Text, View, FlatList, TextInput, Button, Alert } from 'react-native'; export default class FlatListBasics extends React.Component { constructor(props){ super(props); New state variables to hold text input this.state = { myState: "ZZ", { key: "h", name: "Jessica" }, myState2: "No One", { key: "i", name: "Jennifer" }, data: [ { key: "j", name: "Jasmine" }, { key: "a", name:"John"}, { key: "k", name: "Julia" }, { key: "b", name: "Jesse" }, { key: "l", name: "John" }, { key: "c", name: "Julie" }, { key: "m", name: "Jay" }, { key: "d", name: "Jim" }, { key: "n", name: "Jayden" }, { key: "a longer example", name: "Joe" }, { key: "o", name: "Jeret" }, { key: "e", name: "Josephine" }, { key: "p", name: "Judah" } { key: "f", name: "Jerry" }, ] { key: "g", name: "Julianna" }, }; } 9

_renderItem = data => { return <Text style={styles.row}>{data.item.key}: {data.item.name}</Text>; }; This function is same as last example; styles a Add a new value to the data array. single row. updateState = () => { Alert.alert(”New key: " + this.state.myState + “ New name: “ + this.state.myState2); var newDs = []; newDs = this.state.data.slice(); newDs.push({ key:this.state.myState, name:this.state.myState2}) this.setState({ data: newDs}); }; 1. Create new empty array named newDS 2. Function slice() is a built-in JS array function. With no parameters it returns the entire array (which is stored in the state variable named data ) 3. Push the new element onto the newDS array 4. Change value of state variable named data to the new updated array. 10

render() { return ( <View style={styles.container}> <FlatList style={{flex: 3}} data={this.state.data} renderItem={this._renderItem} /> <TextInput style={{flex:1}} When textInput style={{height: 40}} values change, placeholder="Type here to translate!" store in new onChangeText={(myState) => this.setState({myState})} state variables /> <TextInput style={{flex:1}} style={{height: 40}} Add TextInput placeholder="This is the second input line: type more!" fields and Button onChangeText={(myState2) => this.setState({myState2})} /> <Button style={{marginBottom: 100}} onPress={this.updateState } When Button pressed title="Add Person" call event handler /> </View> ); } 11 }

Touching items • Can use any of the touchable components • Just need to wrap the component around our text in the _renderItem function. 12

_onPressButton(name) { Alert.alert('You pressed the button ' + name); } _renderItem = data => { Note difference in the onPress argument. Must return( pass a function not execute a function like before <TouchableHighlight onPress={() => this._onPressButton(data.item.name)} underlayColor="yellow"> <Text style={styles.row}>{data.item.key}: {data.item.name} </Text> </TouchableHighlight> ) }; render() { return ( <View style={styles.container}> <FlatList data={this.state.data} renderItem={this._renderItem} /> </View> ); } All other code remains the same. } 13

keyExtractor • What if your data has a field with a unique identifier but the field is not named “key”? • Use the keyExtractor field of the flatlist – This identifies the field that you’d like to use as the ”key” field 14

keyExtractor _keyExtractor = (item, index) => item.id; This user-defined function receives render() { two parameters: an item from the return ( data and the index of the item. <FlatList Here we just return the “id” field from data={this.props.data} the item. You must know which field extraData={this.state} in your object is unique keyExtractor={this._keyExtractor} renderItem={this._renderItem} /> ); } 15