I have DATA - array of arrays(important) with items, and trying to create flatlist:
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={(item) => item.id}
/>
so when I was mapping items in renderItem like that:
items.map((item, index) => {
return (
<View style={styles.item} key={index}>
</View>
);
});
I have received Nothing was return error. What am I supposed to do?
Ed. https://snack.expo.io/#komarnytskiyivan/gnarly-waffle - code sandbox
You need to change your Item component like so :-
const Item = ({ items }) => {
return items.map((item, index) => {
return (<View style={styles.item} key={index}>
<Text style={styles.title}>{item.title}</Text>
</View>);
});
};
Changes :-
return the new array from .map
return the <View>...</View> component
remove the item && index check. Will fail when index is equal to 0.
In your Item you have this:
const Item = ({ items }) => {
console.log(items);
items.map((item, index) => {
console.log(item)
if (item && index) {
return (
<View style={styles.item} key={index}>
<Text style={styles.title}>{item.title}</Text>
</View>
);
}
});
};
You need to return from the items.map so it is return items.map
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={(item) => item.id}
/>
Use renderItem like this
renderItem = ({ item }) => {
return (
<View style={styles.item} key={index}>
// Your view here
</View>
);
};
Related
My FlatList looks like this:
<FlatList
style={styles.scrollView}
data={data}
keyExtractor={({ id }, index) => id}
renderItem={({ item }) => <Item item={item} />}
/>
Item looks like this:
const Item = ({ item }) => {
...
}
I want to pass a parameter (let's say I call it "myParam") to "Item" from FlatList renderItem
<FlatList
style={styles.scrollView}
data={data}
keyExtractor={({ id }, index) => id}
renderItem={({ item }) => <Item item={item} myParam ={data}/>}
/>
const Item = ({ item, myParam }) => {
...
}
I have an accordion inside a flatlist.
Here is the code i have :
const OptionList = (groupOption) => {
return (
<FlatList
data={groupOption.options}
keyExtractor={(result) => result.id.toString()}
renderItem={({ item, index }) => {
const clickedRadio = () => {
const selectedOption = { [item.question]: { ...item } };
setAnswers({ ...answers, ...selectedOption });
};
const status = isOptionSelected(item) ? true : false;
return (
<View key={index}>
<Radio
initialValue={status}
label={item.description}
onChange={() => clickedRadio()}
color="error"
/>
</View>
);
}}
/>
);
};
return (
<View style={styles.container}>
<Text style={{ fontWeight: "bold", fontSize: 16, color:"#6B24AA" }}>
{t("Choose an option/Scroll for more questions")}
</Text>
<FlatList
data={questions}
listKey={(item) => item.id.toString()}
keyExtractor={(result) => result.id.toString()}
renderItem={({ item, index }) => {
const data = [
{
title: item.description,
content: (<><OptionList options=
{item?.question_options}></OptionList></>)
}
];
const status = isOptionSelected(item) ? true : false;
return (
<View style={styles.groupOptions} key={index}>
<Accordion style={styles.accordion}
headerStyle=
{styles.headerStyle} contentStyle={styles.contentStyle}
dataArray={data}
icon={status ? <Icon name="circle"
family="Entypo" size={20} style={{marginLeft: -6,
color: "#6B24AA"}}/>
:
<Icon name="done"
family="MaterialIcons" size={20}
style={{marginLeft: -6}}/>}
expandedIcon={<Icon name="circle"
family="Entypo"/>}
opened={1}/>
</View>
);
}}
/>
</View>
);
The accordion content its anther flatlist component. It shows this error every time i click the accordion.
It shows this error :
VirtualizedList: Encountered an error while measuring a list's offset from its containing VirtualizedList.
at node_modules/react-native/Libraries/Lists/VirtualizedList.js:1411:10 in _scrollRef.measureLayout$argument_2
How can i fix this error? Is it the problem the other flatlist at the content of accordion
Please replace the OptionList component with the given below code.
OptionList
const OptionList = (groupOption) => {
return (
groupOption.map((item,index) => {
const clickedRadio = () => {
const selectedOption = { [item.question]: { ...item } };
setAnswers({ ...answers, ...selectedOption });
};
const status = isOptionSelected(item) ? true : false;
return (
<View key={index}>
<Radio
initialValue={status}
label={item.description}
onChange={clickedRadio}
color="error"
/>
</View>
)
})
);
};
please check and let me know , cheers !
I want to show this data in FlatList but it shows only whitescreen:
const [datas,setDatas] = useState([
{
name:'dhinesh',
phone:'9888888888',
email:'asdasd#gmail.com',
salary:'50000',
position:'ww'
},
{
name:'ramesh',
phone:'93388888',
email:'jhjj#gmail.com',
salary:'90000',
position:'sw'
}
]);
This is the code i used :
<FlatList
data={datas}
keyExtractor={(item, index) => index.toString()}
renderItem={({item}) => {
<View>
<Text>{item.name}</Text>
<Text>{item.phone}</Text>
<Text>{item.email}</Text>
<Text>{item.salary}</Text>
<Text>{item.position}</Text>
</View>
}}
/>
Please give me a solution
Add return in your view
renderItem={({item}) => {
return (
<View>
<Text>{item.name}</Text>
<Text>{item.phone}</Text>
<Text>{item.email}</Text>
<Text>{item.salary}</Text>
<Text>{item.position}</Text>
</View>
)
}}
I wasn't able to understand why it does not render the contents of dummyData when I use it with renderItem arrow function but it works with when I pass {item}) => <Text style={styles.item}>{item.key}</Text> to renderItem props directly
const HomeScreen = ({ navigation }) => {
const renderItem = ({item}) => {
<Text style={styles.item}>{item.key}</Text>
}
dataUtils.fetchData();
return(
<View style={styles.container}>
<FlatList
data={dummyData}
renderItem={renderItem}
keyExtractor={item => item.id}
/>
</View>
);
};
You are missing a return statement. Delete brackets or add a return.
Like this:
const renderItem = ({item}) =>
<Text style={styles.item}>{item.key}</Text>
Or:
const renderItem = ({item}) => {
return <Text style={styles.item}>{item.key}</Text>
}
I'm using Flatlist to render a list of items. In Componentwillmount, I set the state to result of a fetch.
constructor() {
super();
this.state = {
listOfCameras: [],
};
}
componentWillMount() {
apiService.listCameras().then((res) => {
this.setState({ listOfCameras: res });
});
}
My Flatlist looks like this:
createListOfCams() {
return (
<FlatList
data={this.state.listOfCameras}
renderItem={({ item, index }) => {
return (
this.createSingleCamera(item, index)
);
}}
keyExtractor={(item, index) => index.toString()}
// extraData={}
/>
);
}
and finally my createSingleCamera looks like this:
createSingleCamera(item, index) {
const modelCam = item.model;
return (
<View style={styles.singleCamLineView}>
<View style={styles.modelCamNameView}>
<Text style={styles.singleCameraText}>{modelCam}</Text>
</View>
<View style={styles.deleteIconView}>
<TouchableOpacity
onPress={() => {
this.deleteCamFromList(item, index);
}}
>
<Text style={styles.singleCameraText}> </Text>
</TouchableOpacity>
</View>
</View>
);
}
What I'd like to do is pass on the index of the item I want to delete to the deleteCamFromList method and then use that to re-render the Flatlist.
So far my deletefromCamList looks like this:
deleteCamFromList(item, index) {
let allCamerasBeforeDelete = [...this.state.listOfCameras];
let newArryOfCams = allCamerasBeforeDelete.filter(index);
}
How would I use filter to return a new array minus the index that I provided it?
The second argument given to Array.prototype.filter is the item index, so:
deleteCamFromList(item, index) {
let newArrayOfCams = this.state.listOfCameras.filter((_, i) => i !== index);
this.setState({listOfCameras: newArrayOfCams})
}