I am trying to diplay a specific value from the render method in flatlist but when i use {item.Name[0]} it shows me all the first letters from all the Name values but i want the whole first Name.
return (
<View style={styles.container}>
<FlatList
horizontal
data={this.state.data}
renderItem={({ item,index }) => (
<View style={styles.card_template} >
<View style={styles.text_container}>
<Text style={styles.card_title}>{item.Name[1]}</Text>
<Text style={styles.card_subtitle}>{item.Phone} </Text>
</View>
</View>
)}
/>
</View>
);
}
}```
After the alert on markerClick do this:
var temp = this.state.data.filter(x=> x.Name != marker.Name);
temp.unshift(marker);
this.setState({data:temp});
And on the renderitems just use item.Name
You are moving the selected marker to the first place in the array and selected item will be always on top
I think Problem is resolved if you following solution:
<Text style={styles.card_title}>{item.Name}</Text>
then try.
Related
As I have multiple data that need to be display in the screen that will exceed the screen limit and I cannot scroll down to look at the other data. I researched and found that SafeAreaView and FlatList helps in solving the issue.
I tried to apply to my code:
<SafeAreaView style = {styles.container}>
<FlatList>
<Text style = {styles.header}>{paramKey} results:</Text>
{
todoData.map((item,index) => {
return(
<View key ={index}>
<Text style ={styles.text}>{item.Halal}</Text>
<Text style ={styles.text}>{item.OH}</Text>
<Text style ={styles.text}>{item.Description}</Text>
<Text style ={styles.text}>{item.Location}</Text>
</View>
)
})
}
</FlatList>
</SafeAreaView>
After applying, my data cannot be displayed anymore. So I referred to the document: https://reactnative.dev/docs/flatlist
It seems like <FlatList> ends with /> and not <FlatList> ends with </FlatList>.
Example from the docs:
<SafeAreaView style={styles.container}>
<FlatList
data={DATA}
renderItem={({item}) => <Item title={item.title} />}
keyExtractor={item => item.id}
/>
</SafeAreaView>
I tried ending <FlatList> with /> but it seems to be a syntax error in my IDE (Visual Studio code). How do I properly use <FlatList> in this case?
Flatlist do not accept children prop. Use renderItem prop instead:
<SafeAreaView style = {styles.container}>
<Text style = {styles.header}>{paramKey} results:</Text>
<FlatList
data={todoData}
renderItem={({ item }) => (
<View>
<Text style ={styles.text}>{item.Halal}</Text>
<Text style ={styles.text}>{item.OH}</Text>
<Text style ={styles.text}>{item.Description}</Text>
<Text style ={styles.text}>{item.Location}</Text>
</View>
)}
/>
</SafeAreaView>
I tried to get only first element [0] of array and print in UI.
I will get only first lesson in the array and then print.
{route.params.Lessons.map((lessons) => {
return (
<View>
<Text style={styles.lessonTitle}>Lesson 1</Text>
<Text style={styles.lessonDescription}>{lessons.lessonName}</Text>
</View>
)
})}
Thanks
You could use something like this code:
<View>
<Text style={styles.lessonTitle}>Lesson 1</Text>
<Text style={styles.lessonDescription}>{route.params.Lessons[0].lessonName}</Text>
</View>
If you only want to display only one element of array, you don't need to use the .map() function
You can try this instead
const lesson1 = route.params.Lessons[0]
return (
<View>
<Text style={styles.lessonTitle}>Lesson 1</Text>
<Text style={styles.lessonDescription}>{lesson1.lessonName}</Text>
</View>
)
Simply solved!
const LessonList = route.params.Lessons;
return (
<View>
<Text style={styles.lessonTitle}>Lesson 1</Text>
<Text style={styles.lessonDescription}>{Lessons[0].lessonName}</Text>
</View>
)
I hope you find an answer :D
I have a flatlist that sends data to another component where the data got filtered, then the flatlist renders the filtered items. I want to get the number of items rendered by the flatlist (i.e the number of remaining items after the data got filtered). How should I do it, please?
Here is the flatlist
<FlatList
style={styles.scrollContainer}
data={this.state.schedules}
keyExtractor={item => item.id.toString()}
horizontal={false}
showsHorizontalScrollIndicator={false}
renderItem={({ item }) => <Today schedule={item} updateSchedule={this.updateSchedule}/>}
keyboardShouldPersistTaps="always"
/>}
And the component that filters the data;
{schedule.once && today == schedule.date ?
<TouchableOpacity
onPress={() => this.toggleScheduleModal()}
>
<View style={[styles.listContainer, {borderLeftWidth: 4}, {borderLeftColor: schedule.color}]}>
<View style={styles.time}>
<Text style={styles.timeText}>{schedule.stime}</Text>
<Text style={styles.timeText}>{schedule.etime}</Text>
</View>
<View style={styles.title}>
<Text style={styles.noteText} numberOfLines={1}>
{schedule.name}
</Text>
<Text style={styles.subtitle} numberOfLines={1}>
{schedule.type}
</Text>
</View>
<View style={styles.day}>
<Text style={styles.subtitle} numberOfLines={1}>
Today
</Text>
<Text style={styles.subtitle} numberOfLines={1}>
{schedule.teacher}
</Text>
</View>
</View>
</TouchableOpacity>
:
[]
}
The data got filtered and is rendered as expected. I just want to know how to count the numbers. Help please.
I believe you could use the method Children.toArray(children) to count how many rendered items there are.
I couldn't figure out where you'd use it in your specific structure, but you'd need to pass the childrenprop to that method. Children, in this case, I believe would be the component you're filtering your data in.
Another option would be to filter the data before rendering you component, which then would just be a matter of getting the array length.
const filterData = () => {
// need to define `today` here
const filteredSchedules = this.state.schedules.filter(schedule => schedule.once && today == schedule.date);
console.log(filteredSchedules.length);
return filteredSchedules;
}
<FlatList
style={styles.scrollContainer}
data={filterData()}
keyExtractor={item => item.id.toString()}
horizontal={false}
showsHorizontalScrollIndicator={false}
renderItem={({ item }) => <Today schedule={item} updateSchedule={this.updateSchedule}/>}
keyboardShouldPersistTaps="always"
/>}
You can try this current rendered index.
onViewableItemsChanged = ({ viewableItems, changed }) => {
console.log("Visible items are", viewableItems);
console.log("Changed in this iteration", changed);
}
<FlatList
onViewableItemsChanged={this.onViewableItemsChanged }
viewabilityConfig={{
itemVisiblePercentThreshold: 50
}}
/>
I have a flat list that displays a list of item, I would like to make each item clickable.
My render function looks like this, and it works without any issue, except that it is not clickable
render() {
return (
<FlatList
data={formatData(data, numColumns)}
style={styles.container}
renderItem={this.renderItem}
numColumns={numColumns}
/>
);
}
I have tried to do something similar to this but it is giving me an error, any idea what's wrong with my code?
<FlatList
data={formatData(data, numColumns)}
style={styles.container}
renderItem={({this.renderItem}) => (
<TouchableHighlight
onPress={() => console.log("hello")}>
</TouchableHighlight>
)}
numColumns={numColumns}
/>
You can do like this :
renderItem with TouchableOpacity. Make sure to import it from react native.
import { TouchableOpacity } from "react-native";
import Icon from 'react-native-vector-icons/FontAwesome5';
...
...
render() {
return (
<FlatList
data={formatData(data, numColumns)}
style={styles.container}
renderItem={({item ,index}) => (
<TouchableOpacity
key={index.toString()}
onPress={() => console.log("clicked")}
>
<Icon name={item} color="red"/>
</TouchableOpacity>
)}
numColumns={numColumns}
key={numColumns.toString()} // if you want to use dynamic numColumns then you have to use key props
/>
);
}
First you need to import Touchable Opacity and the error you are getting , make sure data you are passing to flatlist is an array. So check this :
<FlatList
data={formatData(data, numColumns)} // this should be an array , or array of objects
renderItem={({item ,index}) => (
<TouchableOpacity
onPress={() => console.log("hello")}
>
<Text>Hi</Text>
</TouchableOpacity>
/>
Hope its clear
This is how you can iterate inside FlatList itself.
Working live https://snack.expo.io/#akhtarvahid/flatlist-simple
<FlatList
data={formatData(data, numColumns)}
style={styles.container}
renderItem={({item ,index}) => (
<TouchableOpacity
key={index.toString()}
onPress={() => console.log('Clicked item')}>
<Text>{'Hello'}</Text>
</TouchableOpacity>
)}
numColumns={numColumns}
keyExtractor={item=>item.id}
/>
I am developing an App using react native. I want to pass a parameter to a function in my flatlist for a specific record. But, the flat list ignore this line of code:
onPress={ () => {console.log("TEST1"); this.onPressTopUp()} } />
Here is my code:
<FlatList
ItemSeparatorComponent={ () => <View style={ styles.rowSep } /> }
horizontal={false}
data={this.state.result}
renderItem={
({item}) => (
<View style={styles.containerrow}>
<View style={styles.viewPark}>
<Text style={styles.itemBold}> {I18n.t('Data_e_ora_inizio')}:
<Text style={styles.itemNormal}>{item.start}</Text></Text>
<Text style={styles.itemBold}> {I18n.t('Data_e_ora_termine')}:
<Text style={styles.itemNormal}>{item.end}</Text></Text>
<Text style={styles.itemBold}> {I18n.t('Energia')}: <Text style={styles.itemNormal}>{item.energy_delivered}</Text></Text>
<Text style={styles.itemBold}> {I18n.t('Colonna')}: <Text style={styles.itemNormal}>{item.column_id}</Text></Text>
<Text style={styles.itemBold}> {I18n.t('Costo_della_ricarica')}:
<Text style={styles.itemNormal}>€ {item.amount}</Text></Text>
<Text style={styles.itemBold}> {I18n.t('Aggiornamento_del')}:
<Text style={styles.itemNormal}>{item.last_update}</Text></Text>
</View>
<View style={styles.rowCenter}>
<Button label={I18n.t('Via_questa_ricarica')} color={defStyleValues.RechargeElectricCar} onPress={ () => {console.log("TEST1"); this.onPressTopUp()} } />
</View>
</View>
)
}
keyExtractor={item => item.id}
/>
Also here is my function:
onPressTopUp(columnID){
console.log("TEST2, ", columnID);
}
In other words, My problem is that I need to pass columnID of each specific row to the onPressTopUp(columnID) function in the FlatList. I checked the console log, even it dose't show both TEST1 and TEST2. Can you help me to do that?
Just use Arrow Function , it will take care of binding.
your function is :-
onPressTopUp(columnID){
console.log("TEST2, ", columnID);
}
Replace with Arrow Function :- and it will work for you.
onPressTopUp = (columnID) => {
console.log("Test, ", columnID);
}
and change your label Property with title inside your Button
You can use Button like this below :-
import { Button } from 'react-native';
...
<Button
onPress={onPressLearnMore}
title="Learn More"
color="#841584"
accessibilityLabel="Learn more about this purple button"
/>
I think the problem is you had not bind the onPressToUp function, try this:
onPressTopUp = (columnID) => {
console.log("Test, ", columnID);
}
Is Button component imported from React Native? Because react native Button component doesn't have label property.
Did you try call function with column id like this this.onPressTopUp(15).
Hope this help.