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" }, { key: "l" }, { key: "m" }, { key: "n" }, { key: "o" }, { key: "p" } ] }; }

Each item in this list must have a variable named “key”. May also have other variables.

4

_renderItem = data => { return <Text style={styles.row}>{data.item.key}</Text>; }; render() { return ( <View style={styles.container}> <FlatList data={this.state.data} renderItem={this._renderItem} /> </View> ); } }

Two arguments Function that takes an item and renders it Array or list of data

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

constructor(props){ super(props); this.state = { data: [ { key: "a", name:"John"}, { 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" }, { key: "g", name: "Julianna" }, { key: "h", name: "Jessica" }, { key: "i", name: "Jennifer" }, { 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" } ] }; }

_renderItem = data => { return <Text style={styles.row}>{data.item.key}: {data.item.name}</Text>; }; Each item in this list must have a variable named “key”. May also have other variables. Must access each variable in each object

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); this.state = { myState: "ZZ", myState2: "No One", data: [ { key: "a", name:"John"}, { 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" }, { key: "g", name: "Julianna" },

{ key: "h", name: "Jessica" }, { key: "i", name: "Jennifer" }, { 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" } ] }; } New state variables to hold text input

9

_renderItem = data => { return <Text style={styles.row}>{data.item.key}: {data.item.name}</Text>; }; 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}); };

This function is same as last example; styles a single row. Add a new value to the data array.

• 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}} style={{height: 40}} placeholder="Type here to translate!"

• nChangeText={(myState) => this.setState({myState})}

/> <TextInput style={{flex:1}} style={{height: 40}} placeholder="This is the second input line: type more!"

• nChangeText={(myState2) => this.setState({myState2})}

/> <Button style={{marginBottom: 100}}

• nPress={this.updateState }

title="Add Person" /> </View> ); } }

Add TextInput fields and Button When textInput values change, store in new state variables When Button pressed call event handler

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 => { return( <TouchableHighlight

• nPress={() => 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> ); } }

Note difference in the onPress argument. Must pass a function not execute a function like before 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; render() { return ( <FlatList data={this.props.data} extraData={this.state} keyExtractor={this._keyExtractor} renderItem={this._renderItem} /> ); }

15

This user-defined function receives two parameters: an item from the data and the index of the item. Here we just return the “id” field from the item. You must know which field in your object is unique