I tried to use getItemLayout but didn't success. And I can't find any other related parameters in the react native documentation.
Use renderItemto customize your item rows
renderItem={({item}) => <View style={{ height: 80 }}> // ... </View>}
for example.
Related
This is my code:
<RecyclerListView
layoutProvider={this._layoutProvider}
dataProvider={this.state.dataProvider}
rowRenderer={this._rowRenderer}
></RecyclerListView>
And I get the error:
LayoutException: RecyclerListView needs to have a bounded size.
Currently height or, width is 0.Consider adding style={{flex:1}} or,
fixed dimensions
According to a few issues from Github it solves easy (wrap it and set minHeight/minWidth = 1 in a wrapper).
<View style={{ minHeight: 1, minWidth: 1 }}>
<RecyclerListView ... />
</View>
PS: For my case (vertical list) I added 'minHeight: 1' only.
Wrap your recyclerlistview in a view
You can give height to the view or you can give height to the style under recyclerlistview. Example:
<View style={{
marginTop:5,
marginBottom:5,
backgroundColor:"#f3f3f3",
height:"100%"}> //Here
<RecyclerListView
dataProvider={this.state.dataProvider}
layoutProvider={this.layoutProvider}
rowRenderer={this.rowRenderer}
style={{height:"100%",}} //or Here, If you add here then the last row of your rendered data list will not have any issue and may fulfill your all issues
onEndReached={this.fetchMore}
onEndReachedThreshold={0.5}
renderFooter={()=>{
<Text style={{padding:10, fontWeight:"bold", textAlign:"center"}}>
Loading... </Text>
}}
Is it possible to implement ReactNative layout containing two components, where 2nd component overlaps 1st one and has the same width, possibly also same height (without hardcoding width/height of course)? It is easy to implement something like that in native Android, but I can't find example for ReactNative. I'd be surprised if it is not possible though.
You could try below
<View style={{ flex: 1 }} >
<View style={{ flex: 1 }}>
// 1st component
<View>
<View style={StyleSheet.absolueFill}>
// 2st component
<View>
<View>
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
Hello i'm new on react native. I am using react native elements slider in my project but want to select range with two marker. It is working with one marker.
Here is my code :
<View style={{backgroundColor: "#fff"}}>
<Slider
style={{ width: '90%',marginLeft:20,marginRight:20 }}
minimumValue={0}
maximumValue={100}
step={1}
value={this.state.cost}
onValueChange={cost => console.log(cost)}
/>
<Text style={{marginLeft:20,marginRight:20}}>{this.state.cost}</Text>
</View>
React Native Elements slider doesn't support multiple marker. However you can use this library if you need multiple markers
I am using react-native FlatList component to list of items
Pagination is not happening as expected , as per documentation onEndReached has to get fired when end of page is reached, currently I tried changing the values for onEndReachedThreshold ( tried 0.1, 1.0, 0.5, 0.01 ), am setting refreshing flag as well.
Note: I am using ReactNative 0.48.4
So here my code
<Container style={{ marginTop: 22 }}>
<Content
style={{ flex: 1 }}
contentContainerStyle={{ flexGrow: 1 }}
>
<View style={{ flex: 1 }}>
<FlatList
initialNumToRender={10}
refreshing={this.state.refreshing}
onEndReachedThreshold={0.5}
onEndReached={({ distanceFromEnd }) => {
console.log('on end reached ', distanceFromEnd);
}}
data={this.props.messages}
renderItem={this.notificationContent.bind(this)}
keyExtractor={(item) => item._id}
/>
</View>
</Content>
</Container>
I have already tried all possible solutions as give in responses for github issues
Any Help here ?
You use NativeBase in your project and the Flatlist is on Content they are conflict. To solve this problem you need to remove Content
Same thing happens with me you need to add contentContainerStyle={flex:1}
<Content contentContainerStyle={{ flex: 1 }}>
Pass extraData prop to FlatList as extraData = {this.state} check the docs for more info.
onEndReachedThreshold={0.5} remove this line