I am displaying a list of Material Kit buttons (using SectionList) and want to be able to display their key (ie. their index) when they are clicked - however am struggling with the getting it working with an MK button.
Any help would be really appreciated. Thanks a ton!
Button builder with onPress:
AllConnectionsItemButton = MKButton.flatButton()
.withOnPress( (key) => alert(key))
.build()
SectionList:
<SectionList
renderItem={({item, index, section}) => (
<AllConnectionsItemButton key={index}>
<Text>{item.name}</Text>
</AllConnectionsItemButton>
)}
renderSectionHeader={({section: {title}}) => (
<View>
<Text>{title}</Text>
</View>
)}
sections={this.state.myList}
keyExtractor={(item, index) => item + index}
/>
Related
I'm trying to display a FlatList of items, with each item containing a FlatList of identical buttons. When one of the buttons is clicked, I want to receive both the parent FlatList item and the value the button corresponds to.
I've tried the following method with no success (timeItem is undefined):
timeSlotsKeyExtractor = (item, index) => item.toString();
timeSlots =
[
'8:00', '10:00', '12:00', '14:00', '16:00', '18:00'
];
renderDate = ({ item }) => {
return (
<View>
<Text>{item.date}</Text>
<FlatList
data={this.timeSlots}
keyExtractor={this.timeSlotsKeyExtractor}
renderItem={({ timeItem }) => (
<TouchableOpacity onPress={() => this.addTimeSlot(item, timeItem)}>
<View><Text>{timeItem}</Text></View>
</TouchableOpacity>
)}
horizontal={true} />
</View>
)
}
addTimeSlot(item, timeItem) {
console.log(item)
console.log(timeItem)
}
I'm aware of SectionLists, and as such also attempted to make each item of my parent FlatList an object containing both the item and the array of timeSlots, however, I wasn't sure how to go about getting the header in the renderItem section:
Screenshot of SectionList code:
<SectionList
sections={this.state.weekDates}
renderSectionHeader={({ section }) => (
<Text>{section.date} </Text>
)}
renderItem={({ item }) => (
<Text>
{iten.date}
{item.timeSlots}
</Text>
)}
keyExtractor={(item, index) => index}
/>
Where am I going wrong with these approaches? I'm fairly new to React Native so there's a good chance I've missed something really simple.
I currently have a section list in one of my components. This is the code:
<SectionList
renderItem={({item, index, section}) =>
<TouchableOpacity onPress={ () => this.onPressOrder(item) }>
<View>
<Text key={index}>
{item}
</Text>
</View>
</TouchableOpacity>
}
renderSectionHeader={({section: {title}}) => (
<Text style={{fontWeight: 'bold'}}>{title}</Text>
)}
sections={this.state.dataSource}
keyExtractor={(item, index) => item + index}
/>
the data is being pulled from this.state.dataSource
dataSource.push({
data: [
listItem.inspector,
listItem.inspection_date,
listItem.inspection_time_display,
listItem.id
],
key: keyId,
title: listItem.address
})
That's how I create my data source. Once it renders it displays like so:
The way the list renders each one of the elements on it's own line has it's own separate TouchableOpacity. What I want is for the whole block of the data to be it's own opacity. Is this possible with the SectionList data to be wrapped in a TouchableOpacity?
I don't believe it's possible to wrap each section of the section list, but it seems like you could just as easily render the entire listItem as a single item, so each section has only a single element in data.
<SectionList
renderItem={({item, index, section}) =>
// render the entire item in the `renderItem` call with one `TouchableOpacity`
<TouchableOpacity onPress={ () => this.onPressOrder(item.id) }>
<View>
<Text>
{item.inspector}
</Text>
</View>
<View>
<Text>
{item.inspection_date}
</Text>
</View>
... etc.
</TouchableOpacity>
}
renderSectionHeader={({section: {title}}) => (
<Text style={{fontWeight: 'bold'}}>{title}</Text>
)}
sections={this.state.dataSource}
keyExtractor={item => item.id}
/>
dataSource.push({
// each section just has one list item that is the full list item
data: [
listItem,
],
key: keyId,
title: listItem.address
})
I am getting list of data and i want to display detail of each data when click on any item of flat list here is my code.
<FlatList style={{paddingBottom:5}}
data = {this.state.fetchFreelancer}
keyExtractor={(y, z) => z.toString()}
renderItem={({ item }) =>
<FreelancerCategory
imageUrifreelancer = {{uri: `${item.profile_img}`}}
imageUrifeatured = {{uri: `${item.badge.badget_url}`}}
featuredColor ={`${entities.decode(item.badge.badget_color)}`}
flagimageUri= {{uri: `${item.location.flag}`}}
freelancername={`${entities.decode(item.name)}`}
title={`${entities.decode(item._tag_line)}`}
rate={`${entities.decode(item._perhour_rate)}`}
country={`${entities.decode(item.location._country)}`}
/>
But i am not able to perform onPress in flat list can any one please help me regarding this. Thanks
It is not working..
<FlatList
style={{ paddingBottom: 5 }}
data={this.state.fetchFreelancer}
keyExtractor={(y, z) => z.toString()}
renderItem={({ item }) => (
<TouchableOpacity
onPress={() => navigate('DetailFreelancerScreen', {profile_id: item.profile_id})}
// onPress={() => alert('Item pressed')}
>
<FreelancerCategory
imageUrifreelancer={{ uri: `${item.profile_img}` }}
imageUrifeatured={{ uri: `${item.badge.badget_url}` }}
featuredColor={`${entities.decode(
item.badge.badget_color
)}`}
flagimageUri={{ uri: `${item.location.flag}` }}
freelancername={`${entities.decode(item.name)}`}
title={`${entities.decode(item._tag_line)}`}
rate={`${entities.decode(item._perhour_rate)}`}
country={`${entities.decode(item.location._country)}`}
/>
</TouchableOpacity>
)}
/>
If you want to perform click events, you should cover your items with TouchableOpacity or TouchableWithoutFeedback.
<FlatList
style={{paddingBottom:5}}
data = {this.state.fetchFreelancer}
keyExtractor={(y, z) => z.toString()}
renderItem={({ item }) => (
<TouchableOpacity
onPress={() => this.props.navigation.navigate('DetailFreelancerScreen',
{profile_id: item.profile_id})}
>
<FreelancerCategory
imageUrifreelancer = {{uri: `${item.profile_img}`}}
imageUrifeatured = {{uri: `${item.badge.badget_url}`}}
featuredColor ={`${entities.decode(item.badge.badget_color)}`}
flagimageUri= {{uri: `${item.location.flag}`}}
freelancername={`${entities.decode(item.name)}`}
title={`${entities.decode(item._tag_line)}`}
rate={`${entities.decode(item._perhour_rate)}`}
country={`${entities.decode(item.location._country)}`}
/>
</TouchableOpacity>
);
/>
for more info refer the RN official document
please read this https://facebook.github.io/react-native/docs/flatlist . This article will help you out how to properly use the FlatList component. I hope it helps
I you put an Algolia connected component in a header of a FlatList it's as if it enters an infinite loop of queries. The connectInfiniteHits runs constantly.
This is really annoying if you like to put some simple filters in the headers of a list of hits.
My setup is like this:
I have a FlatList that is wrapped by the connectInfiniteHits HOC.
The ListHeaderComponent contains a component this is wrapped by the connectRefinementList HOC. The same problem occurs with a connectSearchBox HOC.
Has anyone seen this and found a solution?
I manage to make it work with those lines:
const RefinementList = connectRefinementList(({ items, refine }) => (
<View>
{items.map(item => (
<TouchableOpacity key={item.label} onPress={() => refine(item.value)}>
<Text style={{ fontWeight: item.isRefined ? '600' : 'normal' }}>
{item.label}
</Text>
</TouchableOpacity>
))}
</View>
));
const InfiniteHits = connectInfiniteHits(({ hits, hasMore, refine }) => (
<FlatList
data={hits}
keyExtractor={item => item.objectID}
onEndReached={() => hasMore && refine()}
ListHeaderComponent={<RefinementList attribute="brand" />}
renderItem={({ item }) => (
<View>
<Text>{JSON.stringify(item).slice(0, 100)}</Text>
</View>
)}
/>
));
Note that I'm not using the function version which indeed breaks.
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.