Develop Reference

How to update rendered flat/section list items immediately React Native

I am creating a ContactListScreen. The immediate child of ContactListScreen is ContactItems and ContactItems is a sectionList which renders each ContactItem.
But the problem arises, as my ContactItems should be multi-selectable.
I passed the array of selectedContacts from my state to every ContactItem. The logic here I used is ContactItem checks if the length of selectedContacts is 0 or not. If the length is zero it should not render any selectItemView, if I select an item, it should push itself to the selectedContacts using a callback. But the problem is the children components (ContactItem)s doesn't get updated until I selected deselect an item twice or thrice. How can I make it work?
Part of ContactList.tsx
class ContactList extends Component {
this.state = {
loading: false,
error: null,
data: [],
selectedItems: []
};
handleSelectionPress = (item) => {
this.setState(prevState => {
const { selectedItems } = prevState;
const isSelected = selectedItems.includes(item);
return {
selectedItems: isSelected
? selectedItems.filter(title => title !== item)
: [item, ...selectedItems],
};
});
};
renderItem(item: any) {
return <ContactItem item={item.item}
isSelected={this.state.selectedItems.includes(item.item)}
onPress={this.handleSelectionPress}
selectedItems={this.state.selectedItems}
/>;
}
render() {
return (
<View style={styles.container}>
<SectionList
sections={this.state.data}
keyExtractor={(item, index) => item.id}
renderItem={this.renderItem.bind(this)}
renderSectionHeader={({section}) => (
section.data.length > 0 ?
<Text>
{section.title}
</Text> : (null)
)}
/>
</View>
);
}
}
Part of ContactItem.tsx
class ContactItem extend Component {
render() {
const checkBox = <TouchableOpacity onPress={() => {
this.props.onPress(this.props.item)
}
} style={this.props.selectedItems.length > 0 && {display: 'none'}}>
{!this.props.isSelected ?
<View style={{borderRadius: 10, height: 20, width: 20, borderColor: "#f0f", borderWidth: 1}}>
</View> : <View style={{
borderRadius: 10,
height: 20,
width: 20,
borderColor: "#f0f",
borderWidth: 1,
backgroundColor: "#f0f"
}}>
</View>}
</TouchableOpacity>
return (
<View style={this.styles.contactsContainer}>
<TouchableOpacity
onLongPress={() => this.props.onPress(this.props.item)}>
<View style={this.styles.contactInfo}>
{checkBox}
</View>
</TouchableOpacity>
</View>
);
}
Note: Functional Components are not used where I work.

I'm not 100% certain about this, but I have a feeling that the problem is that the SectionList component isn't triggering its update because the supplied sections={this.state.data} property never changes.
The easiest way to handle this is to add the selectedItems as an extraData property to section list:
<SectionList
sections={this.state.data}
extraData={this.state.selectedItems}
//...

Flatlist does not render if have one object in data?

I have some issue with Flatlist, I have an array of objects I got them from DB,
and save them to state, now when I log the this.state.providers in render() method or in the callback func after setState I got the valid Object like this
[{username: "Test", key: "53HoDga6aYhHsV5pCi5sx6LGbx42"}]
but when I passed these object into data prop in <Flatlist data={this.state.providers} /> the flatlist not rendering!
but when I add the object in the data prop manual like this
<Flatlist data={[{username: "Test One", key: "53HoDga6aYhHsV5pCi5sx6LGbx42"}]}
the flatlist work very well,
But I'm sure the code is correct because I added them into other project and work very well!!
Edit
when I pass tow object into the array the flatlist work!!
so how to handle it if I got one object from DB!
Code
import React, { Component } from "react";
import firebase from "react-native-firebase";
import Icon from "react-native-vector-icons/Ionicons";
import {
View,
Text,
StyleSheet,
FlatList,
TouchableOpacity,
Dimensions
} from "react-native";
class ListChats extends Component {
constructor(props) {
super(props);
this.state = {
providers: []
};
}
_chatList = () => {
let currentUser = firebase.auth().currentUser.uid;
let ref = firebase.database().ref(`Messages/${currentUser}`);
let providersKeys = [];
ref.once("value").then(snapshot => {
snapshot.forEach(childsnap => {
console.log(childsnap.key);
providersKeys.push(childsnap.key);
});
let usernames = [];
providersKeys.forEach(key => {
firebase
.database()
.ref("users")
.child(key)
.once("value")
.then(providersShot => {
let username = providersShot.val().username;
usernames.push({ username: username, key: key });
});
});
this.setState({ providers: usernames }, () =>
console.log(this.state.providers)
);
});
};
componentDidMount() {
this._chatList();
}
_listEmptyComponent = () => {
return (
<View style={styles.container}>
<Text style={{ alignSelf: "center" }}>No Chats Found :O</Text>
</View>
);
};
render() {
console.log(this.state.providers); // I got [{username: "Test", key: "53HoDga6aYhHsV5pCi5sx6LGbx42"}]
return (
<View style={{ flex: 1 }}>
<FlatList
key={Math.random() * 1000}
data={this.state.providers}
contentContainerStyle={{ flexGrow: 1 }}
ListEmptyComponent={this._listEmptyComponent()}
keyExtractor={item => item.key.toString()}
renderItem={({ item }) => {
console.log("item", item);
return (
<TouchableOpacity
onPress={() =>
this.props.navigation.navigate("ChatDetails", {
Key: item.key,
providerName: item.username
})
}
>
<View style={styles.parent}>
<Icon name="ios-contact" size={50} color="#4d8dd6" />
<View
style={{
flex: 1,
justifyContent: "flex-start",
alignItems: "flex-start",
marginHorizontal: 25
}}
>
<Text
style={{
color: "#000",
fontSize: 17
}}
>
{item.username}
</Text>
</View>
<Icon name="ios-chatboxes" size={25} color="#d6d6d6" />
</View>
</TouchableOpacity>
);
}}
// keyExtractor={(item, index) => index.toString()}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1
},
parent: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
paddingVertical: 25,
marginHorizontal: 15,
borderBottomWidth: 1,
borderBottomColor: "#eee"
}
});
export default ListChats;

You should add extraData property to FlatList:
extraData={this.state}

In here your using usernames.push method to add the data objects to array, using this method will not indicate the state about a need of a re-render even if the state is updated with a new array.
For this usual coding pattern is using the spread operator
this.setState({ providers: [...usernames] })

Use "extraData" props of FlatList.

How do I map over two arrays at the same time in react native?

How do I map over two different arrays in react native? In my case I'm fetching a response from server and mapping over it. Also there is another array named images which I want to list along with the fetched response from server.But the second mapping is looping within the first one. How do I separate it from the first?Following is my code.
sample code
<ScrollView>
{this.state.workers.map(a =>
<CardSection>
<TouchableOpacity onPress={() => this.popupDialog.show()}>
<View style={{ marginTop: 10, marginLeft:120}}>
{images.map(b =>
<Image
style={{ height: 100, width: 100 }}
source={{ uri: b.image }}
/>
)}
<Text style={{marginLeft:20, fontSize:20}}>{a.work_type}</Text>
</View>
</TouchableOpacity>
</CardSection>
)}
workers array is the json response I'm fetching from server.images array is as folows
export const images = [
{
image:'http://localhost:3000/Images/carpenter.png',
text:'hello'
},
{
image:'http://localhost:3000/Images/electrician.png',
text:'hii'
},
]
Also this how workers array looks like
updated
[
{
"sl.no": 1,
"worker_id": "wr_1",
"work_type": "carpenter",
"phone_num": "3456789243"
},
{
"sl.no": 2,
"worker_id": "wr_2",
"work_type": "electrician",
"phone_num": "345221344"
},
{
"sl.no": 3,
"worker_id": "wr_3",
"work_type": "plumber",
"phone_num": "8976545677"
}
]

You can simply move it above the first map and save the result:
render() {
const imagesToRender = images.map(b => {
return (
<Image
style={{ height: 100, width: 100 }}
source={{ uri: b.image }}
/>
);
});
return (
<ScrollView>
{this.state.workers.map(a =>
<CardSection>
<TouchableOpacity onPress={() => this.popupDialog.show()}>
<View style={{ marginTop: 10, marginLeft:120}}>
{imagesToRender}
<Text style={{marginLeft:20, fontSize:20}}>{a.work_type}</Text>
</View>
</TouchableOpacity>
</CardSection>
)}
</ScrollView>
);
}
Also, don't forget to add key props to each Image and each CardSection.

you can easily use flatlist with better performance
import React, { Component } from "react";
import { View, FlatList, TouchableOpacity, Image, Text } from "react-native";
const workers = [
{ id: 1, name: 'Nima', images: [{ image: 'https://www.lens-rumors.com/wp-content/uploads/2014/10/Nikon-AF-S-DX-Nikkor-18-140mm-f3.5-5.6G-ED-VR-sample-images1.jpg', text: 'hello' },{ image: 'https://www.lens-rumors.com/wp-content/uploads/2014/10/Nikon-AF-S-DX-Nikkor-18-140mm-f3.5-5.6G-ED-VR-sample-images1.jpg', text: 'hello' },{ image: 'https://www.lens-rumors.com/wp-content/uploads/2014/10/Nikon-AF-S-DX-Nikkor-18-140mm-f3.5-5.6G-ED-VR-sample-images1.jpg', text: 'hello' },{ image: 'https://www.lens-rumors.com/wp-content/uploads/2014/10/Nikon-AF-S-DX-Nikkor-18-140mm-f3.5-5.6G-ED-VR-sample-images1.jpg', text: 'hello' }] },
{ id: 2, name: 'Mike', images: [{ image: 'https://www.dike.lib.ia.us/images/sample-1.jpg/image', text: 'goodby' },{ image: 'https://www.dike.lib.ia.us/images/sample-1.jpg/image', text: 'goodby' },{ image: 'https://www.dike.lib.ia.us/images/sample-1.jpg/image', text: 'goodby' },{ image: 'https://www.dike.lib.ia.us/images/sample-1.jpg/image', text: 'goodby' },] },
]
class Test extends Component {
constructor(props) {
super(props);
this.state = {
workers: workers
};
}
_renderItem = ({ item }) => {
console.log(item);
return (
<View style={{ flex: 1 }}>
<TouchableOpacity>
<View style={{ marginTop: 10, marginLeft: 120 }}>
{item.images.map((b, index) => {
console.log(b.image);
return (
<View key={index}>
<Image
style={{ height: 100, width: 100 }}
source={{ uri: b.image }}
/>
<Text
style={{ marginLeft: 20, fontSize: 20, color: "black" }}
>
{b.text}
</Text>
</View>
);
})}
<Text style={{ marginLeft: 20, fontSize: 20, color: "black" }}>
{item.name}
</Text>
</View>
</TouchableOpacity>
</View>
);
};
_keyExtractor = (item, index) => item.id.toString();
render() {
return (
<FlatList
data={this.state.workers}
extraData={this.state}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
/>
);
}
}
export default Test;

If the images don't load, it's probably because you pass the wrong properties to the <Image /> component. Look up the docs for <Image /> component or replace it with <img /> instead and pass the url string of the image to the src attribute.
getImageUri(worker) {
// Decide which image to return for a certain type of worker
// For more workers and images, change the following logic
if(worker.work_type == 'carpenter') {
return images[0].image;
} else if(worker.work_type == 'electrician') {
return images[1].image;
} else {
return '';
}
}
render() {
...
<ScrollView>
{this.state.workers.map((a, index) =>
<CardSection>
<TouchableOpacity onPress={() => this.popupDialog.show()}>
<View style={{ marginTop: 10, marginLeft:120}}>
<Image
style={{ height: 100, width: 100 }}
source={{ uri: this.getImageUri(a)}}
/>
<Text style={{marginLeft:20, fontSize:20}}>{a.work_type}</Text>
</View>
</TouchableOpacity>
</CardSection>
)}
</ScrollView>
...
}

React native flatlist item stay checked; props changed

I have a really big problem and I don't know what I'm doing wrong. I also tried to debug everything and I didn't find any solution.
First of all lets say I have 2 components. FROM component A I send some props (array) to component B. I component B I load that props into my state and than I change some data in flatlist and store it on my state in that component. When I go back to previous screen, where is component A and going back to B, that flatlist is still the same and also PROPS stays the same.
Initial props from screen A: (when I firstly go to B component)
"listOfStudents":[{"key":"Suana Kristovski","id":"1358","checked":false,"o":false,"n":false}]
When I change item in flatlist and going back this is the props that arrived into component B:
listOfStudents":[{"key":"Suana Kristovski","id":"1358","checked":true,"o":false,"n":false}]
checked from false -> true,
Problem is that everything I do, I only change my state when item is changed in my flatlist.
Code in screen B:
componentDidMount() {
//console.log('Izvedem se vedno');
console.log('List of students Diary hours: ' + JSON.stringify(this.props.listOfStudents));
this.setState({
data: this.props.navigation.state.params.props.listOfStudents,
textOpombe: this.props.navigation.state.params.props.notes,
textVsebinaUre: this.props.navigation.state.params.props.lesson,
finished: this.props.navigation.state.params.props.finished,
absent: parseInt(this.props.navigation.state.params.props.apsent.substring(0,1)),
});
if(this.props.navigation.state.params.props.listOfStudents.length >= 2) {
this.setState({
height: 130
});
}
this.props.navigation.addListener('willBlur', (playload)=>{
});
}
My flatlist:
<FlatList
ref={(list) => this.myList = list}
style={[styles.flatList,{height: this.state.height}]}
data={this.state.data}
scrollEnabled = {this.state.scrollingChild}
contentContainerStyle={{ padding: 15 }}
renderItem={({ item }) => (
<View style={styles.listItemStyle}>
<View style={{flexDirection: 'row', marginBottom: 7, }}>
{
item.checked &&
<TouchableOpacity
onPress={this.changeCheckedToFalse.bind(this,item)}>
<View style={styles.checked} />
</TouchableOpacity> ||
<TouchableOpacity
onPress={this.changeCheckedToTrue.bind(this,item)}>
<View style={styles.unchecked} />
</TouchableOpacity>
}
<Text style={{color: '#000', opacity: 0.6}}>{item.key}</Text>
{
item.checked &&
<View style={{position: 'absolute', right: 0 }}>
<View style={{flexDirection: 'row'}} >
{
item.o &&
<TouchableOpacity
style={[styles.touchable1Ch,styles.iconStyle1]}
onPress={this.changeSelectionO.bind(this,item)}>
<Text style={{color: '#fff', fontSize: 18, alignSelf: 'center' }}>O</Text>
</TouchableOpacity> ||
<TouchableOpacity
style={[styles.touchable1,styles.iconStyle1]}
onPress={this.changeSelectionO.bind(this,item)}>
<Text style={{color: '#fff', fontSize: 15, alignSelf: 'center' }}>O</Text>
</TouchableOpacity>
}
{
item.n &&
<TouchableOpacity
style={[styles.touchable2Ch,styles.iconStyle1]}
onPress={this.changeSelectionN.bind(this,item)}>
<Text style={{color: '#fff', fontSize: 18, alignSelf: 'center' }}>N</Text>
</TouchableOpacity> ||
<TouchableOpacity
style={[styles.touchable2,styles.iconStyle1]}
onPress={this.changeSelectionN.bind(this,item)}>
<Text style={{color: '#fff', fontSize: 15, alignSelf: 'center' }}>N</Text>
</TouchableOpacity>
}
</View>
</View>
}
</View>
{
this.props.navigation.state.params.props.listOfStudents !== undefined && this.props.navigation.state.params.props.listOfStudents.length >= 2 ?
<View style={styles.line} /> : <Text></Text>
}
</View>
)}
keyExtractor={item => item.id}
/>
Methods for flatlist change item:
changeSelectionO(item) {
var data2 = this.state.data;
var itemIndex = data2.map(function (x) { return x.key; }).indexOf(item.key);
if(data2[itemIndex].o) {
data2[itemIndex].o = false;
} else {
data2[itemIndex].o = true;
if(data2[itemIndex].n) {
data2[itemIndex].n = false;
}
}
this.setState({
data: data2
});
//this.props.listOfStudents
}
changeSelectionN(item) {
var data2 = this.state.data;
var itemIndex = data2.map(function (x) { return x.key; }).indexOf(item.key);
if(data2[itemIndex].n) {
data2[itemIndex].n = false;
} else {
data2[itemIndex].n = true;
if(data2[itemIndex].o) {
data2[itemIndex].o = false;
}
}
this.setState({
data: data2
});
//this.props.listOfStudents
}
Can you please tell me why props is changing?

Access array of objects to display in React Native Text component

I’m having trouble accessing an array of objects in my JSON data to display in a React Native Text component.
JSON data
{
"name": "Pizza Joint",
"when": [{
"day": ["Sat", "Sun"],
"start_time": "11:00",
"end_time": "23:00"
}]
}
Code
<View style={styles.container}>
<Text style={styles.name}>{venue.name}</Text>
<Text style={styles.time}>{venue.when[0].start_time}</Text>
</View>
This throws the error Undefined is not an object (evaluating 'venue.when') which I don't understand since console.log(type of venue.when) returns object.
How can I access the when object properties here?
Additional notes
I copied the app structure from this tutorial.
Here is VenueList.js:
'use strict';
var React = require('react-native');
var VenueDetail = require('./VenueDetail');
var {
Image,
StyleSheet,
Text,
View,
Component,
ListView,
TouchableHighlight,
ActivityIndicatorIOS
} = React;
var styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
padding: 10
},
thumbnail: {
width: 53,
height: 81,
marginRight: 10
},
rightContainer: {
flex: 1,
},
title: {
fontSize: 20,
marginBottom: 8
},
author: {
color: '#656565'
},
separator: {
height: 1,
backgroundColor: '#dddddd'
},
listView: {
backgroundColor: '#F5FCFF'
},
loading: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}
});
// var REQUEST_URL = 'https://www.googleapis.com/books/v1/volumes?q=subject:fiction';
var REQUEST_URL = 'http://apib.miniguide.es/wall/today';
class VenueList extends Component {
render() {
if (this.state.isLoading) {
return this.renderLoadingView();
}
console.log(this.state.dataSource);
return (
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderVenue.bind(this)}
style={styles.listView}
/>
);
}
renderLoadingView() {
return (
<View style={styles.loading}>
<ActivityIndicatorIOS
size='large'/>
<Text>
Loading venues...
</Text>
</View>
);
}
constructor(props) {
super(props);
this.state = {
isLoading: true,
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2
})
};
}
componentDidMount() {
this.fetchData();
}
fetchData() {
fetch(REQUEST_URL)
.then((response) => response.json())
.then((responseData) => {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(responseData),
isLoading: false
});
})
.done();
}
renderVenue(venue) {
console.log(venue);
return (
<TouchableHighlight onPress={() => this.showVenueDetail(venue)} underlayColor='#dddddd'>
<View>
<View style={styles.container}>
<Image
// source={{uri: venue.images[0].url}}
style={styles.thumbnail} />
<View style={styles.rightContainer}>
<Text style={styles.title}>{venue.name}</Text>
<Text style={styles.author}>{venue.subtitle}</Text>
</View>
</View>
<View style={styles.separator} />
</View>
</TouchableHighlight>
);
}
}
module.exports = VenueList;
console.log(venue) produces the following format of data (I am simplifying output here for the purposes of the example):
{
name: 'Pizza Joint',
when: [{
day: ['Sat', 'Sun'],
start_time: '11:00',
end_time: '23:00'
}]
}
I notice the above is not JSON since the quotes on the keys have been stripped out.

Ok I figured it out. The problem was the JSON data set that our API produces has some documents with another definition that delimit the data (e.g. first is document that indicates featured). So React was throwing an error on the first document, which lacked the properties I was attempting to access.
To fix this, I added ternary expressions to the React components to check for the existence of properties:
renderVenue(venue) {
console.log(venue);
return (
<TouchableHighlight onPress={() => this.showVenueDetail(venue)} underlayColor='#dddddd'>
<View>
<View style={styles.container}>
<Image source={ 'images' in venue ? { uri: 'http://' + venue.images[0].url } : null}
style={styles.thumbnail} />
<View style={styles.rightContainer}>
<Text style={styles.title}>{venue.name}</Text>
<Text style={styles.author}>{venue.subtitle}</Text>
<Text style={styles.author}>{ 'when' in venue ? venue.when[0].start_date : null}</Text>
</View>
</View>
<View style={styles.separator} />
</View>
</TouchableHighlight>
);
}
}
Perhaps we should modify our API output.
In any event thanks for comments, they were helpful.