React native Flatlist grid and item header - javascript

I want to custom a screen same:
so I use Flastlist and check if the item is header I will set with item = window.with and if not width item = window.width/3. But its error.
Here is my code:
const { width, height } = Dimensions.get("window")
class App extends React.Component {
constructor() {
super()
this.state = {
data: [
{ name: "Movies", header: true },
{ name: "Interstellar", header: false },
{ name: "Dark Knight", header: false },
{ name: "Pop", header: false },
{ name: "Music", header: true },
{ name: "Adams", header: false },
{ name: "Nirvana", header: false },
{ name: "Amrit Maan", header: false },
{ name: "Oye Hoye", header: false },
{ name: "Eminem", header: false },
{ name: "Places", header: true },
{ name: "Jordan", header: false },
{ name: "Punjab", header: false },
{ name: "Ludhiana", header: false },
{ name: "Jamshedpur", header: false },
{ name: "India", header: false },
{ name: "People", header: true },
{ name: "Jazzy", header: false },
{ name: "Appie", header: false },
{ name: "Baby", header: false },
{ name: "Sunil", header: false },
{ name: "Arrow", header: false },
{ name: "Things", header: true },
{ name: "table", header: false },
{ name: "chair", header: false },
{ name: "fan", header: false },
{ name: "cup", header: false },
{ name: "cube", header: false }
],
stickyHeaderIndices: []
};
}
renderItem(item) {
if (item.header) {
return (
<View style={{ width: width, height: 40, backgroundColor: 'green' }}>
<Text>{item.name}</Text>
</View>
)
} else {
return (
<View style={{
width: width / 3,
height: width / 3,
backgroundColor: 'white',
borderWidth: 1,
borderColor: 'gray'
}}>
<Text>{item.name}</Text>
</View>
)
}
}
render() {
return (
<View style={{ flex: 1, backgroundColor: 'red' }}>
<FlatList
data={this.state.data}
renderItem={({ item }) => (
this.renderItem(item)
)}
keyExtractor={item => item.name}
/>
</View>
);
}
}
export default App;
and my result
I have the error: an item isn't header is a row, but I want to show 3 item in a row.
When added number column = 3 in flastlist with code :
<FlatList
numColumns={3}
data={this.state.data}
renderItem={({ item }) => (this.renderItem(item))}
keyExtractor={item => item.name}
/>
I have result
How can I fix show 3 item in a row?
Thank you very much.


I think you forgot to add numColumns = { 3 } in Flatlist props. Here you get detail solution to your problem.


I've used nested FlatList to solve this:
const renderCategory = category => (
<View>
<Text>{category}</Text>
<FlatList
data={itemsByCategory[category]}
renderItem={({item, index}) => renderItem(item)}
keyExtractor={(item, index) => index.toString()}
numColumns={3}
/>
</View>
);
return (
<FlatList
data={Object.keys(itemsByCategory)}
renderItem={({item, index}) => renderCategory(item)}
keyExtractor={(item, index) => index.toString()}
/>
);


Using flexWrap: 'wrap' and flexDirection: 'row' in your main container should resolve your problem.
<View style={{ flex: 1, backgroundColor: 'red', flexWrap: 'wrap', flexDirection: 'row' }}>
<FlatList
data={this.state.data}
renderItem={({ item }) => (
this.renderItem(item)
)}
keyExtractor={item => item.name}
/>
</View>

Related

How to align Text in React Native

I'm trying to style my work, I've included a slug description now and simply hardcoded it in whilst I try to make it look better. I'm having two problems that I'm looking to resolve. I can't get the slug text to align between one another. And the second issue is that when it is took long it wraps and distorts everything, I'd rather it reduced down and showed an ellipsis (...) are these things achieveable?
import { StyleSheet, Text, View, FlatList, SafeAreaView, Image } from 'react-native'
export default function App() {
const present = [{
id: 1,
name: 'PresentOne',
slug: 'PresentOne Slug',
image: require('../assets/present.jpeg')
},
{
id:2,
name: 'PresentTwo',
slug: 'PresentTwo Slug',
image: require('../assets/present2.jpeg')
},
{
id:3,
name: 'PresentThree',
slug: 'PresentThree Slug',
image: require('../assets/present3.jpeg')
},
{
id:4,
name: 'PresentFour',
slug: 'PresentFour Slug',
image: require('../assets/present4.jpeg')
},
{
id:5,
name: 'PresentFive',
slug: 'PresentFive Slug',
image: require('../assets/present5.jpeg')
},
];
const onePresent = ( { item } ) => (
<View style={styles.item}>
<View style={styles.avatarContainer}>
<Image source = {item.image} style={styles.avatarContainer}/>
</View>
<Text style={styles.name}> {item.name}</Text>
<Text style={styles.slug}>{item.slug}</Text>
</View>
)
const headerComponent = () => {
return <Text style={styles.listHeadline}>Presents</Text>
}
const itemSeperator = () => {
return <View style = {styles.seperator}/>
}
return (
<SafeAreaView >
<FlatList
ListHeaderComponentStyle={styles.listHeader}
ListHeaderComponent={headerComponent}
data = { present }
renderItem = { onePresent }
ItemSeperatorComponent = { itemSeperator }
ListEmptyComponent = { <Text>Empty</Text>}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
slug:{
transform: [{translateX: -100}],
// alignContent: 'center',
flexDirection: 'column',
alignItems: 'center',
},
name:{
transform: [{translateY: -30},{translateX: 10}],
fontSize: 20,
},
listHeadline:{
color:'#333',
fontSize: 21,
fontWeight: 'bold',
},
item: {
flex:1,
flexDirection:'row',
alignItems:'center',
paddingVertical:13,
},
avatarContainer:{
backgroundColor:'#D9D9D9',
borderRadius:100,
height:89,
width:89,
justifyContent:'center',
alignItems: 'center',
margin:10,
},
listHeader:{
height:55,
alignItems:'center',
justifyContent: 'center'
},
seperator: {
height: 1,
width: '100%',
backgroundColor: '#CCC',
}
})

The textAlign prop is what I think you want. However I noticed you were using transform to position the text in your view and I found a way to layout your components so that you dont have to do so (demo).
import {
StyleSheet,
Text,
View,
FlatList,
SafeAreaView,
Image,
} from 'react-native';
export default function App() {
const present = [
{
id: 1,
name: 'PresentOne',
slug: 'PresentOne Slug',
image: require('./assets/snack-icon.png'),
},
{
id: 2,
name: 'PresentTwo',
slug: 'PresentTwo Slug',
image: require('./assets/snack-icon.png'),
},
{
id: 3,
name: 'PresentThree',
slug: 'PresentThree Slug',
image: require('./assets/snack-icon.png'),
},
{
id: 4,
name: 'PresentFour',
slug: 'PresentFour Slug',
image: require('./assets/snack-icon.png'),
},
{
id: 5,
name: 'PresentFive',
slug: 'PresentFive Slug',
image: require('./assets/snack-icon.png'),
},
];
const onePresent = ({ item }) => (
<View style={styles.item}>
<View style={styles.avatarContainer}>
<Image source={item.image} style={styles.avatarContainer} />
</View>
<View style={styles.slug}>
<Text style={styles.name}>{item.name}</Text>
<Text style={styles.slug}>{item.slug}</Text>
</View>
</View>
);
const headerComponent = () => {
return <Text style={styles.listHeadline}>Presents</Text>;
};
const itemSeperator = () => {
return <View style={styles.seperator} />;
};
return (
<SafeAreaView>
<FlatList
ListHeaderComponentStyle={styles.listHeader}
ListHeaderComponent={headerComponent}
data={present}
renderItem={onePresent}
ItemSeperatorComponent={itemSeperator}
ListEmptyComponent={<Text>Empty</Text>}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
slug: {
// transform: [{translateX: -100}],
// alignContent: 'center',
flexDirection: 'column',
alignItems: 'center',
},
name: {
// transform: [{translateY: -30},{translateX: 10}],
fontSize: 20,
},
listHeadline: {
width: '100%',
color: '#333',
fontSize: 21,
fontWeight: 'bold',
},
item: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
paddingVertical: 13,
},
avatarContainer: {
backgroundColor: '#D9D9D9',
borderRadius: 100,
height: 89,
width: 89,
justifyContent: 'center',
alignItems: 'center',
margin: 10,
},
listHeader: {
height: 55,
alignItems: 'center',
justifyContent: 'center',
},
seperator: {
height: 1,
width: '100%',
backgroundColor: '#CCC',
},
});

Change Styling (background color) when buttons are tapped in React Native

I want to set the background color of the round/oval TouchableOpacity buttons beneath the headings to blue when they are tapped by the user, and no background color when they are not tapped. I have heard that this can be achieved by managing the states of the component itself.
Here is my code for reference:
import React, {useState} from 'react';
import {
StyleSheet,
Text,
View,
Button,
FlatList,
Dimensions,
TouchableOpacity,
Image,
} from 'react-native';
import Modal from 'react-native-modal';
const {width: screenWidth} = Dimensions.get('screen');
// screen width Multiply by 0.8
const Footer = () => {
return (
<View>
<Text style={{color: '#fff', fontSize: 20}}>Reviews</Text>
<View style={{flexDirection: 'row', alignItems: 'center', marginTop: 20}}>
<Image
source={require('../assets/five-stars.png')}
style={{width: 90, height: 18}}
/>
<Text style={{marginLeft: 10}}>& Up</Text>
</View>
<View style={{flexDirection: 'row', marginTop: 30}}>
<TouchableOpacity
style={{
backgroundColor: '#525252',
width: 200,
paddingTop: 20,
paddingBottom: 20,
alignItems: 'center',
borderTopLeftRadius: 22,
}}>
<Text>Reset</Text>
</TouchableOpacity>
<TouchableOpacity
style={{
backgroundColor: '#00ACED',
width: 200,
alignItems: 'center',
paddingTop: 20,
paddingBottom: 20,
borderTopRightRadius: 23,
}}>
<Text>Apply</Text>
</TouchableOpacity>
</View>
</View>
);
};
const renderItem = ({item: {title, data, key}}) => (
<View>
<Text style={styles.headingText}>{title}</Text>
<View style={styles.item}>
{data.map(el => (
<TouchableOpacity
key={el.key}
style={[
{
backgroundColor: el.isCheck ? '#00ACED' : 'transparent',
padding: 20,
borderColor: '#185268',
borderWidth: 2,
borderRadius: 40,
marginBottom: 10,
marginRight: 10,
},
]}>
<Text style={styles.btnText}>{el.name}</Text>
</TouchableOpacity>
))}
</View>
</View>
);
const SandboxScreen = () => {
const [isModalVisible, setModalVisible] = useState(false);
const [data, setData] = useState([
{
key: 'id-1',
title: 'Workshop Category',
data: [
{name: 'BodyShops', isCheck: false, key: 'id-5'},
{name: 'Electric Cars', isCheck: true, key: 'id-6'},
{name: 'Performance Shops', isCheck: false, key: 'id-7'},
],
},
{
key: 'id-2',
title: 'Vehicle Category',
data: [
{name: 'Cars', isCheck: false, key: 'id-8'},
{name: 'Trucks', isCheck: true, key: 'id-9'},
{name: 'Motorbikes', isCheck: false, key: 'id-10'},
],
},
{
key: 'id-3',
title: 'Services',
data: [
{name: 'Accident Repair', isCheck: false, key: 'id-11'},
{name: 'AC System Diagnosis', isCheck: false, key: 'id-12'},
{name: 'Car Polishing / Detailing', isCheck: false, key: 'id-13'},
{name: 'Electric / Hybrid System Repair', isCheck: true, key: 'id-14'},
{name: 'General Mechanical Work', isCheck: true, key: 'id-15'},
],
},
{
key: 'id-4',
title: 'Brands',
data: [
{name: 'FORD', isCheck: false, key: 'id-16'},
{name: 'BMW', isCheck: false, key: 'id-17'},
{name: 'BMW', isCheck: false, key: 'id-18'},
{name: 'AUDI', isCheck: false, key: 'id-19'},
{name: 'JAGUAR', isCheck: false, key: 'id-20'},
{name: 'FERRARI', isCheck: true, key: 'id-21'},
{name: 'LAMBORGHINI', isCheck: false, key: 'id-22'},
],
},
]);
const toggleModal = () => {
setModalVisible(prevState => !prevState);
};
return (
<View
style={[
{
flex: 1,
backgroundColor: '#252525',
},
]}>
<View style={styles.container}>
<FlatList
data={data}
renderItem={renderItem}
keyExtractor={item => item.key}
ListFooterComponent={Footer}
/>
</View>
{/* <Button title="Show modal" onPress={toggleModal} />
<Modal
isVisible={isModalVisible}
animationIn="slideInRight"
animationOut="slideOutRight"
animationInTiming={500}
animationOutTiming={500}
hasBackdrop={true}
backdropColor="#252525"
backdropOpacity={0.8}
backdropTransitionInTiming={500}
backdropTransitionOutTiming={500}
onBackdropPress={() => setModalVisible(false)}
style={{alignItems: 'flex-end', margin: 0}}>
<View
style={{
backgroundColor: 'white',
flex: 1,
paddingTop: 50,
width: screenWidth * 0.7,
}}>
<View style={styles.container}>
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={item => item.id}
/>
</View>
</View>
</Modal> */}
</View>
);
};
export default SandboxScreen;
const styles = StyleSheet.create({
container: {},
button: {
backgroundColor: 'green',
padding: 13,
},
headingText: {
color: '#fff',
fontSize: 20,
marginBottom: 20,
},
item: {
flexDirection: 'row',
flexWrap: 'wrap',
marginBottom: 40,
},
});
Please anyone guide me on how this can be achieve by providing code example related to my above code.

Here is your original solution: Snack
import React, { useState, useEffect } from 'react';
import {
StyleSheet,
Text,
View,
Button,
FlatList,
Dimensions,
TouchableOpacity,
SectionList,
Image,
} from 'react-native';
// import Modal from 'react-native-modal';
const { width: screenWidth } = Dimensions.get('screen');
// screen width Multiply by 0.8
const SandboxScreen = () => {
const [isModalVisible, setModalVisible] = useState(false);
const [data, setData] = useState([
{
key: 'id-1',
title: 'Workshop Category',
data: [
{ name: 'BodyShops', isCheck: false, key: 'id-5' },
{ name: 'Electric Cars', isCheck: true, key: 'id-6' },
{ name: 'Performance Shops', isCheck: false, key: 'id-7' },
],
},
{
key: 'id-2',
title: 'Vehicle Category',
data: [
{ name: 'Cars', isCheck: false, key: 'id-8' },
{ name: 'Trucks', isCheck: true, key: 'id-9' },
{ name: 'Motorbikes', isCheck: false, key: 'id-10' },
],
},
{
key: 'id-3',
title: 'Services',
data: [
{ name: 'Accident Repair', isCheck: false, key: 'id-11' },
{ name: 'AC System Diagnosis', isCheck: false, key: 'id-12' },
{ name: 'Car Polishing / Detailing', isCheck: false, key: 'id-13' },
{
name: 'Electric / Hybrid System Repair',
isCheck: true,
key: 'id-14',
},
{ name: 'General Mechanical Work', isCheck: true, key: 'id-15' },
],
},
{
key: 'id-4',
title: 'Brands',
data: [
{ name: 'FORD', isCheck: false, key: 'id-16' },
{ name: 'BMW', isCheck: false, key: 'id-17' },
{ name: 'BMW', isCheck: false, key: 'id-18' },
{ name: 'AUDI', isCheck: false, key: 'id-19' },
{ name: 'JAGUAR', isCheck: false, key: 'id-20' },
{ name: 'FERRARI', isCheck: true, key: 'id-21' },
{ name: 'LAMBORGHINI', isCheck: false, key: 'id-22' },
],
},
]);
const Footer = () => {
return (
<View>
<Text style={{ color: '#fff', fontSize: 20 }}>Reviews</Text>
<View
style={{ flexDirection: 'row', alignItems: 'center', marginTop: 20 }}>
<Text style={{ marginLeft: 10 }}>& Up</Text>
</View>
<View style={{ flexDirection: 'row', marginTop: 30 }}>
<TouchableOpacity
onPress={() => {
setData((prev) => {
//Here I have update your all isCheck prop to false;
let dat = prev.map((item, index) =>
item.data.map((v) => (v.isCheck = false))
);
return [...prev];
});
}}
style={{
backgroundColor: '#525252',
width: 200,
paddingTop: 20,
paddingBottom: 20,
alignItems: 'center',
borderTopLeftRadius: 22,
}}>
<Text>Reset</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
//You can call an API to store your results or directly save the results in your Storage.
alert('Results has been applied!');
}}
style={{
backgroundColor: '#00ACED',
width: 200,
alignItems: 'center',
paddingTop: 20,
paddingBottom: 20,
borderTopRightRadius: 23,
}}>
<Text>Apply</Text>
</TouchableOpacity>
</View>
</View>
);
};
const renderItem = ({ item: { title, data, key }, index }) => (
<View>
<Text style={styles.headingText}>{title}</Text>
<View style={styles.item}>
{data.map((el) => (
<TouchableOpacity
onPress={() => {
setData((prev) => {
el.isCheck = !el.isCheck; // `!` means if a value is true then make it false else make it true;
let dat = [el, ...prev[index].data];
// Here I'm spreading the both objects and merging the data;
return [...prev];
// Retruned the updated values by spreading it.
});
}}
key={el.key}
style={[
{
backgroundColor: el.isCheck ? '#00ACED' : 'transparent',
padding: 20,
borderColor: '#185268',
borderWidth: 2,
borderRadius: 40,
marginBottom: 10,
marginRight: 10,
},
]}>
<Text style={styles.btnText}>{el.name}</Text>
</TouchableOpacity>
))}
</View>
</View>
);
const toggleModal = () => {
setModalVisible((prevState) => !prevState);
};
return (
<View
style={[
{
flex: 1,
backgroundColor: '#252525',
},
]}>
<View style={styles.container}>
<FlatList
data={data}
renderItem={renderItem}
keyExtractor={(item) => item.key}
ListFooterComponent={Footer}
/>
</View>
{/* <Button title="Show modal" onPress={toggleModal} />
<Modal
isVisible={isModalVisible}
animationIn="slideInRight"
animationOut="slideOutRight"
animationInTiming={500}
animationOutTiming={500}
hasBackdrop={true}
backdropColor="#252525"
backdropOpacity={0.8}
backdropTransitionInTiming={500}
backdropTransitionOutTiming={500}
onBackdropPress={() => setModalVisible(false)}
style={{alignItems: 'flex-end', margin: 0}}>
<View
style={{
backgroundColor: 'white',
flex: 1,
paddingTop: 50,
width: screenWidth * 0.7,
}}>
<View style={styles.container}>
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={item => item.id}
/>
</View>
</View>
</Modal> */}
</View>
);
};
export default SandboxScreen;
const styles = StyleSheet.create({
container: {},
button: {
backgroundColor: 'green',
padding: 13,
},
headingText: {
color: '#fff',
fontSize: 20,
marginBottom: 20,
},
item: {
display: 'flex',
flexDirection: 'row',
marginBottom: 40,
},
});

I'm unable to change states on switches inside ListItem component

What i'm trying to do is to list an array with multiple items, inside this component, and this array contains a boolean state for each individual item, like this.
items : {
"ISA InterChile" : [
{
key : '7843',
name : "ISA APP RRHH",
fav: false
},
{
key : '7844',
name : "Garantia y Obligaciones",
fav: false
},
{
key : '7855',
name : "Que se yo",
fav: true
},
{
key : '7899',
name : "Random",
fav: true
}
],
"DSAC Chile" : [
{
key : '5022',
name: 'ADAM RRHH',
fav: true
},
{
key : '5023',
name: 'Name of Project 4',
fav: false
}
],
"Banco BCI" : [
{
key : '1101',
name: 'Name of Project 3',
fav: false
},
{
key : '1014',
name: 'Name of Project 4',
fav: false
},
{
key : '1170',
name: 'Name of Project 5',
fav: false
},
{
key : '1033',
name: 'Name of Project 6',
fav: false
},
{
key : '1101',
name: 'Name of Project 7',
fav: false
},
{
key : '1014',
name: 'Name of Project 8',
fav: false
},
{
key : '1170',
name: 'Name of Project 9',
fav: false
},
{
key : '1033',
name: 'Name of Project 10',
fav: false
}
]
},
But whenever i try to change states, it immediately changes back to its previous state, this is the code.
{
this.state.items[this.state.SeleccionClientes].map(value => (
<ListItem
containerStyle={{backgroundColor: '#ffffff', width: widthPercentageToDP('87.1%'), height: 64, alignItems: 'center', justifyContent: 'center', alignSelf: 'center', marginTop: heightPercentageToDP('2.8%'), paddingHorizontal: 0}}
topDivider={false}
bottomDivider={true}
titleStyle={{
marginLeft: 0,
fontSize: 16,
fontWeight: "normal",
fontStyle: "normal",
lineHeight: 24,
letterSpacing: 0.15,
textAlign: "left",
color: "#707070"
}}
subtitleStyle={{
marginLeft: 0,
fontSize: 14,
fontWeight: "normal",
fontStyle: "normal",
lineHeight: 20,
letterSpacing: 0.25,
textAlign: "left",
color: "#c4c4c4"
}}
title={`${value.name}`}
subtitle={`ID ${value.key}`}
switch={{
value: value.fav, onValueChange: () => !value.fav
}}
/>
))
}
the this.state.SeleccionClientes is from a dropdown menu, where you select the item from items, and list you the items inside
EDIT: this is the whole view and code
import * as React from 'react';
import {View, Text, Image, StatusBar, SafeAreaView, TouchableOpacity, ScrollView, RefreshControl, FlatList} from 'react-native';
import { Header, ListItem } from 'react-native-elements';
import ModalDropdown from 'react-native-modal-dropdown';
import Images from '../../Assets/values/images';
import {
RFPercentage as rfp,
RFValue as rfv,
} from 'react-native-responsive-fontsize';
import {
widthPercentageToDP as wp,
heightPercentageToDP as hp,
heightPercentageToDP,
widthPercentageToDP,
} from 'react-native-responsive-screen';
import styles from '../../Assets/values/styles/HoursReport/ClientsProyects/ClientsProyectsStyle';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import DataManager from '../../../Util/CrossUtils/DataManager';
export default class ClientsProyectsScreen extends React.Component<any, any> {
constructor(props: any) {
super(props);
this.state = {
items : {
"ISA InterChile" : [
{
key : '7843',
name : "ISA APP RRHH",
fav: false
},
{
key : '7844',
name : "Garantia y Obligaciones",
fav: false
},
{
key : '7855',
name : "Que se yo",
fav: true
},
{
key : '7899',
name : "Random",
fav: true
}
],
"DSAC Chile" : [
{
key : '5022',
name: 'ADAM RRHH',
fav: true
},
{
key : '5023',
name: 'Name of Project 4',
fav: false
}
],
"Banco BCI" : [
{
key : '1101',
name: 'Name of Project 3',
fav: false
},
{
key : '1014',
name: 'Name of Project 4',
fav: true
},
{
key : '1170',
name: 'Name of Project 5',
fav: false
},
{
key : '1033',
name: 'Name of Project 6',
fav: false
},
{
key : '1102',
name: 'Name of Project 7',
fav: true
},
{
key : '1114',
name: 'Name of Project 8',
fav: false
},
{
key : '1175',
name: 'Name of Project 9',
fav: false
},
{
key : '1303',
name: 'Name of Project 10',
fav: false
}
]
},
SeleccionClientes: '',
}
}
updateFav = item => {
const newData = this.state.items[this.state.SeleccionClientes];
const uodatedItem = newData.find(x => x.key === item.key);
uodatedItem.fav = !item.fav;
this.setState({ data: newData });
//You can also have a callback from parent component to update parent state
};
render() {
return (
<>
<StatusBar translucent backgroundColor="transparent" />
<SafeAreaView style={{backgroundColor: '#fafafa'}}/>
{/*
<Header
backgroundImage={Images.header_nav}
backgroundImageStyle={styles.HeaderImagenCP}
leftComponent={
<TouchableOpacity onPress={() => this.props.navigation.goBack()}>
<View><Image style={styles.HeaderHorizontal} source={Images.back}/></View>
</TouchableOpacity>
}
centerComponent={{text: 'Imputar horas', ellipsizeMode: 'clip', style: styles.HeaderHoursReportCP }}
placement='center'
/>
*/}
<View style={styles.ContainerBackground}>
<View style={{flexDirection: 'row'}}>
<View style={{alignItems: 'flex-start', justifyContent: 'flex-start', alignSelf: 'flex-start', marginTop: heightPercentageToDP('2.2%'), marginLeft: widthPercentageToDP('6.3%')}}>
<Text style={{
fontSize: 18,
fontWeight: "500",
fontStyle: "normal",
lineHeight: 35,
letterSpacing: 0,
textAlign: "left",
color: "#707070"
}}>Proyectos</Text>
</View>
<TouchableOpacity style={{position: 'absolute', alignItems: 'flex-end', justifyContent: 'flex-end', alignSelf: 'flex-end', paddingBottom: heightPercentageToDP('0.5%'), left: widthPercentageToDP('90%')}} onPress={() => this.props.navigation.goBack()}>
<Image source={Images.close_modal}/>
</TouchableOpacity>
</View>
<KeyboardAwareScrollView
keyboardShouldPersistTaps="handled"
enableOnAndroid={true}>
{/*
<View style={{alignItems: 'flex-end', justifyContent: 'flex-end', alignSelf: 'flex-end', marginRight: widthPercentageToDP('6.3%')}}>
<TouchableOpacity onPress={() => this.props.navigation.goBack()}>
<Image source={Images.close_modal}/>
</TouchableOpacity>
</View>
*/}
<View style={styles.Left}>
<Text style={styles.TituloInputOnBlur}>Cliente</Text>
</View>
<View style={styles.Center}>
<ModalDropdown
dropdownTextStyle={styles.dropdownTextStyle}
dropdownTextHighlightStyle={styles.dropdownTextHighlightStyle}
defaultValue={'Seleccionar'}
style={styles.dropStyle}
textStyle={{
padding: 0,
margin: 0,
fontSize: rfv(16),
paddingVertical: hp('1.2%'),
fontWeight: 'normal',
fontStyle: 'normal',
textAlign: 'left',
//color: Motivo != 'Seleccionar' ? '#1a1a1a' : '#c4c4c4',
}}
onSelect={(index, value) => this.setState({SeleccionClientes: value})}
options={Object.keys(this.state.items)}
/>
</View>
<View>
{
this.state.SeleccionClientes !== '' ?
<View>
{
<FlatList
data={this.state.items[this.state.SeleccionClientes]}
renderItem={({item, index}) => (
<ListItem
containerStyle={{backgroundColor: '#fafafa', width: widthPercentageToDP('87.1%'), height: 64, alignItems: 'center', justifyContent: 'center', alignSelf: 'center', marginTop: heightPercentageToDP('2.8%'), paddingHorizontal: 0}}
topDivider={false}
bottomDivider={true}
titleStyle={{
marginLeft: 0,
fontSize: 16,
fontWeight: "normal",
fontStyle: "normal",
lineHeight: 24,
letterSpacing: 0.15,
textAlign: "left",
color: "#707070"
}}
subtitleStyle={{
marginLeft: 0,
fontSize: 14,
fontWeight: "normal",
fontStyle: "normal",
lineHeight: 20,
letterSpacing: 0.25,
textAlign: "left",
color: "#c4c4c4"
}}
title={`${item.name}`}
subtitle={`ID ${item.key}`}
switch={{
//trackColor: {false: "#767577", true: "#81b0ff"},
//thumbColor: item.fav ? "#1062cc" : "#f4f3f4",
value: item.fav[index],
onValueChange: () => {this.updateFav(item)}
}}
/>
)}
/>
}
</View>
:
<View style={{alignItems: 'center', justifyContent: 'center', alignSelf: 'center'}}>
<View style={{marginTop: heightPercentageToDP('11%')}}>
<Image style={{marginBottom: heightPercentageToDP('2.8%')}} source={Images.sad_face}/>
</View>
<Text style={{
fontSize: 18,
fontWeight: "normal",
fontStyle: "normal",
lineHeight: 35,
letterSpacing: 0,
textAlign: "left",
color: "#c4c4c4"
}}>Sin proyectos activos</Text>
</View>
}
</View>
<View style={styles.BottomPush} />
</KeyboardAwareScrollView>
</View>
</>
);
}
}

You are not updating the state, your switch takes the value from the state object. And better use a flat list instead of map as its good in terms of performance. This will be a sample approach that you can take.
class CustomFlatList extends Component {
constructor(props) {
super(props);
this.state = {
data: this.props.data,
};
}
updateFav = item => {
const newData = [...this.state.data];
const uodatedItem = newData.find(x => x.key === item.key);
uodatedItem.fav = !item.fav;
this.setState({ data: newData });
//You can also have a callback from parent component to update parent state
};
render() {
return (
<FlatList
data={this.state.data}
renderItem={({ item }) => (
<ListItem
title={`${item.name}`}
subtitle={`ID ${item.key}`}
switch={{
value: item.fav,
onValueChange: () => this.updateFav(item),
}}
/>
)}
/>
);
}
}
--Updated code after full code
You will have to update the updateFav function as below.
updateFav = item => {
const newData = [...this.state.items[this.state.SeleccionClientes]];
const updateItem = newData.find(x => x.key === item.key);
updateItem.fav = !item.fav;
const updatedArray = Object.assign(this.state.items);
updatedArray[this.state.SeleccionClientes] = newData;
this.setState({ items: updatedArray });
};

How can i delete items from FlatList one by one by clicking via state

I've created a simple list into a FlatList, Items have been gotten from an array named data. I want to remove items one by one by clicking on each item but my problem is that when i click on a item all of them get deleted simultaneously.
How can i fix this?
This is the what look like my app:
And this is the code:
const FoodList = () => {
const data = [
{ text: 'test1', backgroundColor: 'teal' },
{ text: 'test2', backgroundColor: 'teal' },
{ text: 'test3', backgroundColor: 'teal' },
{ text: 'test4', backgroundColor: 'teal' },
{ text: 'test5', backgroundColor: 'teal' },
{ text: 'test6', backgroundColor: 'teal' },
{ text: 'test7', backgroundColor: 'teal' },
{ text: 'test8', backgroundColor: 'teal' },
{ text: 'test9', backgroundColor: 'teal' },
{ text: 'test10', backgroundColor: 'teal' },
{ text: 'test11', backgroundColor: 'teal' },
]
let [itemState, setitemState] = useState(data);
return (
<View style={styles.container}>
<FlatList
data={itemState}
keyExtractor={(item, index) => index}
renderItem={({ item, index }) => (
<TouchableOpacity
style={[
{ flexDirection: 'row' }, { width: '100%' }, { alignItems: 'center' }, { flex: 1 }, { justifyContent: 'space-between' },
{ backgroundColor: item.backgroundColor }, { marginBottom: 10 }
]}
activeOpacity={0.7}
onPress={() => {
let removeItem = itemState.map((_item, _Index) => _Index !== index);
setitemState(itemState = removeItem);
}}
>
<Text style={{ fontSize: 30, color: 'white' }} >{item.text}{item.name}</Text>
<Icon type='FontAwesome5' name='trash-alt' style={{ color: 'white' }} />
</TouchableOpacity>
)}
/>
</View>
)
}

The problem lies on the function you used to remove item.
The map() method creates a new array with the results of calling a
function for every array element.
The filter() method creates an array filled with all array elements
that pass a test.
so when you run map((_item, _Index) => _Index !== index) your removeItem will be:
[false, false, false, true, false, false, false, false, false, false, false]
bunch of booleans doesn't get rendered obviously :)
in order to to remove the item use filter((_item, _Index) => _Index !== index)

Try doing this instead
onPress={() => {
setitemState(prevItemState => prevItemState.filter((_item, _Index) => _Index !== index));
}}

Not able to display json data on Flatlist react-native

Here am able to parse JSON value on my FlatList, because in console.log I can see that, FlatList is also expanding but the value is not displaying on the list . after selecting particular list value data is going on the second screen and displaying data but on first screen blank. Please help
import React, { Component } from 'react';
import { View, Text, TextInput,
FooterTab,Button,TouchableOpacity, ScrollView, StyleSheet,
ActivityIndicator ,Header,icon,FlatList} from 'react-native';
import { createStackNavigator } from 'react-navigation';
import { SearchBar } from 'react-native-elements';
class RenderList extends Component {
static navigationOptions = {
title: 'Selected Item',
header: null,
};
constructor() {
super();
this.state = {
data: null,
loading: true,
search: '',
};
}
componentDidMount() {
this.createViewGroup();
}
createViewGroup = async () => {
try {
const response = await fetch(
'http:///Dsenze/userapi/grouphier/viewgroup',
{
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
password: 'admin',
username: 'admin',
viewall: 'false',
id: [4],
startlimit: '0',
valuelimit: '10',
}),
}
);
const responseJson = await response.json();
const { groupData } = responseJson;
this.setState({
data: groupData,
loading: false,
});
} catch (e) {
console.error(e);
}
};
clickedItemText(clickedItem) {
this.props.navigation.navigate('Item', { item: clickedItem });
}
updateSearch = search => {
this.setState({ search });
};
keyExtractor = ({ id }) => id.toString();
keyExtractor = ({ name }) => name.toString();
renderItem = ({ item }) => (
<TouchableOpacity
style={styles.item}
activeOpacity={0.4}
onPress={() => {
this.clickedItemText(item);
}}>
</TouchableOpacity>
);
render() {
const { loading, data } = this.state;
return (
<ScrollView>
<View style={styles.container1}>
{this.state.loading ? (
<ActivityIndicator size="large" />
) :
(
<FlatList
data={data}
renderItem={this.renderItem}
keyExtractor={this.keyExtractor}
/>
)}
</View>
</ScrollView>
);
}
}
class ClickedItem extends Component
{
constructor() {
super();
this.state = {
inputValue: '',
// Default Value of the TextInput
// Default value for the QR Code
};
}
static navigationOptions =
{
title: "Selected Item",
header: null
};
render()
{
return(
<ScrollView>
<View style = { styles.container2 }>
<TextInput style={styles.inputBox}
underlineColorAndroid='rgba(0,0,0,0)'
placeholder="Hospital Id"
editable={false}
placeholderTextColor="#000000"
onChangeText={(hospital_id) => this.setState({hospital_id})}>{ this.props.navigation.state.params.item.name }</TextInput>
<TextInput style={styles.inputBox}
underlineColorAndroid='rgba(0,0,0,0)'
placeholder="Field 2"
secureTextEntry={false}
placeholderTextColor="#000000"
onChangeText={(Field2) => this.setState({Field2})}/>
<TouchableOpacity style={styles.button}onPress={() => {Insert(this.state.hospital_id,this.state.Field2,this.state.Field3,this.state.Field4,this.state.Field5,this.state.Field6);{this.getTextInputValue}}}>
<Text style={styles.buttonText}>Insert</Text>
</TouchableOpacity>
</View>
</ScrollView>
);
}
}
export default InvDemoPost = createStackNavigator(
{
List: { screen: RenderList,
header: true},
Item: { screen: ClickedItem,
header: null }
});
const styles = StyleSheet.create(
{
container1:
{
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
ListContainer :{
borderColor: '#48BBEC',
backgroundColor: '#000000',
color:'red',
alignSelf: 'stretch' ,
},
container2:
{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingHorizontal: 15
},
inputBox:{
width:300,
borderColor: '#48BBEC',
backgroundColor: '#F8F8FF',
borderRadius:25,
paddingHorizontal:16,
fontSize:16,
color:'#000000',
marginVertical:10,
},
button:{
width:300,
backgroundColor:'#4169E1',
borderRadius:25,
marginVertical:10,
paddingVertical:16
},
buttonText:{
fontSize:16,
fontWeight:'500',
color:'#ffffff',
textAlign:'center'
},
item:
{
padding: 15
},
text:
{
fontSize: 18
},
separator:
{
height: 2,
backgroundColor: 'rgba(0,0,0,0.5)'
}
});
// Json response is like that
//Json value is below , I have to display Name and Id
{
"groupData": [{
"hierarchy": 1,
"id": 1,
"name": "Karnataka",
"parent": 1,
"type": 1
}, {
"hierarchy": 2,
"id": 2,
"name": "Bangalore",
"parent": 1,
"type": 2
}, {
"hierarchy": 3,
"id": 3,
"name": "North Bangalore",
"parent": 2,
"type": 2
}, {
"hierarchy": 4,
"id": 4,
"name": "St.Mary's Hospitals",
"parent": 3,
"type": 2
}, {
"hierarchy": 4,
"id": 5,
"name": "Mandya Clinic",
"parent": 6,
"type": 2
}, {
"hierarchy": 2,
"id": 6,
"name": "Mandya",
"parent": 1,
"type": 1
}, {
"hierarchy": 4,
"id": 7,
"name": "Blr Clinic3",
"parent": 3,
"type": 1
}, {
"hierarchy": 4,
"id": 8,
"name": "kings hospital",
"parent": 3,
"type": 2
}, {
"hierarchy": 1,
"id": 10,
"name": "Tamil Nadu",
"parent": 10,
"type": 1
}],
"success": "true"
}
// Thanks

Your renderItem function only returns a TouchableOpacity. If you put something inside your TouchableOpacity you should see something on the screen.
In this example I have added a simple Text component with the name that is contained within your item.
renderItem = ({ item }) => (
<TouchableOpacity
style={styles.item}
activeOpacity={0.4}
onPress={() => {
this.clickedItemText(item);
}}
>
<Text>{item.name}/<Text>
</TouchableOpacity>
);

Categories