I am using nativebase.
I want to have a pull refresh flatlist.
I have a AppContainer with the header, footer and content:
<Container>
<StatusBar backgroundColor={colors.primary} />
{renderHeader(this.props)}
<Content contentContainerStyle={{ flexGrow: 1 }}>{this.props.children}</Content>
{renderFooter(this.props)}
</Container>
Then I have the flatlist in the AppContainer:
<AppContainer>
<TransactionList />
</AppContainer>
The TransactionList is the flatlist:
<View style={styles.container}>
<FlatList
data={datas}
extraData={this.state}
renderItem={this.renderList}
keyExtractor={item => item.item}
onRefresh={this.refreshList}
refreshing={this.state.refreshing}
/>
</View>
But it does not show the pull refresh because AppContent Content is a ScrollList.
How Can I solve it?
RefreshControl is react-native component, the official react-native documentation has shown an example of it with ScrollView ( https://facebook.github.io/react-native/docs/refreshcontrol ), but it is the exact same props for FlatList :
return (
<SafeAreaView style={styles.container}>
<ScrollView
contentContainerStyle={styles.scrollView}
refreshControl={
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
}
>
<Text>Pull down to see RefreshControl indicator</Text>
</ScrollView>
</SafeAreaView>
);
}
Related
I am trying to create a scrollable grid in my app but I am unable to scroll it . Tried everything but nothing is working .
return (
<FlatList
data={data}
renderItem={({item}) => (
<GridImage style={styles.imageThumbnail} imageUri={item} numColumns={3} />
)}
/>
);
};
Wrap flatlist in a view and give height & width to it.
return (
<View style={{ height:600,width:600 }}>
<FlatList
data={this.state.data}
renderItem={({item}) => <Country name={item} />}
/>
</View>
);
I try to show some items inside a ScrollView, but it shows me this error.
VirtualizedLists should never be nested inside plain ScrollViews with
the same orientation - use another VirtualizedList-backed container
instead.
I tried with scrollview, but i need columns in my list.
return (
<View>
<ScrollView style={{backgroundColor: '#612d7c'}} >
<View style={{marginTop: headerHeight}}>
<ProfilePictureItem />
</View>
<View style={styles.badgeTextContainer}>
<Text style={styles.badgeText}>Badges</Text>
</View>
<Card style={styles.card}>
<FlatList
data={products}
style={{marginBottom: 20}}
renderItem={itemData => (
<BadgeItem key={itemData.item.id} style={styles.badge}/>
)}
numColumns={3}
/>
</Card>
</ScrollView>
</View>
);
That's right, either you display a ScrollView or a FlatList if you use the same scroll direction. For example, you can use the FlatList with the ListHeaderComponent prop.
You can try this:
function renderListHeader() {
return (
<View style={{marginTop: headerHeight}}>
<ProfilePictureItem />
</View>
<View style={styles.badgeTextContainer}>
<Text style={styles.badgeText}>Badges</Text>
</View>
)
}
.....
return (
<FlatList
data={products}
ListHeaderComponent={renderListHeader()}
style={{marginBottom: 20}}
renderItem={itemData => (
<BadgeItem key={itemData.item.id} style={styles.badge}/>
)}
numColumns={3}
/>
);
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}`}} />
i'm working on a react native app and i updated my react version.
I use Flatlist inside a ScrollView.
I got this warning :
VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.
My component :
return (
<KeyboardAvoidingView behavior="padding" enabled style={styles.keyboardAvoidingView}>
<SafeAreaView style={styles.keyboardAvoidingView}>
<Header
..
}}
containerStyle={styles.headerContainer}
rightComponent={{
...
}}
/>
<ScrollView style={styles.body}>
<View style={styles.titleSection}>
<Text style={styles.stepTitle}>Étape 1/3</Text>
<Text style={styles.questionTitle}>Quel contact voulez-vous partager ?</Text>
</View>
<View>
<FlatList
data={contacts}
renderItem={({ item, index }) => (
<TouchableHighlight onPress={() => this.onItemClickHandler(index, item.id, item.firstName, item.lastName)} style={styles.touchableHighlight}>
<View>
<ListItem
chevron={
(
<Icon
color={this.state.selectedIndex === index
? `${defaultTheme.palette.white.main}`
: `${defaultTheme.palette.primary.dark}`}
name="chevron-right"
size={40}
type="material"
/>
)
}
containerStyle={
this.state.selectedIndex === index
? styles.selected
: styles.notSelected
}
leftElement={
(
<Icon
...
/>
)
}
title={`${item.firstName} ${item.lastName}`}
titleStyle={this.state.selectedIndex === index
? [styles.titleStyle, styles.titleSelected]
: [styles.titleStyle, styles.defaultTitle]}
/>
</View>
</TouchableHighlight>
)}
extraData={this.state.selectedIndex}
keyExtractor={(item) => item.email}
ListHeaderComponent={this.renderHeader(searchValue)}
style={styles.flatListStyle}
ListFooterComponent={this.renderFooter}
/>
{
(contacts.length > 0 && page > 0)
&& <CustomButton title="Afficher la suite" onPress={() => this.makeRemoteRequest()} loading={loading} disabled={loading} />
}
</View>
</ScrollView>
</SafeAreaView>
</KeyboardAvoidingView>
);
I had the same issue. See my code
What I did is the component which I wanted to render outside the flatlist I included that inside the ListHeaderComponent and removed the Scrollview component. Now its working fine without any warning.
Below is the previous code:
<ScrollView >
<ReadCard data={this.state.data}/>
<FlatList
data={this.state.data.related}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
ItemSeparatorComponent={ListSeprator}
/>
</ScrollView>
Below is the changed code without any warning:
<FlatList
data={this.state.data.related}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
ItemSeparatorComponent={ListSeprator}
ListHeaderComponent={
<ReadCard data={this.state.data}/>
}
/>
I'm using react-navigation and implementing drawer.
It worked on the iOS but it's not working on the android.
When I call _drawToggle,
_drawerToggle = () => {
this.props.navigation.navigate('DrawerOpen');
}
The screen gets darker(seems like working, but not quite).
Here is return value of the render() function.
<View style={{flex:1}}>
<Header
headerText="Restaurant List"
navigation={this.props.navigation}
drawerToggle={this._drawerToggle}
/>
<ScrollView>
<FlatList
data={restaurants}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
/>
</ScrollView>
</View>