I have a react native app that is retrieving APIs.
However, instead of retrieving from item[0] to item[93], I wanted to reverse it so that it presents the data from item[93] at the top, followed by item[92], etc.
Hence, I tried to include this in my flatlist:
inverted={true}
However, in doing so, when i load the app, it will still load from [0], but keep including the next items above it over and over.
How do I also load the info from item[93] to item[0]?
Thanks so much!
My flatlist looks like that:
return (
<View style={styles.background}>
<FlatList
data={this.state.dataSource}
keyExtractor={this._keyExtractor}
inverted={true}
renderItem={({ item }) => (
<Card>
<CardItem>
<View style={styles.container}>
<Image style={styles.profilepic}
source={{
uri: item.links.mission_patch
// from API docs
}}
/>
</View>
<View style={styles.userinfo}>
<Text style={styles.content}>
Flight Number: {item.flight_number}
Mission Name: {item.mission_name}
{item.details}
</Text>
</View>
</CardItem>
</Card>
)}
/>
</View>
);
}
}
You can try the Array.reverse() like so:
<FlatList
data={this.state.dataSource.reverse()}
//
Related
I have been working my way through legacy views within an app - resolving the issues of FlatLists within a ScrollView component casuing the resulting Virtualised Lists error that is displayed.
I have 5 affected pages - first 3 only had 1 flatlist in the view - so was easy enough to split the urrounding code into flatlist header and footer assets. However I'm not sure what to do in terms of having 2 or more flatlists - how do i apprach the layout in thsi scenario - so there is only 1 scroll?
I may be missing something very simple but need a nudge please!
here is the view code:
<View style={[PRStyles.IRContainer]} >
<StatusBar barStyle="light-content" />
<View style={PRStyles.header}>
<FixedHeader backButton={true} navScreen='HomeViewContainer' />
</View>
<View style={PRStyles.IRBody}>
<ScrollView
refreshControl={
<RefreshControl
refreshing={this.state.refreshing}
onRefresh={this._onRefresh} />}>
<KeyboardAvoidingView>
<TitleHeader sectionLocaleTxt='Duty Record' sectionTxt='' sectionDesc='End of shift duty Record.' sectionHyphen={false} />
<View style={FormStyles.PrRow}>
<Text style={FormStyles.PrRowTitle}>{this.props.auth.checkedInVenueName}</Text>
<Text style={FormStyles.PrRowDate}>{this.getCurrentDate()}</Text>
</View>
<View style={FormStyles.PrRow}>
<Text style={FormStyles.PrRowSubTitle}>General Manager / Licence Holder:</Text>
<View style={FormStyles.PrTable}>
<View style={FormStyles.prRowStrip}><Text style={FormStyles.prRowStripText} >{this.state.licenceHolder}</Text></View>
</View>
</View>
<View style={FormStyles.PrRow}>
<Text style={FormStyles.PrRowSubTitle}>Door Staff (<Text style={FormStyles.PrRowCount}>{this.state.doorStaffCount}</Text> total)</Text>
<View style={FormStyles.PrTable}>
<FlatList
scrollEnabled={true}
data={this.state.rotaRecords}
keyExtractor={(item, index) => index.toString()}
ListEmptyComponent={this._listStaffEmptyComponent}
renderItem={this._renderDoorStaffItem}
/>
</View>
</View>
<View style={FormStyles.PrRow}>
<Text style={FormStyles.PrRowSubTitle}>Numbers:</Text>
<View style={FormStyles.PrTable}>
<View style={FormStyles.prRowStrip}><Text style={FormStyles.prRowStripText} >Total In <Text style={ FormStyles.prRowStripColon}>:</Text> <Text style={FormStyles.prRowStripOrText}>{this.state.totalIn}</Text></Text></View>
<View style={FormStyles.prRowStrip}><Text style={FormStyles.prRowStripText} >Total Out<Text style={FormStyles.prRowStripColon}>:</Text> <Text style={FormStyles.prRowStripOrText}>{this.state.totalOut}</Text></Text></View>
<View style={FormStyles.prRowStrip}><Text style={FormStyles.prRowStripText} >Overall Difference<Text style={FormStyles.prRowStripColon}>:</Text> <Text style={FormStyles.prRowStripOrText}>{this.state.totalDifference}</Text></Text></View>
</View>
</View>
<View style={FormStyles.PrRow}>
<Text style={FormStyles.PrRowSubTitle}>Door Counts:</Text>
<FlatList
scrollEnabled={true}
data={this.state.countRecords}
keyExtractor={(item, index) => index.toString()}
ListEmptyComponent={this._listDoorCountEmptyComponent}
ListHeaderComponent={this._listDoorCountHeaderComponent}
renderItem={this._renderDoorCountItem}
/>
</View>
<View style={[FormStyles.form, FormStyles.PrRow, {marginTop:15, paddingTop:0, borderBottomWidth:0} ]}>
<Text style={ModalStyles.formTop}><Text style={[ModalStyles.required, ]}>*</Text>Required Field</Text>
<Text style={[FormStyles.formLabel, FormStyles.formlabelFirst ]}>1. Customer Comments:</Text>
<View style={FormStyles.textInputBlock}>
<TextInput
placeholder="Enter Comments"
numberOfLines={4}
onChangeText={val => this.setState({ comments: val})}
value={this.state.comments}
multiline
style={{minHeight: 280, height: 'auto', textAlignVertical: 'top'}}
/>
</View>
<Text style={[FormStyles.formLabel, FormStyles.formlabelFirst ]}>2. Duty Manager Name<Text style={ModalStyles.required}>*</Text> :</Text>
<View style={FormStyles.textInputBlock}>
<TextInput
ref='signatureName'
placeholder="Please Print Name"
style={FormStyles.textInputText}
autoCorrect={false}
returnKeyType='done'
value={this.state.signatureName}
onChangeText={(text) => this.setState({signatureName:text})}
/>
</View>
<Text style={[FormStyles.formLabel, FormStyles.formlabelFirst ]}>3. Duty Manager Signature: <Text style={ModalStyles.required}>*</Text></Text>
<Text style={[FormStyles.formLabelSub, FormStyles.formLabelSubHigh, FormStyles.superHighLight ]}>Note: PRESS BLUE SAVE BUTTON after applying Signature</Text>
<View style={[FormStyles.textInputBlock, this.isSignatureAdded() && FormStyles.signatureBlock ]}>
{this.signatureBlock()}
</View>
</View>
{submitButton}
</KeyboardAvoidingView>
</ScrollView>
</View>
</View>
This is the most common error when working with scroll view and flat list.
To prevent the error cause, we have to manage our views inside a single flat list and put other components in the list header component and list footer component in an efficient way as we desire.
<FlatList
data={this.state.countRecords}
renderItem={(item) => {
return (
// Your flat list item goes here..
)
}}
ListHeaderComponent={
// Content above the list goes here..
}
ListFooterComponent={
// Content below the list should goes here..
}
/>
You can still check the below link for more understanding.
FlatList Example with Custom Header and Custom Footer
I can scroll only in case when I change SafeAreaView to ScrollView but I get this error
VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.
{subCategoryIsLoading ? (
<ActivityIndicator
size='large'
color={primColor}
style={{marginTop: 150}}
/>
) : (
<SafeAreaView>
<View style={styles.containerSubCategory}>
<FlatList
showsVerticalScrollIndicator={false}
data={filterCatTrue()}
keyExtractor={item => item._id}
renderItem={({item}) => {
return (
<View style={styles.containerImages}>
<TouchableHighlight onPress={() => console.log(item._id)}>
<Image
source={{
uri: `${urlImages}subCategories/${item.image}`,
}}
style={styles.imageSubCategory}
/>
</TouchableHighlight>
</View>
)
}}
/>
<FlatList
horizontal={false}
numColumns={2}
showsVerticalScrollIndicator={false}
columnWrapperStyle={{
justifyContent: 'space-between',
}}
data={filterCatFalse()}
keyExtractor={item => item._id}
contentInset={{bottom: 60}}
renderItem={({item}) => {
return (
<View style={styles.containerImagesWide}>
<TouchableHighlight>
<Image
source={{
uri: `${urlImages}subCategories/${item.image}`,
}}
style={styles.imageSubCategoryWide}
/>
</TouchableHighlight>
</View>
)
}}
/>
</View>
</SafeAreaView>
)}
Virtualized lists, that means 'SectionList' and 'FlatList' for example, are performance-optimized meaning they improve memory consumption when using them to render large lists of content. The way this optimization works is that it only renders the content that is currently visible in the window, usually meaning the container/screen of your device. It also replaces all the other list items same sized blank space and renders them based on your scrolling position.
Now If you put either of these two lists inside a ScrollView they fail to calculate the size of the current window and will instead try to render everything, possibly causing performance problems, and it will of course also give you the warning mentioned before.
Check this post, it perfectly explains your problem.
i get image url correct and passed as props but image not showing in my app
main screen
here main screen that render FlatList data = products that include image url and i log that and getting correct but image not showing
const products = useSelector(state => state.products.availableProducts);
return(
<FlatList numColumns ={2}
data={products}
keyExtractor={item => item.id}
renderItem={itemData => (
<ProductItem
image={itemData.item.imageUrl}
title={itemData.item.title}
price={itemData.item.price}
onSelect={()=>{
props.navigation.navigate('detail', {
productId: itemData.item.id,
})
}}
>
</ProductItem>
)}
/>
ProductItem component
<View style={style.product}>
<View style={style.touchable}>
<TouchableCmp onPress={props.onSelect} useForeground>
<View>
<View style={style.imageContainer}>
<Image style={style.image} source={{uri: props.image}} />
</View>
<View style={style.detail}>
<Text style={style.title}>{props.title}</Text>
<Text style={style.price}>{props.price}SDG</Text>
</View>
</View>
</TouchableCmp>
<View style={{marginTop:1}}>{props.delete}</View>
</View>
</View>
¿What properties does the style tag "style.image" have?
There may be a problem with the height or width of the image.
i find the should add http:// to image url because i am not adding when saving data
code will be like
<Image style={styles.image} source=
{{uri:`http://${singleproduct.imageUrl}`}} />
In my app, I want different cards have different background images, every image has a number text, and when I click the image it can increase the number by one. now I have them with same image background image, I do not know how to modify my code to meet this requirement. The following is my code:
const MyMeetupsList = ({meetups}) => (
<FlatList
data={meetups}
renderItem={({item}) => (
<View style={{marginLeft:8, marginTop: 8} }>
<View style={styles.meetupCard}>
<ImageBackground source={ require('../../../imgs/food-2.jpg')} style={{width: 175, height: 200}} blurRadius={6}>
<Text style={styles.gridItemText}>{item.title}</Text>
</ImageBackground>
</View>
</View>
)}
numColumns={2}
keyExtractor={item => item.title}
/>
);
Hope you can help! Thanks a lot!
You can use attribute extraData for tracking any change to the dataset and flatlist will rerender on any changes applied on data set. Here i added Map data set( Immutable.js) which can be used to track multiple data sets. If you have only one then you can put that data set straight away. handleClickAction is a function u need to define to mutate your data.
const MyMeetupsList = ({meetups}) => (
<FlatList
data={meetups}
extraData={Map({
foo: meetups, // here you can put any data sets u want to watch for render
})}
renderItem={({item}) => (
<View style={{marginLeft:8, marginTop: 8} }>
<View style={styles.meetupCard}>
<ImageBackground source={ require('../../../imgs/food-2.jpg')} style={{width: 175, height: 200}} blurRadius={6}
onPress = {()=>handleClickAction(item.id)} >
<Text style={styles.gridItemText}>{item.title}</Text>
</ImageBackground>
</View>
</View>
)}
numColumns={2}
keyExtractor={item => item.title}
/>
);
I hope above snippet helps
I'm creating an APP to show points of interest of monuments. Right now I'm rendering the information on a ScrollView (vertical way). The output is like this:
I edited the image, it continues, but I think you get the point.
Here is my code:
return (
<View style={styles.container}>
<View style={styles.contentContainer}>
<ScrollView>
{monumento.pois.map((poi, index) => (
<View key={index} style={{marginBottom: 15}} >
<Tile
imageSrc = {{uri:poi.image}}
contentContainerStyle = {{marginBottom: -30}}
/>
<View style={styles.map}>
<Icon
raised
reverse
name='location-on'
color='#075e54'
size={36}
onPress={() => navigate('Mapa', {monumento: monumento})} />
</View>
<View style={styles.titleContainer}>
<Text style={styles.titleText}>{poi.name}</Text>
</View>
<View style={styles.bodyContent}>
<Text style={styles.bodyText}>{poi.description}</Text>
</View>
</View>
))}
</ScrollView>
</View>
</View>
);
What I want is to scroll normally for one Point of Interest (PoI), but the next PoI I want him to appear by scrooling horizontal (swiping left)...like this:
sample
How can I accomplish that? Thanks!