Horizontal Flatlist: Space between items - css

I'm trying to get space around my items in a horizontal flatlist, no matter how I try it doesn't seem to work:
const renderItem = ({item}) => {
return (
<View style={styles.item}>
<Image
source={{uri: content.uri}}
style={styles.image}
/>
<View>
<Text style={styles.contentTitle}>{content.title}</Text>
<Text style={styles.contentText}>{content.releaseDate}</Text>
</View>
</View>
)
}
<View style={styles.container}>
{header}
<View style={{width: '100%', justifyContent: 'space-around', backgroundColor: 'green'}}>
<FlatList
data={data}
pagingEnabled={true}
horizontal={true}
renderItem={renderItem}
keyExtractor={item => item.id}
ref={flatList}
/>
</View>
</View>
const styles = StyleSheet.create({
container: {
width: windowWidth,
marginTop: 15,
paddingBottom: 15,
borderBottomWidth: 1,
borderBottomColor: Colors.borderBlue,
backgroundColor: Colors.backgroundGenericTransparent,
},
item: {
width: windowWidth / 3.1,
backgroundColor: 'red',
},
image: {
width: '100%',
height: 220,
},
})
result:
As you can see the items are all together on the left even though I have added a space-around property on the container. Not show how I can resolve this.

use ItemSeparatorComponent
<FlatList
data={data}
pagingEnabled={true}
horizontal={true}
renderItem={renderItem}
keyExtractor={item => item.id}
ref={flatList}
ItemSeparatorComponent={() => {
return (
<View
style={{
height: "100%",
width: 10,
}} />
);
}}
/>

Use this prop on flatlist:
columnWrapperStyle={{ justifyContent: "space-between" }}

Not sure what you are trying to achieve.
Is that what you want?
snack here
Just add horizontal padding to your container. and no matter how big your items get you will always have spacing left and right. If the item gets too big you can start to scroll.

<View style={styles.messageGalleryContainer}>
<FlatList
data={files}
renderItem={renderImageGalleryItem}
keyExtractor={(item) => item?._id}
horizontal
showsHorizontalScrollIndicator={false}
ItemSeparatorComponent={() => <View style={{ width: 10 }} />} // add this line
contentContainerStyle={styles.messageGalleryItemContainer}
/>
</View>
You should use ItemSeparatorComponent with an empty component or with any element you want.

Related

React Native - FlatList not scrolling

I am implementing FlatList's horizontal mode but it isn't responding. I have tried the following approaches which didn't work:
flex: 1 (everything disappeared)
flexGrow: 1
Wrap in View
adding margin/padding
Here is the code for the FlatList:
return (
<View >
{
this.state.dataSource.length < 1 ? (
<Text>did not get person</Text>
) : (
<View><FlatList
showsHorizontalScrollIndicator={false}
horizontal
data={this.state.dataSource}
renderItem={this.renderItem}
keyExtractor={item => item.id}
/>
</View>)
renderd item
(
<View style={styles.container}>
<TouchableWithoutFeedback >
<ImageBackground source={{ uri: item.download_url }} style={styles.story}>
<Image source={{ uri: `https://loremflickr.com/320/240/${randomItem}` }} style={{ width: 40, height: 40, borderRadius: 50 }}></Image>
<Text style={{ color: '#fff' }}>{item.author}</Text>
</ImageBackground>
</TouchableWithoutFeedback>
</View>
)
and my stylesheet
story: {
width: 130,
height: 200,
borderRadius: 10,
overflow: 'hidden',
margin: 3,
justifyContent: 'space-between',
padding: 3,
},
container: {
marginVertical: 20,
borderBottomWidth: 5,
borderTopWidth: 5,
borderTopColor: '#CACBD3',
borderBottomColor: '#CACBD3',
paddingVertical: 10
}
if you give "flex:1" to your container view, it will be working as you want.
<View style={styles.flex1} >
<FlatList
showsHorizontalScrollIndicator={false}
horizontal
data={this.state.dataSource}
renderItem={this.renderItem}
keyExtractor={item => item.id}
/>
</View>
const styles = StyleSheet.create({
flex1: {
flex: 1,
},
....
})
This might help
return (
<View style={{ flex: 1 }}>
{this.state.dataSource.length < 1 ? (
<Text>did not get person</Text>
) : (
<FlatList
showsHorizontalScrollIndicator={false}
horizontal
data={this.state.dataSource}
renderItem={this.renderItem}
keyExtractor={(item, index) => index.toString()}
/>
)}
</View>
);
Providing flex:1 to flat list will make your screen blank. try to wrap flat list with <View style={{flex:1}}/> will do the job. The mentioned view will provide room for flat list to fit into the screen.

How to remove margin from between images on React Native?

I am new to React Native and trying to build a simple app that displays four images on the screen with Touchable function however there is margin between pictures and setting margin:0 and padding:0 are not helping at all.
What might be a solution?
render() {
return (
<View>
<SafeAreaView>
{listItems.map(
(item) => (
console.log(item.pic),
(
<View>
<TouchableOpacity onPress={this.onClickPic}>
<ImageBackground
style={styleImage.container}
source={item.pic}
>
<Text>{item.title}</Text>
</ImageBackground>
</TouchableOpacity>
</View>
)
)
)}
</SafeAreaView>
</View>
);
}
}
const styleImage = StyleSheet.create({
container: {
height: "30%",
width: "30%",
padding:0,
margin:0,
},
});
1:
Try this...
Replace ImageBackground with Image
and add one property to it resizeMode='cover', it will pull the image to ends of image area
{listItems.map(
(item) => (
console.log(item.pic),
(
<View>
<TouchableOpacity onPress={this.onClickPic}>
<View>
<Image
resizeMode="cover" // or 'stretch'
style={{ height: 200, width: 200 }}
source={item.pic}
/>
<View style={{ position: "absolute", zIndex: 9 }}>
<Text>{item.title}</Text>
</View>
</View>
</TouchableOpacity>
</View>
)
)
)}
</SafeAreaView>
</View>
);
Style as your requirement

React Native: Background Image not filling the entire app

I am trying to get the background image to take up the entire space on the screen
As you can see from the image this does not seem to be working. I think it may be something to do with the scroll view but unfortunately I cannot figure it out.
Ideally want to use flex box for the solution.
const App: () => React$Node = () => {
return (
<>
<StatusBar barStyle="dark-content" />
<SafeAreaView>
<ScrollView
contentInsetAdjustmentBehavior="automatic"
style={styles.scrollView}>
<View style={styles.container}>
<ImageBackground
source={require('./src/assets/foodflixIMG.jpg')}
style={styles.image}>
<Text style={styles.text}>Inside</Text>
</ImageBackground>
</View>
</ScrollView>
</SafeAreaView>
</>
);
};
const styles = StyleSheet.create({
scrollView: {
backgroundColor: 'red',
height: '100%',
},
container: {
flex: 1,
flexDirection: 'column',
},
image: {
flex: 1,
resizeMode: 'cover',
justifyContent: 'center',
},
text: {
color: 'grey',
fontSize: 30,
fontWeight: 'bold',
}
});
export default App;
Check your code something like this:
<ImageBackground
source={require('./assets/main.jpg')}
style={{height:"100%",
width:"100%", flex:1}}
>
<SafeAreaView>
<ScrollView>
<View style={styles.container}>
<Text>Hello</Text>
</View>
</ScrollView>
</SafeAreaView>
</ImageBackground>
Hope this helps!

I want my text to flow to my next line but flex is not letting me do it?

I want my app to add text underneath the goal section but flex is not letting me do that even if I create new components in native P.S Still a beginner
import React, { useState } from "react";
import { StyleSheet, View, TextInput, Button, Text } from "react-native";
export default function App() {
return (
<View style={styles.Container}>
<View style={styles.GoalInp}>
<TextInput
placeholder="Course Goal"
style={{ overflow: "scroll" }}
onChangeText={goalInputHandler}
value={enteredGoal}
/>
</View>
<View>
<Button title="ADD" onPress={addGoalHandler} />
</View>
<View>
{couseGoals.map(goal => (
<Text>{goal}</Text>
))}
</View>
</View>
);
}
const styles = StyleSheet.create({
Container: {
padding: 50,
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center"
},
GoalInp: {
borderWidth: 1,
width: "80%",
padding: 10,
borderColor: "black"
}
});
You need to bring the listing outside the Container View, as the flex-direction of Container is row, all items will be in a row including form.
My modified code is given below
<View style={styles.wrapper}>
<View style={styles.Container}>
<View style={styles.GoalInp}>
<TextInput
placeholder="Course Goal"
style={{ overflow: "scroll" }}
/>
</View>
<View>
<Button title="ADD" onPress={this.addGoalHandler} />
</View>
</View>
<View>
{this.state.couseGoals.map(goal => (
<Text>{goal}</Text>
))}
</View>
</View>
const styles = StyleSheet.create({
wrapper:{
flex:1,
},
Container: {
padding: 50,
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center"
},
GoalInp: {
borderWidth: 1,
width: "80%",
padding: 10,
borderColor: "black"
},
});
I think that you use to much Vieuw elements.
You should for example use a Text for where your text need to print out.
But I think I have it.
You wrapped everything into a View with a style of;
flexDirection: "row",
Not that good if you don't want to have the whole View on one line....
Issue solved?

Align image vertically and horizontally using flexbox

Using React-Native I need to centre my Image and component LYDSceneQuestion:
const SplashScreen = () => {
return (
<View style={styles.container}>
<LYDSceneQuestion text="Welcome to" />
<Image source={theme.images.logo} style={styles.logo} />
<NextButton onPress={onNext} />
</View>
);
};
export default SplashScreen;
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center'
},
logo: {
flex: 1,
width: 300,
height: 100,
resizeMode: 'contain'
}
});
Currently my image aligns to the bottom, how I can I centre it vertically?
I will suggest a small technique using flex,give your parent view flex one and then arrange the components in separate child views inside it and give them equal flex just like i have done below.
<View style={styles.container,{flex: 1}}>
<View style={{flex: 2}}>
<LYDSceneQuestion text="Welcome to" />
</View>
<View style={{flex: 2}}>
<Image source={theme.images.logo} style={styles.logo}/>
</View>
<View style={{flex: 2}}>
<NextButton onPress={onNext} />
</View>
</View>
I think if you follow this you can centre it vertically.

Resources