I want to make an online shop, I need a Horizontal section List in react native, contains my products. here is my code. please help me to make it right to left scrolling.clothes is an array of objects contains my product's details.
export default class MySectionList extends Component{
render(){
return(
<SectionList
sections={Clothes}
horizontal={true}
showsHorizontalScrollIndicator={false}
renderItem={({item})=>(
<View>
<Image source={{uri:"item.image",width:'65%',height:200}}/>
<Text>{item.name}</Text>
<Text>{item.price}</Text>
</View>
)}
renderSectionHeader={({section})=>(
<Text>{section.title}</Text>)}
/>
)
}
}
this sectionList scrolls from left to right and I need another one scrolling from left to right.
I solve this by adding some styles. Unfortunately, I18NManager could not solve my problem so I used transform style and for all section list I applied transform: [{ scaleX: -1 }] and because of items inside sectionlist will be reversed, I applied this style again for item wrapper. something like this:
render(){
return(
<SectionList
sections={Clothes}
horizontal={true}
style={{ transform: [{ scaleX: -1 }] }}
showsHorizontalScrollIndicator={false}
renderItem={({item})=>(
<View style={{ transform: [{ scaleX: -1 }] }}>
<Image source={{uri:"item.image",width:'65%',height:200}}/>
<Text>{item.name}</Text>
<Text>{item.price}</Text>
</View>
)}
renderSectionHeader={({section})=>(
<Text>{section.title}</Text>)}
/>
)
}
}
This is a hacky way but I did not find another solution for my problem.
I hope this can help you
If your app language is right to left please set app support to use rtl with
I18NManager.allowRTL(true)
I18NManager.forceRTL(true)
to make section list or flat list scroll from right to left, Otherwise this cannot happen. There are another ways to solve this issue but it's not systematic! Like use inverted prop or direction style.
I had a similar demand for the right-to-left functionality. I used horizontal FlatList (in 2022) with an inverted property.
<FlatList
horizontal
data={diaryWeeksAll}
inverted
getItemLayout={(_data, index) => ({ length: width, offset: width * index, index })}
...
See documentation: https://reactnative.dev/docs/flatlist#inverted
Related
I'm working on a react-native app and I have to put a list of object in a Scrollview, so I use the FlatList component to do it. This is the piece of code that generates the error:
<ScrollView contentContainerStyle={style}>
Other components
<FlatList
style={style}
data={data}
scrollEnabled={false}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item, index}) => (somethings)}
/>
Other components
</ScrollView>
The complete error is: VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing and other functionality - use another VirtualizedList-backed container instead.
Avoid using FlatList with the same orientation. Instead, restructure your code like this --
<ScrollView contentContainerStyle={style}>
Other components
{
data.map((item)=> <Somthing item={item}/>)
}
Other components
</ScrollView>
Flatlist has its own ScrollView you can scroll through the list using that so there is no need to put a flatlist into a ScrollView that is why its giving a warning, the both scrollview will clash and one of them (mostly the parent one) works.
The error is self explanatory and it should be in a developers best interest to avoid these kind of things even when it's just a false alarm.
Your particular situation could use the following solution:
<FlatList
data={data}
keyExtractor={(item, index) => `key-${index}`}
ListHeaderComponent={() => (
<SomeComponents>
...Some components those need to be on top of the list
</SomeComponents>
)}
ListFooterComponent={() => (
<SomeComponents>
...Some components those need to be below the list
</SomeComponents>
)}
renderItem={({ item, index}) => (somethings)}
/>
Another note, if you need more complex list that needs header and footer for the list itself, you can try SectionList.
Your component FlatList and ScrollView have the same orientation(vertical), so you need put your component inside a ScrollView with horizontal orientation like this:
<View>
<ScrollView nestedScrollEnabled={true} style={{ width: "100%" }} >
<View>
<ScrollView horizontal={true} style={{ width: "100%" }}>
<FlatList />
</ScrollView>
</View>
</ScrollView>
</View>
Solution 1: Use FlatList props ListHeaderComponent and create all of your page top section in that. Something like this:
This will not show any warning or error.
Solution 2:
Because only parent view will scroll (ScrollView) and not the child FlatList, so to get rid of the warning you can pass a prop scrollEnabled={false} to the FlatList.
If it doesn't go then import LogBox from react-native and write this in your component
useEffect(() => {
LogBox.ignoreLogs(["VirtualizedLists should never be nested"])
}, [])
hopefully, the warning will be removed.
Anyone want to solve this issue can use a custom VirtualizedScrollView like this:
import React from 'react';
import { FlatList } from 'react-native';
const VirtualizedScrollView = props => {
return (
<FlatList
{...props}
data={[]}
keyExtractor={(e, i) => 'dom' + i.toString()}
ListEmptyComponent={null}
renderItem={null}
ListHeaderComponent={() => (
<>{props.children}</>
)}
/>
);
};
export default VirtualizedScrollView;
Then if you use FlatList inside VirtualizedScrollView, it won't get the warning/error.
<VirtualizedScrollView>
<FlatList
/*--- your props ---*/
/>
</VirtualizedScrollView>
There is a npm package where I get this code, you can also use this package
Solution:
I have also encountered same problem with FlatList. Then the package below solved my problem.
'react-native-virtualized-view'
import { ScrollView } from 'react-native-virtualized-view'
if ScrollView is Vertical change Flatlist Horizontal
<ScrollView >
<FlatList
horizontal
data={lenders}
keyExtractor={(_, index) => index}
renderItem={(item) => {
return <Text>item</Text>
}}
/>
You can solve the 2 vertical ones(I'm assuming their side by side, separated with a segemented control?) by using the same flat list and switching out the data when it's switched. If they're just two vertical flat list's one after another use the SectionList.
For the horizontal one you can try putting the Horizontal FlatList in the ListHeaderComponent of the vertical FlatList and see what happens. It can be janky if you use a vertical FlatList in a vertical scroll view but maybe with two different axis it might be ok. The other option is two only show a few items in the horizontal scrollview and have a "Show More".
The last option is too re design/rethink the page so it's not doing so much. On mobile less is more and developers/designers like to get in the mindset of porting desktop thinking onto mobile. Might be worth a shot.
I used the SectionList approach to solve this & wanted to post a code example because I found the Section data required by React Native to be clear but also quite prescriptive.
renderList = ({empty, posts}: {empty: boolean, posts: Array<Object>}) => (
<SectionList
sections={[
{type: 'MAP', data: [{}]}, // Static sections.
{type: 'PROFILE', data: [{}]},
{type: 'POSTS', data: posts} // Dynamic section data replaces the FlatList.
]}
keyExtractor={(item, index) => index}
renderItem={({item, section}) => {
switch (section.type) {
// Different components for each section type.
case 'MAP':
return <MapView />;
case 'PROFILE':
return <Profile />;
case 'POSTS':
return <Post item={item} />;
default:
return null;
}
}}
ItemSeparatorComponent={() => <Separator />}
ListFooterComponent={() => <>{empty && <EmptyList />}</>}
/>
);
What's nice is that the content feels logically quite separate, so you can add sections easily or have different dynamic data sources.
(If you're building a form & want better keyboard handling, you could also try a KeyboardAwareSectionList from react-native-keyboard-aware-scroll-view.)
Flatlist has an integrated scrollview itself, so you can resolve this error by removing ScrollView Component, And let just the Fatlist component
Error ? you are trying to render a FlatList component inside a scrollview component, this is what is throwing the warning.
solution Render the components using Flatlist's ListHeaderComponent={} prop, i.e in your flatlist add the prop as follows
const FlatList_Header = () => {
return (
<View style={{
height: 45,
width: "100%",
backgroundColor: "#00B8D4",
justifyContent: 'center',
alignItems: 'center'
}}
>
<Text style={{ fontSize: 24, color: 'white' }}> Sample FlatList Header </Text>
</View>
);
}
<FlatList
data={BirdsName}
renderItem={({ item }) => <ItemRender name={item.name} />}
keyExtractor={item => item.id}
ItemSeparatorComponent={ItemDivider}
**ListHeaderComponent={FlatList_Header}**
ListHeaderComponentStyle={{ borderBottomColor: 'red', borderBottomWidth: 2 }}
/>
Note the use of the ListHeaderComponent in the code above, that should supress the warning.
Use flatList like this ListHeaderComponent and ListFooterComponent:
<FlatList ListHeaderComponent={
<ScrollView
style={styles.yourstyle}
showsVerticalScrollIndicator={false}
>
<View style={styles.yourstyle}>
</View>
</ScrollView>
}
data={this.state.images}
renderItem={({ item, index }) => {
return (
<View
style={styles.yourstyle}
>
<Image
source={{
uri: item,
}}
style={styles.yourstyle}
resizeMode={"contain"}
/>
<Text
numberOfLines={2}
ellipsizeMode="tail"
style={styles.yourstyle}
>
{item.name}
</Text>
</View>
);
}}
keyExtractor={({ name }, index) => index.toString()}
ListFooterComponent={
<View style={styles.yourstyle}></View>
}
/>
In my case it was happening due to nesting of ScrollView.
Try replacing some of the ScrollView from children components with React.Fragment.
The solution is very simple, please do not put the Flatlist component in the ScrollView.
They both have the same functionality but Flatlist has advantages and is more stable to use.
I would like to render a React Native Flatlist where the first two elements span the entire width of the screen while all consecutive elements span half the screen. Like this:
Is there a way to do this with one Flatlist? If not, what is the best way to do something like this? Preferably without a Scrollview.
You can't have multiple column numbers in one FlatList but you could achieve what you want by extracting out the first two elements from your data structure and rendering them as a header using the ListHeaderComponent property on FlatList. Then you can render the rest of your array as a regular FlatList.
You need to first redesign your data structure. Then you can do it with View and defined width?
const data = [
{
fields: 'SingleColumn',
},
{
fields: ['First Column','Second Column']
}
]
const renderItem = ({ item }) => {
return <View>
{ somecondition ? <View>
<View style={{ width: '50% }}>
...content...
</View>
<View style={{ width: '50%' }}>
...second column
</View> : <View style={{ width: '100%'}}>
..single column content
</View>
</View>
}
}
I'm working on an "instagram-like" news feed for an existing react native (0.63.4) application. At this stage I'm using the react-native-gesture-handler (1.10) to handle the pinch/zoom functionality using its PinchGestureHandler and FlatList implementations.
I have an outer vertical flatlist for scrolling the new items and, for each item, an inner horizontal flat list to scroll the images left and right.
If I scale the image inline then it works fine, though it's a little slow due to having to re-layout all the other items.
What I'd like to do is "float" the image above everything else and then snap back after zooming. I can do all of that, except floating the image. I've tried setting overflow:'visible' on the entire tree, but it doesn't help zIndex and elevation also don't seem to help.
Visually I'd like to (kind of) pop the image out while zooming, then it can snap back at the end. How do I do this?
--Implementation details:
The feed is just an array of NewsItem:
interface NewsItem {
id: string,
title: string,
images: NewsImage[],
datePublished: Date
}
interface NewsImage {
id: string,
uri: string,
width: number,
height: number,
ref: RefObject<PinchGestureHandler>
}
imageRefs is a flattened list of references for all the images.
The main layout is like this (slightly simplified):
<View>
<FlatList
waitFor={imageRefs}
data={newsFeed}
keyExtractor={item => item.id}
renderItem={({item}) => <NewsItem item={item} /> } />
</View>
NewsItem
<View>
<Text>{props.item.title}</Text>
<FlatList
horizontal={true}
waitFor={props.item.images.map(img => img.ref)}
data={props.item.images}
keyExtractor={img => img.id}
renderItem={({item})} => <NewsImage info={item} />
/>
</View>
NewsImage has all the code to handle the pinch/zoom transform stored in the variables:
scale
scaledWidth
scaledHeight
xScaledTranslate
yScaledTranslate
With the layout:
<View style={{
width: info.width * minScale,
height: info.height * minScale,
position: 'relative',
}}>
<Animated.View style={{
position:'absolute',
overflow:'visible',
width:scaledWidth,
height:scaledHeight,
}}>
<PinchGestureHandler
onGestureEvent={pinchGestureEventHandler}
onHandlerStateChange={pinchStateEventHandler}
ref={ref}
>
<Animated.Image
defaultSource={require('../Shared/assets/logos/bootsplash_logo.png')}
source={info}
style={{
width: info.width,
height: info.height,
overflow:"visible",
transform: [
{translateX: xScaledTranslate},
{translateY: YScaledTranslate},
{scale: scale},
]
}}
resizeMode='cover'
/>
</PinchGestureHandler>
</Animated.View>
</View>
I dunno did you solved this issue, but simply you can't do that with FlatList.
I had the similar issue and solved it to converting my FlatList to a ScrollView
You can use this: https://github.com/postillonmedia/react-native-instagram-zoomable
It's a JS implementation so you can also modify the code as needed. It zooms the view/image/component above everything on the screen. It creates a clone of the element and uses PanGestures to zoom
I am fetching products list and then displaying using a FlatList, my list contains 5 items and as you can see FlatList row height is variable because of varying description text. So the issue is my last item card is not completely visible maybe this is some kind of flat list issue or layout issue. Any help would be highly appreciated
renderProducts() {
if (this.props.loading === true) {
return (
<View style={Styles.spinnerStyle}>
<ActivityIndicator size='large' />
</View>
);
}
return (
<FlatList
data={this.props.myProducts}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<Card
title={item.title}
image={{
uri: item.image !== null ? item.image.src :'../resImage.jpg'
}}
>
<Text style={{ marginBottom: 10 }}>
{item.body_html}
</Text>
<Button
icon={{ name: 'code' }}
backgroundColor='#03A9F4'
fontFamily='Lato'
buttonStyle={{ borderRadius: 0, marginLeft: 0, marginRight: 0, marginBottom: 0 }}
title='VIEW NOW'
/>
</Card>
)}
/>
);
}
render() {
return (
<View>
<View style={Styles.viewStyle}>
<Text style {Styles.textStyle}>ProductsList</Text>
</View>
{
this.renderProducts()
}
</View>
);
}
Set bottom padding to the <FlatList> content container:
<FlatList
contentContainerStyle={{ paddingBottom: 20 }}
/>
Add {flex: 1} to the View tag housing the Flatlist component.
In my case,
const App = () => {
return (
<Provider store={createStore(reducers)}>
<View style={{ flex: 1 }}>
<Header headerText={'My App'} />
<ScreenTabs /> // this is my content with FlatList
</View>
</Provider>
);
};
export default App;
Just wrap it in a view with flex:1
<ParentView style={{flex:1}
<View style={{flex:1}}>
// Your flatlist
<View>
</ParentView>
Also, note that the each parent of this "View" in which Flatlist is wrapped must also be a View with Flex of 1. Otherwise, that your flatlist wont be visible.
use contentContainerStyle props of FlatList
<FlatList contentContainerStyle={{ paddingBottom: 20}} />
Latest update:
react-navigation has a SafeAreaView with an option to not show that bottom area.
import { SafeAreaView } from 'react-navigation';
<SafeAreaView forceInset={{ bottom: 'never' }} />
Old response below:
You can't see your list with flex: 1 because flex: 1 will grow the component to the parent. If the parent doesn't have flex: 1, it won't stretch to its parent or the screen. Keep in mind, however, that flex: 1 with a SafeAreaView will cause the bottom safe area to show. This will look bad if your SafeAreaView backgroundColor is a different color from your list's back ground.
My old workaround was to add an item to the bottom of the array of items, but I'm still exploring how to scroll past/under the bottom safe area margin with a FlatList (which is how I found this post to begin with).
Update: Using ListFooterComponent you can create even a plain white "footer" with height and/or a margin
For example (I wouldn't directly copy and paste this if I were you... there's surely a better way to detect bezel-less iPhones, especially in 2019 when we have more than one)
ListFooterComponent={<View style={{ height: 0, marginBottom: 90 }}></View>}
This is how I would do it, using the iPhoneX's height for now. But it's not future-proof since the conditional will need to be updated every time a new iPhone with no bezels comes out:
ListFooterComponent={<View style={{ height: 0, marginBottom: noBezels ? 90 : 0 }}></View>}
Or you could just always have some spacing at the bottom, like a loading gif, a message... whatever.
UPDATE 2:
I found out about react-native-device-info which has a hasNotch() method. I find that useful for styling for iPhones with no bezels by combining hasNotch() with Platform.OS === 'ios'
You can try this solution
For Vertical FlatList:
<FlatList
ListFooterComponent={<View />}
ListFooterComponentStyle={{height:200}}
/>
For Horizontal FlatList:
<FlatList
contentContainerStyle={{paddingRight:40}}
/>
For IOS issues you can apply some IOS specific props:
<FlatList
// ...
contentInset={{top: 0, bottom: 20, left: 0, right: 0}}
contentInsetAdjustmentBehavior="automatic"
// ...
/>
The solution with contentContainerStyle padding didn't seem the best overall for fixing the safe area IOS issues in my case.
Work very well for me
<FlatList
data={data}
contentContainerStyle={{ paddingBottom: 30 }}
style={{height: '95%'}}
renderItem={({ item, index }) => (
<ListItem item={item} onPress={() => handlePress(item, index)} />
)}
/>
Make use of the contentContainerStyle prop in the flatlist
<FlatList contentContainerStyle={{paddingBottom: 10}} />
For dynamic flatlist, you can assign height to the parent view. I resolved it with same.
<View style={{height:'80%'}}>
<Flatlist
extraData={data}
data={data}
renderItem={renderItem}
/>
</View>
I had the same issue and found the solution. To fix the issue just add style={{flex: 1}} for each View element who is a parent for FlatList.
See updated code below.
render() {
return (
<View style={{flex: 1}}> // Here you should add style as {flex: 1}
<View style={Styles.viewStyle}>
<Text style={Styles.textStyle}>ProductsList</Text>
</View>
{ this.renderProducts() }
</View>
);
}
This worked for me.
<View style={{flex: 1}}>
<FlatList
style={{flex: 1}}
data={data}
renderItem={({item}) => (
<ListItem item={item} onPress={() => handlePress(item)} />
)}
/>
</View>
#krish solution is great for the fixed-size list items, however as
#Neeraj Sewani said, it may not be suitable for dynamic size list items.
so you can fix the issue like this -in case direction is column -:
<View style={{height: '90%'}}>
<FlatList/>
</View>
Otherwise, -in case direction is row -:
<View style={{height: '90%', width:'90%'}}>
<FlatList/>
</View>
I was seeing this same problem in our Android + iOS React Native hybrid app. We embed the FlatList component within our native UIs inside a Fragment in Android and we were unable to scroll to the last item in the list, even though the scroll indicator would show that there was more to scroll, the ScrollView would simply not scroll further. I tried all the combinations of using a wrapping <View style={{flex:1}}> to wrap the FlatList as well as using contentContainerStyle={{flexGrow:1}} on the FlatList without success. Pursuing the clue further it turned out that the FlatList needs an absolute, predefined height on Android to allow scroll to the bottom - it works just fine on iOS but on Android using match_parent wasn't going to work. Since we need to support all types of devices, phone and tablet too, it wasn't possible to pre-define an absolute height either.
To fix this, I made a custom FrameLayout subclass to house the ReactRootView's fragment, which overrides onLayout() to ignore the child view measurements, forcing the views to have the exact dimensions of the FrameLayout, somewhat like so in Kotlin:
class StretchFrameLayout #JvmOverloads constructor(
context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : FrameLayout(context, attrs, defStyleAttr) {
override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
for (child in children){
if (child.visibility == View.GONE) continue
child.updateLayoutParams {
this.width = measuredWidth
this.height = measuredHeight
}
if (needsRelayout){
handler.postDelayed({child.requestLayout()},1)
}
}
super.onLayout(changed, left, top, right, bottom)
}
}
This work very well in my case:
<FlatList
data={todos}
contentContainerStyle={{ height: '100%' }}
renderItem={({ item }) => <Todos items={item} pressed={pressed} />}
/>
I've solved it doing contentInset={{ bottom: data.length * itemStyle.height, }} with itemStyle.height being 50 worked fine.
While using a horizontal FlatList with other vertical FlatList as items there seems to be an issue with the refreshing. This happens when refreshing is enabled on the vertical lists but not on the horizontal container list. It is actually possible to refresh each individual list if you are very carful and only scrolls vertically (this is very hard). But at once you scrolls sideways the refreshing gets stuck.
React Native nested FlatLists
Issue in Android. Works in iOS
Attempts
I have tried replacing the wrapping FlatList with a ScollView with the same result. I am fully aware of that it is possible to disable refreshing of the individual list and enable it on the containing FlatList but that is not very appropriate in my case.
I have also tried the upvoted answers on this similar question but it didn't solve it.
Example:
<FlatList
horizontal={true}
pagingEnabled={true}
data={[{key: 'a'}, {key: 'b'}]}
renderItem={({item}) =>
<FlatList
style={{width: 400}}
ref="scrollView"
horizontal={false}
refreshing={false}
onRefresh={() => {}}
data={[{key: 'c'}, {key: 'd'}]}
renderItem={({item}) => <Text>{item.key}</Text>}
/>
}
/>
Does anyone have a solution to this?
ScrollView/ Flatlist import from react-native-gesture-handler can be stuck refresh when released outside of the screen. Use ScrollView import from react-native
i created a component based on what i understood from ur question,
make second flat list width as u want and put the height as '100%' so it will com full screen, so that it behaves like paging 2 flat lists... Hope it works for u
Here is the code
Snack URL
import React, {Component} from 'react';
import {
View,
Text,
Image,
TouchableOpacity,
FlatList,
Dimensions,
} from 'react-native';
const { width } = Dimensions.get('window');
export default class App extends Component {
render() {
return (
<View style={{ flex: 1 }}>
<FlatList
horizontal
pagingEnabled
data={[{ key: 'a' }, { key: 'b' }]}
renderItem={({ item }) => (
<FlatList
style={{ width, height: '100%' }}
// ref="scrollView"
horizontal={false}
refreshing={false}
onRefresh={() => {}}
data={[{ key: 'c' }, { key: 'd' }, { key: 'f' }, { key: 'h' }]}
renderItem={({ item }) => (
<Text style={{ paddingVertical: 40 }}>{item.key}</Text>
)}
/>
)}
/>
</View>
);
}
}