My Horizontal FlatList doesn't scroll in Modals. You can find my FlatList and RenderItem codes below:
<FlatList
data={this.props.selectedGroupData.groupMembersList}
renderItem={this.ilgiliKisiler}
keyExtractor={item => item.uid}
nestedScrollEnabled={true}
horizontal={true}
removeClippedSubviews={true}
/>
</View>
and renderItem function:
ilgiliKisiler = ({ item }) => {
console.log("on Related Users item => ", item);
return (
<TouchableOpacity style={{flex: 1}}>
<View style={{ flexDirection: "row" }}>
<View style={styles.relatedUsersContainer}>
<View style={{ alignItems: "center" }}>
<Image
source={
item.avatar
? { uri: item.avatar }
: require("../../assets/images/defaultAvatar.png")
}
style={styles.relatedUsersImage}
/>
</View>
<View style={{ flexDirection: "column" }}>
<Text style={styles.relatedUsersText} numberOfLines={2}>
{item.name}
</Text>
</View>
</View>
</View>
</TouchableOpacity>
);
};
Before this post, i found some solutions like style={{flex: 1}}. When i try to this solutions, my renderItem doesn't appear.
Use propagateSwipe props for smooth scrolling in <Modal>
<Modal propagateSwipe>...</Modal>
for more detail react-native-modal issue #236
Sorry for posting this as an answer, but I can't comment because of my low reputation. I'll remove this answer if it doesn't work for you.
Have you tried using contentContainerStyle on your FlatList like so:
contentContainerStyle={{ flexGrow: 1 }}
You can read more about contentContainerStyle at this link: https://facebook.github.io/react-native/docs/scrollview#contentcontainerstyle
Wrap the Flatlist inside a scrollview. It should work.
<Scrollview>
<Flatlist />
</Scrollview>
Related
import ScrollableTabView from 'react-native-scrollable-tab-view';
<ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
<ScrollableTabView
style={{ flexGrow: 1, marginTop: mt ? mt : 0 }}
tabBarActiveTextColor="#53ac49"
renderTabBar={(i) =>
<View style={{ flexDirection: 'row' }}>
{i.tabs.map((item, index) => {
return <View style={{ flexDirection: 'row' }}>
<TabTextStyle
text={item.label}
index={index}
numberofTabs={tabs.length}
onPress={(item_index) => i.goToPage(item_index)}
selectedTab={i.activeTab == index ? true : false} />
</View>
})}
</View>
}>
{tabs.map(item => {
return item
})}
</ScrollableTabView>
I am using this and it is working fine in IOS but it is not showing data in android. I am able to find it why it happening so anybody can provide me detail for this. Not working in scrollview. But I need scrollview so what is the solution. Please let me know.
Any ideas to render favourites button the one with a heart shape on Flatlists in React Native? This I have here works fine, I get the data from a REST api correctly without worries, but the primary challenge is , having to have the favourites button to it.
Flat List code looks like this
render() {
return (
<View style={styles.MainContainer}>
<FlatList
data={ this.state.dataSource }
ItemSeparatorComponent = {this.FlatListItemSeparator}
renderItem={({item}) =>
<View style={{flex:1, flexDirection: 'row'}}>
<Image source = {{ uri: item.url_image}} style={styles.imageView} />
<Text onPress={this.GetItem.bind(this, item.movie_description)} style={styles.textView} >{item.movie_description}</Text>
</View>
}
keyExtractor={(item, index) => index.toString()}
/>
</View>
);
}
}
Help would be very much appreciated!
At the main View in renderItem
<View style={{flex:1, flexDirection: 'row'}}>
<Image source = {{ uri: item.url_image}} style={styles.imageView} />
<Text onPress={this.GetItem.bind(this, item.movie_description)} style={styles.textView} >{item.movie_description}</Text>
</View>
you can simply add png image or any favourite icon, but you have to give it position: 'absolute' if you want favourite icon to be float on the card, you can add image into main View in the renderItem like this
<Image
source={your png or jpg file's path}
style={{
height: 25,
width: 25,
position: 'absolute',
top: 15,
right: 15
}}/>
My FlatList triggers onendreached not as expected. onEndReached gets called again and again. I have read some suggestion to wrap flatlist in a view with flex:1 but I still doesn't work properly. Also removing the scrollView didn't work-
This didn't help https://github.com/GeekyAnts/NativeBase/issues/1736#issuecomment-401815949
<View style={baseStyles.body}>
<View style={{flexDirection:"row", backgroundColor:theme.button.tertiary}}>
<View style={{flex:1}}>
<SearchBar
onChangeText={(query) => this.setState({query})}
placeholder='Hier suchen...'
showLoading
/>
</View>
</View>
<View style={{flex:1}}>
<ScrollView style={{flex: 1, flexDirection:'column'}}>
<View style={{flex:1}}>
<FlatList
data={articlesData}
renderItem={renderFunction}
onEndReached={this._onEndReached}
onEndThreshold={0}
refreshing={this.state.isLoading}
onRefresh={this.onRefresh}
keyExtractor={item => item.slug}
/>
</View>
<View style={{marginBottom:10}}>
<Text style={{color:this.state.theme.text.primary,textAlign:"center",fontSize:16}}>Gefunden: {rowCount}</Text>
</View>
</ScrollView>
</View>
</View>
If it is loading or error you can try to use onEndReached={this.state.isLoading ? () => {} : this._onEndReached}; just let onEndReached do nothing when the state is loading. I've tried serveral way (debounce, await setState, using flag) but only this way work as expected.
<View style={baseStyles.body}>
<View style={{flexDirection:"row", backgroundColor:theme.button.tertiary}}>
<View style={{flex:1}}>
<SearchBar
onChangeText={(query) => this.setState({query})}
placeholder='Hier suchen...'
showLoading
/>
</View>
</View>
<View style={{flex:1}}>
<ScrollView style={{flex: 1, flexDirection:'column'}}>
<View style={{flex:1}}>
<FlatList
data={articlesData}
renderItem={renderFunction}
onEndReached={this.state.isLoading ? () => {} : this._onEndReached}
onEndThreshold={0}
refreshing={this.state.isLoading}
onRefresh={this.onRefresh}
keyExtractor={item => item.slug}
/>
</View>
<View style={{marginBottom:10}}>
<Text style={{color:this.state.theme.text.primary,textAlign:"center",fontSize:16}}>Gefunden: {rowCount}</Text>
</View>
</ScrollView>
</View>
</View>
I'm trying to render item using FlatList in React Native project. So my problem is when I render 2 items I can see the result but when there is only on item in my data array they is no result on my screen any idea why this is happening?
const data = this.getListPrise()
<View>
<View style={styles.allPAge} >
<View style={styles.centerText}>
<Text style={styles.text}>Voici vos differentes capture </Text>
</View>
<View style={{flex: 1}}>
<FlatList
data={data}
renderItem={({ item }) =>
<TouchableOpacity style={styles.container} onPress={() => this.modifCapture(item)}>
<Image style={styles.mark} source={avatar}></Image>
<View style={styles.displayUnder} >
<Text style={styles.textCapture}><Text style={styles.textCaptureTitle}>Espèce </Text>: {item.espece}</Text>
<Text style={styles.textCapture}><Text style={styles.textCaptureTitle}>Date </Text>:
{moment(item.date).format(" D MMMM YYYY, h:mm:ss")}</Text>
<Text style={styles.textCapture}><Text style={styles.textCaptureTitle}>Poids </Text> : {item.poids} kg</Text>
</View>
</TouchableOpacity>
}
style={{ flex: 1, flexDirection: 'column', padding: 1 }}
/>
</View>
<ActionButton buttonColor="rgba(231,76,60,1)" onPress={() => this.Addfish()}></ActionButton>
<View>
</View>
</View>
</View>
I got a page RN flatlist with textbox/button/others component, but the problem is I am not able to scroll till the end of flatlist, there is some other part was kind of overflow.
<View>
<TextInput
value={this.state.code}
onSubmitEditing={this.getPr}
style={styles.input}
placeholder="placeholder"
/>
<Button onPress={this.getPr} title="Cari" color="blue" />
<FlatList
data={this.props.produk}
renderItem={({ item }) => (
<View key={item.id}>
<Image
resizeMode="cover"
source={{ uri: item.thumb }}
style={styles.fotoProduk}
/>
</View>
)}
keyExtractor={(item, index) => index}
/>
</View>;
Wrap Flatlist with style={{flex:1}}. If it does not work add marginBottom to flatlist
<View style={{flex:1}}>
<FlatList
data={this.props.produk}
renderItem={({ item }) =>
<View key={item.id} >
<Image resizeMode="cover" source={{ uri: item.thumb }} style={styles.fotoProduk} />
</View>
}
keyExtractor={(item, index) => index}/>
</View>
I had the same issue. I was trying to add padding to the top which caused the rest of the content to be pushed down. You need to set the contentContainerStyle prop to modify this correctly and then set all the remaining styles on the style prop of the FlatList. Example:
<FlatList
style={{
flex: 1
}}
contentContainerStyle={{
paddingTop: 40
}}
data={this.props.produk}
renderItem={({ item }) => (
<View key={item.id}>
<Image
resizeMode="cover"
source={{ uri: item.thumb }}
style={styles.fotoProduk}
/>
</View>
)}
keyExtractor={(item, index) => index}
/>
Adding style={{flex:1}} in View.
In FlatList add contentContainerStyle={{ paddingBottom: 10}}. Check the example code:
<View style={{flex:1}}>
<FlatList
contentContainerStyle={{ paddingBottom: 10}}
renderItem={({ item }) =>
return(console.log(item))
}
/>
</View>
In my case, I had to add flex:1 to the outer view to fix the issue.
You can set width: '100%', height: '100%' in style of FlatList/ ScrollView to try.