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.
Related
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.
Styling help needed and am so bad at "Flex".
That icon shows up if a message is long. click it and message expands. need it to be displayed next to time stamp as shown below.
code:
<View style={row}>
<View style={textContainer}>
<Text style={title}>Hospital Authority </Text>
{ arrowClicked === true ?
<Textstyle={subtitle}>{alert}</Text>
:
<Textstyle={subtitle}>{alert}</Text>
}
<Text style={time}>{timestampToStr(createDate)}</Text>
</View>
{ alert.charAt(100) !== "" ?
arrowClicked === true ?
<Icon type='materialicons' name='arrow-drop-up' size={35} onPress={()=>{this.setFullLength()}} />
:
<Icon type='materialicons' name='arrow-drop-down' size={35} onPress={()=>{this.setFullLength()}} />
: null
}
</View>
</View>
css:
const styles = StyleSheet.create({
row: {
flexDirection: 'row',
alignItems: 'flex-start',
marginLeft: 15,
marginRight: 15,
paddingTop: 5,
paddingBottom: 10
},
textContainer: {
flex: 3,
paddingLeft: 15
},
title: {
flex: 1,
color: '#000000',
fontWeight: 'bold'
},
subTitle: {
flex: 1,
color: '#000000'
},
time: {
flex: 1,
color: '#808080'
}
})
Please need help with this styling!!!!!
Struggling with this from hours !
Update:
Used common view for both and it worked. But I have some extra space that I need to remove. How can I do that???
First off, I noticed you have 3 closed <View/> tags and only 2 open <View> tags. Maybe it was an issue with the copy/paste you did.
I would start first by thinking about the structure of what we want to display.
Since you want to align a text and an icon together, it would make sense for them to share the same container.
<View style={row}>
<View style={textContainer}>
<Text style={title}>Hospital Authority </Text>
{ arrowClicked === true ?
<Textstyle={subtitle}>{alert}</Text>
:
<Textstyle={subtitle}>{alert}</Text>
}
<View style={timestampAndArrowContainer}>
<Text style={time}>{timestampToStr(createDate)}</Text>
{
alert.charAt(100) !== "" ?
arrowClicked === true ?
<Icon type='materialicons' name='arrow-drop-up' size={35} onPress={()=>{this.setFullLength()}} />
:
<Icon type='materialicons' name='arrow-drop-down' size={35} onPress={()=>{this.setFullLength()}} />
: null
}
</View>
</View>
</View>
And for your styles, you could try something like this
const styles = StyleSheet.create({
[...] // rest of your styles
timestampAndArrowContainer: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
}
})
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 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?
I'm looking to set the position of the date on the right of my row.
Here is the code:
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 64,
},
row: {
flexDirection: 'row',
alignItems: 'center',
margin: 5,
backgroundColor: 'green',
},
horizontalAlign: {
flexDirection: 'row',
alignItems: 'center',
backgroundColor: 'red',
},
rowTitle: {
fontFamily: 'Helvetica',
fontSize: 17,
marginLeft: 10,
flex: 1,
textAlign:'center'
},
rowDate: {
textAlign: 'right',
},
rowText: {
fontFamily: 'Helvetica',
fontSize: 17,
marginLeft: 10,
},
rowImage: {
width: 35,
height: 35,
borderRadius: 17.5,
},
});
renderRow(rowData, sectionID, rowID, _highlightRow) {
return (
<TouchableHighlight onPress={ () => { this.rowPressed(rowData.recordID || null); }}>
<View style={styles.row}>
<Image source={ require('myImage.png') } style={styles.rowImage} />
<View>
<View style={styles.horizontalAlign}>
<Text style={styles.rowTitle}>{rowData.title}</Text>
<Text style={styles.rowDate}>{rowData.date}</Text>
</View>
<Text style={styles.rowText}>{rowData.text}</Text>
</View>
</View>
</TouchableHighlight>
);
}
render() {
return (
<View style={styles.container}>
<ListView
dataSource={this.state.dataSource}
renderRow={::this.renderRow}
/>
</View>
);
}
A screenshot:
Any suggestion?
You need to add a flex:1 property to the view containing the rowData.title and rowData.date. I've set up an example with your data here.
<View style={{flex:1}}>
<View style={styles.horizontalAlign}>
<Text style={styles.rowTitle}>{rowData.title}</Text>
<Text style={styles.rowDate}>{rowData.date}</Text>
</View>
<Text style={styles.rowText}>{rowData.text}</Text>
</View>
https://rnplay.org/apps/mWO0LQ
I'm not familiar with React, but in standard CSS, apply margin-left: auto to the date item.
You could also apply justify-content: space-between to the flex container which would align both flex items on opposite edges.
(These solutions assume that the line on which the flex items exist is free to extend the full width of the container.)