Remove item from FlatList in react native - react-native

I am using Flat List in react native to select Multiple images from gallery. Now i want to remove some of image before uploading it to server. I am not sure how to perform that action.
Here is my code...
<FlatList
style={{ paddingBottom: 5, paddingTop: 10 }}
data={this.state.imagesAddFile}
keyExtractor={(y, z) => z.toString()}
renderItem={({ item }) => (
<SelectedLayout
ImageName = {item.name}
/>
)}
/>
Here i am getting list of images properly but not sure how to delete image from list please suggest am answer. Thanks

I am using delete function like below method sharing all the code here:
Step 1: Render view in add a TouchableOpacity like below code:
<TouchableOpacity onPress={() => this.deleteAddress(itemData.item._id)}>
<Icon name="trash" style={{paddingLeft: 10,paddingRight:10}} size={20} color="red" />
</TouchableOpacity>
Step 2: Add a confirmation box like below code:
deleteAddress(id) {
Alert.alert(
'Delete Address',
'Are you sure want to delete this address ?',
[
{text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
{text: 'OK', onPress: () => this.deleteAddressDetail(id)},
],
{ cancelable: false }
)
}
Step 3: Call your API or anything here:
deleteAddressDetail(id) {
//Delete api or anything here
//after that call your list so updated state data will render
}
Your updated flatlist code:
<FlatList
data={this.state.addressList}
keyExtractor={this._keyExtractor}
extraData={this.state}
renderItem={this.renderRowItem}
/>
Use render item like below code:
renderRowItem = (itemData) => {
<TouchableOpacity onPress={() => this.deleteAddress(itemData.item._id)}>
<Icon name="trash" style={{paddingLeft: 10,paddingRight:10}} size={20} color="red" />
</TouchableOpacity>
}

Well, you could remove the desired item based on it's index.start with modifying the flatList
<FlatList
style={{ paddingBottom: 5, paddingTop: 10 }}
data={this.state.imagesAddFile}
keyExtractor={(y, z) => z.toString()}
renderItem={({ item,index }) => (
<SelectedLayout
onPress={(index) =>this.removeItemFromList(index)}
ImageName = {item.name}
/>
)}
/>
you should wrap the component SelectedLayout inside a TouchableOpacity in order to implement onPress or whatever way you like it. if you could provide me with it's code I could show you.
now the removeItemFromList Implementation we're gonna use splice to remove it from imagesAddFile state.
removeItemFromList(index){
let newimagesAddFile = this.state.imagesAddFile;
newimagesAddFile.splice(index,1); //to remove a single item starting at index
this.setState({imagesAddFile:newimagesAddFile})
}

Since you code is not complete in your question, I assume that your SelectedLayout component might be having TouchableOpacity or something similar to handle tap (to select or remove image).
Basically what you want is to modify the datasource of your Flatlist (i.e this.state.imagesAddFile array) from SelectedLayout component.
Create a function in the component containing the flatlist that receives the image name (or image url depending on the structure of your image object) and that function should remove that image from your state (imagesAddFile). Now pass this function as a prop to your SelectedLayout and call this function from SelectedLayout component in onPress of your Touchable**** in SelectedLayout. You can use lodash methods are they are very handy and well written.(You'd be using them a lot)
Your component might look something like this:
handleImageTap = (imageName) => {
const { imagesAddFile } = this.state;
this.setState({
imagesAddFile: _.filter(imagesAddFile,imageObj =>
imageObj.name !== imageName);
})
}
render() {
return(
<FlatList
style={{ paddingBottom: 5, paddingTop: 10 }}
data={this.state.imagesAddFile}
keyExtractor={(y, z) => z.toString()}
renderItem={({ item }) => (
<SelectedLayout
ImageName = {item.name}
handleImageTap = {this.handleImageTap}
/>
)}
/>
)
The line
_.filter(imagesAddFile,imageObj => imageObj.name !== imageName);
is nothing but just a JSX shorthand inside lodash filter method, which is taking imagesAddFile array, iterating over it and returning new array by removing the image object which is having the name equal to image name. Please refer the doc for better clarification.
Ideally you should be checking first whether the image exist in the array or not. Also i'd suggest not to play with image name, use something unique like id, or imageUrl

Related

React native FlatList not rerendering when data prop changes to empty array

I have a FlatList with a data prop pulling from Redux
render() {
return (
<View>
<FlatList
data={this.props.arrayOfPlacesFromRedux}
renderItem={({item}) => {.......
Whenever I dispatch changes to arrayOfPlacesFromRedux(i.e. adding or removing children), the FlatList rerenders....UNLESS I remove all children from array (i.e. make length zero).When arrayOfPlacesFromRedux changes from a positive length to a length of zero, the FlatList does not rerender.....however all other types of changes to array do indeed cause FlatList to rerender
UPDATE 02/27
Below is my reducer used to update Redux arrayOfPlacesFromRedux
const reducer = (state = initialState, action) => {
switch (action.type) {
case UPDATE_PLACES_ARRAY:
return {...state, arrayOfPlaces: action.payload};
default:
return state;
}
};
In the situation noted above when FlatList does not rerender.....action.payload is an empty array
The question is missing some important piece of code.
React as well as Redux need arrays reference to change, meaning for a component to reRender on state change, the array references needs to change.
Live demo at https://snack.expo.dev/RrFFxfeWY
Here is the most interesting parts:
If you have a basic component as below:
const MyList = () => {
const [data, setData] = React.useState([
'#FF0000',
'#FF8000',
'#FFFF00',
]);
return (
<>
<Text>List poping is not working</Text>
<FlatList
data={data}
renderItem={({ item }) => (
<Pressable
onPress={() => {
data.pop(); // Does not work because we are not changing it's ref
}}
style={{ backgroundColor: item, padding: 8 }}>
<Text>{item}</Text>
</Pressable>
)}
/>
</>
);
};
The data need to have a new array reference as below. data2.filter(..) will return a new array, we are not changing the data2 base values, just creating a new array with one item less.
const MyList = () => {
const [data2, setData2] = React.useState([
'#00FFFF',
'#0080FF',
'#0000FF',
]);
return (
<>
<Text>List WORKING!</Text>
<FlatList
data={data2}
renderItem={({ item }) => (
<Pressable
onPress={() => {
setData2(data2.filter(dataItem => dataItem !== item)) // works
//setData2([]); // Also works
}}
style={{ backgroundColor: item, padding: 8 }}>
<Text>{item}</Text>
</Pressable>
)}
/>
</>
);
};
A library like Immer.js simplify the manipulation of states to mutate the object, and immer will created a new reference for you.
Oh no rookie mistake that wasted everyones time!!
I was implementing shouldComponentUpdate method that was stopping Flatlist rendering :(
Thanks for all for the answers
You may need to use ListEmptyComponent, which is a prop that comes with FlatList, src.
Honestly, I'm not sure why it does not re-render when you update your state, or why they added a specific function/prop to render when the array is empty, but it's clear from the docs that this is what's needed.
You can do something like this:
<SafeAreaView style={styles.container}>
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={(item) => item.id}
extraData={selectedId}
--> ListEmptyComponent={() => <MyComponent />}
/>
</SafeAreaView>

why sectionlist render string in one line react native

I am creating group by query in react native by using reduce function then I create section list to display data but I have some issues.
My code
<View>
<SectionList
renderSectionHeader={({ section: { title} }) => (
<Text style={{ fontWeight: 'bold' }}>{title}</Text>
)}
sections={this.state.dataSource}
renderItem={({item, index, section}) => <Text key={index}>{section.data}</Text>}
keyExtractor={(item, index) => item + index}
/>
</View>
const dataSource = responseJson.old_cases.reduce(function (sections, item) {
let section = sections.find(section => section.gender === item.gender);
if (!section) {
section = { gender: item.gender,data:[] };
sections.push(section);
}
section.data.push(item.name)
return sections;
}, []);
this.setState({dataSource: dataSource // Pass the dataSource that we've processed above});
but my output is like that
title //header
name_1,name2
name_1,name2
title2 //header
name_3
Output I want
title //header
name_1
name2
title2 //header
name_3
I just want to show one name per line against each title but according to my code render works fine because first title have two records so it render twice but both names are on same line twice
You're rendering all the data in your section at once, you need to render only one item at once.
In your flatList:
renderItem={({item, index, section}) => <Text key={index}>{item}</Text>}

How To get 2 Flat list To attract instead of repel

So I am working on a react native project and have created a modal.
this modal shows the selected and unselected Tasks. Now For this I created a View With two flat lists as shown:
<View style={styles.tasksListContainer}>
<FlatList
data={tasksToShow}
renderItem={(itemData) => {
if (!itemData.item.usedUp) {
return <TaskIsNotBeingUsed itemData={itemData} onTaskSelect={onTaskSelect}/>
}
}}
/>
<FlatList
data={tasksToShow}
renderItem={(itemData) => {
if (itemData.item.usedUp) {
return <TaskIsBeingUsed itemData={itemData}/>
}
}}
/>
</View>
Now the problem is that all the Selected Tasks And None Selected Tasks have some kind of space between them can anyone tell me why?
Because you're using the same array and sometimes return something but sometimes return nothing so there's empty items. You can do it like that:
// Unchecked
<FlatList
data={tasksToShow.filter(itemData => !itemData.usedUp)}
// Checked
<FlatList
data={tasksToShow.filter(itemData => itemData.usedUp)}
You can use style={{ flexGrow: 0 }} on your FlatLists to prevent them from growing to fill the space.
However, this solution has certain drawbacks (eg. both lists scroll independently, and once the top one grows too large the bottom one will be pushed off screen).
A SectionList would be better suited for this purpose:
<View style={styles.tasksListContainer}>
<SectionList
sections={[
{ title: 'being used', data: tasksToShow.filter(el => el.usedUp)},
{ title: 'not being used', data: tasksToShow.filter(el => !el.usedUp)}
]}
renderItem={({ item }) => {
return item.usedUp
? <TaskIsBeingUsed itemData={itemData}/>
: <TaskIsNotBeingUsed itemData={itemData} onTaskSelect={onTaskSelect}/>
}}
/>
</View>

Conditionally style not working in react native

I followed this answer to dynamically style my component.
Here is my render method :
render() {
return (
<View style={styles.container}>
<FlatList
data={this.state.images}
numColumns={2}
keyboardShouldPersistTaps={'always'}
keyboardDismissMode={'on-drag'}
keyExtractor={item => item.localIdentifier}
renderItem={({ item, index }) =>
<TouchableHighlight
underlayColor='transparent'
onPress={() => this.openImage(index)}
onLongPress={() => this.startSelection(item)}
>
<View style={[styles.albumContainer, (this.state.selectedItems.indexOf(item)>-1)?styles.selectedItem:styles.unselectedItem]}>
<Image
style={styles.albumThumbnail}
source={item.image}
/>
</View>
</TouchableHighlight>
}
/>
</View>
);
}
As you can see I am displaying image thumbnail with TouchableHighlight and FlatList. When user will press and hold on any image thumbnail I called startSelection() with particular flatlist item which then add that item to state. I used that state to set style dynamically of my image as :
<View style={[styles.albumContainer, (this.state.selectedItems.indexOf(item)>-1)?styles.selectedItem:styles.unselectedItem]}>
<Image
style={styles.albumThumbnail}
source={item.image}
/>
</View>
Here is startSelection() method :
startSelection(item) {
let temp = this.state.selectedItems;
temp.push(item);
this.setState({
selectedItems : temp
});
}
Here is my stylesheet :
const styles = StyleSheet.create({
selectedItem: {
borderWidth: 3,
borderColor: '#22aaff',
},
unselectedItem: {
borderColor: '#000000',
}
});
But when user press and hold that view, item will added to state but style is not changing.
Please help me what's going wrong here !!!
This can be found on FlatList docs:
This is a PureComponent which means that it will not re-render if props remain shallow-equal. Make sure that everything your renderItem function depends on is passed as a prop (e.g. extraData) that is not === after updates, otherwise your UI may not update on changes. This includes the data prop and parent component state.
So you can add extraData to your FlatList component like this:
FlatList Component:
<FlatList
data={this.state.images}
extraData={this.state} //add this!
numColumns={2}
keyboardShouldPersistTaps={'always'}
keyboardDismissMode={'on-drag'}
keyExtractor={item => item.localIdentifier}
renderItem={({ item, index }) =>
<TouchableHighlight
underlayColor='transparent'
onPress={() => this.openImage(index)}
onLongPress={() => this.startSelection(item)}
>
<View style={[styles.albumContainer, (this.state.selectedItems.indexOf(item)>-1)?styles.selectedItem:styles.unselectedItem]}>
<Image
style={styles.albumThumbnail}
source={item.image}
/>
</View>
</TouchableHighlight>
}
/>
P.S: If your component state has variables which should not re-render FlatList, you would be better of using extraData = {this.state.selectedItems}, but then you need to make sure you pass a different reference to selectedItems when you call setState on startSelection. Like this:
startSelection(item) {
let temp = [...this.state.selectedItems];
temp.push(item);
this.setState({
selectedItems : temp
});
}
Wrap them with extra []
style={[styles.albumContainer, [(this.state.selectedItems.indexOf(item)>-1)?styles.selectedItem:styles.unselectedItem]]}

Make VirtualizedList show as Grid

I'm trying to make something like this:
The problem: The project was built with immutablejs and according to React Native Docs, I can't use FlatList thus I can't use numColumns props feature of that component.
AFAIK, my only choice is to use VirtualizedList as the docs points out, but I can't figure out how to display the cells as a grid as shown above.
I've already tried to add style props in both cell and view wrapper, but none of the code used to align the cells, like the picture I posted, is ignored. In fact it was showing perfect when I was using ScrollView, but due the HUGE lag I'm moving the code to VirtualizedList.
Any help? Anything would be welcome, I already digged a lot on Google but I can't find anything about this.
Some sample code:
<View>
<VirtualizedList
data={props.schedules}
getItem={(data, index) => data.get(index)}
getItemCount={(data) => data.size}
keyExtractor={(item, index) => index.toString()}
CellRendererComponent={({children, item}) => {
return (
<View style={{any flexbox code gets ignored here}}>
{children}
</View>
)}}
renderItem={({ item, index }) => (
<Text style={{also here}} key={index}>{item.get('schedule')}</Text>
)}
/>
</View>
Answering my own question:
I got it working by copying the FlatList.js source code from react-native repo.
Here's an example code:
<VirtualizedList
data={props.schedules}
getItem={(data, index) => {
let items = []
for (let i = 0; i < 4; i++) {
const item = data.get(index * 4 + i)
item && items.push(item)
}
return items
}}
getItemCount={(data) => data.size}
keyExtractor={(item, index) => index.toString()}
renderItem={({item, index}) => {
return (
<View key={index} style={{flexDirection: 'row'}}>
{item.map((elem, i) => (
<View key={i}>
<Text key={i}>{elem.get('horario')}</Text>
</View>
))}
</View>
)
}}
/>
The number 4 is for the number of columns. The key parts are in the getItem and adding flexDirection: 'row' at renderItem in the View component.