When I run following code on my phone
render() {
return [
<View style={{ flex: 1, flexDirection: 'row' }}>
<Search />
</View>,
<View style={{ flex: 1, flexDirection: 'row' }}>
<FlatList
style={styles.list}
data={this.state.products}
renderItem={({ item }) => <ProductCard product={item} />}
keyExtractor={item => item.id}
/>
</View>,
];
}
I am getting screen split between Search and Productcard component. It feels like each one of them takes by default 50% of screen, but I want them to come one after each other.
Search component is just a dummy text:
export default function Search() {
return <Text>Hej</Text>;
}
But when I remove around them it looks good.
are you looking for something like this?
render() {
return(
<View style={{flex: 1, flexDirection: 'column'}}>
<View style={{flexDirection: 'row' }}>
<Search />
</View>,
<View style={{ flex: 1, flexDirection: 'row' }}>
<FlatList
style={styles.list}
data={this.state.products}
renderItem={({ item }) => <ProductCard product={item} />}
keyExtractor={item => item.id}
/>
</View>
</View>
);
}
I suppose you want to make them scroll, if so you have to wrap them around a <ScrollView>.
like so,
render() {
return (
<ScrollView>
<View style={{ flex: 1, flexDirection: 'row' }}>
<Search />
</View>,
<View style={{ flex: 1, flexDirection: 'row' }}>
<FlatList
style={styles.list}
data={this.state.products}
renderItem={({ item }) => <ProductCard product={item} />}
keyExtractor={item => item.id}
/>
</View>
</ScrollView>
);
}
And in second case if you want only the second half to be scrollable just wrap that view inside a <ScrollView> tag.
Thx for helping, it got me in right direction but I got it working by code below:
<View>
<Search />,
<FlatList
style={styles.list}
data={this.state.products}
renderItem={({ item }) => <ProductCard product={item} />}
keyExtractor={item => item.id}
/>
,
</View>
Related
Using the below code I can return FlatGrid according to my item list.
return (
<FlatGrid
itemDimension={130}
data={items}
style={styles.gridView}
// staticDimension={300}
// fixed
spacing={10}
renderItem={({ item }) => (
<ImageBackground source={ item.source} style={[styles.itemContainer, ]}>
<Text style={styles.itemName}>{item.name}</Text>
</ImageBackground>
)}
/>
);
But I want to add some text before the FlatGrid. So I update my code like below.
return (
<View>
<Text style={{color:'#000000'}}>This is the text</Text>
<FlatGrid
itemDimension={130}
data={items}
style={styles.gridView}
spacing={10}
renderItem={({ item }) => (
<ImageBackground source={ item.source} style={[styles.itemContainer, ]}>
<Text style={styles.itemName}>{item.name}</Text>
</ImageBackground>
)}
/>
</View>
);
But as the above code output, I can see only the text. ("This is the text").
I am new to react-native. Can anyone say how I fix this issue?
Try for SectionGrid
It will give you the title & list as well is same component
<SectionGrid
itemDimension={130}
sections={[
{
title: 'Numbers',
data: [1,2,3,4,5,6],
},
{
title: 'Alphabets',
data: ['A', 'B', 'C', 'D', 'E'],
},
]}
renderItem={({ item }) => (<Text>{item}</Text>)}
renderSectionHeader={({ section }) => (
<Text style={{ fontSize: 20 }}>{section.title}</Text>
)}
/>
This worked for me. Used different screen parts for each component.
return (
<View style={{flexDirection: "column",flex: 1, }}>
<View style={{ flex: 1,backgroundColor:'red' }}>
<Text style={{textAlign:'center',fontSize:20}}>This istext</Text>
</View>
<View style={{ flex: 10,backgroundColor:'blue'}}>
<FlatGrid
itemDimension={130}
data={items}
style={styles.gridView}
spacing={10}
renderItem={({ item }) => (
<ImageBackground source={ item.source} style={[styles.itemContainer, ]}>
<Text style={styles.itemName}>{item.name}</Text>
</ImageBackground>
)}/>
</View>
</View>
);
When I load my component onEndReached will be triggered one time before I scroll my <SectionList />, but when I scroll to bottom onEndReached won't be triggered any more.
Here is my code:
render (
return (
<View style={{ flex: 1 }}>
<SectionList
style={{ backgroundColor: 'pink' }}
refreshControl={
<RefreshControl
refreshing={false}
onRefresh={() => console.log('refreshControl')}
tintColor='gray'
/>
}
renderSectionHeader={this.sectionHeader}
renderItem={this.renderSectionView}
sections={reservations}
onEndReachedThreshold={0.05}
onEndReached={(data) => {
console.log('data', data); // { distanceFromEnd: -457 }
console.log('onEndReached');
}}
keyExtractor={(item, index) => index}
ItemSeparatorComponent={() => <View style={{ backgroundColor: 'gray', height: StyleSheet.hairlineWidth }} />}
/>
</View>
);
);
Here is my <SectionList /> screen:
In my <SectionList /> refreshControl is fine but onEndReached is not working, any one knows what happened ? Thanks.
Looks like a lot of people are experiencing the same. There is a suggestion to change the onEndReachedThreshold to value bigger that 0.05, for example: 0.5
Try something like
render (
return (
<SafeAreaView style={{ flex: 1 }}>
<SectionList
style={{ backgroundColor: 'pink' }}
refreshControl={
<RefreshControl
refreshing={false}
onRefresh={() => console.log('refreshControl')}
tintColor='gray'
/>
}
renderSectionHeader={this.sectionHeader}
renderItem={this.renderSectionView}
sections={reservations}
onEndReachedThreshold={0.05}
onEndReached={(data) => {
console.log('data', data); // { distanceFromEnd: -457 }
console.log('onEndReached');
}}
keyExtractor={(item, index) => index}
ItemSeparatorComponent={() => <View style={{ backgroundColor: 'gray', height: StyleSheet.hairlineWidth }} />}
/>
</SafeAreaView>
);
);
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>
I have some FlatList in my render but I'm getting Unique Key warning, I tried to use keyExtractor as well but it didn't work for me.
here is my code :
<FlatList
data={this.state.itemWaiting}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item, index }) => (
<MatchTurnList
username={item.home_user.username}
opponent={item.away_user.username}
matches={item.round_results}
turnID={item.turn_id}
matchID={item.match_id}
userID={item.home_uid}
Rounds={item.round}
gameStatus={item.status}
onPress={() => console.log('hi')}
/>
)}
/>
and this is my warning :
Warning: Each child in a list should have a unique "key" prop.
Check the render method of MatchTurnList. See ..... for more information.
and here is my matchTurnList component :
return (
<TouchableOpacity onPress={onPress} activeOpacity={0.9} style={styles.gameStatus}>
<View style={{ flex: 2, justifyContent: 'center', alignItems: 'flex-start' }}>
<Text style={[globalStyles.mediumFont, globalStyles.lightColor, globalStyles.acmeFont, { margin: normalize(1) }]}>{username}</Text>
<View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
{a}
</View>
</View>
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={[globalStyles.fontRifficFree, globalStyles.largFont, { color: '#ffbd00' }]}>VS</Text>
</View>
<View style={{ flex: 2, justifyContent: 'center', alignItems: 'flex-end' }}>
<Text style={[globalStyles.mediumFont, globalStyles.lightColor, globalStyles.acmeFont, { margin: normalize(1) }]}>{opponent}</Text>
<View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
{b}
</View>
</View>
</TouchableOpacity>
);
could you please help me to find where my mistake is?
Thanks.
You should use flatlist like this
render(){
return(
<FlatList
data={this.props.data} //<- your data array
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
/>
)
}
then use keyExtractor function in your component like this
_keyExtractor = (item, index) => String(item.yourID) //<- this id from your data.
and final _renderItem function like this
_renderItem = (item) => {
<View>
...your code to render UI...
</View>
}
Try my code.
you need to add key props in render method
<FlatList
data={this.state.itemWaiting}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item, index }) => (
<MatchTurnList
key={index}
username={item.home_user.username}
opponent={item.away_user.username}
matches={item.round_results}
turnID={item.turn_id}
matchID={item.match_id}
userID={item.home_uid}
Rounds={item.round}
gameStatus={item.status}
onPress={() => console.log('hi')}
/>
)}
/>
it will remove your warnings for uniques key.
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.