I have a 10x10 matrix and I want to render it in a flat list. How can I enable vertical and horizontal scrolling on this so that user can select the item of their choice out of 10X10 matrix. I just want my flat list to be scrolled in both the ways.
Please pass this in flatlist numColumns={10} according to number of columns you want to show , it will display items horizontally in a flatlist
in a grid format
(You don't need separate scrollview)
For this, you can nest your FlatList inside a ScrollView as follow
<ScrollView>
<View>
<FlatList />
</View>
</ScrollView>
To achieve the both direction Scroll behaviour, you can do that by nesting a second ScrollView like this
<ScrollView
horizontal
bounces={false}
>
<ScrollView
nestedScrollEnabled
bounces={false}
contentContainerStyle={{ height: //the height of your inner content }}
>
<View>
<FlatList />
</View>
</ScrollView>
</ScrollView>
I haven't tested this yet, so please make sure to ask me anything.
<FlatList
data={data}
numColumns={4}
renderItem={({ item, index }) => (
<View
style={{
padding: 20,
}}
>
<Image
source={{
uri: item.uri,
}}
style={{ width: 64, height: 50 }}
/>
<Txt.$Title
style={{ fontSize: 10, paddingTop: 5, textAlign: "center" }}
>
{tr(item.name)}
</Txt.$Title>
</View>
)}
ItemSeparatorComponent={Kitten.Divider_________}
ListEmptyComponent={
<Txt.Indicator marginV>{tr("No trophy found")}</Txt.Indicator>
}
/>
Related
I am trying to make item tiles and want to have even gap between two items like this..
Android
As we can see, this is not happening in IOS
IOS
My Code:
<ScrollView
horizontal
scrollEnabled={false}
style={{ paddingHorizontal: constVal.containerPaddingHorizontal, overflow: 'hidden' }}>
<FlatList
data={data}
numColumns={2}
nestedScrollEnabled={true}
scrollEnabled={false}
columnWrapperStyle={{ width: '100%', justifyContent: 'space-between' }}
renderItem={({ item, separators, index }) => (
<Pressable
key={item.id}
onPress={() => {
navigation.navigate('ProductDetail', { id: item.id })
}}
>
<ProductCard
item={item}
/>
</Pressable>
)}
/>
</ScrollView>
I have set the width of the columnWrapper same as ScrollView and added space between the 2 columns.
Android Inspector
IOS Inspector
I am trying to style two elements that need to appear on the same line in my react native app. What I have thus far positions them on the same line - using nested <Text> elements - but I'm unclear how to then be able to create some distance between them. For instance, in the example below, I want the icon to be left-aligned, which it is now, but I want the this.props.client.name text to be center-aligned. From my understanding margin is ignored in children elements. How can I accomplish this?
<View>
<Text>
<Feather name="chevron-left" size={24}
onPress={() => props.navigation.goBack()}
/>
<Text>{this.props.client.name}</Text>
</Text>
</ View>
You can try styling them using "flex" css properties.
for example if you have:
<View>
<Text>
<Feather name="chevron-left" size={24}
onPress={() => props.navigation.goBack()}
/>
<Text>{this.props.client.name}</Text>
</Text>
</ View>
TRY
<View>
<Text>
<View style={{ display: "flex", alignItems: "center",
position: "relative", zIndex: 1 }}>
<Feather name="chevron-left" size={24}
onPress={() => props.navigation.goBack()}
style={{position: "absolute", zIndex: 2, left: 0 }}
/>
<Text>{this.props.client.name}</Text>
</View>
</Text>
</ View>
You should now have your Icon on the left and your text centered.
Read more about Flexbox here. reactnative.dev/docs/flexbox
https://snack.expo.dev/jHWhJbUKr
I have two horizontal lists one created with ScrollView and another with Flatlist.
I want to show only a fixed number of items in the viewable portion and list and the rest scrollable.
The ScrollView version worked as expected.
<ScrollView
horizontal={true}
contentContainerStyle={{
width: `${percent_per_item * total_items}%`,
}}>
{data.map((v, i) => (
<View
style={{
width: `${100 / total_items}%`
}}>
</View>
))}
</ScrollView>
But the Flat list version isn't rendering properly
<FlatList
data={data}
horizontal={true}
contentContainerStyle={{
width: `${percent_per_item * total_items}%`,
}}
renderItem={({ item, i }) => (
<View
style={{
width: `${100 / total_items}%`
}}>
</View>
)}
/>
Does flatlist strictly expect items widths in pixel sizes rather than in percentage?
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
}}/>
Good day,
I'm building a React Native app with expo and I have a list of photos that I need to render but further down the screen.
My problem is that I need a scrollview to render the content before, but I can't have a list inside a scrollview so I tried to put my flatlist just after the closing tag scrollview but now the flatlist renders mid-page and the above content is scrollable from mid page up.
What i'm trying to do is have a continued view from the top of the screen to the end of my flatlist.
I've tried setting the flex of my scrollview at 1 so it would take up all the screen but it doesn't.
Thank you for your help!!!
EDIT
renderFeed = (data) =>
<View style={{ marginTop: 25, marginLeft: 5 }}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('EditContact', { id: data.item.id })}>
<Image style={{ width: 300, height: 300, marginRight: 5 }}
source={{ uri: data.item.profile }}>
</Image>
</TouchableOpacity>
<Text style={{ color: '#fff', fontSize: 20, marginBottom: 10, marginTop: 10, marginLeft: 5, alignSelf: 'center' }}>{data.item.name}</Text>
</View>
render() {
return (
<View style={styles.container}>
<View>
// top of the page outside of scrollview
</View>
<ScrollView>
<View>
// some text and a horizontal flatlist that renders as
// expected
</View>
</ScrollView>
<FlatList
data={this.state.infoSource}
renderItem={item => this.renderFeed(item)}
keyExtractor={item => item.id.toString()}
numColumns={2}
/>
</View>
);
}
}